From 37fc144ed96ee0336e74aec48a24163d4c3e78ca Mon Sep 17 00:00:00 2001
From: Eric <1670996608@qq.com>
Date: Thu, 7 Aug 2025 13:32:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=96=B0=E5=A2=9E=E9=80=9A=E9=81=93?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   8 +
 pages/capital/deposit/One2Pay/index.scss      | 126 +++
 pages/capital/deposit/One2Pay/index.vue       | 422 ++++++++
 pages/capital/deposit/One2Pay/qrCodeInfo.vue  | 221 +++++
 pages/capital/deposit/index.vue               |  10 +-
 pages/capital/deposit/onlinePayment/index.vue | 917 +++++++++++-------
 6 files changed, 1371 insertions(+), 333 deletions(-)
 create mode 100644 pages/capital/deposit/One2Pay/index.scss
 create mode 100644 pages/capital/deposit/One2Pay/index.vue
 create mode 100644 pages/capital/deposit/One2Pay/qrCodeInfo.vue

diff --git a/pages.json b/pages.json
index 5ed610f..e114c44 100644
--- a/pages.json
+++ b/pages.json
@@ -279,6 +279,14 @@
 				}
 			}
 		},
+		{
+			"path": "pages/capital/deposit/One2Pay/index",
+			"style": {
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/capital/deposit/remittanceInfo/index",
 			"style": {
diff --git a/pages/capital/deposit/One2Pay/index.scss b/pages/capital/deposit/One2Pay/index.scss
new file mode 100644
index 0000000..55454ba
--- /dev/null
+++ b/pages/capital/deposit/One2Pay/index.scss
@@ -0,0 +1,126 @@
+.container {
+  padding: 0 24px 24px 16px;
+  .title {
+    margin: 14px 0 15px;
+  }
+  .minAmount {
+    margin-top: 4px;
+    color: #14cc9e;
+    font-size: 10px;
+    line-height: 14px;
+    &.unavailable {
+      color: #ff5733;
+    }
+  }
+  .exchangeRate {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: #777777;
+    .value {
+      font-weight: 700;
+    }
+  }
+  .currency_amount {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    .label {
+      font-size: 14px;
+      color: #777777;
+    }
+    .value {
+      font-size: 14px;
+      color: #29bbe4;
+      font-weight: 700;
+    }
+  }
+  // 二维码信息
+  .qrCodeInfoWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 29px;
+    padding-bottom: 22px;
+    box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
+    .currencyAmountLabel {
+      color: #333333;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 17px;
+    }
+    .currencyAmount {
+      color: #29bbe4;
+      font-size: 36px;
+      font-weight: 700;
+      line-height: 53px;
+    }
+    .qrCodeImgWrapper {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 33px;
+      margin-bottom: 19px;
+      width: 101px;
+      height: 101px;
+      background-image: linear-gradient(to right, #103776 0%, #92dbed 100%);
+      .qrCodeImg {
+        position: relative;
+        width: 94px;
+        height: 94px;
+      }
+      .qrCodeImgBg {
+        position: absolute;
+        left: 4px;
+        top: 4px;
+        width: 93px;
+        height: 93px;
+        background-color: #fff;
+      }
+    }
+    .paymentIcons {
+      display: flex;
+      column-gap: 24px;
+      .paymentIcon {
+        width: 23px;
+        height: 23px;
+      }
+    }
+  }
+  .saveImageBtn {
+    margin-top: 54px;
+  }
+  .countdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    margin-top: 28px;
+    margin-bottom: 28px;
+    font-size: 12px;
+    color: #aaaaaa;
+  }
+  .imgUploadWrapper {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    margin-top: 20px;
+    ::v-deep .uni-file-picker {
+      height: 100px;
+    }
+    ::v-deep .uni-file-picker__container {
+      height: 100px;
+    }
+    ::v-deep .file-picker__box {
+      padding-top: 0px;
+      width: 100% !important;
+      max-width: 152px;
+      height: 100% !important;
+    }
+    ::v-deep .uni-forms-item {
+      flex: 1;
+    }
+  }
+}
diff --git a/pages/capital/deposit/One2Pay/index.vue b/pages/capital/deposit/One2Pay/index.vue
new file mode 100644
index 0000000..460d062
--- /dev/null
+++ b/pages/capital/deposit/One2Pay/index.vue
@@ -0,0 +1,422 @@
+<template>
+  <view>
+    <NavBar />
+    <view class="container">
+      <view class="title">
+        <PageTitle :title="$t('deposit.depositType.scan')" backTarget="/pages/capital/deposit/index" />
+      </view>
+      <view v-if="currentStep === 0">
+        <uni-forms ref="depositForm" :modelValue="depositFormData" :rules="depositFormRules">
+          <uni-forms-item name="mt4_server">
+            <text class="uni-subtitle">{{ $t('form.mtServer.label') }}</text>
+            <uni-data-select
+                :placeholder="$t('form.pleaseSelect')"
+                :emptyTips="$t('common.empty')"
+                :localdata="mtServerOptions"
+                v-model="depositFormData.mt4_server"
+                @change="mtServerChange"
+                :clear="false"
+            ></uni-data-select>
+          </uni-forms-item>
+          <uni-forms-item name="mt4_login">
+            <text class="uni-subtitle">{{ $t('form.mtAccount.label') }}</text>
+            <uni-data-select
+                :placeholder="$t('form.pleaseSelect')"
+                :emptyTips="$t('common.empty')"
+                :localdata="mtLoginOptions"
+                v-model="depositFormData.mt4_login"
+                @change="mtLoginChange"
+            ></uni-data-select>
+          </uni-forms-item>
+          <uni-forms-item name="usd_amount">
+            <text class="uni-subtitle">{{ $t('form.amount.label') }}</text>
+            <uni-easyinput type="number" primaryColor="#29BBE4" v-model="depositFormData.usd_amount" @input="handleAmountInput"></uni-easyinput>
+            <view v-if="goldRange" :class="['minAmount', amountAvailable ? '' : 'unavailable']">{{ $t('deposit.minAmount') }} ${{ goldRange?.in_min }}</view>
+          </uni-forms-item>
+          <uni-forms-item name="currency_type">
+            <text class="uni-subtitle">{{ $t('form.currencyType.label') }}</text>
+            <uni-data-select
+                :placeholder="$t('form.pleaseSelect')"
+                :emptyTips="$t('common.empty')"
+                :localdata="currencyOptions"
+                v-model="depositFormData.currency_type"
+                @change="currencyChange"
+            ></uni-data-select>
+          </uni-forms-item>
+          <view class="exchangeRate">
+            <view class="label">{{ $t('common.exchangeRate') }}</view>
+            <view class="value">{{ exchangeRate ?? '-' }}</view>
+          </view>
+          <view class="currency_amount">
+            <view class="label">{{ $t('deposit.remittanceAmount') }}</view>
+            <view class="value">{{ currency_amount ?? '-' }}</view>
+          </view>
+          <view class="exchangeRate" v-show="actId">
+            <view class="label">{{ $t('deposit.presentedCredit') }}</view>
+            <view class="value">{{ presentedCredit ? `$${presentedCredit}` : '-' }}</view>
+          </view>
+          <view class="exchangeRate" v-show="actId">
+            <view class="label">{{ $t('deposit.presentedAmountResidue') }}</view>
+            <view class="value">{{ presentedAmountResidue ? `$${presentedAmountResidue}` : '-' }}</view>
+          </view>
+          <view class="exchangeRate" v-show="pay_subsidy">
+            <view class="label">{{ $t('deposit.paySubsidy') }}</view>
+            <view class="value">{{ paySubsidy ? `$${paySubsidy}` : '-' }}</view>
+          </view>
+        </uni-forms>
+        <button class="primaryButton" type="button" :disabled="!exchangeRate||nextBtnLoading" @click="handleSaveDeposit">
+          <image v-show="nextBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
+          {{ $t('form.next') }}
+        </button>
+      </view>
+      <view v-if="currentStep === 1">
+        <QrCodeInfo
+            :imgUrl="depositData.code_image ?? ''"
+            :depositData="depositData"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import {
+  saveDeposit,
+  getExchangeRate,
+  getGoldRange,
+  getCurrencyByPay,
+  getIbMtLoginBank,
+  getSubsidyById,
+  getDepositSign,
+  getActInfo,
+  getPresentedCredit,
+  getDepositDataById,
+  saveDepositData
+} from '@/services/capital/deposit.ts';
+import { getMtServers, getCustomerMtLoginList } from '@/services/common.ts';
+import { UserLanguage } from '@/utils/const';
+import QrCodeInfo from './qrCodeInfo.vue';
+export default {
+  data() {
+    return {
+      actId: undefined,
+      actInfo: null,
+      mt4Server: undefined,
+      mt4Login: undefined,
+      mtServerOptions: [],
+      mtLoginOptions: [],
+      currencyOptions: [],
+      IBMtAccountOption: [],
+      mtlogins: {},
+      IBMtlogins: {},
+      selectedMtLogin: null,
+      selectedIBMtLogin: null,
+      currency_amount: undefined,
+      goldRange: null,
+      amountAvailable: true,
+      exchangeRate: undefined,
+      rateSign: undefined,
+      paySubsidy: undefined,
+      pay_subsidy: undefined,
+      presentedCredit: undefined, //赠送信用金
+      presentedAmountResidue: undefined, //剩余赠金额度
+      depositFormData: { usd_amount: '' },
+      currentStep: 0,
+      nextBtnLoading: false,
+      qrCodeImgUrl: '',
+      depositData: {},
+      depositFormRules: {
+        mt4_login: {
+          rules: [
+            {
+              required: true,
+              errorMessage: this.$t('form.mtAccount.required')
+            }
+          ]
+        },
+        usd_amount: {
+          rules: [
+            {
+              required: true,
+              errorMessage: this.$t('form.amount.required')
+            },
+            {
+              validateFunction: (rule, value, data, callback) => {
+                // 异步需要返回 Promise 对象
+                return new Promise((resolve, reject) => {
+                  setTimeout(() => {
+                    if (value < this.goldRange?.in_min) {
+                      // 不通过返回 reject(new Error('错误信息'))
+                      this.amountAvailable = false;
+                      reject(new Error(' '));
+                    } else {
+                      // 通过返回 resolve
+                      this.amountAvailable = true;
+                      resolve();
+                    }
+                  }, 0);
+                });
+              }
+            }
+          ]
+        },
+        currency_type: {
+          rules: [
+            {
+              required: true,
+              errorMessage: this.$t('form.currencyType.required')
+            }
+          ]
+        },
+        pay_agency: {
+          rules: [
+            {
+              required: true,
+              errorMessage: this.$t('form.IBMtAccount.required')
+            }
+          ]
+        }
+      }
+    };
+  },
+  methods: {
+    handleAmountInput(val) {
+      this.amountAvailable = true;
+      if (this.actId) {
+        this.calculatePresentedCredit(this.actId, val);
+      }
+    },
+    goldRangePlaceholderRender(min, max) {
+      return `${this.$t('form.amount.placeholderBefore')}${min}-${max}${this.$t('form.amount.placeholderAfter')}`;
+    },
+    async getMtLoginData(serverId) {
+      const res = await getCustomerMtLoginList({ qcc_language: UserLanguage, mt4_server: serverId, activity_id: this.actId });
+      if (res && res.code === 0) {
+        this.mtLoginOptions = res.data?.map((mtAccount) => ({
+          text: mtAccount.mt4_login,
+          value: mtAccount.mt4_login
+        }));
+        res.data?.forEach((mtAccount) => {
+          this.mtlogins[mtAccount.mt4_login] = mtAccount;
+        });
+        if (res.data[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
+          this.depositFormData.mt4_login = res.data[0].mt4_login;
+          this.mtLoginChange(res.data[0].mt4_login);
+        }
+      }
+    },
+    async getMtServerOptions() {
+      const res = await getMtServers({ qcc_language: UserLanguage, server_type: 'live' });
+      if (res && res.code === 0) {
+        let tempOptions = res.data?.map((item) => ({
+          text: item.server_name,
+          value: item.id
+        }));
+        if (this.actInfo && this.actInfo.actMtLogin && this.actInfo.actMtServer) {
+          tempOptions = tempOptions.filter((item) => item.value === Number(this.actInfo.actMtServer));
+        }
+        this.mtServerOptions = tempOptions;
+      }
+      if (this.mtServerOptions[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
+        this.depositFormData.mt4_server = this.mtServerOptions[0].value;
+      }
+    },
+    async getActInfoFn(actId) {
+      const res = await getActInfo(actId);
+      if (res && res.code === 0) {
+        this.actInfo = res.data;
+        if (res.data.actMtLogin && res.data.actMtServer) {
+          res.data.actMtLogin = Number(res.data.actMtLogin);
+          res.data.actMtServer = Number(res.data.actMtServer);
+          this.mtLoginOptions = [{ text: res.data.actMtLogin, value: res.data.actMtLogin }];
+          this.mtServerOptions = this.mtServerOptions.filter((mtServer) => mtServer.value === res.data.actMtServer);
+          this.depositFormData.mt4_login = res.data.actMtLogin;
+          this.depositFormData.mt4_server = res.data.actMtServer;
+          this.mtLoginChange({
+            mt4_login: res.data.actMtLogin,
+            mt4_server: res.data.actMtServer,
+            mt4_server_name: res.data.actMtServerName
+          });
+        }
+      } else {
+        this.$cusModal.showModal({
+          type: 'message',
+          status: 'warning',
+          contentText: res.msg ?? this.$t('common.error.sysError'),
+          onClose() {
+            uni.navigateBack();
+          }
+        });
+      }
+    },
+    async calculatePresentedCredit(actId, usdAmount) {
+      this.presentedCredit = undefined;
+      this.presentedAmountResidue = undefined;
+      const res = await getPresentedCredit({
+        act_id: actId,
+        usd_amount: usdAmount
+      });
+      if (res && res.code === 0) {
+        this.presentedCredit = res.data;
+        if (res.msg) {
+          this.presentedAmountResidue = JSON.parse(res.msg).presented_amount_residue;
+        }
+      }
+    },
+    async getGoldRangeData() {
+      const res = await getGoldRange({ mt4_login: this.selectedMtLogin.mt4_login, mt4_server: this.selectedMtLogin.mt4_server });
+      if (res && res.code === 0) {
+        this.goldRange = res.data;
+      }
+    },
+    mtLoginChange(val) {
+      if (!val) {
+        this.depositFormData.mt4_login = undefined;
+        this.goldRange = null;
+        return;
+      }
+      if (typeof val !== 'object') {
+        this.selectedMtLogin = this.mtlogins[val];
+      } else {
+        this.selectedMtLogin = val;
+      }
+      this.getGoldRangeData();
+    },
+    async mtServerChange(val) {
+      this.mtLoginChange(undefined);
+      await this.getMtLoginData(val);
+    },
+    async getCurrencyByPayId(pay_id) {
+      const res = await getCurrencyByPay({ pay_id });
+      if (res && res.code === 0) {
+        this.currencyOptions = res.data?.map((item) => ({
+          text: item.currency,
+          value: item.currency
+        }));
+      }
+    },
+    async getRate() {
+      const params = {
+        mt4_server: this.selectedMtLogin?.mt4_server,
+        mt4_login: this.selectedMtLogin?.mt4_login,
+        exchange_currency: this.depositFormData?.currency_type,
+        type: 'mt4',
+        io: 'i'
+      };
+      const res = await getExchangeRate(params);
+      if (res && res.code === 0) {
+        this.exchangeRate = res.data.exchange_rate;
+        this.rateSign = res.data.exchange_rate_sign;
+      }
+    },
+    currencyChange(val) {
+      this.getRate();
+      this.depositFormData.pay_agency = undefined;
+    },
+    IBMtAccountChange(val) {
+      this.selectedIBMtLogin = this.IBMtlogins[val];
+    },
+    setCurrentStep(step) {
+      this.currentStep = 1;
+    },
+    async handleSaveDeposit() {
+      this.$refs.depositForm.validate().then(async (fields) => {
+        const params = {
+          ...fields,
+          act_id: this.actId,
+          bank_desc: this.selectedIBMtLogin?.pay_config_bank_id,
+          currency_amount: this.currency_amount,
+          exchange_rate: this.exchangeRate,
+          exchange_rate_sign: this.rateSign,
+          language: UserLanguage,
+          mt4_server: this.selectedMtLogin?.mt4_server,
+          pay_channel: this.pageParams?.pay_code,
+          usd_service_charge: 0
+        };
+        this.nextBtnLoading = true;
+        const res = await saveDeposit(params);
+        this.nextBtnLoading = false;
+        if (res && res.code === 0) {
+          this.depositData = {
+            code_image:res.data.code_image,
+            currency_amount:this.currency_amount
+          };
+          this.setCurrentStep(1);
+        } else {
+          this.$cusModal.showModal({
+            type: 'message',
+            status: 'warning',
+            contentText: res.msg ?? this.$t('common.error.sysError')
+          });
+        }
+      });
+    },
+    async getDepositData(id) {
+      const res = await getDepositDataById(id);
+      if (res && res.code === 0) {
+        this.depositData = { ...this.depositData, ...res.data };
+      }
+    },
+    chooseImage() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          this.userImage = res.tempFilePaths[0];
+          this.drawCanvas();
+        }
+      });
+    }
+  },
+  watch: {
+    'depositFormData.currency_type': {
+      handler(newVal, oldVal) {
+        if (this.depositFormData.currency_amount) {
+        }
+      }
+    },
+    'depositFormData.usd_amount': {
+      handler(newVal, oldVal) {
+        this.currency_amount = this.exchangeRate && newVal ? (this.exchangeRate * newVal).toFixed(2) : undefined;
+        this.paySubsidy = this.pay_subsidy && newVal ? ((this.pay_subsidy * newVal) / 100).toFixed(2) : undefined;
+      }
+    },
+    exchangeRate: {
+      handler(newVal, oldVal) {
+        this.currency_amount = newVal && this.depositFormData.usd_amount ? (newVal * this.depositFormData.usd_amount).toFixed(2) : '-';
+      }
+    }
+  },
+  created() {
+    this.getMtServerOptions();
+  },
+  async onLoad(params) {
+    this.pageParams = params;
+    this.pay_subsidy = this.pageParams.pay_subsidy
+    if (params?.pay_id) {
+      this.getCurrencyByPayId(params.pay_id);
+    }
+    const actId = uni.getStorageSync('actId');
+    const mt4Server = Number(uni.getStorageSync('curs'));
+    const mt4Login = Number(uni.getStorageSync('curl'));
+    if (actId) {
+      this.actId = actId;
+      this.getActInfoFn(actId);
+    }
+    if (mt4Server) {
+      this.mt4Server = mt4Server;
+      this.depositFormData.mt4_server = mt4Server;
+      await this.mtServerChange(mt4Server);
+    }
+    if (mt4Login) {
+      this.mt4Login = mt4Login;
+      this.depositFormData.mt4_login = mt4Login;
+      this.mtLoginChange(mt4Login);
+    }
+  },
+  components: {
+    QrCodeInfo
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/pages/capital/deposit/One2Pay/qrCodeInfo.vue b/pages/capital/deposit/One2Pay/qrCodeInfo.vue
new file mode 100644
index 0000000..3d0ef13
--- /dev/null
+++ b/pages/capital/deposit/One2Pay/qrCodeInfo.vue
@@ -0,0 +1,221 @@
+<template>
+  <view>
+    <view class="qrCodeInfoWrapper">
+      <view class="currencyAmountLabel">{{ $t('deposit.remittanceAmount') }}</view>
+      <view class="currencyAmount">{{ depositData.currency_amount }}</view>
+      <view class="qrCodeImgWrapper" @longpress="showDetailDialog">
+        <div class="qrCodeImgBg"></div>
+        <image crossOrigin="" v-if="qrCodeImg" :src="qrCodeImg" mode="aspectFill" class="qrCodeImg"></image>
+      </view>
+      <view class="paymentIcons">
+<!--        <image src="/static/capital/alipay.svg" mode="aspectFit" class="paymentIcon"></image>-->
+      </view>
+      <view style="margin-top: 24px; padding: 0px 62px; text-align: center; font-size: 12px; line-height: 17px">
+<!--        <text style="color: #29bbe4">{{ $t('deposit.longPressCode1') }}</text>-->
+<!--        <text style="color: #aaaaaa">{{ $t('deposit.longPressCode2') }}\n{{ $t('deposit.longPressCode3') }}</text>-->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getBankImg } from '@/services/capital/deposit.ts';
+export default {
+  name: 'QrCodeInfo',
+  props: {
+    imgUrl: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    depositData: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    next: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      canvasId: 'myCanvas',
+      qrCodeImg: '',
+      gradientBg: '/static/capital/gradientBg.svg',
+      htfxLogo: '/static/logo.svg',
+      weChatPayIcon: '/static/capital/weChatPay.svg',
+      aliPayIcon: '/static/capital/aliPay2.svg',
+      unionPayIcon: '/static/capital/unionPay.svg',
+      huabeiIcon: '/static/capital/huabei.svg',
+      imgBaseUrl: '',
+      qrCodeImgUrl: '',
+      hour: 0,
+      minute: 0,
+      second: 0
+    };
+  },
+  methods: {
+    async getImgPathData() {
+      this.qrCodeImg = 'data:image/png;base64,' + this.imgUrl;
+    },
+    async getBankImgData(id) {
+      const res = await getBankImg(id);
+      console.log('res=>', res);
+      const temp = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte), ''));
+      console.log('temp==>', temp);
+      this.qrCodeImgUrl = temp;
+    },
+    showDetailDialog() {
+      this.$refs.alertDialog.open();
+      this.$nextTick(() => {
+        this.drawCanvas();
+      });
+    },
+    closeDetailDialog() {
+      this.$refs.alertDialog.close();
+    },
+    drawCanvas() {
+      const ctx = uni.createCanvasContext(this.canvasId, this);
+      // 绘制白色背景
+      ctx.setFillStyle('#fff');
+      ctx.fillRect(0, 0, 243, 328);
+
+      // 绘制渐变色背景
+      ctx.drawImage(this.gradientBg, 0, 0, 243, 328);
+
+      // 绘制logo
+      ctx.drawImage(this.htfxLogo, 72, 29, 100, 36);
+
+      // 绘制圆角矩形
+      this.roundedRectangleDrawer(ctx);
+
+      // 绘制渐变色边框
+      this.gradientBorderDrawer(ctx);
+
+      // 绘制支付图标
+      // ctx.drawImage(this.weChatPayIcon, 26, 269, 29, 29);
+      // ctx.drawImage(this.aliPayIcon, 80, 269, 29, 29);
+      // ctx.drawImage(this.unionPayIcon, 134, 269, 29, 29);
+      // ctx.drawImage(this.huabeiIcon, 188, 269, 29, 29);
+      ctx.drawImage(this.aliPayIcon, 108, 269, 29, 29);
+      // 绘制自定义图片
+      ctx.drawImage(this.qrCodeImg, 75, 108, 93, 93);
+
+      ctx.draw(); // 绘制到 canvas 上
+    },
+    roundedRectangleDrawer(ctx) {
+      // 设置矩形参数
+      const x = 60; // x 坐标
+      const y = 92; // y 坐标
+      const width = 124; // 矩形宽度
+      const height = 124; // 矩形高度
+      const radius = 7; // 圆角半径
+
+      ctx.beginPath();
+      ctx.moveTo(x + radius, y); // 起始点
+      ctx.lineTo(x + width - radius, y); // 上边
+      ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // 右上角
+      ctx.lineTo(x + width, y + height - radius); // 右边
+      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // 右下角
+      ctx.lineTo(x + radius, y + height); // 下边
+      ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // 左下角
+      ctx.lineTo(x, y + radius); // 左边
+      ctx.quadraticCurveTo(x, y, x + radius, y); // 左上角
+      ctx.closePath();
+
+      // 填充颜色
+      ctx.setFillStyle('#fff');
+      ctx.fill();
+    },
+    gradientBorderDrawer(ctx) {
+      // 矩形参数
+      const x = 73.5;
+      const y = 106.5;
+      const width = 96;
+      const height = 96;
+      const borderWidth = 3; // 边框宽度
+
+      // 创建渐变
+      const gradient = ctx.createLinearGradient(x, y, x + width, y); // 从左到右渐变
+      gradient.addColorStop(0, '#4068A8'); // 开始颜色
+      gradient.addColorStop(1, '#29BBE4'); // 结束颜色
+
+      // 填充矩形
+      ctx.fillStyle = '#ffffff'; // 矩形填充颜色
+      ctx.fillRect(x, y, width, height);
+
+      // 绘制渐变边框
+      ctx.lineWidth = borderWidth;
+      ctx.strokeStyle = gradient;
+      ctx.strokeRect(x, y, width, height);
+    },
+    saveImage() {
+      // #ifdef H5
+      this.saveToAlbum(this.qrCodeImgUrl);
+      this.closeDetailDialog();
+      this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
+      // #endif
+
+      // #ifndef H5
+      const canvasId = this.canvasId;
+      uni.canvasToTempFilePath({
+        canvasId: canvasId,
+        success: (res) => {
+          this.saveToAlbum(res.tempFilePath);
+          this.closeDetailDialog();
+          this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
+        },
+        fail: (err) => {
+          console.error(err);
+        }
+      });
+      // #endif
+    },
+    saveToAlbum(tempFilePath) {
+      // #ifdef H5
+      var oA = document.createElement('a');
+      oA.download = 'HTFX';
+      oA.href = tempFilePath;
+      document.body.appendChild(oA);
+      oA.click();
+      oA.remove();
+      // #endif
+      // #ifndef H5
+      uni.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success: () => {
+          uni.showToast({
+            title: this.$t('common.success.saveDone'),
+            icon: 'success'
+          });
+        },
+        fail: (err) => {
+          console.error(err);
+          uni.showToast({
+            title: this.$t('common.success.saveFail'),
+            icon: 'none'
+          });
+        }
+      });
+      // #endif
+    }
+  },
+  created() {
+    this.hour = Math.floor(this.depositData.pay_time / 3600000);
+    this.minute = Math.floor((this.depositData.pay_time % 3600000) / 60000);
+    this.second = (this.depositData.pay_time % 60000) / 1000;
+  },
+  async mounted() {
+    await this.getImgPathData();
+    if (this.depositData?.obj?.goldInId) {
+      await this.getBankImgData(this.depositData.obj.goldInId);
+    }
+    this.drawCanvas();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/pages/capital/deposit/index.vue b/pages/capital/deposit/index.vue
index c56417e..7e08acd 100644
--- a/pages/capital/deposit/index.vue
+++ b/pages/capital/deposit/index.vue
@@ -65,11 +65,19 @@ export default {
         //   bgIconSize: 100
         // },
 				htfxcashier3: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
+        ForcePay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
 				ECA3_31E55F754F: {
 					target: '/pages/capital/deposit/usdt/index',
 					bgIcon: '/static/capital/USDT.png',
 					bgIconSize: 90
-				}
+				},
+        PayOK: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        One2Pay: { target: '/pages/capital/deposit/One2Pay/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        PaySpec: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        RediPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        CCPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        Help2Pay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
+        TokenPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
 			}
 		};
 	},
