cbz/page_shop/pages/member/index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="text" v-if="member_date!==''">会员与{{member_date}}过期</view>
			<view class="text" v-else>开通会员，立享多种特权</view>
		</view>
		<view class="box">
			<view class="title">全年VIP</view>
			<view class="price">￥{{price}}<span style="font-size: 40rpx;">/年</span></view>
			<view class="title" style="margin: 36rpx 0 20rpx;">会员权益</view>
			<view class="conent">
				<u-parse :content="text"></u-parse>
			</view>

		</view>
		<view class="bottom">
			<view class="hflex acenter">
				<u-checkbox-group @change="checkboxChange">
					<u-checkbox v-model="agree" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="text">已阅读并同意<span class="read" @click="opens">《会员服务协议》</span></view>
			</view>
			<view class="button hflex acenter jcenter" @click="openMember">
				<view>确定协议并开通</view>
			</view>
		</view>
		<u-popup :show="pay_show" @close="close" mode="bottom" :round="20" :closeable="true">
			<view class="popup">
				<view class="title">立即支付</view>
				<view class="price">￥{{price}}</view>
				<!-- <view class="text1">支付方式</view> -->
				<view class="vflex">
					<u-checkbox-group @change="checkboxChange1" placement="column">
						<view class="box1 hflex acenter jbetween">
							<view class="hflex acenter">
								<image src="/static/images/shop/wx_pay.png" style="width: 48rpx;height: 48rpx;"></image>
								<view class="box_right">微信支付</view>
							</view>
							<u-checkbox name="0" shape="circle"></u-checkbox>
						</view>
						<view class="box1 hflex acenter jbetween">
							<view class="hflex acenter">
								<image src="/static/images/shop/yue_pay.png" style="width: 48rpx;height: 48rpx;"></image>
								<view class="box_right">余额支付（￥{{amount}}）</view>
							</view>
							<view class="hflex acenter">
								<view class="info" v-if="combination">{{info}}</view>
								<u-checkbox name="1" shape="circle" :disabled="disabled"></u-checkbox>
							</view>
						</view>
					</u-checkbox-group>
				</view>
				<view class="btn" @click="pay">立即支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				text: '',
				agree: false,
				agree1: '',
				pay_show: false,
				price: 0,
				member_date: '',
				amount: '',
				info: '需组合支付',
				checkValue: [
					{
						name:'wx',
					},
					{
						name: 'yue'
					}
				],
				data: '',
				pay_data: [],
				combination: false,
				is_vip: 0,
				disabled: false
			}
		},
		onLoad() {
			that = this
			that.getData() 
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.auth.Center/getvipinfo',
					method: 'POST',
				}, function(res) {
					if(res.code == 1) {
						that.price = res.data.price
						that.text = res.data.user_vip_des
						that.data = res.data.user_vip_agreement
						var pages = getCurrentPages()
						var prePage = pages[pages.length - 2]
						that.member_date = prePage.$vm.user.vip_datetime
						that.amount = prePage.$vm.user.money
						if(that.amount==0) {
							that.disabled = true
							that.combination = false
						} else if(Number(that.amount) < Number(that.price)) {
							that.combination = true
						}
						that.is_vip = prePage.$vm.user.is_vip
						
					}
				})
				
			},
			// 阅读并同意
			checkboxChange(n) {
				this.agree = !this.agree
			},
			// 选择支付方式
			checkboxChange1(n) {
				console.log(n);
				this.agree1 = n
			},
			// 确定协议并开通
			openMember() {
				if(that.agree) {
					that.pay_show = true
				} else {
					$api.info('请先阅读并同意《会员服务协议》')
				}
				
			},
			opens() {
				uni.setStorageSync('xieyi',that.data)
				$api.jump('/pages/user/agreement?title=会员服务协议')
				console.log(that.data);
			},
			// 关闭弹窗
			close() {
				that.pay_show = false
			},
			// 立即支付
			pay() {
				console.log(that.agree1);
				if (that.agree1) {
					$api.req({
						url: '/data/api.auth.Center/channel',
						method: 'POST',
						data: {
							type: 1,
							from: 1
						}
					}, function(res) {
						if(res.code == 1) {
							var data = {}
							if(that.agree1[0] == '0' && that.agree1.length == 1) {
								var payment = res.data[0]
								data = {
									pay_code: payment.code
								}
								$api.req({
									url: '/data/api.auth.Center/openvip',
									method: 'POST',
									data: data,
								}, function(res) {
									if(res.code == 1) {
										wx.requestPayment({
										  timeStamp: res.data.pay.timeStamp,
										  nonceStr: res.data.pay.nonceStr,
										  package: res.data.pay.package,
										  signType: 'MD5',
										  paySign: res.data.pay.paySign,
										  success (res) { 
											that.close()
											$api.info("支付成功")
											$api.jump('/pages/tabbar/mine/mine',3)
											// that.getData()
										  },
										  fail (res) { 
											  that.close()
											  // $api.info('支付失败')
										  }
										})
										/* if(res.data.success == 0) {
											$api.info('支付失败')
										} */
									}
								})
							}
							
							else if(!that.combination) {
								var payment = res.data[1]
								data = {
									pay_code: payment.code
								}
								$api.req({
									url: '/data/api.auth.Center/openvip',
									method: 'POST',
									data: data,
								}, function(res) {
									if(res.code == 1) {
										$api.info("支付成功")
										$api.jump('/pages/tabbar/mine/mine',3)
										that.close()
									}
								})
							} else {
								data = {
									pay_code: res.data[1].code,
									difference_pay_code: res.data[0].code
								} 
								$api.req({
									url: '/data/api.auth.Center/openvip',
									method: 'POST',
									data: data,
								}, function(res) {
									if(res.code == 1) {
										for(var i=0;i<that.agree1.length;i++) {
											if(that.agree1[i] == '0') {
												wx.requestPayment({
												  timeStamp: res.data.pay.timeStamp,
												  nonceStr: res.data.pay.nonceStr,
												  package: res.data.pay.package,
												  signType: 'MD5',
												  paySign: res.data.pay.paySign,
												  success (res) { 
													  that.close()
													$api.info("支付成功")
													$api.jump('/pages/tabbar/mine/mine',3)
													// that.getData()
												  },
												  fail (res) { 
													  that.close()
													  // $api.info('支付失败')
												  }
												})
											}
										}
										
										/* if(res.data.success == 0) {
											$api.info('支付失败')
										} */
									}
								})
							}
							
						}
					})
					
				} else {
					$api.info('请先选择支付方式')
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #e4e8f4;
		.top {
			background: url('https://ship-expert.zhousi.hdlkeji.com/common/member_bg.png') no-repeat;
			background-size: 100%;
			width: 100%;
			height: 480rpx;
			.text {
				font-size: 26rpx;
				color: #fff;
				padding: 332rpx 0 0 84rpx;
			}
		}
		.box {
			width: 100%;
			min-height: calc(100vh - 480rpx);
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			box-sizing: border-box;
			padding: 36rpx 30rpx;
			margin-bottom: 246rpx;
			.title {
				font-size: 40rpx;
				color: #444;
			}
			.conent {
				width: 100%;
			}
			.price {
				font-size: 60rpx;
				color: #ff2626;
				padding:34rpx 0 52rpx;
				border-bottom: 1rpx solid #f2f2f2;
			}
		}
		.bottom {
			width: 100%;
			height: 246rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 16rpx 0 rgba(215,215,215,0.5);
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			padding: 36rpx 30rpx;
			.text {
				font-size: 24rpx;
				color: #9c9c9c;
			}
			.read {
				color: #2a63f3;
			}
			.button {
				width: 690rpx;
				height: 96rpx;
				background-color: #506dff;
				border-radius: 50rpx;
				box-shadow: 0 4rpx 28rpx 0 rgba(132,123,255,0.4);
				font-size: 40rpx;
				color: #fff;
				margin: 40rpx 0 36rpx;
			}
		}
		.popup {
			width: 100%;
			box-sizing: border-box;
			padding: 48rpx 30rpx;
			background-color: #fff;
			.title {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				color: #222;
				margin-bottom: 50rpx;
			}
			.price {
				width: 100%;
				text-align: center;
				font-size: 60rpx;
				color: #ff2626;
				margin-bottom: 36rpx;
			}
			.text1 {
				font-size: 30rpx;
				color: #222;
				margin-bottom: 28rpx;
			}
			.box1 {
				width: 100%;
				box-sizing: border-box;
				padding: 36rpx 20rpx;
				border-bottom: 1rpx solid #F2F2F2;
				// background-color: #f6f6f6;
				// border-radius: 20rpx;
				margin-top: 20rpx;
				.box_img {
					width: 48rpx;
					height: 48rpx;
				}
				.box_right {
					margin-left: 20rpx;
					font-size: 26rpx;
					color: #555;
				}
				
			}
			.box1:nth-last-child(1) {
				border: none;
			}
			.btn {
				margin-top: 166rpx;
				width: 670rpx;
				height: 96rpx;
				background-color: #506dff;
				border-radius: 50rpx;
				box-shadow: 0 4rpx 28rpx 0 rgba(132,123,255,0.4);
				font-size: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 96rpx;
				// margin: 40rpx 0 36rpx;
			}
		}
	}
</style>