1

admin

2026-01-21 faffbca10476b2267c9f05d518b4fa81952df101

 src/page/user/ransferIndex.vue

@@ -1,18 +1,26 @@
<template>
  <div>
  <div style="height: 100vh">
    <van-nav-bar
      :placeholder="true"
      :safe-area-inset-top="true"
      title="劃轉"
      :title="$t('劃轉')"
      left-arrow
      @click-left="onClickLeft"
    />
    >
      <template #right>
        <van-icon
          @click="$router.push('/transferindex-list')"
          name="orders-o"
          size="20"
        />
      </template>
    </van-nav-bar>
    <main>
      <div>
        <div class="main-header">
          <div class="main-li">
            <span class="li-left">從</span
            ><span class="li-center">馬股賬戶</span>
          <div class="main-li" @click="show = true">
            <span class="li-left">{{ $t("从") }}</span
            ><span class="li-center">{{ from.name }}</span>
            <div class="img-con">
              <img
                class="main-li-img"
@@ -21,16 +29,23 @@
              />
            </div>
          </div>
          <div class="main-img">
          <van-action-sheet
            v-model="show"
            :actions="actions"
            :cancel-text="$t('hj106')"
            close-on-click-action
            @select="fromSelect"
          />
          <div class="main-img" @click="zh">
            <img
              class="img"
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAjCAYAAAD17ghaAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADASURBVHgB7dZBCgMhDAXQONjuvaaXGHsJr+m+LbQjlEJbdUwxP7PwL1wIwgNNoqFGTj49Svu36Exp3/oU7tEFYmShgdlUa0ZwzgwF/IMYDuAiRAAchBigFyEK6EGIA/YQEEALAQPUEFBACQEHfCMsKeWFwABqwytH5QomYAIm4FAAe/Zp3b6+gZSyXKO7GE1AXjQR7zeghfh4hBqInypAI4pliERU+wAK0WxECMRuJ5RGdLViSUT3LJBCsIaRBOIJOvdIzG7h9ekAAAAASUVORK5CYII="
              alt="转换"
            />
          </div>
          <div class="main-li">
            <span class="li-left">到</span
            ><span class="li-center">美股賬戶</span>
          <div class="main-li" @click="toShow = true">
            <span class="li-left">{{ $t("到") }}</span
            ><span class="li-center">{{ to.name }}</span>
            <div class="img-con">
              <img
                class="main-li-img"
@@ -39,6 +54,13 @@
              />
            </div>
          </div>
          <van-action-sheet
            v-model="toShow"
            :actions="actions"
            :cancel-text="$t('hj106')"
            close-on-click-action
            @select="toSelect"
          />
        </div>
        <van-row style="margin-top: 15px; position: relative">
          <van-col span="12">
@@ -49,29 +71,30 @@
                color: rgb(140, 159, 173);
              "
            >
              輸入金額
              {{ $t("輸入金額") }}
            </div>
            <div
              class="van-cell van-field white-input"
              modelmodifiers="[object Object]"
            >
              <!----><!---->
              <div class="van-cell__value van-field__value">
                <div class="van-field__body">
                  <input
                    :value="formValue"
                    type="text"
                    inputmode="decimal"
                    id="van-field-47-input"
                    class="van-field__control"
                    placeholder="請選擇"
                  /><!----><!---->
                    :placeholder="$t('請選擇')"
                    @input="inputValue"
                  />
                  <div class="van-field__button" style="margin-right: 10px">
                    <span style="color: rgb(79, 82, 87)">MYR</span>
                    <span style="color: rgb(79, 82, 87)">{{
                      from.symbolCode
                    }}</span>
                  </div>
                </div>
                <!----><!---->
              </div>
              <!----><!---->
            </div>
          </van-col>
          <div class="huazhuan">
