<template>
|
<div class="pledgeLoanOrderDetail">
|
<assets-head :title="$t('订单详情')"></assets-head>
|
<div class="px-32 pt-54 tabBackground pb-100">
|
<div
|
class="skyColor font-44"
|
:class="{
|
redColor: obj.state == 3,
|
red: obj.state == 4,
|
'text-grey': obj.state == 2,
|
skyColor: obj.state == 1,
|
}"
|
>
|
{{ obj.state ? fixState(obj.state) : "--" }}
|
</div>
|
<div class="font-32 mt-40 text-grey">{{ $t("总负债") }}</div>
|
<div class="mt-20 flex textColor items-center">
|
<span class="mr-10 font-40"
|
>{{ obj.debtAmount !== "" ? obj.debtAmount : "--" }} USDT</span
|
>
|
<div
|
class="skyBg rounded ml-22 text-black px-26 py-8 font-28"
|
v-if="obj.state == 1 || obj.state == 4"
|
@click="
|
toRepayment(
|
obj.id,
|
obj.debtAmount,
|
obj.interestAmount,
|
obj.loanAmount
|
)
|
"
|
>
|
{{ $t("还款") }}
|
</div>
|
</div>
|
<div class="pb-100">
|
<div class="flex mt-32">
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("贷款币种") }}</div>
|
<div class="font-40 mt-20 textColor">
|
{{ obj.loanCurrency ? obj.loanCurrency.toUpperCase() : "--" }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("总借款") }}</div>
|
<div class="font-40 mt-20 textColor">
|
<span class="mr-10">{{ obj.loanAmount }}</span
|
>USDT
|
</div>
|
</div>
|
</div>
|
<div class="flex mt-32">
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("总利息") }}</div>
|
<div class="font-40 mt-20 textColor">
|
{{
|
obj.interestAmount === "" ? "--" : obj.interestAmount
|
}} USDT
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="font-32 text-grey">
|
{{ $t("时利率") }}/{{ $t("天利率") }}
|
</div>
|
<div class="font-40 mt-20 textColor">
|
<span class="mr-10">{{ obj.hourlyRate * 100 || "--" }}%</span>/{{
|
obj.hourlyRate ? obj.hourlyRate * 24 * 100 : "--"
|
}}%
|
</div>
|
</div>
|
</div>
|
<div class="flex mt-32" v-if="obj.state == 1 || obj.state == 4">
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("质押率") }}</div>
|
<div class="font-40 mt-20 textColor">
|
{{
|
obj.pledgeRate !== ""
|
? ((obj.pledgeRate * 10000) / 100).toFixed(2)
|
: "--"
|
}}%
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="font-32 text-grey">
|
{{ $t("强平价格") }}({{
|
obj.pledgeCurrency ? obj.pledgeCurrency.toUpperCase() : "--"
|
}}/USDT)
|
</div>
|
<div class="font-40 mt-20 textColor">
|
<span class="mr-10">{{ obj.closeOut || "--" }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt-82 pb-82 border-t-color" v-if="obj.state == 4">
|
<div class="flex mt-32">
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("滞纳金") }}</div>
|
<div class="font-40 mt-20 textColor">
|
{{
|
obj.overdueAmount !== "" ? obj.overdueAmount : "--"
|
}} USDT
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="font-32 text-grey">{{ $t("总滞纳金利率") }}</div>
|
<div class="font-40 mt-20 textColor">
|
<span class="mr-10"
|
>{{
|
obj.overdueRate !== ""
|
? ((obj.overdueRate * 1000) / 100).toFixed(2)
|
: "--"
|
}}%</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt-82 border-t-color">
|
<div class="mb-44">
|
<div class="flex justify-between font-32 mb-44">
|
<span class="text-grey">{{ $t("订单号") }}</span>
|
<span class="textColor">{{ obj.orderNo || "--" }}</span>
|
</div>
|
<div class="flex justify-between font-32 mb-44">
|
<span class="text-grey">{{ $t("借款时间") }}</span>
|
<span class="textColor">{{ obj.createTime || "--" }}</span>
|
</div>
|
<div class="flex justify-between font-32 mb-44">
|
<span class="text-grey">{{ $t("到期时间") }}</span>
|
<span class="textColor">{{ obj.expireTime || "--" }}</span>
|
</div>
|
<div
|
class="flex justify-between font-32 mb-44 items-center"
|
@click="$router.push(`/pledgeRecord?id=${id}`)"
|
>
|
<span class="skyColor mr-14">{{ $t("质押记录") }}</span>
|
<img src="@/assets/image/skyMore.png" alt="" class="w-32 h-32" />
|
</div>
|
</div>
|
</div>
|
<div
|
class="btnBox mt-144 flex items-center justify-between"
|
v-if="obj.state == 1"
|
>
|
<div
|
class="skyBorder h-96 box-border skyColor font-30 w-360 flex items-center rounded-lg justify-center"
|
@click="toAddpledge(obj.id, obj.pledgeCurrency)"
|
>
|
{{ $t("新增质押") }}
|
</div>
|
<div
|
class="skyBg h-96 box-border font-30 w-360 items-center rounded-lg flex items-center justify-center"
|
@click="toRenew(obj.id, obj.pledgeCurrency)"
|
>
|
{{ $t("续借") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import Axios from "@/API/pledgeLoan.js";
|
export default {
|
props: {},
|
components: {
|
assetsHead,
|
},
|
data() {
|
return {
|
id: "",
|
obj: {
|
closeOut: "",
|
createTime: "",
|
debtAmount: "",
|
expireTime: "",
|
hourlyRate: "",
|
interestAmount: "",
|
loanAmount: "",
|
loanCurrency: "",
|
orderNo: "",
|
overdueAmount: "",
|
overdueRate: "",
|
pledgeRate: "",
|
state: "",
|
pledgeCurrency: "",
|
},
|
};
|
},
|
mounted() {
|
this.id = this.$route.query.id;
|
this.getOrder();
|
},
|
methods: {
|
getOrder() {
|
Axios.getOrder({
|
loanOrderId: this.id,
|
}).then((res) => {
|
this.obj = res.data;
|
});
|
},
|
fixState(state) {
|
let string = "";
|
if (state == 1) {
|
string = this.$t("计息中");
|
} else if (state == 2) {
|
string = this.$t("已结清");
|
} else if (state == 3) {
|
string = this.$t("强平结清");
|
} else if (state == 4) {
|
string = this.$t("已逾期");
|
}
|
return string;
|
},
|
toRepayment(id, debtAmount, interestAmount, loanAmount) {
|
this.$router.push({
|
path: "/repayment",
|
query: { id, debtAmount, interestAmount, loanAmount },
|
});
|
},
|
toAddpledge(id, pledgeCurrency) {
|
this.$router.push({ path: "/addPledge", query: { id, pledgeCurrency } });
|
},
|
toRenew(id, pledgeCurrency) {
|
this.$router.push({
|
path: "/pledgeLoanRenew",
|
query: { id, pledgeCurrency },
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.pledgeLoanOrderDetail {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.skyColor {
|
color: #13d3eb;
|
}
|
.skyBorder {
|
border: 1px solid #13d3eb;
|
}
|
.skyBg {
|
background: #13d3eb;
|
}
|
.redColor {
|
color: #e35461;
|
}
|
.red {
|
color: #ff0000;
|
}
|
.yellowColor {
|
color: #f5c425;
|
}
|
</style>
|
