lxf
2025-04-28 7087b96611573e4a1239cf4afaa8faf1b590c8de
src/page/user/transfer.vue
@@ -1,24 +1,32 @@
<template>
  <div class="wrapper">
    <div class="header">
      <mt-header title="账户资金互转">
    <!-- <div class="header">
      <mt-header :title="$t('账户资金互转')">
        <router-link to="/user" slot="left">
          <!-- <mt-button icon="back">我的</mt-button> -->
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    </div> -->
    <!-- <van-nav-bar
      :placeholder="true"
      :safe-area-inset-top="true"
      :title="$t('账户资金互转')"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">沙特账户转石油黄金账户</mt-tab-item>
      <mt-tab-item id="2">石油黄金账户转沙特账户</mt-tab-item>
      <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item> -->
      <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item> -->
    </mt-navbar>
      <mt-tab-item id="1">{{ $t("沙特账户转黄金原油账户") }}</mt-tab-item>
      <mt-tab-item id="2">{{ $t("黄金原油账户转沙特账户") }}</mt-tab-item> -->
    <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item> -->
    <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item> -->
    <!-- </mt-navbar>
    <mt-tab-container class="order-list" v-model="selected">
      <mt-tab-container-item id="1">
        <div class="form-block">
          <mt-field
            label="可转金额"
            placeholder="可转金额"
            :label="$t('可转金额')"
            :placeholder="$t('可转金额')"
            type="text"
            disabled
            v-model="myMoney[0].availableBalance"
@@ -27,52 +35,66 @@
        </div>
        <div class="form-block">
          <mt-field
            label="转账金额"
            :label="$t('转账金额')"
            name="amt"
            v-model="form.account1"
            placeholder="请输入转账金额"
            :placeholder="$t('请输入转账金额')"
            type="text"
          >
            <span @click="selectAll1">全部</span>
            <span @click="selectAll1">{{ $t("hj60") }}</span>
          </mt-field>
        </div>
        <!-- <div class="form-block">
            <mt-field label="资金密码" placeholder="资金密码" type="password" v-model="form.password"></mt-field>
        </div>
        <p class="prompt">资金密码默认为登录密码</p> -->
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit"
            >确认转入石油黄金账户</span
          >
        </div>
    <!-- <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">{{
            $t("确认转入黄金原油账户")
          }}</span>
        </div> -->
    <!-- <van-button
          class="but"
          type="primary"
          style="margin-top: 1.04rem; margin-bottom: 1.04rem"
          @click="tosubmit"
          >{{ $t("确认") }}</van-button
        >
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="form-block">
          <mt-field
            label="可转金额"
            placeholder="可转金额"
            :label="$t('可转金额')"
            :placeholder="$t('可转金额')"
            type="text"
            disabled
            v-model="myMoney[1].availableBalance"
          ></mt-field>
        </div>
        <div class="form-block">
        </div> -->
    <!-- <div class="form-block">
          <mt-field
            label="转账金额"
            :label="$t('转账金额')"
            v-model="form.account2"
            placeholder="请输入转账金额"
            :placeholder="$t('请输入转账金额')"
            type="text"
          >
            <span @click="selectAll2">全部</span>
            <span @click="selectAll2">{{ $t("hj60") }}</span>
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit"
            >确认转入沙特账户</span
          >
        </div>
      </mt-tab-container-item>
      <!-- <mt-tab-container-item id="3">
        </div> -->
    <!-- <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">{{
            $t("确认转入沙特账户")
          }}</span>
        </div> -->
    <!-- <van-button
          class="but"
          type="primary"
          style="margin-top: 1.04rem; margin-bottom: 1.04rem"
          @click="tosubmit"
          >{{ $t("确认") }}</van-button
        >
      </mt-tab-container-item> -->
    <!-- <mt-tab-container-item id="3">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled v-model="this.$store.state.userInfo.enableAmt">
          </mt-field>
@@ -83,11 +105,11 @@
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认转入石油黄金账户</span>
          <span class="text-center btnok loginout" @click="tosubmit">确认转入黄金原油账户</span>
        </div>
      </mt-tab-container-item>
     -->
      <!-- <mt-tab-container-item id="4">
    <!-- <mt-tab-container-item id="4">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled
            v-model="this.$store.state.userInfo.enableFuturesAmt"></mt-field>
