first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/addPledge.vue

@@ -2,33 +2,63 @@
    <div class="addPledge">
        <assets-head :title="$t('新增质押')"></assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/addpledgeBg.png" alt="" /></div>
      <div class="imgBox">
        <img src="../../assets/image/addpledgeBg.png" alt="" />
      </div>
            <div class="px-32">
                <div class="content 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 relative">
                            <input class="h-full pl-22 inputBackground1" type="text" v-model="pledgeAmount"
                                :placeholder="$t('请输入质押数量')" @input="changeMount" />
            <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="text"
                v-model="pledgeAmount"
                :placeholder="$t('请输入质押数量')"
                @input="changeMount"
              />
                            <div class="right w-252 h-62 flex items-center pl-26 box-border">
                                <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="`${HOST_URL}/wap/symbol/${pledgeCurrency.toLowerCase()}.png`"
                  class="w-48 h-48"
                  alt=""
                />
                <span class="ml-14 mr-30 w-90">{{
                  pledgeCurrency.toUpperCase()
                }}</span>
                            </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="" />
              {{ $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="flex justify-between font-32 mt-48">
                            <div class="text-grey">{{ $t('质押后质押率') }}</div>
                            <div class="textColor">{{ pledgeRate !== '' ? (pledgeRate * 10000 / 100).toFixed(2) : '--' }}%
              <div class="text-grey">{{ $t("质押后质押率") }}</div>
              <div class="textColor">
                {{
                  pledgeRate !== ""
                    ? ((pledgeRate * 10000) / 100).toFixed(2)
                    : "--"
                }}%
                            </div>
                        </div>
                        <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96"
                            @click="getReplenishOrder">{{ $t('确认质押') }}</div>
            <div
              class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96"
              @click="getReplenishOrder"
            >
              {{ $t("确认质押") }}
            </div>
                    </div>
                </div>
            </div>
@@ -40,85 +70,92 @@
import assetsHead from "@/components/assets-head";
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";
export default {
    props: {

    },
  props: {},
    components: {
        assetsHead
    assetsHead,
    },
    data() {
        return {
            HOST_URL,
            walletList: [],
            id: '',
            pledgeAmount: '',
            pledgeRate: '',//质押率
            pledgeCurrency: '', //质押币种
            volume: '', //可用余额
        }
      id: "",
      pledgeAmount: "",
      pledgeRate: "", //质押率
      pledgeCurrency: "", //质押币种
      volume: "", //可用余额
    };
    },
    mounted() {
        this.id = this.$route.query.id
        this.pledgeCurrency = this.$route.query.pledgeCurrency
        this.getList()
    this.id = this.$route.query.id;
    this.pledgeCurrency = this.$route.query.pledgeCurrency;
    this.getList();
    },
    methods: {
        changeMount() {
            if (this.pledgeAmount >= this.volume) {
                this.pledgeAmount = this.volume
        this.pledgeAmount = this.volume;
            }

            this.debounceFn()

      this.debounceFn();
        },
        debounceFn: debounce(function () {
            this.getLoanParam()
      this.getLoanParam();
        }, 500),
        getLoanParam() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
            }
            Axios.getLoanParam({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).then(res => {
                this.pledgeRate = res.data.pledgeRate
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
        pledgeAmount: this.pledgeAmount,
            })
        .then((res) => {
          this.pledgeRate = res.data.pledgeRate;
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
        },
        getList() {
            _getAllWallet().then((res) => {
                this.walletList = res.extends;
                let initObj = this.walletList.find(item => {
                    return item.symbol.toLowerCase() == this.pledgeCurrency
                })
                this.volume = initObj.usable
        let initObj = this.walletList.find((item) => {
          return item.symbol.toLowerCase() == this.pledgeCurrency;
        });
        this.volume = initObj.usable;
            });
        },
        getReplenishOrder() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
            }
            Axios.replenishOrder({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).then(res => {
                this.$toast(this.$t('质押成功'));
                this.$router.push('/pledgeLoanOrder')
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
        pledgeAmount: this.pledgeAmount,
            })
        .then((res) => {
          this.$toast(this.$t("质押成功"));
          this.$router.push("/pledgeLoanOrder");
        })
        .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>
@@ -153,10 +190,9 @@
            }

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

    }
}