<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>
|
</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 || "--" }} {{ 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 || "--" }} USDT</span>
|
</p>
|
<p class="mt-48 font-32 text-grey flex justify-between">
|
<span>{{ $t("预计还款") }}</span>
|
<span class="textColor">{{ debtAmount || "--" }} 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>
|
import assetsHead from "@/components/assets-head";
|
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 ruleMask from "./ruleMask.vue";
|
import { mapGetters } from "vuex";
|
export default {
|
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();
|
},
|
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));
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.pledgeLoan {
|
width: 100%;
|
box-sizing: border-box;
|
|
.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");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
font-size: 32px;
|
}
|
|
.van-cell-group {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
}
|
|
.contentBox {
|
padding: 0 32px;
|
position: relative;
|
overflow: auto;
|
}
|
|
.imgBox {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 300px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.content {
|
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;
|
}
|
}
|
}
|
|
.slectBox {
|
position: absolute;
|
left: 0;
|
top: 114px;
|
width: 100%;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
border-radius: 4px;
|
padding: 0px 20px 76px 20px;
|
box-sizing: border-box;
|
|
@include themify() {
|
border: 1px solid themed("line_color");
|
}
|
|
z-index: 2;
|
|
&.slectBoxMax {
|
max-height: 574px;
|
overflow-y: auto;
|
}
|
}
|
|
.item {
|
height: 98px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.custom {
|
width: 44px;
|
height: 44px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
