jcloud/dashboard/src2/pages/RechargeCredits.vue

<template>
  <div class="mx-auto max-w-3xl px-4 py-8">
    <div class="bg-white rounded-xl shadow-sm p-6">
      <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-800">账户充值</h1>
        <p class="text-gray-600 mt-2">为您的账户充值余额，用于支付您的服务费用。</p>
      </div>
      
      <!-- 充值方式选择 (药丸式设计) -->
      <div class="mb-6">
        <div class="flex w-full rounded-full bg-gray-100 p-1 text-sm text-gray-800">
          <div
            class="w-1/2 cursor-pointer rounded-full py-2 text-center transition-all"
            :class="{ 'bg-white shadow-sm font-medium text-blue-600': paymentMethod === 'online' }"
            @click="paymentMethod = 'online'"
          >
            在线充值
          </div>
          <div
            class="w-1/2 cursor-pointer rounded-full py-2 text-center transition-all"
            :class="{ 'bg-white shadow-sm font-medium text-blue-600': paymentMethod === 'transfer' }"
            @click="paymentMethod = 'transfer'"
          >
            对公汇款
          </div>
        </div>
      </div>
      
      <!-- 在线充值表单 -->
      <div v-if="paymentMethod === 'online'">
        <BuyPrepaidCreditsForm 
          :minimumAmount="minimumAmount"
          @success="onRechargeSuccess"
          @cancel="onRechargeCancel"
        />
      </div>
      
      <!-- 对公汇款信息 - 简化版，移除了表单部分 -->
      <div v-else class="space-y-6">
        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
          <div class="mb-4">
            <h3 class="font-medium text-gray-900">汇款账户信息</h3>
          </div>
          
          <div class="space-y-3 text-sm">
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">公司名称</span>
              <span class="font-medium text-gray-900">广州市向日葵网络信息科技有限公司</span>
            </div>
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">开户银行</span>
              <span class="font-medium text-gray-900">中国农业银行股份有限公司广州花都金狮支行</span>
            </div>
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">银行账号</span>
              <span class="font-medium text-gray-900 font-mono">4408 6601 0400 20960</span>
            </div>
          </div>
        </div>
        
        <!-- 重要提示 -->
        <div class="rounded-lg bg-yellow-50 border border-yellow-200 p-4">
          <div class="flex">
            <i-lucide-alert-circle class="h-5 w-5 text-yellow-600 mr-2 flex-shrink-0" />
            <div>
              <h4 class="font-medium text-yellow-800">重要提示</h4>
              <ul class="mt-2 text-sm text-yellow-700 space-y-1 list-disc pl-4">
                <li>汇款时请备注用户所属团队ID：
                  <strong 
                    class="font-mono bg-yellow-100 px-1 rounded cursor-pointer inline-flex items-center gap-1 hover:bg-yellow-200 transition-colors"
                    @click="copyTransferNote"
                    title="点击复制"
                  >
                    {{ $team.pg.name }}
                    <i-lucide-copy class="h-3.5 w-3.5 text-yellow-600" />
                  </strong>
                  <span v-if="showCopiedMessage" class="text-xs text-green-600 ml-1 transition-opacity">已复制!</span>
                </li>
                <li>汇款成功后请联系客服进行确认，财务人员会在1个工作日内处理</li>
                <li>如有疑问，请联系客服。</li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 添加一个说明，解释资金处理流程 -->
        <div class="rounded-lg border border-gray-200 p-4 bg-blue-50">
          <div class="flex">
            <i-lucide-info class="h-5 w-5 text-blue-600 mr-2 flex-shrink-0" />
            <div>
              <h4 class="font-medium text-blue-800">充值流程</h4>
              <p class="mt-2 text-sm text-blue-700">
                完成对公汇款后，我们的财务人员会在确认收款后，将资金添加到您的账户余额中。
                通常这个过程需要1个工作日。如需加急处理，请联系客服。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from 'jingrow-ui';
import BuyPrepaidCreditsForm from '../components/BuyPrepaidCreditsForm.vue';

export default {
  name: 'RechargeCredits',
  components: {
    BuyPrepaidCreditsForm,
    Button
  },
  data() {
    return {
      paymentMethod: 'online', // 默认在线充值
      minimumAmount: 0,
      showCopiedMessage: false
    };
  },
  created() {
    // 从URL参数中获取最小充值金额（如果有）
    if (this.$route.query.amount) {
      this.minimumAmount = parseFloat(this.$route.query.amount) || 0;
    }
  },
  methods: {
    onRechargeSuccess() {
      this.$toast.success('充值成功');
      
      // 如果是从其他页面跳转过来的，可以返回上一页
      if (this.$route.query.redirect) {
        this.$router.push(this.$route.query.redirect);
      } else {
        // 否则跳转到账单页面
        this.$router.push('/billing');
      }
    },
    onRechargeCancel() {
      // 取消充值，返回上一页
      this.$router.back();
    },
    copyTransferNote() {
      const textToCopy = `${this.$team.pg.name}`;
      
      // 使用创建临时元素的方法作为备选
      try {
        // 尝试使用现代API
        if (navigator.clipboard) {
          navigator.clipboard.writeText(textToCopy)
            .then(() => {
              this.showCopiedSuccessMessage();
            })
            .catch(() => {
              this.fallbackCopyTextToClipboard(textToCopy);
            });
        } else {
          this.fallbackCopyTextToClipboard(textToCopy);
        }
      } catch (error) {
        this.fallbackCopyTextToClipboard(textToCopy);
      }
    },
    
    fallbackCopyTextToClipboard(text) {
      // 创建临时文本区域元素
      const textArea = document.createElement('textarea');
      textArea.value = text;
      
      // 设置样式以隐藏元素
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      
      // 选择文本并复制
      textArea.focus();
      textArea.select();
      
      let successful = false;
      try {
        successful = document.execCommand('copy');
      } catch (err) {
        console.error('复制失败:', err);
      }
      
      // 移除临时元素
      document.body.removeChild(textArea);
      
      if (successful) {
        this.showCopiedSuccessMessage();
      } else {
        this.$toast.error('复制失败，请手动复制');
      }
    },
    
    showCopiedSuccessMessage() {
      this.showCopiedMessage = true;
      setTimeout(() => {
        this.showCopiedMessage = false;
      }, 2000);
    }
  }
};
</script>