@@ -88,53 +111,147 @@
                color: rgb(140, 159, 173);
              "
            >
              轉換得到金額
              {{ $t("轉換得到金額") }}
            </div>
            <div class="van-cell van-field van-field--disabled white-input">
              <!----><!---->
              <div class="van-cell__value van-field__value">
                <div class="van-field__body">
                  <input
                    type="text"
                    id="van-field-48-input"
                    class="van-field__control"
                    disabled=""
                    placeholder="請選擇"
                    style="padding-left: 10px"
                  /><!----><!---->
                  <div class="van-field__control" style="padding-left: 10px">
                    {{ (formValue * rate).toFixed(2) }}
                  </div>
                  <div class="van-field__button" style="">
                    <span style="color: rgb(79, 82, 87)">USD</span>
                    <span style="color: rgb(79, 82, 87)">{{
                      to.symbolCode
                    }}</span>
                  </div>
                </div>
                <!----><!---->
              </div>
              <!----><!---->
            </div>
          </van-col>
        </van-row>

        <div
          style="color: rgb(5, 106, 239); text-align: right; font-size: 16px"
          @click="formValue = from.availableBalance"
          style="
            color: rgb(5, 106, 239);
            text-align: right;
            font-size: 16px;
            margin-top: 5px;
          "
        >
          最大
          {{ $t("最大") }}
        </div>
        <div class="balance">
          <div>可用餘額</div>
          <div class="balance-text">22799.0000 MYR</div>
          <div>{{ $t("可用餘額") }}</div>
          <div class="balance-text">
            {{ from.availableBalance || "0.0000" }} {{ from.symbolCode }}
          </div>
        </div>
      </div>
      <van-button type="primary" class="but">確認劃轉</van-button>
      <van-button type="primary" @click="transferIndex" class="but">{{
        $t("確認劃轉")
      }}</van-button>
    </main>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Notify } from "vant";
import { transfer } from "../../axios/api";

export default {
  created() {
    this.getMoneyData();
  },

  components: {},
  data() {
    return {};
    return {
      // 马股和美元的汇率
      exchangeRate: 4.59,
      // 划转的金额
      formValue: "",
      from: {},
      to: {},
      show: false,
      toShow: false,
      // 后端返回的数据列表比较多。在这里前端配置需要展示的
      filterActions: ["US", "MAS", "HK"],
      // 选择的列表
      actions: [],
      // 汇率
      rate: "",
    };
  },
  methods: {
    inputValue(e) {
      this.formValue = e.target.value;
    },
    async transferIndex() {
      const res = await transfer({
        fromType: this.from.accectType,
        toType: this.to.accectType,
        amt: this.formValue,
      });
      if (res.status === 0) {
        Notify({ type: "success", message: this.$t("划转成功") });
        setTimeout(() => {
          this.$router.push("/transferindex-list");
        }, 500);
      } else {
        Notify({ type: "warning", message: res.msg });
      }
    },
    zh() {
      const obj = { ...this.from };
      this.from = { ...this.to };
      this.to = { ...obj };
      this.formValue = "";
      this.geCurrencyRate();
    },
    fromSelect(e) {
      if (e.accectType === this.to.accectType) {
        return Notify({ type: "warning", message: this.$t("不能选择一样的") });
      }
      this.from = e;
      this.formValue = "";
      this.geCurrencyRate();
    },
    toSelect(e) {
      if (e.accectType === this.from.accectType) {
        return Notify({ type: "warning", message: this.$t("不能选择一样的") });
      }

      this.to = e;
      this.formValue = "";
      this.geCurrencyRate();
    },
    // 获取账号余额
    async getMoneyData() {
      let res = await api.getMoney();
      if (res.status === 0) {
        let array = res.data.filter(
          (item) => this.filterActions.indexOf(item.accectType) !== -1
        );
        array.map((item) => {
          item.name = this.$t(item.accectType);
        });
        this.actions = array;
      }
    },
    // 获取汇率
    async geCurrencyRate() {
      if (this.from.accectType && this.to.accectType) {
        let res = await api.currencyRate({
          fromType: this.from.accectType,
          toType: this.to.accectType,
        });
        if (res.status === 0) {
          this.rate = res.data;
        }
      }
    },
    onClickLeft() {
      this.$router.push("/user");
    },
@@ -247,7 +364,7 @@
    padding: 0;
    height: 60px;
    color: var(--van-field-input-text-color);
    line-height: inherit;
    line-height: 60px;
    text-align: left;
    background-color: transparent;
    border: 0;