first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/index.vue

@@ -1,124 +1,240 @@
<template>
    <div class="pledgeLoan">
        <assets-head :title="$t('质押借币')" :backFunc="() => $router.push('/fm-home')">
            <div class="custom" @click="$router.push('/pledgeLoanOrder')">
                <img :src="require(`@/assets/theme/${theme}/image/order.png`)" alt="record-img" class="w-32 h-35 pr-30 " />
  <div class="pledgeLoan">
    <assets-head
      :title="$t('质押借币')"
      :backFunc="() => $router.push('/fm-home')"
    >
      <div class="custom" @click="$router.push('/pledgeLoanOrder')">
        <img
          :src="require(`@/assets/theme/${theme}/image/order.png`)"
          alt="record-img"
          class="w-32 h-35 pr-30"
        />
      </div>
    </assets-head>
    <div class="contentBox">
      <div class="imgBox">
        <img src="../../assets/image/pledgeLoanBg.png" alt="" />
      </div>
      <div class="content mt-266 box-shad tabBackground">
        <div class="mb-38">
          <div class="font-32 textColor">{{ $t("借款") }}</div>
          <div
            class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor"
          >
            <input
              class="h-full pl-22 inputBackground1"
              type="number"
              v-model="loanAmount"
              @input="changeAmount"
              :placeholder="$t('借款数量') + `>=${loanAmountMin}`"
            />
            <div
              class="right w-252 h-62 flex items-center pl-26 box-border relative"
              @click="openSelect"
            >
              <img
                src="../../assets/image/usdtIcon.png"
                class="w-48 h-48"
                alt=""
              />
              <span class="ml-14 mr-30">USDT</span>
              <img
                src="../../assets/image/icon-more.png"
                alt="logo"
                class="w-24 h-24"
              />
              <div
                class="slectBox"
                v-show="isShow"
                @click.stop="isShow = false"
              >
                <div class="h-64 lh-64 border-b-color">Select</div>
                <div class="flex items-center h-80">
                  <img
                    src="../../assets/image/usdtIcon.png"
                    class="w-40 h-40"
                    alt=""
                  />
                  <span class="ml-14 font-24 text-grey">USDT</span>
                </div>
              </div>
            </div>
        </assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/pledgeLoanBg.png" alt="" /></div>
            <div class="content mt-266 box-shad tabBackground">
                <div class="mb-38">
                    <div class="font-32 textColor">{{ $t('借款') }}</div>
                    <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor">
                        <input class="h-full pl-22 inputBackground1" type="number" v-model="loanAmount"
                            @input="changeAmount" :placeholder="$t('借款数量') + `>=${loanAmountMin}`">
                        <div class="right w-252 h-62 flex items-center pl-26 box-border relative" @click="openSelect">
                            <img src="../../assets/image/usdtIcon.png" class="w-48 h-48" alt="">
                            <span class="ml-14 mr-30">USDT</span>
                            <img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                            <div class="slectBox" v-show="isShow" @click.stop="isShow = false;">
                                <div class="h-64 lh-64 border-b-color">Select</div>
                                <div class="flex items-center h-80">
                                    <img src="../../assets/image/usdtIcon.png" class="w-40 h-40" alt="">
                                    <span class="ml-14 font-24 text-grey">USDT</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#E35461;">{{ errorMsg ? errorMsg : ''
                    }}
                    </div>
                    <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34" @click="getLoanParam">
                        {{ $t('质押币') }}</div>
                </div>
            </div>
            <div class="content mt-38 tabBackground">
                <div class="font-32 textColor">{{ $t('质押') }}</div>
                <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor relative">
                    <input class="h-full pl-22 inputBackground1" type="number" v-model="pledgeAmount" @input="changeAmount"
                        :placeholder="$t('请输入质押数量')">
                    <div class="right w-252 h-62 flex items-center pl-26 box-border" @click="openSelectBorrow">
                        <img :src="`${HOST_URL}/wap/symbol/${pledgeCurrency.toLowerCase()}.png`" class="w-48 h-48" alt="" />
                        <span class="ml-14 mr-30 w-90">{{ pledgeCurrency.toUpperCase() }}</span>
                        <img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                    </div>
                    <div class="slectBox slectBoxMax" v-show="isShow1">
                        <div>
                            <div class="h-64 lh-64 border-b-color">Select</div>
                            <div class="flex items-center border-b-color justify-between" v-for="item in walletList"
                                :key="item.symbol" @click.stop="selectCoin(item)">
                                <div class="flex items-center">
                                    <img :src="`${HOST_URL}/wap/symbol/${item.symbol.toLowerCase()}.png`" class="w-40 h-40"
                                        alt="">
                                    <span class="ml-14 font-24 text-grey">{{ item.symbol.toUpperCase() }}</span>
                                </div>
                                <div class="py-10">
                                    <div class="text-grey text-right">{{ $t('总资产') }}:{{ item.volume }}</div>
                                    <div class="text-grey text-right">{{ $t('可用') }}:{{ item.usable }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center font-24 mt-16 text-grey">
                    {{ $t('可用余额') }}：<span class="mr-14">{{ volume || '--' }}&nbsp;{{ pledgeCurrency.toUpperCase()
                    }}</span><img @click="$router.push('/exchange/exchangePage')"
                        src="../../assets/image/exchangeIcon.png" class="w-28 h-28" alt="">
                </div>
                <div class="mt-48 font-32 textColor">{{ $t('借币期限') }}</div>
                <div class="mt-20 font-24 text-grey">{{ $t('提前还款不罚息') }}</div>
                <div class="flex items-center h-96 mt-20 inputBox inputBackground1 textColor" @click="showTerm = !showTerm">
                    <div class="pl-22 h-full inputBackground1 selectedCon">{{ loanCycle + $t('天') }}</div>
                    <div class="iconBox mr-34"><img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                    </div>
                </div>
                <p class="mt-22 text-grey font-24 flex justify-between">
                    <span>{{ $t('强平价格') }}（USDT/{{ pledgeCurrency.toUpperCase() }}）</span>
                    <span class="textColor">{{ closeOut || '--' }}</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{ $t('质押率') }}</span>
                    <span class="textColor">{{ pledgeRate !== '' ? (pledgeRate * 10000 / 100).toFixed(2) : '--' }}%</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{ $t('小时利率') }}</span>
                    <span class="textColor">{{ hourlyRate || '--' }}</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{ $t('日利率') }}</span>
                    <span class="textColor">{{ isNaN(hourlyRate) ? '--' : hourlyRate * 24 }}</span>
                </p>
                <div class="queIcon mt-8" @click="showMask = true"><img src="../../assets/image/skyQuestion.png"
                        class="w-24 h-24" alt=""></div>
                <p class="mt-48 font-32 text-grey flex justify-between">
                    <span>{{ $t('总利息') }}</span>
                    <span class="textColor">{{ interestAmount || '--' }}&nbsp;USDT</span>
                </p>
                <p class="mt-48 font-32 text-grey flex justify-between">
                    <span>{{ $t('预计还款') }}</span>
                    <span class="textColor">{{ debtAmount || '--' }}&nbsp;USDT</span>
                </p>
                <div class="mt-78 h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-48" @click="addOrder">
                    {{ $t('借币') }}</div>
            </div>
          </div>
          <div
            class="errorInfo font-24 h-28 lh-28 mt-20 mb-30"
            style="color: #e35461"
          >
            {{ errorMsg ? errorMsg : "" }}
          </div>
          <div
            class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34"
            @click="getLoanParam"
          >
            {{ $t("质押币") }}
          </div>
        </div>
        <van-action-sheet v-model="showTerm" :title="$t('选择期限')">
            <div class="pb-180">
                <van-radio-group v-model="radio" @change="changeDay">
                    <van-cell-group>
                        <van-cell :title="item + $t('天')" clickable @click="radio = index + 1"
                            v-for="(item, index) in dayList" :key="index">
                            <template #right-icon>
                                <van-radio :name="index + 1" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
      </div>
      <div class="content mt-38 tabBackground">
        <div class="font-32 textColor">{{ $t("质押") }}</div>
        <div
          class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor relative"
        >
          <input
            class="h-full pl-22 inputBackground1"
            type="number"
            v-model="pledgeAmount"
            @input="changeAmount"
            :placeholder="$t('请输入质押数量')"
          />
          <div
            class="right w-252 h-62 flex items-center pl-26 box-border"
            @click="openSelectBorrow"
          >
            <img
              :src="`${HOST_URL}/wap/symbol/${pledgeCurrency.toLowerCase()}.png`"
              class="w-48 h-48"
              alt=""
            />
            <span class="ml-14 mr-30 w-90">{{
              pledgeCurrency.toUpperCase()
            }}</span>
            <img
              src="../../assets/image/icon-more.png"
              alt="logo"
              class="w-24 h-24"
            />
          </div>
          <div class="slectBox slectBoxMax" v-show="isShow1">
            <div>
              <div class="h-64 lh-64 border-b-color">Select</div>
              <div
                class="flex items-center border-b-color justify-between"
                v-for="item in walletList"
                :key="item.symbol"
                @click.stop="selectCoin(item)"
              >
                <div class="flex items-center">
                  <img
                    :src="`${HOST_URL}/wap/symbol/${item.symbol.toLowerCase()}.png`"
                    class="w-40 h-40"
                    alt=""
                  />
                  <span class="ml-14 font-24 text-grey">{{
                    item.symbol.toUpperCase()
                  }}</span>
                </div>
                <div class="py-10">
                  <div class="text-grey text-right">
                    {{ $t("总资产") }}:{{ item.volume }}
                  </div>
                  <div class="text-grey text-right">
                    {{ $t("可用") }}:{{ item.usable }}
                  </div>
                </div>
              </div>
            </div>
        </van-action-sheet>
        <rule-mask v-model="showMask"></rule-mask>
          </div>
        </div>
        <div class="flex items-center font-24 mt-16 text-grey">
          {{ $t("可用余额") }}：<span class="mr-14"
            >{{ volume || "--" }}&nbsp;{{ pledgeCurrency.toUpperCase() }}</span
          ><img
            @click="$router.push('/exchange/exchangePage')"
            src="../../assets/image/exchangeIcon.png"
            class="w-28 h-28"
            alt=""
          />
        </div>
        <div class="mt-48 font-32 textColor">{{ $t("借币期限") }}</div>
        <div class="mt-20 font-24 text-grey">{{ $t("提前还款不罚息") }}</div>
        <div
          class="flex items-center h-96 mt-20 inputBox inputBackground1 textColor"
          @click="showTerm = !showTerm"
        >
          <div class="pl-22 h-full inputBackground1 selectedCon">
            {{ loanCycle + $t("天") }}
          </div>
          <div class="iconBox mr-34">
            <img
              src="../../assets/image/icon-more.png"
              alt="logo"
              class="w-24 h-24"
            />
          </div>
        </div>
        <p class="mt-22 text-grey font-24 flex justify-between">
          <span
            >{{ $t("强平价格") }}（USDT/{{
              pledgeCurrency.toUpperCase()
            }}）</span
          >
          <span class="textColor">{{ closeOut || "--" }}</span>
        </p>
        <p class="mt-24 text-grey font-24 flex justify-between">
          <span>{{ $t("质押率") }}</span>
          <span class="textColor"
            >{{
              pledgeRate !== ""
                ? ((pledgeRate * 10000) / 100).toFixed(2)
                : "--"
            }}%</span
          >
        </p>
        <p class="mt-24 text-grey font-24 flex justify-between">
          <span>{{ $t("小时利率") }}</span>
          <span class="textColor">{{ hourlyRate || "--" }}</span>
        </p>
        <p class="mt-24 text-grey font-24 flex justify-between">
          <span>{{ $t("日利率") }}</span>
          <span class="textColor">{{
            isNaN(hourlyRate) ? "--" : hourlyRate * 24
          }}</span>
        </p>
        <div class="queIcon mt-8" @click="showMask = true">
          <img
            src="../../assets/image/skyQuestion.png"
            class="w-24 h-24"
            alt=""
          />
        </div>
        <p class="mt-48 font-32 text-grey flex justify-between">
          <span>{{ $t("总利息") }}</span>
          <span class="textColor">{{ interestAmount || "--" }}&nbsp;USDT</span>
        </p>
        <p class="mt-48 font-32 text-grey flex justify-between">
          <span>{{ $t("预计还款") }}</span>
          <span class="textColor">{{ debtAmount || "--" }}&nbsp;USDT</span>
        </p>
        <div
          class="mt-78 h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-48"
          @click="addOrder"
        >
          {{ $t("借币") }}
        </div>
      </div>
    </div>
    <van-action-sheet v-model="showTerm" :title="$t('选择期限')">
      <div class="pb-180">
        <van-radio-group v-model="radio" @change="changeDay">
          <van-cell-group>
            <van-cell
              :title="item + $t('天')"
              clickable
              @click="radio = index + 1"
              v-for="(item, index) in dayList"
              :key="index"
            >
              <template #right-icon>
                <van-radio :name="index + 1" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </van-action-sheet>
    <rule-mask v-model="showMask"></rule-mask>
  </div>
