bawangcan-user/pages/my/myVIP.vue

<template>
	<view>
		<view style="height: 400rpx;background: #1C1C26;padding: 102rpx 30rpx 0;">
			<view class="top_view">
				<view style="display: flex;padding: 30rpx 40rpx;">
					<image :src="avatar"></image>
					<view style="margin-left: 20rpx;">
						<view class="nickName">
							{{nickName}}
						</view>
						<view v-if="member == 0" class="huiyuan_title">
							您目前还未开通会员</view>
						<view v-if="member == 1" class="huiyuan_title">
							您已经是会员了</view>
					</view>
				</view>

				<view class="top_view_bottom">
					<view class="yueka">
						VIP会员月卡</view>
					<view v-if="member == 0" class="huiyuan_biaoyu">
						开通后即可享受会员特权</view>
					<view v-if="member == 1" class="huiyuan_biaoyu">
						您正在享受会员特权</view>
				</view>
			</view>
		</view>
		<view class="vip_title">
			会员专享特权服务</view>

		<view class="category_view">
			<view class="category">
				<!-- <view v-for="(nav, index) in navlist" :key="index"> -->
				<view class="category-list">
					<view class="icon-box-left">
						<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/f0bf9f3ad84c4f198f82560562f907c4.png"
							style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
						</image>
						<view class="text">最高优惠</view>
					</view>
					<view class="icon-box">
						<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/2b65563b9f9342a7a9784daa6507f71e.png"
							style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
						</image>
						<view class="text">推广福利</view>
					</view>
					<view class="icon-box-right">
						<image class="icon" src="https://bwc.xianmxkj.com/img/20210828/8229ebd4434c4586bb9414bf973b154c.png"
							style="height: 58rpx;width: 58rpx;margin-top: 10rpx;">
						</image>
						<view class="text">外卖红包</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="btns" v-if="member == 0" class="vip_btn">
			开通会员只需{{money}}</view>

		<!-- <view class="vipTop">
			<view class="top">
				<view class="topTitle">
					<view class="title">享专属特权</view>
					<view class="pingtai">平台会员</view>
				</view>
				<image class="vipLogo" src="../../static/img/my/viplogo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="vip-center">
			<view class="center-title">会员月卡</view>
			<view class="center-kuang">
				<view class="kuang">VIP会员月卡</view>
				<view class="center-money">¥<span>{{money}}</span><text
					style="font-size: 34rpx;color: grey;text-decoration: line-through;margin-left: 16rpx;">￥{{ oldmoney }}</text></view>
				
				
			</view>
		</view>
		<view class="bottoms">
			<view class="bottoms-title">会员特权</view>
			<view class="vip-bottom">
				<view class="payinfo">
					<image src="../../static/img/my/tgfl.png" mode="widthFix"></image>
					<view class="text">最高优惠</view>
				</view>
				<view class="payinfo">
					<image src="../../static/img/my/zgyh.png" mode="widthFix"></image>
					<view class="text">推广福利</view>
				</view>
				<view class="payinfo">
					<image src="../../static/img/my/hbwm.png" mode="widthFix"></image>
					<view class="text">外卖红包</view>
				</view>
			</view>
		</view>
		<button class="btns" @click="btns">立即支付{{money}}元</button> -->
	</view>
</template>

