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

<template>
	<view class="repaymentbox">
		<view class="topbox">
			<image src="https://api.yruibao.com/crmebimage/public/store/2024/03/16/ad166479de254390ac5a423f6d18ba4bn0iscpvty1.png" mode=""></image>
			<view class="price">
				待还账单：￥{{orderData.sumPrice ? Number(orderData.sumPrice).toFixed(2) : 0}}
			</view>
		</view>
		<view class="rebox">
			<!-- <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="tabbox">
				<view class="tans" @click="changeindx(0)">
					<view class="txt" :class="index==0?'act1':''">
						全部
					</view>
					
					<div class="line" v-if="index==0">	
					</div>
				</view>
				<view class="tans" @click="changeindx(1)">
					<view class="txt" :class="index==1?'act1':''"> 
						待还款
					</view>
					
					<div class="line" v-if="index==1">
						
					</div>
				</view>
				<view class="tans" @click="changeindx(2)">
					<view class="txt" :class="index==2?'act1':''">
						已结清
					</view>
					
					<div class="line" v-if="index==2">
						
					</div>
				</view>
			</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:;" v-if="item.repaymentStatus!='Paid'" @click='goPay(item.repaymentAmount,item.id,item.repaymentStatus)'>{{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>
		
	</view>
</template>

<script>
	import {
		orderData,
		
	} from '@/api/order.js';
	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',
				orderData: {}, //订单详细统计
			}
		},
		components: {
			payment,
			
		},
		onLoad() {
		
			my.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() {
		    // 轮询查询函数
		    const pollingFunction = () => {
		        this.getData(); // 调用getData()方法
		    };
			this.getOrderData();
		    // 初始调用一次
		    pollingFunction();
		
		    // 每五秒执行一次轮询查询
		    const intervalId = setInterval(pollingFunction, 5000);
		
		    // 在页面销毁时清除轮询
		    // 如果onShow()方法会在页面销毁时被自动销毁，那么下面的代码可以忽略
		    this.$once('hook:beforeDestroy', () => {
		        clearInterval(intervalId);
		    });
		},
		methods: {
			changeindx(num){
				this.index=num
				this.getData()
			},
			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 type=0
				if(this.index==0){
					type=null
				}else if(this.index==1){
					type=0
				}else if(this.index==2){
					type=1
				}
				let data = {
					uid:this.$store.getters.uid,
					// orderId:this.$Cache.get('ordernobh'),
					type: type
				}
				getreceivable(data).then(res => {
					this.binglist = res.data
					// this.binglist[0].repaymentStatus='Paid'
				})
			},
			getOrderData: function() {
				let that = this;
				orderData().then(res => {
					that.$set(that, 'orderData', 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,repaymentStatus) {
				if(repaymentStatus!='Paid'){
					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">
	page{
		background-color:#fff !important;
	}
	.active {
		font-weight: 700;
		font-size: 13px;
		color: #000 !important;
	}

	.repaymentbox {
		width: 100%;
		height: 100%;
		padding-bottom: 30rpx;
		// box-sizing: border-box;
		background-color:#fff;
		font-size: 11px !important;
		
		.topbox{
			position: relative;
			width: 750rpx;
			height: 200rpx;
			background: #FF5733;
			image{
				position: absolute;
				right: 44rpx;
				bottom: 64rpx;
				width: 96rpx;
				height:110rpx ;
			}
			.price{
				
				position: absolute;
				left: 46rpx;
				bottom: 46rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.rebox{
			padding-top: 40rpx;
			position: relative;
			width: 100%;
			margin-top: -60rpx;
			// box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.16);
			border-radius: 20rpx;
			// background: #000;
			
			.tabbox{
				padding-top: 40rpx;
				display: flex;
				flex-wrap: nowrap;
				
				background: #fff;
				border-radius: 20rpx;
				.tans{
					width: 33%;
					display: flex;
					flex-wrap: wrap;
					
					justify-content: center;
					
					.txt{
						width: 100%;
						text-align: center;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.act1{
						color: #FF5733;
					}
					.line{
						margin-top: 4rpx;
						width: 46rpx;
						height: 0rpx;
						border-radius: 6rpx;
						border: 4rpx solid #FF5733;
					}
				}
				
			}
			.repaymentlist {
				background-color: #fff;
				display: flex;
				margin: 26rpx 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				padding: 34rpx 38rpx;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.16);
				.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>