discounts-minapp/my/memberCenter/index.vue

<template>
	<view class="memberCenter">
		<zs-header title="会员中心" :background="background"></zs-header>
		<view class="top-box target" :style="{backgroundImage:`url(${list[current].backImg})`}">
			<view class="user-info">
				<image class="image" :src="userInfo.imgPath || defaultImg" lazy-load mode=""></image>
				<view class="info">
					<view class="user-name" :style="{color:`${list[current].backColour}`}">{{userInfo.nickname ||'用户'}}</view>
					<view class="tel">{{currentLevelName ||'您当前未开通会员'}}</view>
				</view>

			</view>

			<view class="swiper-box">
					<image v-if="current!=0" class="click left" src="../../static/member/click.gif" mode=""></image>
					<image v-if="current!=list.length-1" class="click" src="../../static/member/click.gif" mode=""></image>
				<swiper @change="changeSwiper" :current="current" class="swiper" 
					>
					<swiper-item class="swiper-item" v-for="(item,index) in list" :key="item.setMealCode">
						<view class="content">
							<view :style="{background:item.backColour,color:item.colour}" v-if="userInfo.setMealCode == item.setMealCode" class="tag">
								当前等级
							</view>
							<image class="icon" :src="item.imgUrl" mode=""></image>
							<!-- <view class="price" :style="{color:item.color}">
								{{`开通会员${item.price}/月`}}
							</view>
							<view class="notice" :style="{color:item.color}">
								开通会员预计节省 <text class="num">￥99元</text>
							</view> -->
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>


		<view v-if="list1.length">
			<view class="title-box">
				<view class="title">
					基础权益
				</view>
			</view>

			<u-grid :border="false" col="3">
				<u-grid-item v-for="(item,d) in list1" :key="d">
					<image class="icon" :src="item.equityImg" mode=""></image>
					<text class="title">{{item.equityName}}</text>
					<text class="desc">{{item.equityDetail}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view v-if="list2.length">
			<view class="title-box">
				<view class="title">
					专属权益
				</view>
			</view>
		
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(item,d) in list2" :key="d" @click="openPop(item)">
					<image class="icon" :src="item.equityImg" mode=""></image>
					<text class="title">{{item.equityName}}</text>
					<text class="desc">{{item.equityDetail}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 
		<view class="title-box">
			<view class="title">
				娱乐
			</view>
			<view class="desc">
				享受多达24种娱乐权益
			</view>
		</view>
		
		<u-grid :border="false" col="3">
			<u-grid-item v-for="(item,listIndex) in list1" :key="listIndex">
				<image class="icon" :src="item.icon" mode=""></image>
				<text class="title">{{item.title}}</text>
				<text class="desc">{{item.desc}}</text>
			</u-grid-item>
		</u-grid> -->



		<view class="fixed-box">
			<view class="btn-box">
				<view class="left-box" @click="handleCall">
					<image class="icon" src="../../static/phone.png" mode=""></image>
					<view class="info">
						<view class="tel">
							10086
						</view>
						<view class="desc">
							套餐咨询
						</view>
					</view>
				</view>
				<button class="btn" :loading="btnLoading" @click="goOrder">
					立即开通
				</button>
			</view>
			<view class="agreement-box">
				<u-checkbox-group size="28rpx" v-model="checked" @change="choose">
					<u-checkbox  activeColor="#EE4320" shape="circle" name="1" ></u-checkbox>
				</u-checkbox-group>
				<view class="text">
					已阅读并同意 <text class="color" @click="jump">《慧研学惠生活基础会员服务协议》</text>
				</view>
			</view>
			
		</view>
		
		
		<u-popup :show="show" round="32rpx" mode="bottom" @close="show = false">
				<view class="discounts-title">
					权益领取
				</view>
				<view class="discounts">
					<view class="discounts-item" >
							<view class="type-box">
								<view class="price">
									{{item | filterPrice}}
								</view>
								<view class="type">
									{{item | filterType}}
								</view>
							</view>
							<view class="info">
								<view class="card-title">
									{{item.couponName}}
								</view>
								<view class="limit">
									{{item.useStartTime}}后可用
								</view>
								
								<view class="desc">
									{{item.usrDetail || '-'}}
								</view>
							</view>
							<view class="btn" :class="[item.exist > 0?'used':'']" @click="handleBuy(item.id,item.exist)">
								{{item.exist > 0?'已领取':'领取'}}
							</view>
					</view>
					
					<view class="sub-title" v-if="item.equityMsg">
						权益领取
					</view>
					<!-- <rich-text class="desc" :nodes="item.equityMsg"></rich-text> -->
					<view class="desc" v-html="item.equityMsg">
						{{item.equityMsg}}
					</view>
					
				
				</view>
			</u-popup>
		
		
		<web-view v-if="H5url" :src="H5url"></web-view>

	</view>
</template>

<script>
	import {mealList,equityList,getH5url} from '@/api/combo.js'
	import {getXiaojuCoupon,getCouponDetail} from '@/api/coupon.js'
	
	export default {
		data() {
			return {
				checked:'',
				current: 0,//轮播套餐index
				currentMeal: 0,//套餐id
				background: false,
				defaultImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fc34b7b74-ba38-0456-982a-43c0f97522fe%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693532127&t=a2e186c12aecaab7723611cb52a6778f',
				userInfo: {
					imgPath: "",
					isAuth: 1,
					lastLogin: "",
					nickname: "",
					openId: "",
					phoneNum: "",
					score: 0,
					setMealId: 0,
					sex: 1,
					userId: "",
				},
				list: [{backImg:''}],
				list1:[],
				list2:[],
				query:{
					"channelCode": "",
				    "channelType": "",
				    "discount": 6,
				    "extension": "test",
				    "phone": "",
				    "saleModalId": ""
				},
				H5url:'',
				btnLoading:false,
				currentMealCode:0,
				show:false,
				item:{}
			}
		},
		computed: {
			currentLevelName() {
				let list = this.list.filter(item=>{ 
						if(item.setMealCode == this.userInfo.setMealCode){
							return item
						}
					})
				if(list.length){
					return list[0].setMealName
				}else{
					return ''
				}
			}
		},
		filters: {
			filterPrice: function(val) {
				if(val.couponType == 1){
					return `￥${val.couponDiscount}`
				}else if(val.couponType == 2){
					return `${val.couponDiscount}折`
				}else if(val.couponType == 3){
					return `￥${val.couponDiscount}`
				}
			},
			filterType: function(val) {
				if(val.couponType == 1){
					if(val.couponCondition){
						return `满${val.couponCondition}立减`
					}else{
						return '无门槛立减'
					}
				}else if(val.couponType == 2){
					if(val.couponCondition){
						return `满${val.couponCondition}`
					}else{
						return '无门槛立减'
					}
				}else if(val.couponType == 3){
					if(val.couponCondition){
						return `满${val.couponCondition}立减`
					}else{
						return '无门槛立减'
					}
				}
			},
		},
		methods: {
			handleCall() {
				uni.makePhoneCall({
					phoneNumber: '10086' //仅为示例
				});
				
			},
			openPop(item){
				if(item.bindService == 2){//加油券
					this.show = true
					getCouponDetail({id:item.bindContent}).then(res=>{
						if(res.state == 'Success'){
							this.item = res.content
							this.item.equityMsg = item.equityMsg.replaceAll('\n','<br/>')
						}
					})
				}
			},
			// 点击领取
			handleBuy() {
				getXiaojuCoupon({activityXiaojuId:this.item.activityXiaojuId,userId:JSON.parse(uni.getStorageSync('userInfo')).userId,mobile:JSON.parse(uni.getStorageSync('userInfo')).phoneNum}).then(res=>{
					if(res.state == 'Success'){
						uni.showToast({
							title:'领取成功',
							icon:'success'
						})
					}
				})
			},
			jump(){
				uni.navigateTo({
					url:'/agreement/member'
				})
			},
			choose(val){
				console.log(val);
			},
			goOrder(){
				if(!this.checked.length) return uni.showToast({
					title:'请勾选会员服务协议',
					icon:'none'
				})
				if(this.btnLoading) return
				this.query.saleModalId = this.list[this.current].setMealCode
				// this.H5url = 'http://iot-pay-server.dev.zonelife.cn/app-h5/task/dist/index.html#/localLife/orderResult?businessName=%E7%A0%94%E5%AD%A620%E5%85%83%E5%8C%85&lifeId=fcbfbb7ea3ada89ad160da82dc9c75e6'
				this.getH5url()
			},
			changeSwiper(val) {
				this.current = val.target.current
				this.currentMeal = this.list[val.target.current].setMealCode
				this.query.discount = this.list[val.target.current].discount
				this.equityList(this.currentMeal,1)
				this.equityList(this.currentMeal,2)
				
			},
			mealList(){
				return new Promise((resolve,reject)=>{
					mealList({currentPage:1,pageSize:99,status:1}).then(res=>{
						if (res.state == 'Success') {
							this.list = res.content.records
							this.currentMeal = this.list[0].setMealCode
							this.query.discount = this.list[0].discount
							resolve(this.currentMeal)
						}
					})
				})
			},
			equityList(setMealCode,equityType){
				return new Promise((resolve,reject)=>{
					equityList({currentPage:1,pageSize:99,setMealCode,equityType,status:1,showType:1}).then(res=>{
						if (res.state == 'Success') {
							this['list'+equityType] = res.content.records
							resolve(setMealCode)
						}
					})
				})
			},
			getData(){
				this.mealList().then(id=>{
					return this.equityList(id,1)
				}).then(id1=>{
					this.equityList(id1,2)
				})
			},
			getH5url(){
				this.btnLoading = true
				getH5url(this.query).then(res=>{
					this.btnLoading = false
					if (res.state == 'Success') {
						this.H5url = res.content
					}
				})
			}
			
		},
		onPageScroll(e) {
				if (e.scrollTop >= 50) {
					this.background = true
				} else {
					this.background = false
				}
		},
		created() {
			if(uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.query.phone = this.userInfo.phoneNum
			}
			// this.current = this.userInfo.setMealId 
			this.getData()
		},
		onLoad(options) {
			console.log('onload',options);
		}
	}
</script>

<style lang="scss">
	.memberCenter {
		min-height: 100vh;
		background: #FFF;
		padding-bottom: 180rpx;
		.swiper-box{
			position: relative;
			.click{
				position: absolute;
				top: calc(50% - 25rpx) ;
				right: 0;
				width: 100rpx;
				height: 100rpx;
				z-index: 999;
			}
			.click.left{
				left: 0;
				transform: rotateY(180deg);
			}
			.swiper {
				width: 750rpx !important;
				height: 272rpx !important;
				position: relative;
				left: -30rpx;
				top: 20rpx;
			}

			.swiper-item {
				width: 640rpx !important;
				height: 272rpx !important;
				position: relative;
				padding: 0 55rpx;
				.active {
					// transform: scale(1) !important;
				}

				.content {
					// transform: scale(.9);
					// transition: transform .3s;
					// transform-origin: center center;

					.icon {
						width: 640rpx;
						height: 272rpx;
						border-radius: 16rpx;
					}


					.tag {
						width: 104rpx;
						height: 34rpx;
						line-height: 34rpx;
						text-align: center;
						font-size: 22rpx;
						color: #fff;
						border-radius: 16rpx 0rpx 16rpx 0rpx;
						position: absolute;
						top: 0%;
						left: 55rpx;
						z-index: 2;
					}

					.price {
						font-size: 24rpx;
						position: absolute;
						left: 95rpx;
						top: 140rpx;
					}

					.notice {
						font-size: 24rpx;
						position: absolute;
						left: 95rpx;
						bottom: 40rpx;

						.num {
							font-weight: bold;
							font-size: 36rpx;
						}
					}
				}

			}
		}


		.top-box {
			width: 750rpx;
			height: 600rpx;
			padding: 150rpx 30rpx 0;
			box-sizing: border-box;
			position: relative;
			background-size: 100% 495rpx;
			background-repeat: no-repeat;
			.user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;
				color: #222222;

				.image {
					width: 108rpx;
					height: 108rpx;
					background: #f1f1f1;
					border-radius: 50%;
				}

				.info {
					flex: 1;
					margin-left: 30rpx;

					.user-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #222222;
					}

					.tel {
						font-size: 24rpx;
						margin-top: 10rpx;
						color: #AAAAAA;
					}
				}

			}
		}

		.title-box {
			display: flex;
			align-items: center;
			margin: 30rpx 30rpx 0;

			.title {
				color: #222222;
				font-weight: bold;
				font-size: 32rpx;
			}

			.desc {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: #AAAAAA;
			}
		}
		
		.u-grid{
			.u-grid-item{
				padding-top:30rpx ;
			}
			.icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.title{
				width: 200rpx;
				font-size: 28rpx;
				color: #222222;
				margin-top: 10rpx;
				text-align: center;
				font-weight: bold;
			}
			.desc{
				width: 150rpx;
				color: #AAAAAA;
				font-size: 20rpx;
				text-align: center;
			}
		}

		.fixed-box {
			position: fixed;
			bottom: 0%;
			left: 0%;
			width: 100%;
			background: #fff;
			padding: 15rpx 20rpx 40rpx;
			box-sizing: border-box;
			.btn-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left-box {
					display: flex;
					align-items: center;

					.icon {
						width: 80rpx;
						height: 80rpx;
					}

					.info {
						margin-left: 20rpx;

						.tel {
							color: #222222;
							font-weight: bold;
							font-size: 32rpx;
						}

						.desc {
							font-size: 22rpx;
							color: #999999;
						}
					}
				}

				.btn {
					width: 340rpx;
					height: 80rpx;
					line-height: 80rpx;
					margin: 0;
					text-align: center;
					background: #FF4C3A;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
			}
			
			.agreement-box{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #999999;
				margin-top: 20rpx;
				.color{
					color: #EE4320;
				}
			}
		}
		
		.discounts-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			// text-align: center;
			padding: 28rpx 24rpx;
		}
		.discounts {
			padding: 0 24rpx 28rpx;
			max-height: 1000rpx;
			min-height: 600rpx;
			overflow: auto;
			.discounts-item {
				margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					background-color: rgb(239, 239, 239);
					background: url('../../static/new-card.png') no-repeat;
					background-repeat: no-repeat;
					background-size: 100% 144rpx;
					border-radius: 16rpx;
					height: 144rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					.type-box{
						text-align: center;
						.price{
							ont-size: 40rpx;
							color: #FF4D3A;
						}
						.type{
							font-size: 20rpx;
							color: #AAAAAA;
							margin-top: 12rpx;
						}
					}
					.info {
						flex: 1;
						margin-left: 40rpx;
						.card-title {
							font-size: 28rpx;
							color: #222222;
						}
						.desc{
							font-size: 20rpx;	
							color: #AAAAAA;
						}
						.limit{
							font-size: 20rpx;
							color: #AAAAAA;
							margin:10rpx 0;
						}
					}
						.btn {
							width: 118rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							font-size: 24rpx;
							background: #EE4320;
							border-radius: 24rpx;
							color: #FFF;
							box-sizing: border-box;
						}
						.btn.used{
							border: 2rpx solid #EE421F;
							color: #EE421F;
							background: none;
						}
			}
			.sub-title{
				font-weight: bold;
				font-size: 26rpx;
				color: #222222;
				// text-align: center;
				padding: 28rpx 24rpx;
			}
			.desc{
				color: #AAAAAA;
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}

	}
</style>