@@ -102,7 +124,84 @@
        </div>
      </mt-tab-container-item>
       -->
    </mt-tab-container>
    <!-- </mt-tab-container> -->
    <div class="exchange-wrapper">
      <van-nav-bar
        :title="$t('账户资金互转')"
        left-arrow
        @click-left="$router.go(-1)"
      />
      <van-form @submit="onSubmit">
        <!-- 从货币 -->
        <van-cell-group>
          <van-field
            v-model="fromAmount"
            type="number"
            :label="$t('转出金额')"
            :placeholder="$t('请输入转出金额')"
            :rules="[{ required: true, message: $t('请输入转出金额') }]"
          >
            <template #button>
              <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item
                  v-model="fromCurrency"
                  :options="currencyOptions"
                  disabled
                />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            v-model="myMoney[my_availableBalance].availableBalance"
            :label="$t('可用余额')"
            disabled
          />
        </van-cell-group>
        <!-- 兑换箭头 -->
        <div class="exchange-icon">
          <van-icon name="exchange" size="24" @click="switchCurrency" />
        </div>
        <!-- 到货币 -->
        <van-cell-group>
          <van-field
            v-model="toAmount"
            type="number"
            :label="$t('转入金额')"
            :placeholder="$t('转入金额')"
            disabled
          >
            <template #button>
              <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item
                  v-model="toCurrency"
                  :options="currencyOptions"
                  disabled
                />
              </van-dropdown-menu>
            </template>
          </van-field>
        </van-cell-group>
        <!-- 汇率显示 -->
        <!-- <van-cell title="汇率" :value="exchangeRate" /> -->
        <!-- 提交按钮 -->
        <div style="margin: 16px;">
          <van-button
            class="but"
            type="primary"
            style="margin-top: 1.04rem; margin-bottom: 1.04rem"
            native-type="submit"
          >
            {{ $t("确认兑换") }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
@@ -127,11 +226,38 @@
      userInfo: {
        realName: ""
      },
      myMoney: ""
      myMoney: "",
      my_availableBalance: 0,
      fromCurrency: "USD",
      toCurrency: "ST",
      fromAmount: "",
      toAmount: "",
      fromBalance: "1000.00",
      exchangeRate: "1 USD = 100 ST",
      currencyOptions: [
        { text: "USD", value: "USD" },
        { text: "ST", value: "ST" }
        // { text: "欧元(EUR)", value: "EUR" },
        // { text: "英镑(GBP)", value: "GBP" }
      ]
    };
  },
  watch: {},
  computed: {},
  watch: {
    fromAmount() {
      this.calculateAmount();
    },
    fromCurrency() {
      this.calculateAmount();
    },
    toCurrency() {
      this.calculateAmount();
    }
  },
  computed: {
    toCurrencyDisabled() {
      return this.currencyOptions.length <= 1;
    }
  },
  created() {
    this.getProductSetting();
    this.getMoney();
@@ -143,6 +269,45 @@
    this.getUserInfo();
  },
  methods: {
    onSubmit() {
      // 处理兑换逻辑
      console.log(
        "提交兑换:",
        this.fromAmount,
        this.fromCurrency,
        "->",
        this.toAmount,
        this.toCurrency
      );
      this.tosubmit();
    },
    switchCurrency() {
      // 切换货币方向
      const temp = this.fromCurrency;
      this.fromCurrency = this.toCurrency;
      this.toCurrency = temp;
      if (this.fromCurrency === "ST") {
        this.my_availableBalance = 0;
      } else if (this.fromCurrency === "USD" || this.fromCurrency === "USD") {
        this.my_availableBalance = 1;
      }
      console.log(this.myMoney[this.my_availableBalance].availableBalance);
      this.calculateAmount();
    },
    calculateAmount() {
      // 这里应该调用汇率API计算金额
      // 示例简单计算
      if (this.fromAmount && this.fromCurrency && this.toCurrency) {
        const rate =
          this.fromCurrency === "USD" && this.toCurrency === "ST" ? 100 : 1;
        this.toAmount = (this.fromAmount * rate).toFixed(2);
      }
    },
    onClickLeft() {
      this.$router.push("/user");
    },
    async getProductSetting() {
      let data = await api.getProductSetting();
      if (data.status === 0) {
@@ -173,18 +338,11 @@
    async tosubmit() {
      // 融资转指数
      let opt = {
        amt:
          this.selected === "1"
            ? this.form.account1
            : this.selected === "2"
            ? this.form.account2
            : this.selected === "3"
            ? this.form.account3
            : this.form.account4,
        amt: this.fromAmount,
        // type: this.selected, // 1 融资转指数 2 指数转融资
        userId: this.$store.state.userInfo.id, // 用户id
        disbursementAccount: this.selected === "1" ? "ST" : "USDT", //  划出账户
        depositAccount: this.selected === "2" ? "ST" : "USDT" // 划入账户
        disbursementAccount: this.fromCurrency, //  划出账户
        depositAccount: this.toCurrency // 划入账户
      };
      let data = await api.transfer(opt);
      if (data.status === 0) {
@@ -207,6 +365,11 @@
      let data = await api.getMoney();
      if (data.status === 0) {
        this.myMoney = data.data;
        if (this.fromCurrency === "ST") {
          this.my_availableBalance = 0;
        } else if (this.fromCurrency === "USD") {
          this.my_availableBalance = 1;
        }
      } else {
        Toast(data.msg);
      }
@@ -215,12 +378,32 @@
};
</script>
<style lang="less" scoped>
.payclass {
  width: 150px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid #e5e8ed;
  text-align: center;
  line-height: 40px;
}
.but {
  width: 95%;
  color: #ffffff;
  background-color: #1989fa;
  border-radius: 8px;
  height: 66px;
  font-size: 22px;
  margin-left: 2.5%;
}
.is-selected .mint-tab-item-label:hover {
  text-decoration: none;
}
.wrapper /deep/ .mint-tab-item-label {
  font-size: 0.264rem;
.wrapper /deep/ .van-nav-bar__title {
  font-size: 0.4rem !important;
}
.wrapper /deep/ .van-cell {
  font-size: 0.31rem !important;
}
.mint-navbar .mint-tab-item.is-selected {
@@ -237,9 +420,28 @@
  /deep/ .mint-cell .mint-cell-text {
    color: #000 !important;
  }
  /deep/ .mint-cell-wrapper {
    line-height: 1 !important;
  }
}
.prompt {
  padding: 0.3rem 0 0.2rem 0.7rem;
}
.exchange-wrapper {
  padding-bottom: 20px;
}
.exchange-icon {
  display: flex;
  justify-content: center;
  margin: 15px 0;
  color: #1989fa;
}
.van-dropdown-menu {
  width: 120px;
  height: 44px;
}
</style>