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/pledgeLoanOrderDetail.vue | 392 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 238 insertions(+), 154 deletions(-)
diff --git a/src/page/pledgeLoan/pledgeLoanOrderDetail.vue b/src/page/pledgeLoan/pledgeLoanOrderDetail.vue
index ec36f15..bd416fc 100644
--- a/src/page/pledgeLoan/pledgeLoanOrderDetail.vue
+++ b/src/page/pledgeLoan/pledgeLoanOrderDetail.vue
@@ -1,175 +1,259 @@
<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 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 } })
- }
- }
- }
+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;
+.pledgeLoanOrderDetail {
+ width: 100%;
+ box-sizing: border-box;
}
-.skyColor{
- color: #13D3EB;
+.skyColor {
+ color: #13d3eb;
}
-.skyBorder{
- border: 1px solid #13D3EB;
+.skyBorder {
+ border: 1px solid #13d3eb;
}
-.skyBg{
- background: #13D3EB;
+.skyBg {
+ background: #13d3eb;
}
.redColor {
- color: #E35461;
+ color: #e35461;
}
.red {
- color: #FF0000;
+ color: #ff0000;
}
-.yellowColor{
- color: #F5C425;
+.yellowColor {
+ color: #f5c425;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3