xingmingyi_applet/pages/user/mine/member.vue

<template>
	<view class="pagecon">
		<view class="userBox ">
			<view class="userInfo dffd">
				<view class="top dffs">
					<image class="headimg" :src="userInfo.userInfo.avatar" mode=""></image>
					<view class="uinfo">
						<view class="uinfoPho">{{ userInfo.userInfo.nickname || '欢迎登陆' }}</view>
						<text v-if="userInfo.userInfo.level_time == 0" class="white fontssm">暂未开通</text>
						<text v-if="userInfo.userInfo.level_time != 0" class="white fontssm">到期时间：{{ userInfo.userInfo.level_time }}</text>
					</view>
				</view>
				<view class="bot">—— 开通会员享受更多权益 ——</view>
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">会员套餐</view>
			<view class="specNav dfsa">
				<view v-for="(item, index) in list" :key="index" @click="selHandle(item, index)" :class="[selind == index ? 'sel' : '', 'userLi', 'dffd']">
					<view class="top">限时特惠</view>
					<view class="title">{{ item.rank_name }}</view>
					<view class="monBox">
						¥{{ item.bond }}
						<text>元/{{ item.unit }}</text>
					</view>
					<view class="textgrey fontssm">送{{ item.bean }}学豆</view>
				</view>
				<!-- <view class="userLi dffd">
					<view class="top fontbase">限时特惠</view>
					<view class="title">月会员</view>
					<view class="monBox">
						¥36
						<text class="fontssm">元/月</text>
					</view>
					<view class="textgrey fontssm">送200学豆</view>
				</view>
				<view class="userLi dffd">
					<view class="top">限时特惠</view>
					<view class="title">月会员</view>
					<view class="monBox">
						¥36
						<text>元/月</text>
					</view>
					<view class="textgrey fontssm">送200学豆</view>
				</view> -->
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">会员权益</view>
			<view class="userNav dfsa">
				<view class="userLi">
					<image src="/static/img/pro/usme1.png" mode=""></image>
					<view class="fontssm">学豆全网通用</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme2.png" mode=""></image>
					<view class="fontssm">个性化推荐</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme3.png" mode=""></image>
					<view class="fontssm">实物资料{{ selItem.shi_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme4.png" mode=""></image>
					<view class="fontssm">视频精品课{{ selItem.vedio_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme5.png" mode=""></image>
					<view class="fontssm">名师特供课{{ selItem.jing_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme6.png" mode=""></image>
					<view class="fontssm">精品资料{{ selItem.jing_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme7.png" mode=""></image>
					<view class="fontssm">高级会员图标</view>
				</view>
			</view>
		</view>
		<u-button color="#ED742F" throttleTime="2000" shape="circle" @click="ordPay()" class="custom-style" text="确认支付"></u-button>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			newsInfo: {
				money: '34.00'
			},
			list: [],
			selItem: '', //选中套餐
			selind: '' //选中套餐
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	onLoad(opt) {
		this.onload();
	},
	onShow() {},
	methods: {
		// 选择
		selHandle(item, ind) {
			
			this.selItem = item;
			this.selind = ind;
		},
		onload() {
			this.$api.request('index/levelList').then(data => {
				if (data.code == 200) {
					this.list = data.data;
					if(data.data)
					{
						this.selItem = data.data[0];
					}
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		ordPay() {
			this.$api
				.request('level_order/create', {
					rank_id: this.selItem.id
				})
				.then(data => {
					if (data.code == 200) {
						this.pay(data.data.order_id);
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		pay(id) {
			this.$api
				.request('payment/levelPay', {
					order_id: id
				})
				.then(res => {
					if (res.code && res.code != 200) {
						// this.$refs.confirmBtn.stop();
						this.$api.toast(res.msg || '获取支付信息失败');
						return;
					}
					const orderInfo = res;
					const { timeStamp, nonceStr, paySign } = orderInfo;
					const payParams = {
						provider: 'wxpay',
						orderInfo: res,
						timeStamp,
						nonceStr,
						package: orderInfo.package,
						signType: 'MD5',
						paySign,
						success: e => {
							this.$api.toast('支付成功');
						},
						fail: err => {
							if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
								this.$api.toast('取消支付');
							} else {
								this.$api.toast('支付遇到错误，请稍候重试');
								console.log(err);
							}
						}
					};
					uni.requestPayment(payParams);
				});
		}
	}
};
</script>

<style lang="scss">
.pagecon {
	min-height: 100vh;
	padding-bottom: 60rpx;
	background: #fff;
	.userBox {
		padding: 67rpx 65rpx 0rpx;
		width: 100%;
		height: 387rpx;
		background: linear-gradient(135deg, #c9fdde 0%, #c9fdde 100%);
	}
	.userInfo {
		background: url('data:image/png;base64,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')
			no-repeat;
		background-size: 100% 100%;
		width: 620rpx;
		height: 320rpx;
		align-items: center;
		justify-content: center;
		.headimg {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			background-color: #f5fcfc;
			margin-right: 22rpx;
		}
		.uinfo {
			flex: 1;
			.uinfoPho {
				font-size: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				line-height: 48rpx;
				margin-bottom: 10rpx;
				color: #fff;
			}
		}
		.bot {
			margin-top: 50rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #fff8c5;
			line-height: 40rpx;
		}
	}
	.ordBox {
		margin: 24rpx 0rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.gdHead {
			padding: 27rpx 27rpx 3rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 42rpx;
		}
		.userNav {
			flex-wrap: wrap;
			justify-content: flex-start;
			.userLi {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #626262;
				font-size: 24rpx;
				line-height: 36rpx;
				position: relative;
				margin: 20rpx 0;
				image {
					width: 90rpx;
					height: 90rpx;
					// padding: 5rpx;
					margin: 0 auto 10rpx;
				}
				.fontssm {
					font-size: 18rpx;
				}
			}
		}
		.specNav {
			width: 100%;
			padding: 40rpx 30rpx;
			.userLi {
				border-radius: 13rpx;
				border: 2rpx solid #e5e5e5;
				position: relative;
				width: 214rpx;
				height: 238rpx;
				align-items: center;
				justify-content: center;
				.top {
					position: absolute;
					top: -20rpx;
					left: 0;
					padding: 6rpx 13rpx;
					font-size: 20rpx;
					color: #fff;
					background: linear-gradient(90deg, #50ceb5 0%, #0cb291 100%);
					border-radius: 23rpx 0rpx 23rpx 0rpx;
				}
				.monBox {
					margin: 22rpx 0;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 50rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}
				.litext {
					flex: 1;
					font-size: 32rpx;
					line-height: 30rpx;
					color: $textcom;
				}
			}

			.sel {
				background: rgba(11, 178, 145, 0.1);
				border: 3rpx solid #0bb291;
			}
		}
	}
	.custom-style {
		background-color: #0bb291;
		color: #fff;
		width: 690rpx;
		margin-top: 40rpx;
	}
}
</style>