shunfengche-sfd/my/vip/vip.vue

<template>
	<view>
		<!-- #ifndef H5 -->
		<u-navbar :title="title" back-icon-color="#ffffff" :background="background" :border-bottom="false"
			:immersive="true"></u-navbar>
		<!-- #endif -->
		<u-navbar :title="title" back-icon-color="#ffffff" :background="background" :border-bottom="false"
			:immersive="true"></u-navbar>
		<view class="bgContont">
			<image class="bgContont-img" src="../static/vipBg.png" mode=""></image>
			<view class="vipContont">
				<view class="vipContont-title flex align-center justify-center">
					<image src="../static/vipTitle.png" mode="widthFix"></image>
				</view>
				<view class="vipContont-info flex align-center justify-center">
					<image src="../static/vipInfoBg.png" mode=""></image>
					<view class="vipContont-infot">
						<view class="vipContont-infot-title">
							{{vipEndTime?'尊享会员':'暂未开通'}}
						</view>
						<view class="vipContont-infot-titles">
							{{vipEndTime?'已享受接单特权':'开通即可享受接单权限'}}
						</view>
						<view v-if="vipEndTime" class="vipContont-infot-time">
							到期时间
						</view>
						<view v-if="vipEndTime" class="vipContont-infot-times">
							{{vipEndTime}}
						</view>
					</view>
				</view>
				<view class="vipContont-mask flex justify-center">
					<image src="../static/vipInfoMask.png" mode=""></image>
				</view>
				<view v-if="vipList.length>0" class="vipContont-list flex align-center justify-center">
					<view class="vipContont-lists flex align-center justify-between flex-wrap">
						<view @click="current = index" class="vipContont-list-item"
							:class="current == index?'avticeColor':''" v-for="(item,index) in vipList" :key="index">
							<view class="vipContont-list-item-txt">
								{{item.vipName}}
							</view>
							<view class="vipContont-list-item-price">
								{{item.money}}
								<text>元</text>
							</view>
							<view class="vipContont-list-item-oldPrice">
								¥{{item.oldMoney}}
							</view>
						</view>
						<view class="vipContont-list-item" style="height: 0;border: none;"></view>
					</view>

				</view>
				<view class="vipContont-xy flex align-center justify-center">
					<view class="vipContont-xys flex align-center">
						<u-checkbox active-color="#d7b586" style="margin-right: 10rpx;" shape="circle"
							v-model="checked"></u-checkbox>
						<view @click.stop.prevent="checked = !checked" class="flex align-center">
							我已阅读并同意<text @click="goXieyi()" style="color: #d7b586;">《会员开通协议》</text>
						</view>
					</view>
				</view>
				<view class="vipContont-btn flex align-center justify-center">
					<view @click="isPay()" class="vipContont-btns flex align-center justify-center">
						{{vipEndTime?'立即续费':'立即开通'}}
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPay" mode="bottom" border-radius="24" closeable>
			<view class="showPay">
				<view class="showPay-title">
					{{vipList[current]?vipList[current].vipName:''}}
				</view>
				<view class="showPay-titles">
					¥：{{vipList[current]?vipList[current].money:0}}
				</view>
				<u-radio-group size="44" v-model="openWay" style="width: 100%;">
					<view class="showPay-list">
						<view @click="openWay = item.id" class="showPay-list-item flex align-center justify-between"
							v-for="(item,index) in openLists" :key="index">
							<view class="showPay-list-item-l">
								<image :src="item.image" mode=""></image>
								{{item.name}}
							</view>
							<u-radio :name="item.id">
							</u-radio>
						</view>
					</view>
				</u-radio-group>
				<view class="showPay-btn flex align-center justify-center">
					<view @click="pay()" class="showPay-btns flex align-center justify-center">
						立即支付
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				background: {
					background: 'transparent'
				},
				vipList: [],
				current: 0,
				openLists: [], //支付选项
				openWay: -1,
				showPay: false, //是否显示支付按钮
				checked: false, //是否同意会员开通协议
				vipEndTime: '', //vip到期时间
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.openLists = [{
				id: 1,
				image: '../static/weixin.png',
				name: '微信'
			}]
			this.openWay = 1
			// #endif

			// #ifdef APP-PLUS
			this.openLists = [{
					id: 1,
					image: '../static/weixin.png',
					name: '微信'
				},
				{
					id: 2,
					image: '../static/zhifubao.png',
					name: '支付宝'
				}
			]
			this.openWay = 1
			// #endif
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  443
				this.$Request.get('/app/common/type/443').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.openLists = [{
							id: 1,
							image: '../static/weixin.png',
							name: '微信'
						}];
						this.openWay = 1;
					} else {
						this.openLists = [{
							id: 2,
							image: '../static/zhifubao.png',
							name: '支付宝'
						}];
						this.openWay = 2;
					}
				})
			} else {
				this.openLists = [{
					id: 2,
					image: '../static/zhifubao.png',
					name: '支付宝'
				}];
				this.openWay = 2;
			}
			// #endif
			this.getVipInfo()
			this.getUserInfo()
			this.getVipList()
		},
		methods: {
			isPay() {
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并同意《会员开通协议》',
						icon: 'none'
					})
					return
				}
				this.showPay = true
			},
			//去会员
			goXieyi() {
				uni.navigateTo({
					url: '/my/setting/vipVereinbarung'
				})
			},
			//支付
			pay() {
				let that = this
				uni.showLoading({
					title: '支付中'
				});
				if (this.openWay == 1) { //微信
					// 小程序支付
					// #ifdef MP-WEIXIN
					let data = {
						vipId: this.vipList[this.current].id,
						type: 3
					}
					this.$Request.postT('/app/wxPay/payMember', data).then(res => {
						if (res.code == 0) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timestamp,
								nonceStr: res.data.noncestr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.sign,
								success: function(res) {
									that.showPay = false
									uni.hideLoading();
									that.getVipInfo()
									uni.showToast({
										title: '支付成功'
									})
								},
								fail: function(err) {
									console.log(err)
									uni.hideLoading()
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					// #endif
					// #ifdef APP
					let data = {
						vipId: this.vipList[this.current].id,
						type: 1
					}
					this.$Request.postT('/app/wxPay/payMember', data).then(res => {
						if (res.code == 0) {
							this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					// #endif
					// #ifdef H5
					let data = {
						vipId: this.vipList[this.current].id,
						type: 2
					}
					this.$Request.postT('/app/wxPay/payMember', data).then(res => {
						if (res.code == 0) {
							this.callPay(res);
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					// #endif

				} else { //支付宝支付
					// 支付宝app支付
					// #ifdef APP
					let data = {
						vipId: this.vipList[this.current].id,
						type: 2
					}
					this.$Request.postT('/app/aliPay/payMember', data).then(res => {
						if (res.code == 0) {
							this.isCheckPay(res.code, 'alipay', res.data);
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					// #endif
					//支付宝h5支付
					// #ifdef H5
					let data = {
						vipId: this.vipList[this.current].id,
						type: 1
					}
					this.$Request.postT('/app/aliPay/payMember', data).then(res => {
						if (res.code == 0) {
							uni.hideLoading()
							const div = document.createElement('div')
							div.innerHTML = res.data //此处form就是后台返回接收到的数据
							document.body.appendChild(div)
							document.forms[0].submit()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					// #endif
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.data.appid, //公众号名称，由商户传入
						"timeStamp": response.data.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.data.noncestr, //随机串
						"package": response.data.package,
						"signType": response.data.signType, //微信签名方式：
						"paySign": response.data.sign //微信签名
					},
					function(res) {
						console.log(res, '/*-/*-/*-')
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.hideLoading()
							that.getVipInfo()
							that.showPay = false
							uni.showLoading({
								title: '支付成功'
							});
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			setPayment(name, order) {
				let that = this
				console.log(name, '*-*-*', order)
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						that.getVipInfo()
						that.showPay = false
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			getUserInfo() {
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$Request.getT("/app/user/selectUserDetails", data).then(res => {
					if (res.code == 0) {
						if (res.data.isVip && res.data.isVip == 1) {
							this.getVipInfo()
						} else {
							this.vipEndTime = ''
						}
					}
				})
			},
			//获取会员信息
			getVipInfo() {
				this.$Request.getT('/app/UserVip/selectUserVip').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.vipEndTime = res.data.endTime
						} else {
							this.vipEndTime = ''
						}
					}
				})
			},
			//获取会员类型列表
			getVipList() {
				this.$Request.getT('/app/VipDetails/selectVipDetails').then(res => {
					if (res.code == 0) {
						this.vipList = res.data
					}
				})
			},
		}
	}
</script>
<style>
	::v-deep .u-radio__label {
		display: none !important;
	}

	::v-deep .u-checkbox__label {
		display: none !important;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #1c1b18;
	}

	.vipContont-xy {
		width: 100%;
		margin-top: 40rpx;

		.vipContont-xys {
			width: 686rpx;
			text-align: center;
			color: #ffffff;
		}
	}

	.showPay {
		width: 100%;
		height: auto;

	}

	.showPay-title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.showPay-titles {
		font-size: 30rpx;
		width: 100%;
		text-align: center;
	}

	.showPay-list {
		width: 100%;
		margin-top: 20rpx;
	}

	.showPay-list-item {
		width: 100%;
		margin-bottom: 30rpx;
		padding: 0 32rpx;
	}

	.showPay-list-item-l {
		display: flex;
		align-items: center;
		font-size: 30rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	.showPay-btn {
		width: 100%;
		height: 88rpx;
		margin-bottom: 40rpx;

		.showPay-btns {
			width: 686rpx;
			height: 100%;
			border-radius: 44rpx;
			background-color: #2979ff;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.bgContont {
		width: 100%;
		height: 100vh;
		position: relative;
	}


	.bgContont-img {
		width: 100%;
		height: 100%;
	}

	.vipContont {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 44px;
		/* #endif */

	}

	.vipContont-title {
		width: 100%;
		margin-top: 70rpx;

		image {
			width: 634rpx;
			height: auto;
		}
	}

	.vipContont-info {
		width: 100%;
		height: 320rpx;
		margin-top: 80rpx;
		position: relative;

		image {
			width: 686rpx;
			height: 320rpx;
		}

		.vipContont-infot {
			width: 686rpx;
			height: auto;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
			padding: 30rpx 40rpx;
		}

		.vipContont-infot-title {
			font-size: 48rpx;
			font-weight: 1000;
			color: #56260A;
			font-style: italic;
		}

		.vipContont-infot-titles {
			color: #765542;
			font-size: 24rpx;
			font-weight: 500;
		}

		.vipContont-infot-time {
			margin-top: 40rpx;
			color: #765542;
			font-size: 24rpx;
			font-weight: 500;
		}

		.vipContont-infot-times {
			font-size: 28rpx;
			color: #765542;
			font-weight: 500;
			margin-top: 10rpx;
		}
	}

	.vipContont-mask {
		width: 100%;
		// height: calc(100vh - 566rpx);
		margin-top: -70rpx;
		background-color: #1c1b18;

		image {
			width: 686rpx;
			height: 84rpx;
		}
	}

	.avticeColor {
		background: linear-gradient(90deg, #EFDCB5 0%, #DDB27D 100%) !important;

		.vipContont-list-item-txt {
			color: #775021 !important;
		}

		.vipContont-list-item-price {
			color: #795120 !important;
		}

		.vipContont-list-item-oldPrice {
			color: #7A4E20 !important;
		}
	}

	.vipContont-list {
		width: 100%;
		height: auto;

		.vipContont-lists {
			width: 686rpx;
			height: 100%;
		}

		.vipContont-list-item {
			width: 215rpx;
			height: 268rpx;
			background-color: #FEF9E9;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 2px solid #FEE3AD;
		}

		.vipContont-list-item-txt {
			color: #222222;
			font-size: 28rpx;
		}

		.vipContont-list-item-price {
			color: #222222;
			font-size: 56rpx;
			font-weight: bold;
			margin: 20rpx 0;

			text {
				font-size: 20rpx;
				font-weight: normal;
			}
		}

		.vipContont-list-item-oldPrice {
			color: #464646;
			font-size: 24rpx;
			font-weight: 500;
			text-decoration: line-through;
		}
	}

	.vipContont-btn {
		width: 100%;
		height: 110rpx;
		margin-top: 40rpx;

		.vipContont-btns {
			width: 686rpx;
			height: 110rpx;
			border-radius: 24rpx;
			background: linear-gradient(122deg, #EFDCB5, #DDB27D);
			color: #56260A;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>