medicine-xcx/pagesC/member/upgrades_renewals/index.vue

<template>
	<view class="pages" v-if="upgrade_list.length>0">
		<view class="top">
			<image :src="userInfo.headUrl" mode=""></image>
			<view class="user_info">
				<view :class="userInfo.level == 0? 'user_row m-t-32': 'user_row'">
					<text class="user_name">{{userInfo.nickName}}</text>
					<view class="lv" v-if="userInfo.level ==0">
						<image :src="img_url+'vip/0.png'" mode=""></image>
					</view>
					<view class="lv" v-if="userInfo.level ==1">
						<image :src="img_url+'vip/1.png'" mode=""></image>
					</view>
					<view class="lv" v-if="userInfo.level ==2">
						<image :src="img_url+'vip/2.png'" mode=""></image>
					</view>
					<view class="lv" v-if="userInfo.level ==3">
						<image :src="img_url+'vip/3.png'" mode=""></image>
					</view>
					<view class="lv" v-if="userInfo.level ==4">
						<image :src="img_url+'vip/4.png'" mode=""></image>
					</view>
				</view>
				<text class="expire_time" v-if="userInfo.level !==0 && userInfo.levelTime" >到期时间：{{userInfo.levelTime}}</text>
			</view>
		</view>

		<view class="card">
			<view class="title">
				<image :src="img_url+'member/min.png'" mode=""></image>
				<text>耀实惠 等级越高，实惠更多！</text>
			</view>
			<view class="select_pic_video"> 
				<u-subsection mode="subsection" :list="listPicVideo" fontSize="36" height="64"  :current="curNow"
					@change="sectionChange"></u-subsection>
			</view>
			<!-- 升级 -->
			<view v-if="curNow == 0">
				<view class="upgrade">
					<view class="item" v-for="(item,index) in upgrade_list" :key="index">
						<view :class="index== status? 'item select_item ': 'item'" @click="changeStatus(index)">
							<text class="title">{{item.title}}</text>
							<view class="momey_box">
								<text class="icons">￥</text>
								<text class="price">{{item.money}}</text>
							</view>
							<view class="old_money">
								<text>原价：</text>
								<text class="through">¥{{item.oldMoney}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 权益 -->
				<view class="equities">
					<view class="title">
						<image :src="img_url+'member/max.png'" mode=""></image>
						<text>{{upgrade_list[status].name}}</text>
					</view>
					<view class="item">
						<rich-text :nodes="upgrade_list[status].concert"></rich-text>
					</view>
				</view>

			</view>
			<!-- 续费 -->
			<view v-if="curNow == 1">
				<view class="select">
					<view class="item" v-for="(item,index) in select_list" :key="index">
						<view :class="index== status_tow? 'item select_item ': 'item'" @click="changeStatus(index)">
							<text class="title">{{item.name}}</text>
							<text class="price" v-if="index == 0">￥{{item.money}}/{{item.overdue}}{{ item.overdueType==0?'天':'h'}}</text>
							<text class="price" v-else>￥{{item.money}}/年</text>
							<view class="old_money">
								<text>原价：</text>
								<text class="through">¥{{item.oldMoney}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 权益 -->
				<view class="equities">
					<view class="title">
						<image :src="img_url+'member/max.png'" mode=""></image>
						<text v-if="curNow == 0">{{upgrade_list[status].title}}</text>
						<text  v-else>{{select_list[status_tow].title}}</text>
					</view>
					<rich-text v-if="curNow == 0"> :nodes="upgrade_list[status].concert"></rich-text>
					<rich-text v-else :nodes="select_list[status_tow].concert"></rich-text>
					<!-- <view class="item" v-for="(item,index) in select_list[status].equitiesList" :key="index">
						<image :src="img_url+'member/dot.png'" mode=""></image>
						<text>{{item}}</text>
					</view> -->
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn">
				<view class="left">
					<text class="icons">￥</text>
					<text class="num" v-if="curNow == 0">{{upgrade_list[status].money}}</text>
					<text class="num" v-else>{{select_list[status_tow].money}}</text>
					<!-- <text class="info_text">开通即享特权</text> -->
				</view>
				<text v-if="curNow == 0" class="right" @click="toDredge">升级</text>
				<text v-else class="right" @click="toDredge">续费</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config_img from "@/utils/js/config.js"
	export default {
		data() {
			return {
				img_url: config_img.img_url,
				status: 0,
				status_tow: 0,
				listPicVideo: ['升级', '续费'],
				curNow: 0,
				upgrade_list: [],
				select_list: [],
				userInfo: {},
				url: null,  //从哪里来
			}
		},
		onUnload() {
			uni.navigateBack({
				delta: 3
			})
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("__user_info");
			this.getVipRoleList();
		
		},
		methods: {
			// 刷新用户个人信息
			getUserInfo () {
				uni.showLoading();
				this.$api('getUserInfo')
				.then(res => {
					let { code, result, message } = res
					uni.hideLoading();
					if (code === 200) {
						const userInfo = {...result.userInfo,...result.account}
						this.$storage.setStorage("__user_info",userInfo)
						console.log(userInfo)
					} else {
						this.$Toast(message)
						
					}
				})
				.catch(err => {
					this.$Toast(err.message)
					uni.hideLoading();
				})
			},
			sectionChange(index) {
				console.log(index)
				this.curNow = index
				if(index == 0) {
					// 升级
					this.getVipRoleList();
				}else {
					// 续费
					this.getVipList();
				}
				// this.rightList[index].show_pic_video = !this.rightList[index].show_pic_video
				// if(index == 0) {
				// 	this.show_pic_video = true
				// }else {
				// 	this.show_pic_video = false
				// }
				// this.curNow = index;
			},
			getVipList() {
				// 续费
				uni.showLoading();
				this.$api('getVipList').then(res => {
					let { code, result, message } = res;
					uni.hideLoading();
					if(code == 200) {
						console.log(result)
						this.select_list = result.records
					}else {
						this.$Toast(message);
					}
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message);
				})
			},
			getVipRoleList() { 
				// 升级
				uni.showLoading();
				this.$api('getVipRoleList').then(res => {
					let { code, result, message } = res;
					uni.hideLoading();
					if(code == 200) {
						console.log(result)
						this.upgrade_list = result.records
					}else {
						this.$Toast(message);
					}
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message);
				})
			},
			changeStatus(index) {
				console.log(index,this.curNow)
				if(this.curNow == 0) {
					this.status = index
				} else {
					this.status_tow = index
				}
			},
			toDredge() {
				if(this.curNow == 0) {
					// 升级 0
					const id = this.upgrade_list[this.status].id;
					if(this.userInfo.cardType == 0) {
						uni.navigateTo({
							url: "./../dredge/index?type=0&id="+id
						})
					}else{
						this.toUpgradesRenewals(0,id)
					}
				} else {
					// 续费 1
				  const id = this.select_list[this.status_tow].id;
					if(this.userInfo.cardType == 0) {
						uni.navigateTo({
							url: "../dredge/index?type=1&id="+id
						})
					}else{
						this.toUpgradesRenewals(1,id)
					}
				}
			},
			toUpgradesRenewals(type,id) {
				let url = type == 0 ? 'vipRolePay': 'vipPay'
				this.$api(url,{id}).then(res =>{
					const { code, result, message } = res
					console.log(res)
					if (code == 200) { 
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.packageValue,
							signType: result.signType,
							paySign: result.paySign,
							success: res => {
								this.$Toast('支付成功');
								// 刷新用户数据
								this.getUserInfo();
								setTimeout(() => {
									this.$tools.navigateTo({
										url: './../upgrades_renewals/index'
									})
								},1500)
							},
							fail:error=>{
								this.$Toast('取消支付')
							}
						})
					} else{
						this.$Toast(message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.pages {
		position: relative;
		.top {
			background-color: #000;
			height: 404rpx;
			display: flex;
			align-items: flex-start;
			border-bottom-left-radius: 49rpx;
			border-bottom-right-radius: 49rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin-top: 31rpx;
				margin-left: 45rpx;
			}

			.user_info {
				display: flex;
				padding-left: 17rpx;
				flex-direction: column;

				.user_row {
					padding-top: 53rpx;
					display: flex;
					align-items: center;
					color: #fff;

					.user_name {
						font-size: 38rpx;
					}

					.lv {
						position: relative;
						margin-left: 20rpx;
						width: 144rpx;
						height: 42rpx;
						image {
							position: absolute;
							width: 144rpx;
							height: 42rpx;
							border-radius: 0;
							margin: 0;
							padding: 0;
						}

						text {
							position: absolute;
							display: inline-block;
							width: 144rpx;
							padding-top: 10rpx;
							padding-left: 45rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							top: 0;
							left: 0;
						}
					}
				}

				.expire_time {
					padding-top: 20rpx;
					font-size: 32rpx;
				}
			}

			text {
				color: #fff;
			}
		}

		.card {
			position: absolute;
			top: 224rpx;
			left: 12rpx;
			right: 12rpx;
			width: 729rpx;
			border-top-left-radius: 70rpx;
			border-top-right-radius: 70rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				margin-top: 42rpx;
				margin-bottom: 42rpx;

				image {
					width: 55rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.select_pic_video {
				background-color: #fff;
				border-radius: 25rpx;
				width: 693rpx;
				height: 64rpx;
				margin: 0 auto;
				background-color: #F5F5F5;
				font-size: 32rpx;

				/deep/ .u-subsection {
					border-radius: 25rpx !important;
					width: 700rpx !important;

					.u-item {
						width: 346rpx !important;
						border: none !important;
					}

					.u-item-bg {
						width: 350rpx !important;
						background-color: #F6D27F !important;
						border-radius: 25rpx !important;
						color: #FFF;
					}
				}

			}

			.upgrade {
				margin-top: 51rpx;
				display: flex;
				// justify-content: space-between;
				.item {
					width: 200rpx;
					// height: 224rpx;
					margin: 0 15rpx;
					background-color: #F5F5F5;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 15rpx;
					// padding-bottom: 20rpx;
					.title {
						margin-top: 31rpx;
						margin-bottom: 0;
						color: #8B5B13;
						font-size: 36rpx;
						font-weight: bold;
					}

					.momey_box {
						margin-top: 20rpx;
						margin-bottom: 22rpx;
						.icons {
							font-size: 36rpx;
						}

						.price {
							font-size: 49rpx;
						}
					}

					.old_money {
						margin-bottom: 35rpx;
						font-size: 25rpx;

						.through {
							text-decoration: line-through;
						}
					}
				}

				.select_item {
					background-color: #FFEDCF;
					color: #8B5B13;
				}
			}


			.select {
				width: 605rpx;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					background-color: #F5F5F5;
					margin-top: 33rpx;
					color: #000000;
					width: 285rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 15rpx;

					.title {
						margin-top: 0rpx;
						margin-bottom: 0;
						font-size: 36rpx;
						font-weight: bold;
					}

					.price {
						font-size: 40rpx;
						margin-top: 20rpx;
						margin-bottom: 22rpx;
					}

					.old_money {
						margin-bottom: 35rpx;
						font-size: 25rpx;

						.through {
							text-decoration: line-through;
						}
					}
				}

				.select_item {
					background-color: #FFEDCF;
					margin: 0;
					padding-top: 32rpx;
					color: #8B5B13;
				}
			}

			.equities {
				margin-top: 57rpx;
				margin-left: 65rpx;
				width: 596rpx;

				.title {
					margin-top: 0;
					margin-bottom: 0;

					image {
						width: 61rpx;
						height: 41rpx;
					}

					text {
						font-size: 36rpx;
						font-weight: bold;
						color: #000;
					}
				}
				image {
						width: 31rpx;
						height: 35rpx;
						margin-top: 8rpx;
						margin-right: 17rpx;
					}
				font-size: 32rpx;
			}

			.btn {
				width: 642rpx;
				height: 93rpx;
				border-radius: 47rpx;
				overflow: hidden;
				margin-top: 140rpx;
				margin-bottom: 47rpx;
				display: flex;

				.left {
					width: 309rpx;
					background-color: #302F2D;
					display: flex;
					justify-content: center;
					align-items: center;

					.icons {
						font-size: 24rpx;
						padding-top: 10rpx;
						color: #FFDA85;
					}

					.num {
						font-size: 43rpx;
						color: #FFDA85;
					}

					.info_text {
						font-size: 14rpx;
						padding-left: 10rpx;
						padding-top: 20rpx;
						color: #C2B09A;
					}
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 38rpx;
					font-weight: bold;
					color: #6F4920;
					background-color: #F6D27F;
				}
			}

		}
	}
</style>