tlfb/pages/category/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">￥{{ money }}/永久 终身{{name}}</view>
				</view>
			</view>
		</view>
		<view class="hyjl">
			<view class="jl-tit">会员奖励</view>
			<view class="tool flex">
				<view class="tool-item">
					<view class="tool-img"><image src="../../static/icon/kt1.png" mode=""></image></view>
					<view class="tool-name">佣金奖励</view>
				</view>
				<view class="tool-item">
					<view class="tool-img"><image src="../../static/icon/kt2.png" mode=""></image></view>
					<view class="tool-name">专属折扣</view>
				</view>
				<view class="tool-item">
					<view class="tool-img"><image src="../../static/icon/kt3.png" mode=""></image></view>
					<view class="tool-name">专属服务</view>
				</view>
				<view class="tool-item">
					<view class="tool-img"><image src="../../static/icon/kt4.png" mode=""></image></view>
					<view class="tool-name">团队奖励</view>
				</view>
			</view>
		</view>
		<view class="hyjl" style="padding-bottom: 20rpx;">
			<view class="jl-tit">会员优选</view>
			<view class="tool flex">
				<view class="tool-item1">
					<view class="tool-name">会员独享</view>
					<view class="tool-name bold">优惠价</view>
					<view class="tool-img"><image src="../../static/icon/kt5.png" mode=""></image></view>
				</view>
				<view class="tool-item1">
					<view class="tool-name">会员专属</view>
					<view class="tool-name bold">专属服务包</view>
					<view class="tool-img"><image src="../../static/icon/kt6.png" mode=""></image></view>
				</view>
				<view class="tool-item1">
					<view class="tool-name">推广得</view>
					<view class="tool-name bold">更多佣金</view>
					<view class="tool-img"><image src="../../static/icon/kt7.png" mode=""></image></view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btm-left">永久{{name}}￥{{ money }}</view>
			<view class="btm-right" @click="readyPay()">马上开通</view>
		</view>
		<uni-popup ref="popupPay" type="bottom">
			<view class="popup-box">
				<view class="popup-pay">
					<view class="paybox-top flex">
						<view class="type">选择支付方式</view>
						<view class="image" @click="close"><image src="../../static/img/x.png" mode="aspectFill"></image></view>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="../../static/img/weixin.png" mode="aspectFill"></image>
							<view class="zf">微信支付</view>
						</view>
						<label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141"></radio></label>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="../../static/img/yue.png" mode="aspectFill"></image>
							<view class="zf">余额支付</view>
						</view>
						<label class="radio" @click="changePayType(2)">
							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#FE4141"></radio>
						</label>
					</view>
				</view>
				<view class="buttom flex">
					<view class="heji">
						合计：
						<text>
							￥
							<text class="money">{{ money }}</text>
						</text>
					</view>
					<view class="zhifu" @click="pay()">立即支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { becomeVip, getVip } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getUserInfo } from '@/api/user.js';
// #ifdef H5
import weixinObj from '@/plugin/jweixin-module/index.js';
// #endif
export default {
	components: {
		uniPopup
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data() {
		return {
			money: '',
			name:'',
			level_id:'',
			payType: 2,
			payName: 'yue',
			now_money: '', // 当前余额
			payLoding: false, //判断是否支付中
		};
	},
	onLoad() {
		this.getVip();
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		getUserInfoB() {
			getUserInfo({})
				.then(({ data }) => {
					this.setUserInfo(data);
					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);
				});
		},
		// 获取vip等级
		getVip() {
			getVip({}).then(({ data }) => {
				console.log(data)
				this.money = data[0].money
				this.name = data[0].name
				this.level_id = data[0].id
			});
		},
		// 开通会员
		readyPay() {
			this.$refs.popupPay.open();
		},
		close() {
			this.$refs.popupPay.close();
		},
		changePayType(type) {
			this.payType = type;
			console.log('this.payType', this.payType);
			if (this.payType == 1) {
				this.payName = 'weixin';
				console.log('weixin', this.payName);
			}
			if (this.payType == 2) {
				this.payName = 'yue';
				console.log('yue', this.payName);
			}
			if (this.payType == 3) {
				this.payName = 'ali';
				console.log('ali', this.payName);
			}
		},
		pay() {
			let obj = this;
			console.log('点击');
			try {
				let obj = this;
				obj.payLoding = true;
				// #ifdef H5
				// 获取当前是否为微信浏览器
				obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// #endif
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				let data = {
					pay_type: this.payName,
					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.$refs.popupPay.close();
						obj.getUserInfoB();
					}
					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.$refs.popupPay.close();
						obj.getUserInfoB();
					}
					// #endif
				});
			} catch (e) {
				console.log('fufiecw', e);
			}
		}
	}
};
</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: 25%;
		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;
	}
}
.popup-box {
	width: 100%;
	background: #ffffff;
}
.popup-pay {
	position: relative;
	justify-content: space-between;
	padding: 0rpx 25rpx 32rpx 25rpx;
	.paybox-top {
		padding-top: 38rpx;
		width: 100%;
		.type {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.image {
			padding-right: 24rpx;
			padding-bottom: 10rpx;
			image {
				width: 16rpx;
				height: 16rpx;
			}
		}
	}
	.paybox-main {
		width: 100%;
		margin-top: 54rpx;
		.zftype {
			padding-left: 5rpx;
			image {
				width: 38rpx;
				height: 40rpx;
			}
			.zf {
				padding-left: 18rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3f454b;
			}
		}
	}
}
.buttom {
	width: 100%;
	height: 113rpx;
	padding-top: 20rpx;
	align-items: center;
	.heji {
		height: 100%;
		width: 50%;
		padding-left: 23rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3f454b;
		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff0000;
			.money {
				font-size: 36rpx;
			}
		}
	}
	.zhifu {
		width: 50%;
		height: 92rpx;
		background: linear-gradient(180deg, #fd4646, #ff3535);
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
</style>