diff --git a/pages/capital/deposit/onlinePayment/index.vue b/pages/capital/deposit/onlinePayment/index.vue
index bcedfeb..a983310 100644
--- a/pages/capital/deposit/onlinePayment/index.vue
+++ b/pages/capital/deposit/onlinePayment/index.vue
@@ -8,39 +8,35 @@
 			<uni-forms ref="depositForm" :modelValue="depositFormData" :rules="depositFormRules">
 				<uni-forms-item name="mt4_server">
 					<text class="uni-subtitle">{{ $t('form.mtServer.label') }}</text>
-					<uni-data-select
-						:placeholder="$t('form.pleaseSelect')"
-						:emptyTips="$t('common.empty')"
-						:localdata="mtServerOptions"
-						v-model="depositFormData.mt4_server"
-						@change="mtServerChange"
-						:clear="false"
-					></uni-data-select>
+					<uni-data-select :placeholder="$t('form.pleaseSelect')" :emptyTips="$t('common.empty')"
+						:localdata="mtServerOptions" v-model="depositFormData.mt4_server" @change="mtServerChange"
+						:clear="false"></uni-data-select>
 				</uni-forms-item>
 				<uni-forms-item name="mt4_login">
 					<text class="uni-subtitle">{{ $t('form.mtAccount.label') }}</text>
