bawangcan-user/pages/my/myVIP.vue

<template>
	<view>
		<view class="top-box">
			<view class="index-top">
				<image src="https://download.cyjyyjy.com/vip.png"></image>
				<view class="txt-box">
					<view class="s-txt">充值会员,优惠享受不停</view>
					<view class="b-txt">原价39.99元，限时特价<text style="font-size: 46rpx;">{{money}}</text>元</view>
				</view>
			</view>
			<view class="isvip-box" v-if="userInfo.member == 1">
				<view>有效期至：{{userInfo.endTime.split(' ')[0]}}</view>
				<view class="renew-btn" @click="btns()">立即续费</view>
			</view>
		</view>
		<view class="plusVip"  v-if="userInfo.member != 1">
			<view style="display: flex;align-items: center;flex: 1;">
				<view style="margin-left: 44px;font-size: 16px;
font-family: PingFang SC;font-weight: 500;color: #FFFFFF;">Plus会员卡</view>
				<view style="margin-left: 4px;color: #FFE5C1;font-size: 24px;">{{money}}</view>
				<view style="font-size: 16px;
font-family: PingFang SC;font-weight: 500;
color: #FFFFFF;">元</view>
			</view>
			<view class="kaitong" @click="btns()">立即开通</view>

		</view>
		<view style="display: flex;justify-content: center;margin-top: 10px;">
			<image src="../../static/img/my/tequan.png" style="width: 25.09px;height: 15.94px;"></image>
		</view>
		<view>
			<view class="title-box">
				<view class="title">会员特权</view>
			</view>
		</view>
		<view class="special-box">
			<view class="special-item">
				<view class="t-word">最高优惠</view>
				<view class="desc">可享受美食优惠 会员专属价格</view>
			</view>
			<view class="special-item">
				<view class="t-word">最高优惠</view>
				<view class="desc">可享受美食优惠 会员专属价格</view>
			</view>
			<view class="special-item">
				<view class="t-word">最高优惠</view>
				<view class="desc">可享受美食优惠 会员专属价格</view>
			</view>
			<view class="special-item">
				<view class="t-word">最高优惠</view>
				<view class="desc">可享受美食优惠 会员专属价格</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import jweixin from '@/common/jweixin.js'
	export default {
		data() {
			return {
				userInfo: {},
				avatar: '',
				nickName: '',
				money: 9.9,
				member: 9,
				oldmoney: 0
			};
		},
		onLoad() {
			let nickName = this.$queue.getData('nickName');
			if (nickName && nickName !== 'undefined') {
				this.nickName = nickName;
			} else {
				this.nickName = '';
			}

			let avatar = this.$queue.getData('avatar');
			if (avatar && avatar !== 'undefined') {
				this.avatar = avatar;
			} else {
				this.avatar = '/static/img/logo.png';
			}
			let that = this;
			that.$Request.getT('/common/type/115').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.money = res.data.value;
					}
				}
			});
			that.$Request.getT('/common/type/137').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.oldmoney = res.data.value;
					}
				}
			});
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
					if (res.code === 0) {
						this.userInfo = res.data
						this.member = res.data.member ? res.data.member : 0;
						this.nickName = res.data.nickName ? res.data.nickName : res.data.phone;
						this.avatar = res.data.imageUrl ? res.data.imageUrl :
							this.$queue.setData("avatar", res.data.imageUrl ? res.data.imageUrl :
								'/static/img/logo.png');
						this.$queue.setData('member', res.data.member);
						this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
						this.$queue.setData("mobile", res.data.phone);
						this.$queue.setData("invitationCode", res.data.invitationCode);
						this.$queue.setData("relation_id", res.data.relationId);
						this.$queue.setData("relation", res.data.invitationCode);
						this.$queue.setData("grade", res.data.grade);
						this.$queue.setData("isInvitation", res.data.isInvitation);
						this.$queue.setData("gender", parseInt(res.data.gender));
						this.$queue.setData("sex", res.data.sex);
					} else {
						// this.goLogin();
					}
				});
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			btns() {
				var that = this;
				let token = this.$queue.getData('token');
				if (token) {
					let userId = this.$queue.getData('userId');
					uni.showLoading({
						title: '支付中'
					});
					//#ifdef MP-WEIXIN
					this.$Request.postT('/api/order/wxPayMember?userId=' + userId + '&type=3').then(res => {
						this.wxPay(res)
						uni.hideLoading();
					})
					//#endif
					//#ifdef H5
					this.h5Pay()
					//#endif
				} else {
					uni.hideLoading();
					this.goLogin();
				}
			},
			wxPay(res){
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timestamp,
					nonceStr: res.noncestr,
					package: res.package,
					signType: res.signType,
					paySign: res.sign,
					success: function(res) {
						uni.showLoading({
							title: '支付成功'
						});
						uni.hideLoading();
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					},
					fail: function(err) {
						uni.hideLoading();
						that.$queue.showToast('支付失败');
					}
				});
			},
			h5Pay(){
				var pageUrl = encodeURIComponent(window.location.href);
				jweixin.wxChatWebPay(pageUrl).then((result)=>{
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #FFFFFF;
		/* #ifdef H5 */
		padding-top: 20rpx;
		/* #endif */
	}
	.top-box{
		padding: 0 32rpx;
	}
	.index-top{
		width: 100%;
		height: 396rpx;
		position: relative;
		z-index: 3;
		image{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.txt-box{
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 48rpx;
			.s-txt{
				color: #FCD4B4;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
			.b-txt{
				color: #FCD4B4;
				font-size:34rpx;
				font-weight: 500;
				line-height: 44rpx;
			}
		}
	}
	.isvip-box{
		width: 686rpx;
		height: 128rpx;
		background: linear-gradient(180deg, #F9D68A 0%, #FFC448 100%);
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		font-size: 24rpx;
		color: #5D5A5B;
		display: flex;
		justify-content: space-between;
		padding: 62rpx 32rpx 0;
		position: relative;
		top: -40rpx;
		.renew-btn{
			width: 158rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			color: #F9D68A;
			background: #5D5A5B;
			border-radius: 40rpx;
		}
	}
	.plusVip {
		width: 686rpx;
		height: 80rpx;
		background: #5D5A5B;
		border-radius: 40rpx;
		margin: 26rpx auto;
		display: flex;
	}

	.kaitong {
		width: 98*2rpx;
		background: linear-gradient(180deg, #FF7A77 0%, #F8504C 100%);
		border-radius: 20*2rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18*2rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.lines view {
		width: 60rpx;
		height: 1px;
		background-color: #F3E6CD;
		margin-bottom: 20rpx;
	}

	.grid-text {
		width: 120px;
		height: 120px;
		border: 1px solid #E8CD9C;
		border-radius: 50%;
		opacity: 1;
		
		 .text{
			margin-top: 20px;
			margin-left: 30px;
			
			
			.title{
				font-size: 14px;
				font-weight: 500;
				color: #C7904E;
			}
			
		}
		.content{
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			margin-left: 20px;
			margin-top: 10px;
			
		}
		
	}
	.title-box{
		width: 100%;
		display: flex;
		justify-content: center;
		.title{
			width: 262rpx;
			height: 22rpx;
			background: url(../../static/img/my/title-bg.png);
			background-size: 100% 100%;
			line-height: 22rpx;
			text-align: center;
			margin: 10rpx auto;
			color: #E8CD9C;
			font-size: 28rpx;
		}
	}
	.special-box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 80rpx;
		.special-item{
			width: 240rpx;
			height: 240rpx;
			border: 2rpx solid #E8CD9C;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			margin-bottom: 60rpx;
			.t-word{
				font-size: 28rpx;
				color: #C7904E;
				margin-bottom: 24rpx;
			}
			.desc{
				color: #CCCCCC;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}

</style>