shop_uniapp/bundle/pages/account_limit/account_limit.vue

<template>
	<view class="user-account-limit" :style="{backgroundImage: 'url(' + aliOSSDomain + 'uniapp/index_hot_bg.png' + ')'}">
		<view class="block">
			<view class="header">
				<view class="hd-wrap bg-white">
					<view class="user-info flex row-between">
						<view class="info flex">
							<image class="avatar m-r-20 flex-none"
								:src="userInfo.avatar ? userInfo.avatar : aliOSSDomain + 'uniapp/portrait_empty.png'" />
							<view>
								<view class="name flex">
									<view class="xxl bold line-2">{{userInfo.nickname}}</view>
									<view class="level br60 m-l-10 flex-none flex" v-if="userInfo.vip">
										<text class="m-r-10">
											<text class="v xxl m-r-4">v</text>
											<text class="xxs">{{userInfo.vip}}</text>
										</text>
										<text class="xxs">{{userInfo.level_name}}</text>
									</view>
								</view>
								<view class="flex m-t-10" v-if="userInfo.sn">
									<view class="user-id xs m-r-20">会员ID: {{userInfo.sn}}</view>
									<view class="xs primary row-center m-l-5" @tap.stop="onCopy">复制</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex row-between">
						<view class="num-info">
							<view class="num">{{userInfo.xy_price || 0}}</view>
							<view class="info">授信额度</view>
						</view>
						<view class="repayment-block">
							<view class="repayment" v-if="repayment_price > 1">
								<router-link to="/bundle/pages/repayment/repayment">
									已用额度 ￥{{repayment_price}}
								</router-link>
							</view>
							<view class="repayment" v-else>
								已用额度 ￥{{repayment_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<router-link to="/bundle/pages/account_limit_order/account_limit_order">
				<view class="see">
					<view>购买列表</view>
				</view>
			</router-link>
		</view>
		
		<u-modal v-model="show" :content="content" @confirm="confirmRepayment" @cancel="cancleRepayment" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
import { prepay, getPayway } from '@/api/app'
import { getRepayment } from '@/api/procurement'
import { wxpay } from '@/utils/pay'
import {mapGetters,mapActions} from 'vuex'
export default {
	data() {
		return {
			content: '',
			show: false,
			repayment_price: 0,
		};
	},
	onShow() {
		this.repayment()
	},
	methods: {
		...mapActions(['getUser']),
		async repayment() {
			const {
				data,
				code,
				msg
			} = await getRepayment();

			if (code == 1) {
				this.repayment_price = data.xy_y_price
			}
		},
		
		repaymentPrice() {
			this.content = "本次需要还款: ￥" + this.repayment_price
			this.show = true;
		},
		
		confirmRepayment() {
			prepay({
				from: "repayment",
				pay_way: 1,
				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)
			})
		},
		
		cancleRepayment() {
			this.$toast({
				title:'已取消还款'
			})
		},
		
		handleWechatPay(data) {
			wxpay(data).then(res => {
				this.handPayResult(res)
			}).catch(err => {
			})
		},
		
		handPayResult(result) {
			this.result = result
			setTimeout( () => {
				uni.redirectTo({
					url: '/bundle/pages/account_limit/account_limit'
				});
			}, 500)
		}
	},
	computed: {
		...mapGetters(["userInfo"]),
	}
};
</script>
<style lang="scss" scoped>
	.user-account-limit {
		background-color: #fff;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-top: -12rpx;
		
		.block {
			position: relative;
			.header {
				margin: 60rpx 20rpx;
				padding-top: 20rpx;
			
				.hd-wrap {
					box-shadow: 1px 6px 16px 2px #dfdeea;
					padding-bottom: 20rpx;
					border-radius: 20rpx;
				}
			
				.user-info {
					padding: 30rpx;
			
					.avatar {
						height: 110rpx;
						width: 110rpx;
						border-radius: 50%;
						overflow: hidden;
					}
			
					.name {
						text-align: left;
						margin-bottom: 5rpx;
					}
			
					.user-id {
						border: $-solid-border;
						border-radius: 100rpx;
						padding: 2rpx 15rpx;
					}
			
					.user-opt {
						position: relative;
			
						.dot {
							position: absolute;
							background-color: #ee0a24;
							border: 2rpx solid #FFFFFF;
							color: $-color-primary;
							border-radius: 100%;
							top: 6rpx;
							right: 0rpx;
							font-size: 22rpx;
							min-width: 16rpx;
							height: 16rpx;
						}
					}
			
					.level {
						background: #333;
						padding: 0 15rpx;
						color: #ffdea5;
						line-height: 40rpx;
			
						.v {
							font-style: italic;
						}
					}
				}
			
				.user-assets {
					flex: 1;
			
					.user-assests-item {
						flex: 1;
					}
				}
				
				.num-info {
					margin: 0 50rpx;
					.num {
						font-size: 48rpx;
						font-weight: bold;
					}
					
					.info {
						font-size: 24rpx;
						color: #b3b3b3;
					}
				}
			}
			
			.see {
				position: absolute;
				top: 50%;
				right: 8rpx;
				transform: translateY(-50%);
				background-color: #d2c3c3;
				color: #fff;
				padding: 12rpx;
				font-size: 24rpx;
				border-radius: 12rpx;
			}
			
			.repayment-order {
				position: absolute;
				top: 50%;
				right: 8rpx;
				transform: translateY(-50%);
				background-color: #d2c3c3;
				color: #fff;
				padding: 12rpx;
				font-size: 24rpx;
				border-radius: 12rpx;
			}
			
			.repayment-block {
				margin-right: 30rpx;
				text-align: left;
				.repayment {
					text-decoration: underline;
					margin-right: 30rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>