bawangcan-user/pages/my/myVIP.vue

<template>
	<view>
		<view style="display: flex;justify-content: center;padding-top: 28px;">
			<image src="../../static/img/my/vip.png" style="width: 343px;height: 178px;"></image>
		</view>
		<view class="plusVip">
			<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">立即开通</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 style="display: flex;justify-content: center;">
			<view style="background-color: #FFFFFF;">
				<u-divider border-color="#E8CD9C"></u-divider>
				<u-divider color="#E8CD9C" border-color="#E8CD9C">会员特权</u-divider>
				<u-divider border-color="#E8CD9C"></u-divider>
			</view>
		</view>

		<view style="margin-top: 10px;margin: 0 10px;">
			<u-grid :col="2" :border="false">
				<u-grid-item>
					<view class="grid-text">
						<view class="text">
							<view class="title">最高优惠</view>
							
						</view>
						<view class="content">
							<view>可享受美食优惠</view>
						<view >会员专属价格</view>
						</view>
						
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">
						<view class="text">
							<view class="title">最高优惠</view>
							
						</view>
						<view class="content">
							<view>可享受美食优惠</view>
						<view >会员专属价格</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">
						<view class="text">
							<view class="title">最高优惠</view>
							
						</view>
						<view class="content">
							<view>可享受美食优惠</view>
						<view >会员专属价格</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">
						<view class="text">
							<view class="title">最高优惠</view>
							
						</view>
						<view class="content">
							<view>可享受美食优惠</view>
						<view >会员专属价格</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>



	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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.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() {
				let token = this.$queue.getData('token');
				if (token) {
					let userId = this.$queue.getData('userId');
					uni.showLoading({
						title: '支付中'
					});
					this.$Request.postT('/api/order/wxPayMember?userId=' + userId).then(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();
								this.$queue.showToast('支付失败');
							}
						});
					})
				} else {
					this.goLogin();
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #FFFFFF;
		;
	}

	.plusVip {
		height: 40px;
		background: #5D5A5B;
		opacity: 1;
		border-radius: 20px;
		margin: 0 16px;
		margin-top: 26px;
		display: flex;
	}

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

	.lines view {
		width: 30px;
		height: 1px;
		background-color: #F3E6CD;
		margin-bottom: 10px;
	}

	.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-family: PingFang SC;
				font-weight: 500;
				color: #C7904E;
			}
			
		}
		.content{
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			margin-left: 20px;
			margin-top: 10px;
			
		}
		
	}
	

</style>