feat: 充值页新增 CCpay 银行QR 第三通道

- recharge2.vue: 新增 Ngân hàng QR tab + 内嵌银行转账弹窗 + 轮询到账

src/components/recharge/recharge2.vue

@@ -12,6 +12,9 @@
         <div class="pay-tab" :class="{active: payChannel=='epay'}" @click="payChannel='epay'">
           USDT (TRC20)
         </div>
+        <div class="pay-tab" :class="{active: payChannel=='ccpay'}" @click="payChannel='ccpay'">
+          {{Language.recharge_bank2 || 'Ngân hàng QR'}}
+        </div>
       </div>
       <div class="alin-form" v-if="payChannel=='alin'">
         <div class="alin-item">
@@ -34,6 +37,15 @@
           {{submitting ? '...' : (Language.withdraw_page_confirm || '确认充值')}}
         </button>
       </div>
+      <div class="alin-form" v-if="payChannel=='ccpay'">
+        <div class="alin-item">
+          <label>{{Language.withdraw_page_withdrawal_amount || '充值金额'}} (VND)：</label>
+          <input class="input" type="number" v-model="ccpayAmount" placeholder="Nhập số tiền VND (vd: 1,000,000)">
+        </div>
+        <button class="btn alin-submit" @click="submitCcpay" :disabled="submitting">
+          {{submitting ? '...' : (Language.withdraw_page_confirm || '确认充值')}}
+        </button>
+      </div>
     </div>
     <!-- 其他渠道 iframe -->
     <iframe v-else class="page" :src="webconfig.PayUrl+'?uid='+userInfo.uid+'&api_token='+userInfo.api_token"></iframe>
@@ -77,6 +89,42 @@
         </div>
       </div>
     </div>