</template>

<script>
@@ -126,317 +242,326 @@
import { ActionSheet, RadioGroup, Radio, Cell, CellGroup } from "vant";
import Axios from "@/API/pledgeLoan.js";
import { _getAllWallet } from "@/API/fund.api";
import { HOST_URL } from '@/config'
import { debounce } from '@/utils/utis'
import { HOST_URL } from "@/config";
import { debounce } from "@/utils/utis";
import ruleMask from "./ruleMask.vue";
import { mapGetters } from 'vuex';
import { mapGetters } from "vuex";
export default {
    props: {

  props: {},
  components: {
    assetsHead,
    [ActionSheet.name]: ActionSheet,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    ruleMask,
  },
  data() {
    return {
      HOST_URL,
      showMask: false,
      errorMsg: "",
      radio: 1,
      isShow: false,
      isShow1: false,
      showTerm: false,
      loanCycle: "",
      walletList: [],
      dayList: [],
      hourlyRate: "", //时利率
      loanAmountMin: "", //借款最小值
      loanAmount: "", //借款金额
      pledgeAmount: "", //质押金额
      pledgeCurrency: "", //质押币种
      volume: "", //可用余额
      pledgeRate: "", //质押率
      closeOut: "", //强平价格
      debtAmount: "", //预计还款
      interestAmount: "--", //总利息
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters({
      theme: "home/theme",
    }),
  },
  methods: {
    init() {
      this.getLoanConfig();
      this.getList();
    },
    components: {
        assetsHead,
        [ActionSheet.name]: ActionSheet,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        ruleMask
    openSelect() {
      this.isShow = !this.isShow;
    },
    data() {
        return {
            HOST_URL,
            showMask: false,
            errorMsg: '',
            radio: 1,
            isShow: false,
            isShow1: false,
            showTerm: false,
            loanCycle: '',
            walletList: [],
            dayList: [],
            hourlyRate: '', //时利率
            loanAmountMin: '',//借款最小值
            loanAmount: '', //借款金额
            pledgeAmount: '', //质押金额
            pledgeCurrency: '', //质押币种
            volume: '', //可用余额
            pledgeRate: '', //质押率 
            closeOut: '', //强平价格
            debtAmount: '',//预计还款
            interestAmount: '--',//总利息
    openSelectBorrow() {
      this.isShow1 = !this.isShow1;
    },
    selectCoin(item) {
      this.pledgeCurrency = item.symbol;
      this.volume = item.usable;
      this.isShow1 = false;
    },
    changeDay(index) {
      this.loanCycle = this.dayList[index * 1 - 1];
      this.getLoanParam();
    },
    changeAmount() {
      if (this.pledgeAmount >= this.volume) {
        this.pledgeAmount = this.volume;
      }
      this.debounceFn();
    },
    getLoanConfig() {
      Axios.getLoanConfig().then((res) => {
        this.dayList = res.data.loanCycle;
        this.loanCycle = this.dayList[0];
        this.hourlyRate = res.data.hourlyRate;
        this.loanAmountMin = res.data.loanAmountMin;
      });
    },
    compare(p, type) {
      //这是比较函数
      return function (m, n) {
        var a = m[p];
        var b = n[p];
        if (a == b) {
          return;
        }
    },
    mounted() {
        this.init()
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    methods: {
        init() {
            this.getLoanConfig()
            this.getList()
        },
        openSelect() {
            this.isShow = !this.isShow
        },
        openSelectBorrow() {
            this.isShow1 = !this.isShow1
        },
        selectCoin(item) {
            this.pledgeCurrency = item.symbol
            this.volume = item.usable
            this.isShow1 = false
        },
        changeDay(index) {
            this.loanCycle = this.dayList[index * 1 - 1]
            this.getLoanParam()
        },
        changeAmount() {
            if (this.pledgeAmount >= this.volume) {
                this.pledgeAmount = this.volume
            }
            this.debounceFn()
        },
        getLoanConfig() {
            Axios.getLoanConfig().then(res => {
                this.dayList = res.data.loanCycle
                this.loanCycle = this.dayList[0]
                this.hourlyRate = res.data.hourlyRate
                this.loanAmountMin = res.data.loanAmountMin
            })
        },
        compare(p, type) { //这是比较函数
            return function (m, n) {
                var a = m[p];
                var b = n[p];
                if (a == b) {
                    return
                }
                if (type == 'up') {
                    return b - a; //升序
                } else if (type == 'down') {
                    return a - b; //降序
                } else {
                    return a - b;
                }
            }
        },
        getList() {
            _getAllWallet().then((res) => {
                let walletList = res.extends.filter(item => {
                    return item.symbol.toLowerCase() != 'usdt'
                });
                this.walletList = [...walletList].sort(this.compare("usdt", 'up'))
                let initObj = this.walletList.find(item => {
                    return item.symbol.toLowerCase() == 'eth'
                })
                this.volume = initObj.usable
                this.pledgeCurrency = initObj.symbol
            });
        },
        debounceFn: debounce(function () {
            this.getLoanParam()
        }, 500),
        getLoanParam() {
            this.errorMsg = ''
            if (this.loanAmount == '') {
                this.$toast(this.$t('请输入借款数量'))
                return false
            }
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            if (this.loanAmount * 1 < this.loanAmountMin * 1) {
                this.$toast(this.$t('最小借款数量为', { 'mount': this.loanAmountMin }))
                return false;
            }
            Axios.getLoanParam({
                loanAmount: this.loanAmount,
                pledgeAmount: this.pledgeAmount,
                pledgeCurrency: this.pledgeCurrency,
                loanCycle: this.loanCycle
            }).then(res => {
                this.closeOut = res.data.closeOut
                this.pledgeRate = res.data.pledgeRate
                this.debtAmount = res.data.debtAmount
                this.interestAmount = res.data.interestAmount
            }).catch(error => {
                if (error.code == 10) {
                    this.loanAmount = ''
                    this.pledgeAmount = ''
                    this.closeOut = ''
                    this.pledgeRate = ''
                    this.interestAmount = ''
                    this.debtAmount = ''
                    this.errorMsg = this.$t('质押率过高，质押金额不得低于:') + error.msg
                } else if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        },
        addOrder() {
            if (this.loanAmount == '') {
                this.$toast(this.$t('请输入借款数量'))
                return false
            }
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            if (this.loanAmount * 1 < this.loanAmountMin * 1) {
                this.$toast(this.$t('最小借款数量为', { 'mount': this.loanAmountMin }))
                return false;
            }
            Axios.addOrder({
                loanAmount: this.loanAmount,
                pledgeAmount: this.pledgeAmount,
                pledgeCurrency: this.pledgeCurrency,
                loanCycle: this.loanCycle
            }).then(res => {
                this.loanAmount = ''
                this.pledgeAmount = ''
                this.closeOut = ''
                this.pledgeRate = ''
                this.interestAmount = ''
                this.debtAmount = ''
                this.$toast(this.$t('借贷数量已发放,请至现货账号查看'));
                this.getList();
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        if (type == "up") {
          return b - a; //升序
        } else if (type == "down") {
          return a - b; //降序
        } else {
          return a - b;
        }
    }
}
      };
    },
    getList() {
      _getAllWallet().then((res) => {
        let walletList = res.extends.filter((item) => {
          return item.symbol.toLowerCase() != "usdt";
        });
        this.walletList = [...walletList].sort(this.compare("usdt", "up"));
        let initObj = this.walletList.find((item) => {
          return item.symbol.toLowerCase() == "eth";
        });
        this.volume = initObj.usable;
        this.pledgeCurrency = initObj.symbol;
      });
    },
    debounceFn: debounce(function () {
      this.getLoanParam();
    }, 500),
    getLoanParam() {
      this.errorMsg = "";
      if (this.loanAmount == "") {
        this.$toast(this.$t("请输入借款数量"));
        return false;
      }
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
      }
      if (this.loanAmount * 1 < this.loanAmountMin * 1) {
        this.$toast(this.$t("最小借款数量为", { mount: this.loanAmountMin }));
        return false;
      }
      Axios.getLoanParam({
        loanAmount: this.loanAmount,
        pledgeAmount: this.pledgeAmount,
        pledgeCurrency: this.pledgeCurrency,
        loanCycle: this.loanCycle,
      })
        .then((res) => {
          this.closeOut = res.data.closeOut;
          this.pledgeRate = res.data.pledgeRate;
          this.debtAmount = res.data.debtAmount;
          this.interestAmount = res.data.interestAmount;
        })
        .catch((error) => {
          if (error.code == 10) {
            this.loanAmount = "";
            this.pledgeAmount = "";
            this.closeOut = "";
            this.pledgeRate = "";
            this.interestAmount = "";
            this.debtAmount = "";
            this.errorMsg =
              this.$t("质押率过高，质押金额不得低于:") + error.msg;
          } else if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    addOrder() {
      if (this.loanAmount == "") {
        this.$toast(this.$t("请输入借款数量"));
        return false;
      }
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
      }
      if (this.loanAmount * 1 < this.loanAmountMin * 1) {
        this.$toast(this.$t("最小借款数量为", { mount: this.loanAmountMin }));
        return false;
      }
      Axios.addOrder({
        loanAmount: this.loanAmount,
        pledgeAmount: this.pledgeAmount,
        pledgeCurrency: this.pledgeCurrency,
        loanCycle: this.loanCycle,
      })
        .then((res) => {
          this.loanAmount = "";
          this.pledgeAmount = "";
          this.closeOut = "";
          this.pledgeRate = "";
          this.interestAmount = "";
          this.debtAmount = "";
          this.$toast(this.$t("借贷数量已发放,请至现货账号查看"));
          this.getList();
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pledgeLoan {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;

    .van-popup {
        @include themify() {
            background: themed("cont_background");
        }
  .van-popup {
    @include themify() {
      background: themed("cont_background");
    }
  }

  .van-action-sheet__header {
    @include themify() {
      color: themed("text_color");
    }
  }

  .van-cell {
    @include themify() {
      background: themed("cont_background");
    }

    .van-action-sheet__header {
        @include themify() {
            color: themed("text_color");
        }
    @include themify() {
      color: themed("text_color");
    }

    .van-cell {
        @include themify() {
            background: themed("cont_background");
        }
    font-size: 32px;
  }

        @include themify() {
            color: themed("text_color");
        }

        font-size: 32px;
  .van-cell-group {
    @include themify() {
      background: themed("cont_background");
    }

    .van-cell-group {
        @include themify() {
            background: themed("cont_background");
        }
    }
  }
}

.contentBox {
    padding: 0 32px;
    position: relative;
    overflow: auto;
  padding: 0 32px;
  position: relative;
  overflow: auto;
}

.imgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;

    img {
        width: 100%;
        height: 100%;
    }
  img {
    width: 100%;
    height: 100%;
  }
}

.content {
    border-radius: 8px;
    padding: 36px 30px 36px 34px;
    position: relative;
  border-radius: 8px;
  padding: 36px 30px 36px 34px;
  position: relative;

    .inputBox {
        .selectedCon {
            flex: 1;
            display: flex;
            align-items: center;
        }

        input {
            flex: 1;
            border: none;
        }

        .right {
            border-left: 1px solid #B8BCC5;
        }
  .inputBox {
    .selectedCon {
      flex: 1;
      display: flex;
      align-items: center;
    }

    input {
      flex: 1;
      border: none;
    }

    .right {
      border-left: 1px solid #b8bcc5;
    }
  }
}

.slectBox {
    position: absolute;
    left: 0;
    top: 114px;
    width: 100%;
  position: absolute;
  left: 0;
  top: 114px;
  width: 100%;

    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }

    border-radius: 4px;
    padding: 0px 20px 76px 20px;
    box-sizing: border-box;
  border-radius: 4px;
  padding: 0px 20px 76px 20px;
  box-sizing: border-box;

    @include themify() {
        border: 1px solid themed("line_color");
    }
  @include themify() {
    border: 1px solid themed("line_color");
  }

    z-index: 2;
  z-index: 2;

    &.slectBoxMax {
        max-height: 574px;
        overflow-y: auto;
    }
  &.slectBoxMax {
    max-height: 574px;
    overflow-y: auto;
  }
}

.item {
    height: 98px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;

    @include themify() {
        color: themed("text_color");
    }
  @include themify() {
    color: themed("text_color");
  }
}

.custom {
    width: 44px;
    height: 44px;
  width: 44px;
  height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>