fh/pages/user/vip.vue

<template>
	<view class="contet">
		<!-- <view class="jg" style="height: 20rpx;background-color: #fff;"></view> -->
		<view class="" style="background-color: #fff;padding-top: 40rpx;position: relative;">
			<image src="../../static/img/ktbg.png" mode=""
				style="position: absolute;top: 0;width: 750rpx;height: 200rpx;"></image>
			<view class="card" style="position: relative;">
				<view class="card-top flex">
					<view class="avtur">
						<image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image>
					</view>
					<view class="main">
						<view class="name">{{ userInfo.nickname }}</view>
						<view class="tip" v-if="userInfo.level == 0">尚未开通会员</view>
					</view>
				</view>
				<view class="now-wrap">
					立即开通
				</view>
				<view class="card-info">
					<view class="info-tit">
						代言人
					</view>
					<view class="info-val">
						￥20000起 终身代言人
					</view>
				</view>
			</view>
		</view>
		<view class="vip">
			<view class="system-title">
				<view class="img" style="margin-right: 45rpx;">
					<image class="img" src="../../static/img/vip-left.png"></image>
				</view>
				<view class="title">代言人特权</view>
				<view class="img" style="margin-left: 45rpx;">
					<image class="img" src="../../static/img/vip-right.png"></image>
				</view>
			</view>
			<view class="item-box flex">
				<view class="item" v-for="(item, index) in viplist" :key="index">
					<image :src="item.pic" mode=""></image>
					<view class="item-title">{{ item.title }}</view>
					<view class="item-tip">{{ item.tip }}</view>
				</view>
			</view>
		</view>
		<view class="vip">
			<view class="system-title">
				<view class="img" style="margin-right: 45rpx;">
					<image class="img" src="../../static/img/vip-left.png"></image>
				</view>
				<view class="title">选择代言人</view>
				<view class="img" style="margin-left: 45rpx;">
					<image class="img" src="../../static/img/vip-right.png"></image>
				</view>
			</view>
			<view class="money-box flex">
				<view class="money" v-for="(item, index) in payList" @click="changevip(item, index)"
					:class="{ current: index == choose }">
					<view class="money-name">{{ item.explain }}</view>
					<view class="now-money">
						￥
						<text>{{ item.money }}</text>
					</view>
					<view class="bf-money">￥{{ item.yuan }}</view>
					<view class="money-tip" :class="{ moneyc: index == choose }">
						<!-- <image src="../../static/img/good.png" mode=""></image> -->
						立省{{ item.sq }}元
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btm-left">
				开通即享代言人特权
			</view>
			<view class="btm-right" @click="readyPay()">
				马上开通
			</view>
		</view>
	</view>
</template>