<script>
	import jweixin from '@/common/jweixin.js'
	export default {
		data() {
			return {
				avatar: '',
				nickName: '',
				money: 0,
				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() {
				//#ifndef H5
				uni.navigateTo({
					url: '/pages/public/login'
				});
				//#endif
				//#ifdef H5
				window.location.href = 'http://waimai.admin.service.yiqihuiju.com/sqx_fast/appLogin/wechatLogin';
				//#endif
			},
			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: #272734;
	}

	.top_view {
		height: 300rpx;
		background-image: url('https://bwc.xianmxkj.com/img/20210828/eedfbf8d508b4093b261546640f3193a.png');
		background-size: 100%;

		.top_view_bottom {
			margin-top: 50rpx;
			margin-left: 30rpx;

			.yueka {
				font-size: 32rpx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #dfc5a7;
			}

			.huiyuan_biaoyu {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC Regular, PingFang SC Regular-Regular;
				font-weight: 400;
				color: #dfc5a7;
			}
		}

		image {
			width: 82rpx;
			height: 82rpx;
			border-radius: 100rpx;
		}

		.nickName {
			font-size: 28rpx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			color: #ffffff;
		}

		.huiyuan_title {
			font-size: 22rpx;
			font-family: PingFang SC Regular, PingFang SC Regular-Regular;
			font-weight: 400;
			color: #c59d7c;
		}
	}

	.category_view {
		// background-image: url('https://bwc.xianmxkj.com/img/20210828/eedfbf8d508b4093b261546640f3193a.png');
		// background-size: 100%;
		width: 690rpx;
		height: 150rpx;
		padding: 40rpx;
		margin: 30rpx;
		z-index: 1;
	}

	.vip_title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		color: #dfc5a7;
		line-height: 32rpx;
		margin-top: 50rpx;
	}

	.vip_btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #af8262 0%, #cab49c 100%);
		border-radius: 50rpx;
		margin: 100rpx 30rpx 30rpx;
		font-size: 38rpx;
		font-weight: 700;
		color: #402321;
		text-align: center;
		line-height: 88rpx;
	}

	.vip_btn1 {
		width: 49%;
		height: 88rpx;
		background: #272734;
		border-radius: 20rpx;
		margin: 30rpx;
		font-size: 38rpx;
		font-weight: 700;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.vipTop {
		background: #222;
		padding: 0 30upx;
		padding-top: 100upx;
	}

	.top {
		background-image: linear-gradient(to bottom, #333333, #343434);
		border-radius: 30upx 30upx 0 0;
		padding: 30upx;
		position: relative;
	}

	.topTitle {
		width: 85%;
		position: absolute;
	}

	.category {
		width: 100%;

		.swiper {
			width: 100%;

			.uni-swiper-dot {
				width: 20upx;
			}
		}

		.category-list {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;

			.icon-box-left {
				width: 33%;
				display: flex;
				flex-flow: wrap;
				justify-content: left;
				font-size: 24rpx;
				color: #DFC5A7;
				text-align: left;

				.icon {
					width: 100upx;
					height: 100upx;
					margin-left: 15rpx;
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: left;
					padding-bottom: 18upx;
					padding-top: 18upx;
				}
			}

			.icon-box-right {
				width: 33%;
				display: flex;
				flex-flow: wrap;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #DFC5A7;

				.icon {
					width: 100upx;
					height: 100upx;
					margin-right: 15rpx;
				}

				.text {
					width: 100%;
					text-align: right;
					padding-bottom: 18upx;
					padding-top: 18upx;
				}

			}

			.icon-box {
				width: 33%;
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				font-size: 24rpx;
				color: #DFC5A7;
				text-align: center;

				.icon {
					width: 100upx;
					height: 100upx;
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					padding-bottom: 18upx;
					padding-top: 18upx;
				}
			}
		}


		.dots {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 15upx;
			width: 100%;

			view {
				width: 30upx;
				height: 5upx;
				background-color: rgba(0, 0, 0, 0.2);

				&.active {
					background-color: #ff570a;
				}
			}
		}
	}

	.title {
		font-size: 38upx;
		font-weight: 700;
		color: #E0B379;
	}

	.pingtai {
		font-size: 28upx;
		color: #fff;
		font-weight: 500;
		margin-top: 10upx;
	}

	.vipLogo {
		width: 100upx;
		margin-left: 84%;
		text-align: right;
	}

	.vip-center {
		padding: 30upx;
		background-color: #fff;
	}

	.center-title {
		margin: 30upx 0;
		font-size: 36upx;
		font-weight: 600;

	}

	.center-kuang {
		padding: 70upx 30upx;
		line-height: 40upx;
		border: 1px solid #DDB276;
		background: #FFF7EA;
		border-radius: 15upx;
		font-size: 28upx;
		color: #7C5B35;
		font-weight: 600;
	}

	.center-kuang view {
		display: inline-block;
		width: 50%;
	}

	.center-money {
		text-align: right;
		color: #E0B379;
	}

	.center-money span {
		font-size: 60upx;
	}

	.bottoms {
		background: #FFFFFF;
		margin-top: 30upx;
		padding: 30upx;
	}

	.bottoms-title {
		font-size: 36upx;
		font-weight: 600;
		color: #333;
		margin: 30upx 0;
	}

	.vip-bottom {

		width: 100%;

		bottom: 0;

		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payinfo {
		width: 100upx;
		text-align: center;

		.text {
			color: #666;
			font-size: 24rpx;
			margin-top: 14rpx;
		}

		image {
			width: 88rpx;
			height: 88rpx;
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		background-color: #E3B97D;
		color: #fff;
		border: 1px solid #E3B97D;
		border-radius: 0;
		width: 100%;
	}

	uni-button:after {
		border: none !important;
	}
</style>