1

PC-20250623MANY\Administrator

2025-08-16 832a37044afeea095d43535bcec6d2e71c4d2409

 src/views/account/components/Trasferire.vue

@@ -1,229 +1,285 @@
<template>
   <el-dialog :title="$t('劃轉')" :visible.sync="dialogVisible" width="720px" :before-close="onClose">
      <el-form ref="withdrawform" :model="form" label-width="auto" :rules="rules">
         <el-form-item :label="$t('从')" prop="fromType">
            <div class="flex-center">
               <el-select @change="getExchangeRate" v-model="form.fromType" :placeholder="$t('請選擇')">
                  <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.name">
                  </el-option>
               </el-select>
               <el-input v-model.number="form.amt" @input="amtinput" type="number"></el-input>
               <el-button type="primary" style="margin-left: 10px" @click="form.amt = maxNum"
                  class="submit">{{ $t("最大") }}</el-button>
  <el-dialog
    :title="$t('劃轉')"
    :visible.sync="dialogVisible"
    width="720px"
    :before-close="onClose"
  >
    <el-form ref="withdrawform" :model="form" label-width="auto" :rules="rules">
      <el-form-item :label="$t('从')" prop="fromType">
        <div class="flex-center">
          <el-select
            @change="getExchangeRate"
            v-model="form.fromType"
            :placeholder="$t('請選擇')"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
          <el-input
            v-model.number="form.amt"
            @input="amtinput"
            type="number"
          ></el-input>
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="form.amt = maxNum"
            class="submit"
            >{{ $t("最大") }}</el-button
          >
        </div>
      </el-form-item>

            </div>
         </el-form-item>
      <el-form-item :label="$t('到')" prop="toType">
        <div class="flex-center">
          <el-select
            @change="getExchangeRate"
            v-model="form.toType"
            :placeholder="$t('請選擇')"
          >
            <el-option
              v-for="item in actions"
              :key="item.value"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
          <el-input v-model.number="price" disabled type="number"></el-input>
        </div>
      </el-form-item>

         <el-form-item :label="$t('到')" prop="toType">
            <div class="flex-center">
               <el-select @change="getExchangeRate" v-model="form.toType" :placeholder="$t('請選擇')">
                  <el-option v-for="item in actions" :key="item.value" :label="item.name" :value="item.name">
                  </el-option>
               </el-select>
               <el-input v-model.number="price" disabled type="number"></el-input>
            </div>
         </el-form-item>
      <el-form-item>
        <div class="ts">
          {{ $t("可用餘額") }}
          {{ maxNum }} {{ form.fromType }}
        </div>
        <div class="ts">
          {{ $t("汇率") }}
          1{{ form.fromType }} ≈ {{ rata }}{{ form.toType }}
        </div>
        <div class="ts">
          {{ $t("hj44") }}
          {{ handling_fee }}
        </div>
      </el-form-item>

         <el-form-item>
            <div class="ts">
               {{ $t("可用餘額") }}
               {{ maxNum }} {{form.fromType}}
            </div>
            <div class="ts">
               {{ $t("汇率") }}
               1{{ form.fromType }} ≈ {{rata}}{{form.toType}}
            </div>
            <div class="ts">
               {{ $t("hj44") }}
               {{handling_fee}}
            </div>
         </el-form-item>

         <el-form-item>
            <el-button @click="onClose">{{ $t("qx") }}</el-button>
            <el-button type="primary" @click="onSubmit" class="submit">
               {{ $t("hj161") }}
            </el-button>
         </el-form-item>
      </el-form>
   </el-dialog>
      <el-form-item>
        <el-button @click="onClose">{{ $t("qx") }}</el-button>
        <el-button type="primary" @click="onSubmit" class="submit">
          {{ $t("hj161") }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
   import * as api from "@/axios/api";
   export default {
      data() {
         return {
            form: {
               fromType: "US", //账户
               toType: "HK", //指定账户
               amt: "", //划转金额
            },
            handling_fee: "", //手续费
            rata: "", //汇率
            price: "", //划转后金额
            allMoney: "",
            moneylist:[],  //全部账户信息
            rules: {
               fromType: [{
                  required: true,
                  message: this.$t("請選擇"),
                  trigger: "change"
               }, ],
               toType: [{
                  required: true,
                  message: this.$t("請選擇"),
                  trigger: "change"
               }],
               bankId: [{
                  required: true,
                  message: this.$t("請選擇"),
                  trigger: "change"
               }, ],
               amt: [{
                  required: true,
                  message: this.$t("请输入")
               }],
            },
            options: [{
               name: "US",
               value: "USD"
            }, {
               name: "HK",
               value: "HKD"
            }, {
               name: "IN",
               value: "INR"
            }, {
               name: "TW",
               value: "TWD"
            }],
            actions: [{
               name: "US",
               value: "USD"
            }, {
               name: "HK",
               value: "HKD"
            }, {
               name: "IN",
               value: "INR"
            }, {
               name: "TW",
               value: "TWD"
            }],
            yhkactions: [],
         };
      },
      props: {
         dialogVisible: {
            type: Boolean,
            default: false,
         },
         //可用余额
         maxNum: {
            type: Number,
            default: 0,
         },
      },
      created() {
         this.getExchangeRate()
         this.getfee()
         this.getMoney()
      },
      methods: {
			
         async getMoney() {
            let data = await api.getMoney();
            if (data.status === 0) {
               this.moneylist = data.data
            }
         },
         amtinput(e) {
            this.price = e * this.rata
         },
         async getfee() {
            let data = await api.getfee();
            if (data.status == 0) {
               this.handling_fee = data.data.cValue
            }
         },
         async getExchangeRate() {
            // this.getMoney()
            // this.amtinput()
            let selectedName = this.form.fromType;
            let toselectedName = this.form.toType;
            if (selectedName == toselectedName) {
               this.rata = '1'
               return
            }
            let selectedItem = this.options.find(item => item.name === selectedName);
            let toselectedItem = this.actions.find(item => item.name === toselectedName);
				
            this.moneylist.forEach((item) => {
              if (item.symbolCode == selectedItem.value ) {
                this.maxNum = item.availableBalance;
              }
            });
				
            let data = await api.getRateInfo();
            data.data &&
               data.data.forEach((item) => {
                  if (item.currency == selectedItem.value && item.conversionCurrency == toselectedItem
                     .value) {
                     this.rata = item.rata;
                  }
               });
         },
         // 关闭弹窗
         onClose() {
            this.$emit("update:dialogVisible", false);
            this.$emit("onClose"); // 关闭弹窗时，通知父组件
         },
         // 提交
         onSubmit() {
            this.$refs["withdrawform"].validate(async (valid) => {
               if (valid) {
                  let data = await api.transfer(this.form);
                  if (data.status == 0) {
                     this.$message.success(this.$t("划转成功"));
                     this.onClose();
                  }
               } else {
                  console.log("outMoney err");
                  return false;
               }
            });
         },
      },
   };
import * as api from "@/axios/api";
export default {
  data() {
    return {
      form: {
        fromType: "US", //账户
        toType: "HK", //指定账户
        amt: "", //划转金额
      },
      handling_fee: "", //手续费
      rata: "", //汇率
      price: "", //划转后金额
      allMoney: "",
      moneylist: [], //全部账户信息
      rules: {
        fromType: [
          {
            required: true,
            message: this.$t("請選擇"),
            trigger: "change",
          },
        ],
        toType: [
          {
            required: true,
            message: this.$t("請選擇"),
            trigger: "change",
          },
        ],
        bankId: [
          {
            required: true,
            message: this.$t("請選擇"),
            trigger: "change",
          },
        ],
        amt: [
          {
            required: true,
            message: this.$t("请输入"),
          },
        ],
      },
      options: [
        {
          name: "US",
          value: "USD",
        },
        {
          name: "HK",
          value: "HKD",
        },
        {
          name: "IN",
          value: "INR",
        },
        {
          name: "TW",
          value: "TWD",
        },
      ],
      actions: [
        {
          name: "US",
          value: "USD",
        },
        {
          name: "HK",
          value: "HKD",
        },
        {
          name: "IN",
          value: "INR",
        },
        {
          name: "TW",
          value: "TWD",
        },
      ],
      yhkactions: [],
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    moneyData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    maxNum() {
      let max = 0;
      this.moneyData.forEach((i) => {
        if (i.accectType == this.form.fromType) max = i.availableBalance;
      });
      return max;
    },
  },
  created() {
    this.getExchangeRate();
    this.getfee();
    this.getMoney();
  },
  methods: {
    async getMoney() {
      let data = await api.getMoney();
      if (data.status === 0) {
        this.moneylist = data.data;
      }
    },
    amtinput(e) {
      this.price = e * this.rata;
    },
    async getfee() {
      let data = await api.getfee();
      if (data.status == 0) {
        this.handling_fee = data.data.cValue;
      }
    },
    async getExchangeRate() {
      // this.getMoney()
      // this.amtinput()
      let selectedName = this.form.fromType;
      let toselectedName = this.form.toType;
      if (selectedName == toselectedName) {
        this.rata = "1";
        return;
      }
      let selectedItem = this.options.find(
        (item) => item.name === selectedName
      );
      let toselectedItem = this.actions.find(
        (item) => item.name === toselectedName
      );

      let data = await api.getRateInfo();
      data.data &&
        data.data.forEach((item) => {
          if (
            item.currency == selectedItem.value &&
            item.conversionCurrency == toselectedItem.value
          ) {
            this.rata = item.rata;
          }
        });
    },
    // 关闭弹窗
    onClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit("onClose"); // 关闭弹窗时，通知父组件
    },
    // 提交
    onSubmit() {
      this.$refs["withdrawform"].validate(async (valid) => {
        if (valid) {
          let data = await api.transfer(this.form);
          if (data.status == 0) {
            this.$message.success(this.$t("划转成功"));
            this.onClose();
          }
        } else {
          console.log("outMoney err");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
   ::v-deep .el-input--suffix .el-input__inner {
      width: 280px;
   }
::v-deep .el-input--suffix .el-input__inner {
  width: 280px;
}

   ::v-deep .el-select-dropdown__list {
      display: flex;
      flex-direction: column;
   }
::v-deep .el-select-dropdown__list {
  display: flex;
  flex-direction: column;
}

   ::v-deep .el-radio__input.is-checked .el-radio__inner {
      border-color: #c4d600;
      background: #c4d600;
   }
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #c4d600;
  background: #c4d600;
}

   ::v-deep .el-radio__input.is-checked+.el-radio__label {
      color: #c4d600;
   }
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #c4d600;
}

   .submit {
      background-color: #c4d600 !important;
      border-color: #c4d600 !important;
   }
.submit {
  background-color: #c4d600 !important;
  border-color: #c4d600 !important;
}

   .ts {
      color: #dfb758;
      text-align: end;
   }
</style>
.ts {
  color: #dfb758;
  text-align: end;
}
</style>