-					<uni-data-select
-						:placeholder="$t('form.pleaseSelect')"
-						:emptyTips="$t('common.empty')"
-						:localdata="mtLoginOptions"
-						v-model="depositFormData.mt4_login"
-						@change="mtLoginChange"
-					></uni-data-select>
+					<uni-data-select :placeholder="$t('form.pleaseSelect')" :emptyTips="$t('common.empty')"
+						:localdata="mtLoginOptions" v-model="depositFormData.mt4_login"
+						@change="mtLoginChange"></uni-data-select>
 				</uni-forms-item>
 				<uni-forms-item name="usd_amount">
 					<text class="uni-subtitle">{{ $t('form.amount.label') }}</text>
-					<uni-easyinput type="number" primaryColor="#29BBE4" v-model="depositFormData.usd_amount" @input="handleAmountInput"></uni-easyinput>
-					<view v-if="goldRange" :class="['minAmount', amountAvailable ? '' : 'unavailable']">{{ $t('deposit.minAmount') }} ${{ goldRange?.in_min }}</view>
+					<uni-easyinput type="number" primaryColor="#29BBE4" v-model="depositFormData.usd_amount"
+						@input="handleAmountInput"></uni-easyinput>
+					<view v-if="goldRange" :class="['minAmount', amountAvailable ? '' : 'unavailable']">
+						{{ $t('deposit.minAmount') }} ${{ goldRange?.in_min }}
+					</view>
 				</uni-forms-item>
 				<uni-forms-item name="currency_type">
 					<text class="uni-subtitle">{{ $t('form.currencyType.label') }}</text>
