<template>
|
<div class="pledgeLoanOrder">
|
<assets-head
|
:title="$t('质押借币订单')"
|
:backFunc="() => $router.push('/pledgeLoan')"
|
></assets-head>
|
<template v-if="noticeList.length">
|
<div
|
class="h-100 flex items-center justify-between pl-32 pr-28 mb-40"
|
style="color: #f5c425; background: #56481b"
|
v-for="(item, index) in noticeList"
|
:key="index"
|
@click="toOrderDetail(item)"
|
>
|
<div class="flex font-28">
|
<img src="../../assets/image/waring.png" alt="" class="w-36 h-36" />
|
<span class="ml-22">{{ $t("有笔订单质押率高于60%有平仓风险") }}</span>
|
</div>
|
<img src="@/assets/image/warningTo.png" alt="" class="w-32 h-32" />
|
</div>
|
</template>
|
<div class="content px-32">
|
<van-list
|
v-model="loading"
|
:loading-text="$t('加载中...')"
|
:finished="finished"
|
:finished-text="orderList.length ? $t('已经全部加载完毕') : ''"
|
@load="onLoad"
|
:offset="130"
|
>
|
<div
|
class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30"
|
v-for="(item, index) in orderList"
|
:key="index"
|
@click="toOrderDetail(item.id)"
|
>
|
<div
|
class="flex justify-between border-b-color h-101 box-border text items-center mb-30"
|
>
|
<div class="textColor">
|
<span class="skyColor mr-10">{{ fixStr(item.orderType) }}</span
|
>{{ item.loanAmount }} USDT
|
</div>
|
<div
|
:class="{
|
redColor: item.state == 3,
|
red: item.state == 4,
|
'text-grey': item.state == 2,
|
skyColor: item.state == 1,
|
}"
|
>
|
{{ fixStatus(item.state) }}
|
</div>
|
</div>
|
<div class="flex">
|
<div class="mr-100">
|
<div class="text-grey">{{ $t("贷款币种") }}</div>
|
<div class="textColor mt-20">
|
{{ item.loanCurrency.toUpperCase() }}
|
</div>
|
</div>
|
<div class="mr-100">
|
<div class="text-grey">{{ $t("质押率") }}</div>
|
<div class="textColor mt-20">
|
{{
|
item.pledgeRate !== ""
|
? ((item.pledgeRate * 10000) / 100).toFixed(2)
|
: "--"
|
}}%
|
</div>
|
</div>
|
<div>
|
<div class="text-grey">{{ $t("总负债") }}</div>
|
<div class="textColor mt-20">
|
{{ item.debtAmount }} {{ item.loanCurrency.toUpperCase() }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="flex flex-col justify-center pt-50 pb-20 items-center"
|
v-if="!orderList.length && !loading"
|
>
|
<img
|
src="@/assets/image/assets-center/no-data.png"
|
alt=""
|
class="w-180 h-180"
|
/>
|
<p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
|
</div>
|
</van-list>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import Axios from "@/API/pledgeLoan.js";
|
import { List } from "vant";
|
export default {
|
props: {},
|
components: {
|
assetsHead,
|
[List.name]: List,
|
},
|
data() {
|
return {
|
page: 1,
|
orderList: [],
|
noticeList: [],
|
loading: false,
|
finished: false,
|
};
|
},
|
|
methods: {
|
onLoad() {
|
this.getOrderList();
|
},
|
toOrderDetail(id) {
|
this.$router.push({ path: "/pledgeLoanOrderDetail", query: { id } });
|
},
|
fixStr(orderType) {
|
let str = "";
|
if (orderType == 1) {
|
str = this.$t("借款");
|
} else if (orderType == 2) {
|
str = this.$t("新增质押");
|
} else if (orderType == 3) {
|
str = this.$t("续借");
|
} else if (orderType == 4) {
|
str = this.$t("还款");
|
} else if (orderType == 5) {
|
str = this.$t("强平结清");
|
}
|
return str;
|
},
|
fixStatus(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;
|
},
|
getOrderList() {
|
Axios.orderList({
|
page_no: this.page,
|
}).then((res) => {
|
this.orderList = [...this.orderList, ...res.data.list];
|
// console.log(logs)
|
this.loading = false;
|
if (res.data.list.length < 10) {
|
this.finished = true;
|
} else {
|
this.page++;
|
}
|
this.noticeList = res.data.noticeList;
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.pledgeLoanOrder {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.skyColor {
|
color: #13d3eb;
|
}
|
.redColor {
|
color: #e35461;
|
}
|
.red {
|
color: #ff0000;
|
}
|
</style>
|