<script>
	import {
		becomeVip,
		getVip,
		setUserRed,
		claseauto
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		data() {
			return {
				level_id: 3,
				money: '',

				choose: 0,
				payList: [],
				viplist: [{
						pic: '../../static/icon/zdpt.png',
						title: '佣金奖励',
						tip: '更多佣金奖励'
					},
					{
						pic: '../../static/icon/ktqy.png',
						title: '专属折扣',
						tip: '优享会员独享'
					},
					{
						pic: '../../static/icon/yjlhb.png',
						title: '团队奖励',
						tip: '更多团队奖励'
					}
				],
			}
		},
		onLoad() {
			this.getVip()
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			getUserInfoA() {

			},
			// 获取会员等级列表
			getVip() {
				getVip({}).then(({
					data
				}) => {
					data.forEach((sj, index) => {
						console.log(sj, '123456');
						if (sj.explain == '村代') {
							sj.level = 5;
						}
						if (sj.explain == '镇代') {
							sj.level = 4;
						}
						if (sj.explain == '区代') {
							sj.level = 3;
						}
						sj.sq = (sj.money * 0.33).toFixed(0);
						sj.yuan = (sj.sq * 1 + sj.money * 1).toFixed(2);
					});
					this.payList = data;
					// 设置默认选中的对象
					this.level_id = data[0].id;
					this.money = data[0].money;
					console.log(this.payList);
				});
			},
			changevip(item, index) {
				this.level_id = item.id;
				this.level = item.level;
				this.choose = index;
				this.money = item.money;
				this.myProvincial = {
					id: 0,
					name: ''
				};
			},
			getUserInfoB() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						uni.showToast({
							title:'购买成功',
							duration:2000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 800);
						// uni.showModal({
							
						// })
						// if (data.wx_qr) {
						// 	uni.navigateTo({
						// 		url: '/pages/vip/success'
						// 	});
						// } else {
						// 	this.$api.msg('请完善会员信息')
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			url: '/pages/set/userdata'
						// 		});
						// 	}, 1000);
						// }

					})
					.catch(e => {
						console.log(e);
					});
			},
			// 开通会员
			readyPay() {

				let obj = this;
				if (obj.userInfo.level > 0) {
					return obj.$api.msg('您已开通会员')
				}
				getUserInfo()
					.then(({
						data
					}) => {

						this.setUserInfo(data);
						if (data.now_money * 1 < obj.money * 1) {
							return obj.$api.msg('您的余额不足')
						} else {
							obj.payLoding = true;
							obj.froms = uni.getStorageSync('weichatBrowser') || '';
							uni.showLoading({
								title: '支付中',
								mask: true
							});
							let data = {
								pay_type: 'yue',
								level_id: obj.level_id,
								// #ifdef H5
								from: obj.froms ? 'weixin' : 'H5', //来源
								// #endif
								// #ifdef MP-WEIXIN
								from: 'routine', //来源
								// #endif
								// #ifdef APP-PLUS
								from: 'app' //来源
								// #endif
							};
							console.log(data, '传值');
							becomeVip(data).then(({
								data
							}) => {
								console.log('fufei', data);
								uni.hideLoading();

								if (data.status == 'PAY_ERROR') {
									console.log(data);
								}
								if (data.status == 'SUCCESS') {

									obj.getUserInfoB();
								}
								console.log('-----', data);
								let da = data.result.jsConfig;
								if (obj.payName == 'weixin' || obj.payName == 'routine') {
									// let da = data.result.jsConfig;
									console.log('--da--', da);
									let data = {
										// #ifdef H5
										timestamp: da.timestamp,
										// #endif
										// #ifdef MP
										timeStamp: da.timestamp,
										// #endif
										nonceStr: da.nonceStr,
										package: da.package,
										signType: da.signType,
										paySign: da.paySign,
										success: function(res) {
											console.log(res);
											obj.getUserInfoB();
										},
										fail: e => {
											console.log(e);
										}
									};
									console.log('--data--', data);
									// #ifdef MP
									wx.requestPayment(data);
									// #endif
									// #ifdef H5
									if (obj.payName == 'weixin') {
										weixinObj.chooseWXPay(data);
									}
									// #endif
								}

								uni.hideLoading();
								// #ifdef H5
								if (data.status == 'PAY_ERROR') {
									console.log(data);
								}
								if (data.status == 'SUCCESS') {

									obj.getUserInfoB();
								}
								// #endif
							});
						}
					})

				// try {
				// 	let obj = this;
				// 	obj.payLoding = true;
				// 	// #ifdef H5
				// 	// 获取当前是否为微信浏览器
				// 	obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// 	// #endif
				// 	uni.showLoading({
				// 		title: '支付中',
				// 		mask: true
				// 	});
				// 	let data = {
				// 		pay_type: 'yue',
				// 		level_id: 1,
				// 		// #ifdef H5
				// 		from: obj.froms ? 'weixin' : 'H5', //来源
				// 		// #endif
				// 		// #ifdef MP-WEIXIN
				// 		from: 'routine', //来源
				// 		// #endif
				// 		// #ifdef APP-PLUS
				// 		from: 'app' //来源
				// 		// #endif
				// 	};
				// 	console.log(data, '传值');
				// 	becomeVip(data).then(({
				// 		data
				// 	}) => {
				// 		console.log('fufei', data);
				// 		uni.hideLoading();

				// 		if (data.status == 'PAY_ERROR') {
				// 			console.log(data);
				// 		}
				// 		if (data.status == 'SUCCESS') {

				// 			obj.getUserInfoB();
				// 		}
				// 		console.log('-----', data);
				// 		let da = data.result.jsConfig;
				// 		if (obj.payName == 'weixin' || obj.payName == 'routine') {
				// 			// let da = data.result.jsConfig;
				// 			console.log('--da--', da);
				// 			let data = {
				// 				// #ifdef H5
				// 				timestamp: da.timestamp,
				// 				// #endif
				// 				// #ifdef MP
				// 				timeStamp: da.timestamp,
				// 				// #endif
				// 				nonceStr: da.nonceStr,
				// 				package: da.package,
				// 				signType: da.signType,
				// 				paySign: da.paySign,
				// 				success: function(res) {
				// 					console.log(res);
				// 					obj.getUserInfoB();
				// 				},
				// 				fail: e => {
				// 					console.log(e);
				// 				}
				// 			};
				// 			console.log('--data--', data);
				// 			// #ifdef MP
				// 			wx.requestPayment(data);
				// 			// #endif
				// 			// #ifdef H5
				// 			if (obj.payName == 'weixin') {
				// 				weixinObj.chooseWXPay(data);
				// 			}
				// 			// #endif
				// 		}

				// 		uni.hideLoading();
				// 		// #ifdef H5
				// 		if (data.status == 'PAY_ERROR') {
				// 			console.log(data);
				// 		}
				// 		if (data.status == 'SUCCESS') {

				// 			obj.getUserInfoB();
				// 		}
				// 		// #endif
				// 	});
				// } catch (e) {
				// 	console.log('fufiecw', e);
				// 	//TODO handle the exception
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		position: relative;
		margin: auto;
		z-index: 10;
		width: 655rpx;
		height: 324rpx;
		background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
		border-radius: 24rpx;
		padding: 28rpx 25rpx 30rpx 36rpx;

		.now-wrap {
			width: 190rpx;
			line-height: 69rpx;
			background: #C09852;
			border-radius: 35rpx;
			position: absolute;
			top: 39rpx;
			right: 25rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F6DCA9;
			text-align: center;

		}

		.card-top {
			justify-content: flex-start;

			.avtur {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.tip {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				opacity: 0.52;
			}
		}

		.btn {
			position: absolute;
			top: 40rpx;
			right: 24rpx;
			width: 190rpx;
			height: 69rpx;
			background: #3a3a3b;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 69rpx;
			text-align: center;
		}

		.card-info {
			height: 120rpx;
			position: absolute;
			bottom: 30rpx;
			left: 43rpx;

			.info-tit {
				line-height: 70rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.info-val {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #343434;
			}
		}
	}

	.hyjl {
		background-color: #fff;
		padding: 30rpx 30rpx 0;
		margin-bottom: 20rpx;

		.jl-tit {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.tool {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;

		.tool-item {
			width: 33.3%;
			height: 160rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.tool-img {
				width: 45rpx;
				height: 45rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tool-name {
				padding-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #505050;
			}
		}

		.tool-item1 {
			background: #FAFBFF;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			width: 222rpx;
			height: 298rpx;
			background: #FAFBFF;
			border-radius: 10rpx;

			.tool-name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #7B7B7B;
			}

			.bold {
				font-weight: bold;
				color: #000;
			}

			.tool-img {
				width: 157rpx;
				height: 112rpx;
				margin-top: 37rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.bottom-btn {
		display: flex;
		align-items: flex-end;
		position: fixed;
		bottom: 0;
		text-align: center;

		.btm-left {
			width: 750rpx - 280rpx;
			line-height: 100rpx;
			background-color: #34332F;
			color: #fff;
		}

		.btm-right {
			width: 280rpx;
			line-height: 108rpx;

			background: #EFD4A1;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #5A5A5A;
		}
	}

	.vip {
		margin-top: 20rpx;
		background: #ffffff;
		padding-bottom: 54rpx;

		.system-title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 40rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1d2023;
			}

			.img {
				width: 170rpx;
				height: 2rpx;
				display: block;
			}
		}

		.item-box {
			margin-top: 40rpx;
			justify-content: center;
			align-items: center;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

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

				.item-title {
					margin-top: 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.item-tip {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.money-box {
			margin-top: 40rpx;
			justify-content: center;
			align-items: center;
			padding: 0 25rpx 160rpx 0rpx;

			.current {
				border: 1rpx solid #fed591 !important;
				background: #fff8ec !important;
			}

			.money {
				margin-left: 22rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 204rpx;
				height: 296rpx;
				background: #f5f5f5;
				border: 1rpx solid #ffffff;
				border-radius: 20rpx;
				position: relative;

				.tj {
					position: absolute;
					top: 0;
					left: 0;
					width: 90rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;

					.tj-bg {
						width: 90rpx;
						height: 44rpx;
					}

					text {
						display: inline-block;
						position: relative;
						top: -56rpx;
					}
				}

				.money-name {
					margin-top: 58rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #644931;
				}

				.now-money {
					font-size: 22rpx;
					font-family: FZCuHeiSongS-B-GB;
					font-weight: 400;
					color: #f7cf9c;

					text {
						font-size: 40rpx;
					}
				}

				.bf-money {
					font-size: 33rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #9a5a12;
					opacity: 0.35;
				}

				.moneyc {
					background: #f7cf9c !important;
					color: #ffffff !important;
				}

				.money-tip {
					margin-top: 10rpx;
					width: 180rpx;
					height: 45rpx;
					background: #f5f5f5;
					border: 1px solid #f7cf9c;
					border-radius: 23rpx;
					padding: 5rpx 10rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #f7cf9c;

					image {
						position: relative;
						top: 2rpx;
						width: 23rpx;
						height: 23rpx;
					}
				}
			}
		}
	}
</style>