<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>
|