+    <!-- CCpay 银行转账内嵌弹窗 -->
+    <div class="qr-mask" v-if="bank.visible" @click.self="closeBank">
+      <div class="qr-box">
+        <div class="qr-close" @click="closeBank">×</div>
+        <div class="qr-title">{{Language.recharge_bank2 || 'Ngân hàng QR'}} {{Language.recharge_online2 || 'Thanh toán'}}</div>
+        <div class="qr-status" :class="bank.statusClass">{{bank.statusText}}</div>
+
+        <div class="qr-code-wrap" ref="bankQrcodeEl"></div>
+
+        <div class="qr-field">
+          <div class="qr-field-label">Số tài khoản</div>
+          <div class="qr-field-value amount">
+            <span>{{bank.data.bank_account}}</span>
+            <button class="qr-copy" @click="copyText(bank.data.bank_account, 'bank_acc')">
+              {{qr.copied==='bank_acc' ? '✓' : 'Copy'}}
+            </button>
+          </div>
+        </div>
+
+        <div class="qr-field">
+          <div class="qr-field-label">Tên tài khoản — Ngân hàng</div>
+          <div class="qr-field-value addr">
+            <span>{{bank.data.bank_name}} — {{bank.data.bank_short}}</span>
+          </div>
+        </div>
+
+        <div class="qr-meta">
+          <span>{{Number(bank.data.amount).toLocaleString()}} VND</span>
+          <span class="qr-countdown">⏱ {{bank.countdownText}}</span>
+        </div>
+
+        <div class="qr-tip">
+          {{Language.pay_bank_warning || '⚠ Vui lòng chuyển khoản chính xác số tiền và nội dung. Sai thông tin sẽ không thể xác nhận đơn hàng!'}}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -91,6 +139,7 @@ export default {
         payChannel: 'alin',
         alinAmount: '',
         epayAmount: '',
+        ccpayAmount: '',
         submitting: false,
         ApiUrl: JSON.parse(localStorage.getItem('ApiUrl')),
         qr: {
@@ -104,6 +153,16 @@ export default {
         _qrInstance: null,
         _pollTimer: null,
         _countdownTimer: null,
+        bank: {
+          visible: false,
+          data: { bank_account: '', bank_name: '', bank_short: '', qr_data: '', amount: 0, order_sn: '', expires_at: 0, timeout_sec: 600 },
+          countdownText: '',
+          statusText: '',
+          statusClass: 'waiting',
+        },
+        _bankQrInstance: null,
+        _bankPollTimer: null,
+        _bankCountdownTimer: null,
       }
     },
 
@@ -111,6 +170,7 @@ export default {
  },
  beforeDestroy(){
    this.stopQrTimers();
+   this.stopBankTimers();
  },
  methods:{
     offPop(){
@@ -287,6 +347,123 @@ export default {
       if(this._pollTimer){ clearInterval(this._pollTimer); this._pollTimer = null; }
       if(this._countdownTimer){ clearInterval(this._countdownTimer); this._countdownTimer = null; }
     },
+    submitCcpay(){
+      if(!this.ccpayAmount || this.ccpayAmount <= 0){
+        this.$message({type:'warning', message:'Vui lòng nhập số tiền!'});
+        return;
+      }
+      if(this.ccpayAmount < 1000000){
+        this.$message({type:'warning', message:'Số tiền tối thiểu là 1,000,000'});
+        return;
+      }
+      if(this.submitting) return;
+      this.submitting = true;
+      var encryptstring = encrypt(JSON.stringify({
+        user_id: this.userInfo.uid,
+        price: this.ccpayAmount,
+        client: 1,
+        username: this.userInfo.nickname,
+        api_token: this.userInfo.api_token,
+      })).toString();
+      this.$axios.post(this.ApiUrl+'/ccpay_online_order', {encryptData:encryptstring}).then(
+        response=>{
+          this.submitting = false;
+          if(response.data.Success==1){
+            const data = JSON.parse(decrypt(response.data.Data));
+            if(data.status == 1 && data.qrcode){
+              this.openBank(data.qrcode);
+            } else if(data.status == 1 && data.url){
+              window.open(data.url, '_blank');
+            } else {
+              this.$message({type:'error', message: data.message || 'Nạp thất bại'});
+            }
+          } else {
+            this.$message({type:'error', message: response.data.Msg || 'Nạp thất bại'});
+          }
+      }).catch(error=>{
+        this.submitting = false;
+        console.log(error);
+        this.$message({type:'error', message:'Yêu cầu thất bại'});
+      });
+    },
+    openBank(qrcode){
+      this.bank.data = qrcode;
+      this.bank.visible = true;
+      this.bank.statusText = this.Language.pay_waiting || 'Đang chờ thanh toán...';
+      this.bank.statusClass = 'waiting';
+      this.$nextTick(() => {
+        if(qrcode.qr_data){
+          this.renderBankQr(qrcode.qr_data);
+        }
+      });
+      this.startBankCountdown();
+      this.startBankPolling();
+    },
+    renderBankQr(text){
+      const el = this.$refs.bankQrcodeEl;
+      if(!el) return;
+      el.innerHTML = '';
+      this._bankQrInstance = new QRCode(el, {
+        text: text,
+        width: 180,
+        height: 180,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.M,
+      });
+    },
+    startBankCountdown(){
+      const tick = () => {
+        const left = Math.max(0, this.bank.data.expires_at - Math.floor(Date.now()/1000));
+        const m = Math.floor(left/60);
+        const s = left % 60;
+        this.bank.countdownText = (m<10?'0':'')+m+':'+(s<10?'0':'')+s;
+        if(left <= 0){
+          this.bank.statusText = this.Language.pay_expired || 'Đơn hàng đã hết hạn';
+          this.bank.statusClass = 'expired';
+          this.stopBankTimers();
+        }
+      };
+      tick();
+      this._bankCountdownTimer = setInterval(tick, 1000);
+    },
+    startBankPolling(){
+      const poll = () => {
+        if(!this.bank.visible || !this.bank.data.order_sn) return;
+        const encryptstring = encrypt(JSON.stringify({
+          user_id: this.userInfo.uid,
+          order_sn: this.bank.data.order_sn,
+          api_token: this.userInfo.api_token,
+        })).toString();
+        this.$axios.post(this.ApiUrl+'/ccpay_order_status', {encryptData:encryptstring}).then(res=>{
+          if(res.data.Success!=1) return;
+          const d = JSON.parse(decrypt(res.data.Data));
+          if(d.status == 1){
+            this.bank.statusText = this.Language.pay_success || 'Thanh toán thành công!';
+            this.bank.statusClass = 'success';
+            this.stopBankTimers();
+            this.updateMoney && this.updateMoney();
+            setTimeout(() => this.closeBank(), 2500);
+          } else if(d.status == 2){
+            this.bank.statusText = this.Language.pay_expired || 'Đơn hàng đã hết hạn';
+            this.bank.statusClass = 'expired';
+            this.stopBankTimers();
+          }
+        }).catch(()=>{});
+      };
+      this._bankPollTimer = setInterval(poll, 3000);
+      setTimeout(poll, 1000);
+    },
+    closeBank(){
+      this.bank.visible = false;
+      this.stopBankTimers();
+      if(this.$refs.bankQrcodeEl) this.$refs.bankQrcodeEl.innerHTML = '';
+      this._bankQrInstance = null;
+    },
+    stopBankTimers(){
+      if(this._bankPollTimer){ clearInterval(this._bankPollTimer); this._bankPollTimer = null; }
+      if(this._bankCountdownTimer){ clearInterval(this._bankCountdownTimer); this._bankCountdownTimer = null; }
+    },
  },
  computed: {
   ...mapState(['userInfo','webconfig','Language'])