163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<template>
|
||
<view class="repaymentbox">
|
||
<view class="repaymenttext">
|
||
<a href="javascript:;" :class="index == 0 ? 'active' : ''" v-model="index" @click="btnhk">待还款</a>
|
||
<a href="javascript:;" :class="index == 1 ? 'active' : ''" v-model="index" @click="btnjq">已结清</a>
|
||
</view>
|
||
<view class="repaymentlist" v-for="(item,index) in binglist" :key="index">
|
||
<view class="lt">
|
||
<view class="bh">
|
||
<text>订单编号：</text><text>{{item.orderId}}</text>
|
||
</view>
|
||
<view class="rq">
|
||
<text>还款日期：</text><text>{{item.repaymentDeadline}}</text>
|
||
</view>
|
||
<view class="xuhuan">
|
||
<text>须还金额：</text><text>￥{{item.repaymentAmount}}</text>
|
||
<view class="yuqi">
|
||
{{item.repaymentStatus == 'Pending'? '待还款' : 'Partial' ? '部分还款' : 'Paid' ? '已还款' : '逾期'}}</view>
|
||
<!-- 'Pending'? '待还款' : 'Partial' ? '部分还款' : 'Paid' ? '已还款' : '逾期' -->
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<a href="javascript:;">{{title}}</a>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getreceivable
|
||
} from '@/api/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
binglist: [],
|
||
title: '还款'
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getData()
|
||
// console.log(this.$Cache.get('orderno'))
|
||
},
|
||
methods: {
|
||
btnhk() {
|
||
this.index = 0
|
||
this.title = '还款'
|
||
this.getData()
|
||
},
|
||
btnjq() {
|
||
this.index = 1
|
||
this.title = '已结清'
|
||
this.getData()
|
||
},
|
||
// 请求分期还款
|
||
getData: function() {
|
||
let data = {
|
||
uid:this.$store.getters.uid,
|
||
orderId:this.$Cache.get('ordernobh'),
|
||
type: this.index
|
||
}
|
||
getreceivable(data).then(res => {
|
||
this.binglist = res.data
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.active {
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
color: #000 !important;
|
||
}
|
||
|
||
.repaymentbox {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-bottom: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: rgb(228, 228, 228);
|
||
font-size: 11px !important;
|
||
|
||
.repaymenttext {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding-left: 36rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 30rpx;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: rgba(166, 166, 166, 1);
|
||
margin-right: 50rpx;
|
||
}
|
||
}
|
||
|
||
.repaymentlist {
|
||
background-color: #fff;
|
||
display: flex;
|
||
margin: 26rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
padding: 34rpx 38rpx;
|
||
|
||
.lt {
|
||
width: 80%;
|
||
|
||
.xuhuan {
|
||
display: flex;
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
|
||
.yuqi {
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
border-radius: 5px;
|
||
background: rgba(204, 204, 204, 0);
|
||
border: 1px solid rgba(179, 0, 0, 1);
|
||
margin-left: 20rpx;
|
||
color: rgba(179, 0, 0, 1);
|
||
}
|
||
}
|
||
|
||
.bh {
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
}
|
||
|
||
.rq {
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.rt {
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
a {
|
||
text-decoration: none;
|
||
display: block;
|
||
width: 128rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
opacity: 1;
|
||
border-radius: 20rpx;
|
||
background: rgba(212, 48, 48, 1);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |