easypay-app-wx/pages/users/repayment/index.vue

<template>
	<view class="repaymentbox">
		<!-- <view class="toreturn" @click="toreturn()">
			111111111
		</view> -->
		<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" v-if="item.repaymentStatus=='Pending'">
						待还款
					</view>
					<view class="yuqi" v-if="item.repaymentStatus=='Partial'">
						部分还款
					</view>
					<view class="yuqi" v-if="item.repaymentStatus=='Paid'">
						已还款
					</view>
					<view class="yuqi" v-if="item.repaymentStatus=='Late'">
						逾期
					</view>
					<!-- 'Pending'? '待还款' : 'Partial' ? '部分还款' : 'Paid' ? '已还款' : '逾期' -->
				</view>
				
			</view>
			<view class="rt">
				<a href="javascript:;" @click='goPay(item.repaymentAmount,item.id)'>{{title}}</a>
				<!-- <view class='bnt bg_color' v-if="!item.paid" @click='goPay(item.payPrice,item.orderId)'>立即付款</view> -->
			</view>
			<payment :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'>
			</payment>
		</view>
	</view>
</template>

<script>
	import {
		getreceivable
	} from '@/api/api.js'
	import payment from '@/components/payments';
	export default {
		data() {
			return {
				index: 0,
				binglist: [],
				title: '还款',
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
			}
		},
		components: {
			payment,
			
		},
		onLoad() {
		
			uni.webView.postMessage({
			         data: {
			           action: 'authorize'
			         }
			       })
			 //#ifdef MP-ALIPAY
			
			 // this.aliPay(that.order_id)
			 //#endif
			
			// console.log(this.$Cache.get('orderno'))
			// window.my.postMessage({ action: 'authorize' });
			
			// step 4. 接受小程序发过来的用户信息
		
		},
		onShow() {
			
			
				this.getData()
		},
		methods: {
			toreturn(){
				console.log('点击了');
				
				// uni.navigateTo({
				// 	url: '/pages/users/alipay_return/alipay_return'
				// })
			},
			ispayok(num){
				uni.navigateTo({
					url: '/pages/users/alipay_return/alipay_return'
				})
			},
			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
				})
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 关闭支付组件
			 *  
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 打开支付组件
			 * 
			 */
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);
			},
			/**
			 * 支付成功回调
			 * 
			 */
			pay_complete: function() {
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.$set(this, 'pay_close', false);
				this.getOrderData();
				this.getOrderList();
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
		}
	}
</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>