From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/pledgeLoan/addPledge.vue | 338 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 187 insertions(+), 151 deletions(-)
diff --git a/src/page/pledgeLoan/addPledge.vue b/src/page/pledgeLoan/addPledge.vue
index 7083b30..169bbbe 100644
--- a/src/page/pledgeLoan/addPledge.vue
+++ b/src/page/pledgeLoan/addPledge.vue
@@ -1,188 +1,224 @@
<template>
- <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="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="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>
- </div>
- </div>
- <div class="flex items-center font-24 mt-16 text-grey">
- {{ $t('可用余额') }}：<span class="mr-14">{{ volume ||
- '--' }} {{ 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>
- </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 class="addPledge">
+ <assets-head :title="$t('新增质押')"></assets-head>
+ <div class="contentBox">
+ <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="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>
+ </div>
</div>
+ <div class="flex items-center font-24 mt-16 text-grey">
+ {{ $t("可用余额") }}：<span class="mr-14"
+ >{{ volume || "--" }} {{
+ 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>
+ </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>
</div>
+ </div>
</template>
<script>
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,
+ },
+ data() {
+ return {
+ HOST_URL,
+ walletList: [],
+ id: "",
+ pledgeAmount: "",
+ pledgeRate: "", //质押率
+ pledgeCurrency: "", //质押币种
+ volume: "", //可用余额
+ };
+ },
+ mounted() {
+ 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.debounceFn();
},
- components: {
- assetsHead
+ debounceFn: debounce(function () {
+ this.getLoanParam();
+ }, 500),
+ getLoanParam() {
+ 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));
+ }
+ });
},
- data() {
- return {
- HOST_URL,
- walletList: [],
- id: '',
- pledgeAmount: '',
- pledgeRate: '',//质押率
- pledgeCurrency: '', //质押币种
- volume: '', //可用余额
- }
+ getList() {
+ _getAllWallet().then((res) => {
+ this.walletList = res.extends;
+ let initObj = this.walletList.find((item) => {
+ return item.symbol.toLowerCase() == this.pledgeCurrency;
+ });
+ this.volume = initObj.usable;
+ });
},
- mounted() {
- this.id = this.$route.query.id
- this.pledgeCurrency = this.$route.query.pledgeCurrency
- this.getList()
+ getReplenishOrder() {
+ 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));
+ }
+ });
},
- methods: {
- changeMount() {
- if (this.pledgeAmount >= this.volume) {
- this.pledgeAmount = this.volume
- }
-
- this.debounceFn()
-
- },
- debounceFn: debounce(function () {
- this.getLoanParam()
- }, 500),
- getLoanParam() {
- 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)); }
- })
- },
- getList() {
- _getAllWallet().then((res) => {
- this.walletList = res.extends;
- 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
- }
- 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)); }
- })
- }
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
.addPledge {
- width: 100%;
- box-sizing: border-box;
+ width: 100%;
+ box-sizing: border-box;
}
.contentBox {
+ position: relative;
+
+ .imgBox {
+ width: 100%;
+ height: 300px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .content {
+ border-radius: 8px;
+ padding: 36px 30px 36px 34px;
position: relative;
+ margin-top: -92px;
- .imgBox {
- width: 100%;
- height: 300px;
+ .inputBox {
+ input {
+ flex: 1;
+ border: none;
+ }
- img {
- width: 100%;
- height: 100%;
- }
+ .right {
+ border-left: 1px solid #b8bcc5;
+ }
}
-
- .content {
- border-radius: 8px;
- padding: 36px 30px 36px 34px;
- position: relative;
- margin-top: -92px;
-
- .inputBox {
- 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;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3