shop_uniapp/bundle/pages/repayment-info/repayment-info.vue

<template>
	<view class="user-account-limit">
		<view class="month-block">
			<view class="hd-wrap bg-white">
				<view class="month-text">
					分{{planList.length || 0}}期
				</view>
				
				<view class="go-repayment-block">
					<view v-for="(item, index) in planList" :key="index">
						<view class="go-repayment">
							<view class="go-repayment-date">
								<view>第{{index + 1}}期</view>
								<view>共还:￥ {{item.xp_aprice}}</view>
							</view>
				
							<view v-if="item.xp_state == 0" @tap="planRepayment(item.xp_aprice)">
								去还款
								<u-icon name="arrow-right"  color="#000" size="24"></u-icon>
							</view>
							<view class="bold lighter" v-if="item.xp_state == 1">
								已还款
							</view>
						</view>
						<view class="m-t-10 m-b-10 lighter">
							本金: ￥{{item.xp_price}} + 利息: ￥ {{item.xp_interest}}
						</view>
						<view class="go-repayment-day">
							还款日期: {{item.xp_price_time}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="submit-btn">
				<button :disabled="btnStatus" :class="btnStatus? 'disabled-style' : 'btn-style'" @click="allRepayment()">提前还款</button>
			</view>
		</view>
		
		<u-modal v-model="planShow" :content="planContent" @confirm="confirmPlan" @cancel="canclePlan" :show-cancel-button="true"></u-modal>
		<u-modal v-model="allInShow" :content="allInContent" @confirm="confirmAllIn" @cancel="cancleAllIn" :show-cancel-button="true">
			<view class="slot-content">
				<view class="xs lighter m-t-20 flex row-center">本次需还金额：<view class="bold xl">￥ {{xpAprice}}</view></view>
				<view class="sm lighter m-t-10 m-b-20 flex row-center">本金: ￥{{xpPrice}} + 利息: ￥ {{xpInterest}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { prepay, getPayway } from '@/api/app'
import { getRepayment, checkSettleStages, checkNowxy} from '@/api/procurement'
import { wxpay } from '@/utils/pay'
import {mapGetters,mapActions} from 'vuex'
export default {
	data() {
		return {
			planContent: '',
			planShow: false,
			allInContent: '',
			allInShow: false,
			btnStatus: false,
			xpAprice: 0,
			xpPrice: 0,
			xpInterest: 0,
			planList: []
		};
	},
	onShow() {
		this.getUser();
	},
	onLoad() {
		this.getNowxy();
	},
	methods: {
		...mapActions(['getUser']),
		
		async getNowxy() {
			const {
				data,
				code,
				msg
			} = await checkNowxy();
			if (code == 1) {
				this.planList = data;
			}
		},
			
		confirmPlan() {
			prepay({
				from: "repayment",
				pay_way: 1,
				payment_method: 'plan',
				u_id: this.userInfo.u_id
			}).then(({ code, data }) => {
				switch(code) {
					case 1: 
						this.handleWechatPay(data); 
						break;
				}
			}).catch(err => {
			}).finally(() => {
				setTimeout(() => {
					this.loadingPay = false
				}, 500)
			})
		},
		
		canclePlan() {
			this.$toast({
				title:'已取消分期还款'
			})
		},
		planRepayment(price){
			this.planContent = "是否还款，本次还款金额为: ￥" + price
			this.planShow = true
		},
		
		confirmAllIn() {
			this.btnStatus = true
			prepay({
				from: "repayment",
				pay_way: 1,
				payment_method: 'all',
				u_id: this.userInfo.u_id
			}).then(({ code, data }) => {
				switch(code) {
					case 1: 
						this.handleWechatPay(data); 
						break;
				}
			}).catch(err => {
			}).finally(() => {
				setTimeout(() => {
					this.loadingPay = false
				}, 500)
			})
		},
		
		handleWechatPay(data) {
			wxpay(data).then(res => {
				this.handPayResult(res)
			}).catch(err => {
			})
		},
		
		handPayResult(result) {
			this.result = result
			setTimeout(() => {
				uni.redirectTo({
					url: '/bundle/pages/repayment-list/repayment-list'
				});
			}, 500)
		},
		
		cancleAllIn() {
			this.$toast({
				title:'已取消'
			})
		},
		
		async allRepayment() {
			const {
				data,
				code,
				msg
			} = await checkSettleStages();
		
			if (code == 1) {
				this.xpAprice = data.xp_aprice;
				this.xpPrice = data.xp_price;
				this.xpInterest = data.xp_interest;
				this.allInShow = true;
			}
		},
		
	},
	computed: {
		...mapGetters(["userInfo"]),
	}
};
</script>
<style lang="scss" scoped>
	.user-account-limit {
		background-image: url(https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/index_new_bg.png);
		background-color: #fff;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-top: -12rpx;
		
		.month-block {
			margin: 60rpx 20rpx 0 20rpx;
			padding-bottom: 20rpx;
			
			.hd-wrap {
				box-shadow: 1px 6px 16px 2px #dfdeea;
				padding-bottom: 20rpx;
				border-radius: 20rpx;
				padding: 8rpx 50rpx 20rpx 50rpx;
				
				.month-text {
					margin-top: 20rpx;
					font-weight: bold;
					font-size: 36rpx;
				}
			
				.go-repayment {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.go-repayment-date {
						display: flex;
						align-items: center;
						
						view:last-child {
							font-size: 36rpx;
							font-weight: bold;
							margin-left: 12rpx;
						}
					}
					
					.go-repayment-date + view {
						text-decoration: underline;
					}
				}
				
				.go-repayment-day {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #b3b3b3;
				}
				
			}
			
			.submit-btn {
			    width: 100%;
				padding: 36rpx 0;
			    .btn-style {
			        width: 100%;
			        border: none;
			        background: #fb2d2d;
					border-radius: 999rpx;
			        color: #fdf8f4;
			        display: flex;
			        justify-content: center;
			        align-items: center;
			    }
				.disabled-style {
					background: #e0e0e0;
					border-radius: 999rpx;
				}
			}
		}
	}
</style>