easypay-app-wx/pages/users/repayment/index.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>
				</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()
		},
		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,
					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: 108rpx;
			padding-bottom: 16rpx;
            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 {
						// width: 80rpx;
						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>