-					<uni-data-select
-						:placeholder="$t('form.pleaseSelect')"
-						:emptyTips="$t('common.empty')"
-						:localdata="currencyOptions"
-						v-model="depositFormData.currency_type"
-						@change="currencyChange"
-					></uni-data-select>
+					<uni-data-select :placeholder="$t('form.pleaseSelect')" :emptyTips="$t('common.empty')"
+						:localdata="currencyOptions" v-model="depositFormData.currency_type"
+						@change="currencyChange"></uni-data-select>
+				</uni-forms-item>
+				<uni-forms-item name="option_payment" v-if="pageParams?.pay_code === 'PayOK'">
+					<text class="uni-subtitle">{{ $t('form.currencyType.label') }}</text>
+					<uni-data-select :placeholder="$t('form.pleaseSelect')" :emptyTips="$t('common.empty')"
+						:localdata="payOkMethod" v-model="depositFormData.option_payment"
+						></uni-data-select>
 				</uni-forms-item>
 				<view class="exchangeRate">
 					<view class="label">{{ $t('common.exchangeRate') }}</view>
@@ -58,13 +54,15 @@
 					<view class="label">{{ $t('deposit.presentedAmountResidue') }}</view>
 					<view class="value">{{ presentedAmountResidue ? `$${presentedAmountResidue}` : '-' }}</view>
 				</view>
-        <view class="exchangeRate" v-show="pay_subsidy">
-          <view class="label">{{ $t('deposit.paySubsidy') }}</view>
-          <view class="value">{{ paySubsidy ? `$${paySubsidy}` : '-' }}</view>
-        </view>
+				<view class="exchangeRate" v-show="pay_subsidy">
+					<view class="label">{{ $t('deposit.paySubsidy') }}</view>
+					<view class="value">{{ paySubsidy ? `$${paySubsidy}` : '-' }}</view>
+				</view>
 			</uni-forms>
-			<button class="primaryButton" type="button" :disabled="!exchangeRate||nextBtnLoading" @click="handleSaveDeposit">
-				<image v-show="nextBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
+			<button class="primaryButton" type="button" :disabled="!exchangeRate||nextBtnLoading"
+				@click="handleSaveDeposit">
+				<image v-show="nextBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit"
+					style="width: 16px; height: 16px"></image>
 				{{ $t('form.next') }}
 			</button>
 		</view>
@@ -72,327 +70,582 @@
 </template>
 
 <script>
-import { getMTAccounts } from '@/services/home/home.ts';
-import { saveDeposit, getExchangeRate, getGoldRange, getCurrencyByPay, getDepositSign, getActInfo, getPresentedCredit } from '@/services/capital/deposit.ts';
-import { getMtServers, getCustomerMtLoginList } from '@/services/common.ts';
-import { UserLanguage } from '@/utils/const.ts';
-export default {
-	name: '',
-	data() {
-		return {
-			actId: undefined,
-			actInfo: null,
-			mt4Server: undefined,
-			mt4Login: undefined,
-			mtServerOptions: [],
-			mtLoginOptions: [],
-			currencyOptions: [],
-			mtlogins: {},
-			selectedMtLogin: null,
-			currency_amount: undefined,
-			goldRange: null,
-			amountAvailable: true,
-			exchangeRate: undefined,
-			rateSign: undefined,
-      paySubsidy: undefined,
-      pay_subsidy: undefined,
-			presentedCredit: undefined, //赠送信用金
-			presentedAmountResidue: undefined, //剩余赠金额度
-			depositFormData: { usd_amount: '' },
-			nextBtnLoading: false,
-			depositFormRules: {
-				mt4_login: {
-					rules: [
-						{
+	import {
+		getMTAccounts
+	} from '@/services/home/home.ts';
+	import {
+		saveDeposit,
+		getExchangeRate,
+		getGoldRange,
+		getCurrencyByPay,
+		getDepositSign,
+		getActInfo,
+		getPresentedCredit
+	} from '@/services/capital/deposit.ts';
+	import {
+		getMtServers,
+		getCustomerMtLoginList
+	} from '@/services/common.ts';
+	import {
+		UserLanguage
+	} from '@/utils/const.ts';
+	export default {
+		name: '',
+		data() {
+			return {
+				actId: undefined,
+				actInfo: null,
+				mt4Server: undefined,
+				mt4Login: undefined,
+				mtServerOptions: [],
+				mtLoginOptions: [],
+				currencyOptions: [],
+				mtlogins: {},
+				selectedMtLogin: null,
+				currency_amount: undefined,
+				goldRange: null,
+				amountAvailable: true,
+				exchangeRate: undefined,
+				rateSign: undefined,
+				paySubsidy: undefined,
+				pay_subsidy: undefined,
+				presentedCredit: undefined, //赠送信用金
+				presentedAmountResidue: undefined, //剩余赠金额度
+				depositFormData: {
+					usd_amount: ''
+				},
+				nextBtnLoading: false,
+				depositFormRules: {
+					mt4_login: {
+						rules: [{
 							required: true,
 							errorMessage: this.$t('form.mtAccount.required')
-						}
-					]
-				},
-				usd_amount: {
-					rules: [
-						{
-							required: true,
-							errorMessage: this.$t('form.amount.required')
-						},
-						{
-							validateFunction: (rule, value, data, callback) => {
-								// 异步需要返回 Promise 对象
-								return new Promise((resolve, reject) => {
-									setTimeout(() => {
-										if (value < this.goldRange?.in_min) {
-											// 不通过返回 reject(new Error('错误信息'))
-											this.amountAvailable = false;
-											reject(new Error(' '));
-										} else {
-											// 通过返回 resolve
-											this.amountAvailable = true;
-											resolve();
-										}
-									}, 0);
-								});
+						}]
+					},
+					usd_amount: {
+						rules: [{
+								required: true,
+								errorMessage: this.$t('form.amount.required')
+							},
+							{
+								validateFunction: (rule, value, data, callback) => {
+									// 异步需要返回 Promise 对象
+									return new Promise((resolve, reject) => {
+										setTimeout(() => {
+											if (value < this.goldRange?.in_min) {
+												// 不通过返回 reject(new Error('错误信息'))
+												this.amountAvailable = false;
+												reject(new Error(' '));
+											} else {
+												// 通过返回 resolve
+												this.amountAvailable = true;
+												resolve();
+											}
+										}, 0);
+									});
+								}
 							}
-						}
-					]
-				},
-				currency_type: {
-					rules: [
-						{
+						]
+					},
+					currency_type: {
+						rules: [{
 							required: true,
 							errorMessage: this.$t('form.currencyType.required')
-						}
-					]
-				}
-			}
-		};
-	},
-	methods: {
-		handleAmountInput(val) {
-			this.amountAvailable = true;
-			if (this.actId) {
-				this.calculatePresentedCredit(this.actId, val);
-			}
-		},
-		goldRangePlaceholderRender(min, max) {
-			return `${this.$t('form.amount.placeholderBefore')}${min}-${max}${this.$t('form.amount.placeholderAfter')}`;
-		},
-		async getMtLoginData(serverId) {
-			const res = await getCustomerMtLoginList({ qcc_language: UserLanguage, mt4_server: serverId, activity_id: this.actId });
-			if (res && res.code === 0) {
-				this.mtLoginOptions = res.data?.map((mtAccount) => ({
-					text: mtAccount.mt4_login,
-					value: mtAccount.mt4_login
-				}));
-				res.data?.forEach((mtAccount) => {
-					this.mtlogins[mtAccount.mt4_login] = mtAccount;
-				});
-				if (res.data[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
-					this.depositFormData.mt4_login = res.data[0].mt4_login;
-					this.mtLoginChange(res.data[0].mt4_login);
-				}
-			}
-		},
-		async getMtServerOptions() {
-			const res = await getMtServers({ qcc_language: UserLanguage, server_type: 'live' });
-			if (res && res.code === 0) {
-				let tempOptions = res.data?.map((item) => ({
-					text: item.server_name,
-					value: item.id
-				}));
-				if (this.actInfo && this.actInfo.actMtLogin && this.actInfo.actMtServer) {
-					tempOptions = tempOptions.filter((item) => item.value === Number(this.actInfo.actMtServer));
-				}
-				this.mtServerOptions = tempOptions;
-			}
-			if (this.mtServerOptions[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
-				this.depositFormData.mt4_server = this.mtServerOptions[0].value;
-			}
-		},
-		async getActInfoFn(actId) {
-			const res = await getActInfo(actId);
-			if (res && res.code === 0) {
-				this.actInfo = res.data;
-				if (res.data.actMtLogin && res.data.actMtServer) {
-					res.data.actMtLogin = Number(res.data.actMtLogin);
-					res.data.actMtServer = Number(res.data.actMtServer);
-					this.mtLoginOptions = [{ text: res.data.actMtLogin, value: res.data.actMtLogin }];
-					this.mtServerOptions = this.mtServerOptions.filter((mtServer) => mtServer.value === res.data.actMtServer);
-					this.depositFormData.mt4_login = res.data.actMtLogin;
-					this.depositFormData.mt4_server = res.data.actMtServer;
-					this.mtLoginChange({
-						mt4_login: res.data.actMtLogin,
-						mt4_server: res.data.actMtServer,
-						mt4_server_name: res.data.actMtServerName
-					});
-				}
-			} else {
-				this.$cusModal.showModal({
-					type: 'message',
-					status: 'warning',
-					contentText: res.msg ?? this.$t('common.error.sysError'),
-					onClose() {
-						uni.navigateBack();
+						}]
 					}
-				});
-			}
-		},
-		async calculatePresentedCredit(actId, usdAmount) {
-			this.presentedCredit = undefined;
-			this.presentedAmountResidue = undefined;
-			const res = await getPresentedCredit({
-				act_id: actId,
-				usd_amount: usdAmount
-			});
-			if (res && res.code === 0) {
-				this.presentedCredit = res.data;
-				if (res.msg) {
-					this.presentedAmountResidue = JSON.parse(res.msg ?? '').presented_amount_residue;
-				}
-			}
-		},
-		async getGoldRangeData() {
-			const res = await getGoldRange({ mt4_login: this.selectedMtLogin.mt4_login, mt4_server: this.selectedMtLogin.mt4_server });
-			if (res && res.code === 0) {
-				this.goldRange = res.data;
-			}
-		},
-		mtLoginChange(val) {
-			if (!val) {
-				this.depositFormData.mt4_login = undefined;
-				this.goldRange = null;
-				return;
-			}
-			if (typeof val !== 'object') {
-				this.selectedMtLogin = this.mtlogins[val];
-			} else {
-				this.selectedMtLogin = val;
-			}
-			this.getGoldRangeData();
-		},
-		async mtServerChange(val) {
-			this.mtLoginChange(undefined);
-			await this.getMtLoginData(val);
-		},
-		async getCurrencyByPayId(pay_id) {
-			const res = await getCurrencyByPay({ pay_id });
-			if (res && res.code === 0) {
-				this.currencyOptions = res.data?.map((item) => ({
-					text: item.currency,
-					value: item.currency
-				}));
-			}
-		},
-		async getRate() {
-			const params = {
-				mt4_server: this.selectedMtLogin?.mt4_server,
-				mt4_login: this.selectedMtLogin?.mt4_login,
-				exchange_currency: this.depositFormData?.currency_type,
-				type: 'mt4',
-				io: 'i'
+				},
+				payOkMethod: [],
+				payOkMethodVND: [{
+						"code": "ATM/Visa Master Card",
+						"name": "ATM/Visa Master Card"
+					},
+					{
+						"name": "OFFLINEPAY",
+						"code": "OFFLINEPAY"
+					},
+					{
+						"name": "Garena",
+						"code": "Garena"
+					},
+					{
+						"name": "Gate",
+						"code": "Gate"
+					},
+					{
+						"name": "Mobifone",
+						"code": "Mobifone"
+					},
+					{
+						"name": "Vcoin",
+						"code": "Vcoin"
+					},
+					{
+						"name": "Vietnamobile",
+						"code": "Vietnamobile"
+					},
+					{
+						"name": "Viettel",
+						"code": "Viettel"
+					},
+					{
+						"name": "Vinaphone",
+						"code": "Vinaphone"
+					},
+					{
+						"name": "Zing",
+						"code": "Zing"
+					},
+					{
+						"name": "BankVA",
+						"code": "BankVA"
+					},
+					{
+						"name": "ACBVietQR",
+						"code": "ACBVietQR"
+					},
+					{
+						"name": "AGRIBankQR",
+						"code": "AGRIBankQR"
+					},
+					{
+						"name": "BIDVQR",
+						"code": "BIDVQR"
+					},
+					{
+						"name": "MBVietQR",
+						"code": "MBVietQR"
+					},
+					{
+						"name": "PVcombankQR",
+						"code": "PVcombankQR"
+					},
+					{
+						"name": "TechcomVietQR",
+						"code": "TechcomVietQR"
+					},
+					{
+						"name": "TPBankQR",
+						"code": "TPBankQR"
+					},
+					{
+						"name": "VIBBankQR",
+						"code": "VIBBankQR"
+					},
+					{
+						"name": "VietcomQR",
+						"code": "VietcomQR"
+					},
+					{
+						"name": "VietinBankQR",
+						"code": "VietinBankQR"
+					},
+					{
+						"name": "VPBankQR",
+						"code": "VPBankQR"
+					},
+					{
+						"name": "Momo",
+						"code": "Momo"
+					},
+					{
+						"name": "ViettelPay",
+						"code": "ViettelPay"
+					},
+					{
+						"name": "ZaloPay",
+						"code": "ZaloPay"
+					},
+				],
+				payOkMethodIDR: [{
+						"code": "Alfamart",
+						"name": "Alfamart"
+					},
+					{
+						"code": "Indomaret",
+						"name": "Indomaret"
+					},
+					{
+						"code": "CreditCard",
+						"name": "CreditCard"
+					},
+					{
+						"code": "ConvenienceStore",
+						"name": "ConvenienceStore"
+					},
+					{
+						"code": "QRIS",
+						"name": "QRIS"
+					},
+					{
+						"code": "BCAVA",
+						"name": "BCAVA"
+					},
+					{
+						"code": "BNIVA",
+						"name": "BNIVA"
+					},
+					{
+						"code": "BRIVA",
+						"name": "BRIVA"
+					},
+					{
+						"code": "CIMBVA",
+						"name": "CIMBVA"
+					},
+					{
+						"code": "MandiriVA",
+						"name": "MandiriVA"
+					},
+					{
+						"code": "PermataVA",
+						"name": "PermataVA"
+					},
+					{
+						"code": "DANAWALLET",
+						"name": "DANAWALLET"
+					},
+					{
+						"code": "LINKAJA-APP",
+						"name": "LINKAJA-APP"
+					},
+					{
+						"code": "LINKAJA-WEB",
+						"name": "LINKAJA-WEB"
+					},
+					{
+						"code": "OVOWALLET",
+						"name": "OVOWALLET"
+					},
+					{
+						"code": "SHOPEEPAY-APP",
+						"name": "SHOPEEPAY-APP"
+					},
+					{
+						"code": "SHOPEEPAY-WEB",
+						"name": "SHOPEEPAY-WEB"
+					},
+				],
+        pageParams:{}
 			};
-			const res = await getExchangeRate(params);
-			if (res && res.code === 0) {
-				this.exchangeRate = res.data.exchange_rate;
-				this.rateSign = res.data.exchange_rate_sign;
-			}
 		},
-		currencyChange(val) {
-			this.getRate();
-		},
-		openUrl(url) {
-			// #ifdef H5
-			uni.showModal({
-				content: this.$t('modal.openPaymentPage'),
-				confirmColor: '#4DC0E5',
-				success: async (res) => {
-					if (res.confirm) {
-						// window.open(url);
-						window.location.href = url
+		methods: {
+			handleAmountInput(val) {
+				this.amountAvailable = true;
+				if (this.actId) {
+					this.calculatePresentedCredit(this.actId, val);
+				}
+			},
+			goldRangePlaceholderRender(min, max) {
+				return `${this.$t('form.amount.placeholderBefore')}${min}-${max}${this.$t('form.amount.placeholderAfter')}`;
+			},
+			async getMtLoginData(serverId) {
+				const res = await getCustomerMtLoginList({
+					qcc_language: UserLanguage,
+					mt4_server: serverId,
+					activity_id: this.actId
+				});
+				if (res && res.code === 0) {
+					this.mtLoginOptions = res.data?.map((mtAccount) => ({
+						text: mtAccount.mt4_login,
+						value: mtAccount.mt4_login
+					}));
+					res.data?.forEach((mtAccount) => {
+						this.mtlogins[mtAccount.mt4_login] = mtAccount;
+					});
+					if (res.data[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
+						this.depositFormData.mt4_login = res.data[0].mt4_login;
+						this.mtLoginChange(res.data[0].mt4_login);
 					}
 				}
-			});
-			// #endif
-		},
-		async handleSaveDeposit() {
-			this.$refs.depositForm.validate().then(async (fields) => {
-				const params = {
-					...fields,
-					act_id: this.actId,
-					// bank_desc: this.selectedIBMtLogin?.pay_config_bank_id,
-					currency_amount: this.currency_amount,
-					exchange_rate: this.exchangeRate,
-					exchange_rate_sign: this.rateSign,
-					language: UserLanguage,
-					mt4_server: this.selectedMtLogin?.mt4_server,
-					pay_channel: this.pageParams?.pay_code,
-					usd_service_charge: 0
-				};
-				this.nextBtnLoading = true;
-				const res = await saveDeposit(params).then((res) => {
-					this.nextBtnLoading = false;
-					if (res && res.code === 0) {
-						// #ifdef H5
-						let domain = window.location.hostname;
-						let index = domain.lastIndexOf('.');
-            let index2 = domain.indexOf(".");
-						let suffix = 'uk';
-            let infix = "htfx";
-						if (index > 0) {
-							suffix = domain.substring(index + 1);
-						}
-            if(index>0 && index2>0) {
-              infix = domain.substring(index2+1,index);
-            }
-						let formatUrl = res.data.replace('{suffix}', suffix);
-            formatUrl = formatUrl.replace('{infix}',infix);
-						if (formatUrl.indexOf('{suffix}') != -1) {
-							formatUrl = res.data.replace('{suffix}', 'uk');
-						}
-            if(formatUrl.indexOf("{infix}")!=-1){
-              formatUrl = patams.replace('{infix}',"htfx");
-            }
-						this.openUrl(formatUrl);
-						// #endif
-					} else {
-						this.$cusModal.showModal({
-							type: 'message',
-							status: 'warning',
-							contentText: res.msg ?? this.$t('common.error.sysError')
+			},
+			async getMtServerOptions() {
+				const res = await getMtServers({
+					qcc_language: UserLanguage,
+					server_type: 'live'
+				});
+				if (res && res.code === 0) {
+					let tempOptions = res.data?.map((item) => ({
+						text: item.server_name,
+						value: item.id
+					}));
+					if (this.actInfo && this.actInfo.actMtLogin && this.actInfo.actMtServer) {
+						tempOptions = tempOptions.filter((item) => item.value === Number(this.actInfo.actMtServer));
+					}
+					this.mtServerOptions = tempOptions;
+				}
+				if (this.mtServerOptions[0] && !this.actId && !this.mt4Server && !this.mt4Login) {
+					this.depositFormData.mt4_server = this.mtServerOptions[0].value;
+				}
+			},
+			async getActInfoFn(actId) {
+				const res = await getActInfo(actId);
+				if (res && res.code === 0) {
+					this.actInfo = res.data;
+					if (res.data.actMtLogin && res.data.actMtServer) {
+						res.data.actMtLogin = Number(res.data.actMtLogin);
+						res.data.actMtServer = Number(res.data.actMtServer);
+						this.mtLoginOptions = [{
+							text: res.data.actMtLogin,
+							value: res.data.actMtLogin
+						}];
+						this.mtServerOptions = this.mtServerOptions.filter((mtServer) => mtServer.value === res.data
+							.actMtServer);
+						this.depositFormData.mt4_login = res.data.actMtLogin;
+						this.depositFormData.mt4_server = res.data.actMtServer;
+						this.mtLoginChange({
+							mt4_login: res.data.actMtLogin,
+							mt4_server: res.data.actMtServer,
+							mt4_server_name: res.data.actMtServerName
 						});
 					}
+				} else {
+					this.$cusModal.showModal({
+						type: 'message',
+						status: 'warning',
+						contentText: res.msg ?? this.$t('common.error.sysError'),
+						onClose() {
+							uni.navigateBack();
+						}
+					});
+				}
+			},
+			async calculatePresentedCredit(actId, usdAmount) {
+				this.presentedCredit = undefined;
+				this.presentedAmountResidue = undefined;
+				const res = await getPresentedCredit({
+					act_id: actId,
+					usd_amount: usdAmount
 				});
-			});
-		}
-	},
-	watch: {
-		'depositFormData.currency_type': {
-			handler(newVal, oldVal) {
-				if (this.depositFormData.currency_amount) {
+				if (res && res.code === 0) {
+					this.presentedCredit = res.data;
+					if (res.msg) {
+						this.presentedAmountResidue = JSON.parse(res.msg ?? '').presented_amount_residue;
+					}
+				}
+			},
+			async getGoldRangeData() {
+				const res = await getGoldRange({
+					mt4_login: this.selectedMtLogin.mt4_login,
+					mt4_server: this.selectedMtLogin.mt4_server
+				});
+				if (res && res.code === 0) {
+					this.goldRange = res.data;
+				}
+			},
+			mtLoginChange(val) {
+				if (!val) {
+					this.depositFormData.mt4_login = undefined;
+					this.goldRange = null;
+					return;
+				}
+				if (typeof val !== 'object') {
+					this.selectedMtLogin = this.mtlogins[val];
+				} else {
+					this.selectedMtLogin = val;
+				}
+				this.getGoldRangeData();
+			},
+			async mtServerChange(val) {
+				this.mtLoginChange(undefined);
+				await this.getMtLoginData(val);
+			},
+			async getCurrencyByPayId(pay_id) {
+				const res = await getCurrencyByPay({
+					pay_id
+				});
+				if (res && res.code === 0) {
+					this.currencyOptions = res.data?.map((item) => ({
+						text: item.currency,
+						value: item.currency
+					}));
+				}
+			},
+			async getRate() {
+				const params = {
+					mt4_server: this.selectedMtLogin?.mt4_server,
+					mt4_login: this.selectedMtLogin?.mt4_login,
+					exchange_currency: this.depositFormData?.currency_type,
+					type: 'mt4',
+					io: 'i'
+				};
+				const res = await getExchangeRate(params);
+				if (res && res.code === 0) {
+					this.exchangeRate = res.data.exchange_rate;
+					this.rateSign = res.data.exchange_rate_sign;
+				}
+			},
+			currencyChange(val) {
+				this.getRate();
+        if (this.pageParams?.pay_code == 'PayOK') {
+          if(this.depositFormData?.currency_type == 'VND'){
+            this.payOkMethod = this.payOkMethodVND?.map((item) => ({
+              text: item.code,
+              value: item.name
+            }));
+          }else if (this.depositFormData?.currency_type == 'IDR'){
+            this.payOkMethod = this.payOkMethodIDR?.map((item) => ({
+              text: item.code,
+              value: item.name
+            }));
+          }else {
+            this.payOkMethod = []
+          }
+        }
+			},
+			openUrl(url) {
+				// #ifdef H5
+				uni.showModal({
+					content: this.$t('modal.openPaymentPage'),
+					confirmColor: '#4DC0E5',
+					success: async (res) => {
+						if (res.confirm) {
+							// window.open(url);
+							window.location.href = url
+						}
+					}
+				});
+				// #endif
+			},
+			async handleSaveDeposit() {
+				this.$refs.depositForm.validate().then(async (fields) => {
+					const params = {
+						...fields,
+						act_id: this.actId,
+						// bank_desc: this.selectedIBMtLogin?.pay_config_bank_id,
+						currency_amount: this.currency_amount,
+						exchange_rate: this.exchangeRate,
+						exchange_rate_sign: this.rateSign,
+						language: UserLanguage,
+						mt4_server: this.selectedMtLogin?.mt4_server,
+						pay_channel: this.pageParams?.pay_code,
+						usd_service_charge: 0
+					};
+					this.nextBtnLoading = true;
+					const res = await saveDeposit(params).then((res) => {
+						this.nextBtnLoading = false;
+						if (res && res.code === 0) {
+							let patams = res.data
+							if (this.pageParams?.pay_code == 'htfxcashier' || this.pageParams
+								?.pay_code == 'htfxcashier2' || this.pageParams?.pay_code ==
+								'htfxcashier3') {
+								// #ifdef H5
+								let domain = window.location.hostname;
+								let index = domain.lastIndexOf('.');
+								let index2 = domain.indexOf(".");
+								let suffix = 'uk';
+								let infix = "htfx";
+								if (index > 0) {
+									suffix = domain.substring(index + 1);
+								}
+								if (index > 0 && index2 > 0) {
+									infix = domain.substring(index2 + 1, index);
+								}
+								let formatUrl = res.data.replace('{suffix}', suffix);
+								formatUrl = formatUrl.replace('{infix}', infix);
+								if (formatUrl.indexOf('{suffix}') != -1) {
+									formatUrl = res.data.replace('{suffix}', 'uk');
+								}
+								if (formatUrl.indexOf("{infix}") != -1) {
+									formatUrl = patams.replace('{infix}', "htfx");
+								}
+								this.openUrl(formatUrl);
+								// #endif
+							} else if (this.pageParams?.pay_code == 'ForcePay') {
+								this.openUrl(patams);
+							} else if (this.pageParams?.pay_code == 'PayOK' || this.pageParams?.pay_code == 'PaySpec' || this.pageParams?.pay_code == 'RediPay' || this.pageParams?.pay_code == 'CCPay' || this.pageParams?.pay_code == 'TokenPay') {
+								if (patams.status == 0 || patams.status == '0') {
+									let payUrl = patams.payUrl
+									window.open(payUrl)
+								} else {
+									this.$cusModal.showModal({
+										type: 'message',
+										status: 'warning',
+										contentText: patams.msg ?? this.$t(
+											'common.error.sysError')
+									});
+								}
+							}else if (this.pageParams?.pay_code == 'help2PayMYR' || this.pageParams?.pay_code == 'help2PayTHB' || this.pageParams?.pay_code == 'help2PayPHP' || this.pageParams?.pay_code == 'help2PayIDR' || this.pageParams?.pay_code == 'Help2Pay'){
+                let payUrl = patams.payUrl;
+                delete patams.payUrl;
+                this.postOpenWindow2(payUrl , patams);
+              }
+
+						} else {
+							this.$cusModal.showModal({
+								type: 'message',
+								status: 'warning',
+								contentText: res.msg ?? this.$t('common.error.sysError')
+							});
+						}
+					});
+				});
+			},postOpenWindow2(url , postData) {
+        var tempform = document.createElement("form");
+        tempform.action = url;
+        tempform.target = "_blank";
+        tempform.method = "post";
+        tempform.style.display = "none";
+        for (var x in postData) {
+          var opt = document.createElement("textarea");
+          opt.name = x;
+          opt.value = postData[x];
+          tempform.appendChild(opt);
+        }
+        document.body.appendChild(tempform);
+        tempform.submit();
+      }
+		},
+		watch: {
+			'depositFormData.currency_type': {
+				handler(newVal, oldVal) {
+					if (this.depositFormData.currency_amount) {}
+				}
+			},
+			'depositFormData.usd_amount': {
+				handler(newVal, oldVal) {
+					this.currency_amount = this.exchangeRate && newVal ? (this.exchangeRate * newVal).toFixed(2) :
+						undefined;
+					this.paySubsidy = this.pay_subsidy && newVal ? ((this.pay_subsidy * newVal) / 100).toFixed(2) :
+						undefined;
+				}
+			},
+			exchangeRate: {
+				handler(newVal, oldVal) {
+					this.currency_amount = newVal && this.depositFormData.usd_amount ? (newVal * this.depositFormData
+						.usd_amount).toFixed(2) : '-';
 				}
 			}
 		},
-		'depositFormData.usd_amount': {
-			handler(newVal, oldVal) {
-				this.currency_amount = this.exchangeRate && newVal ? (this.exchangeRate * newVal).toFixed(2) : undefined;
-        this.paySubsidy = this.pay_subsidy && newVal ? ((this.pay_subsidy * newVal) / 100).toFixed(2) : undefined;
-      }
+		created() {
+			this.getMtServerOptions();
 		},
-		exchangeRate: {
-			handler(newVal, oldVal) {
-				this.currency_amount = newVal && this.depositFormData.usd_amount ? (newVal * this.depositFormData.usd_amount).toFixed(2) : '-';
+		async onLoad(params) {
+			this.pageParams = params;
+			this.pay_subsidy = this.pageParams.pay_subsidy
+			if (params?.pay_id) {
+				this.getCurrencyByPayId(params.pay_id);
+			}
+			const actId = uni.getStorageSync('actId');
+			const mt4Server = Number(uni.getStorageSync('curs'));
+			const mt4Login = Number(uni.getStorageSync('curl'));
+			if (actId) {
+				this.actId = actId;
+				this.getActInfoFn(actId);
+			}
+			if (mt4Server) {
+				this.mt4Server = mt4Server;
+				this.depositFormData.mt4_server = mt4Server;
+				await this.mtServerChange(mt4Server);
+			}
+			if (mt4Login) {
+				this.mt4Login = mt4Login;
+				this.depositFormData.mt4_login = mt4Login;
+				this.mtLoginChange(mt4Login);
 			}
 		}
-	},
-	created() {
-		this.getMtServerOptions();
-	},
-	async onLoad(params) {
-		this.pageParams = params;
-    this.pay_subsidy = this.pageParams.pay_subsidy
-		if (params?.pay_id) {
-			this.getCurrencyByPayId(params.pay_id);
-		}
-		const actId = uni.getStorageSync('actId');
-		const mt4Server = Number(uni.getStorageSync('curs'));
-		const mt4Login = Number(uni.getStorageSync('curl'));
-		if (actId) {
-			this.actId = actId;
-			this.getActInfoFn(actId);
-		}
-		if (mt4Server) {
-			this.mt4Server = mt4Server;
-			this.depositFormData.mt4_server = mt4Server;
-			await this.mtServerChange(mt4Server);
-		}
-		if (mt4Login) {
-			this.mt4Login = mt4Login;
-			this.depositFormData.mt4_login = mt4Login;
-			this.mtLoginChange(mt4Login);
-		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
-</style>
+	@import './index.scss';
+</style>
\ No newline at end of file