wxThird/pages/subPack/vipCard.vue

<template>
	<view class="content">
	   <view class="zdyNavBox">
	   	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	   	<view class="zdyNav">
	   		<view class="zdyNavLeft">
	   			<image src="../../static/timg/navbackbs.png" mode="aspectFit" class="backImg" @click="goback"></image>
	   		</view>
	   		<view class="zdyNavTitle">会员卡</view>
	   		<view style="width: 250rpx;"></view>
	   	</view>
	   </view>
	   <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	   <view style="height: 44px;"></view>
	   
	   <view class="topBox" v-if="loding">
		  <view class="topLeft1"></view>
		   <view class="topRight1"></view> 
		   <swiper  class="swiper" @change="spScroll" :current="currentspIndex " circular >
			   <swiper-item class="spItem" v-for="(item,index) in levelList"  >
				   <view class="topCont">
					   <view class="vipBsbox">
						   <img src="http://dmsphoto.66km.com.cn/thFiles/FAE86FA4-795A-4FAF-81A9-E5D35E7B9AB9.png" alt="" class="vipBsImg">
						   <view class="vipbs">{{item.levelName}}</view>
					   </view>
					   <view class="vipTime" v-if="viopId==item.id">  <span v-if="item.endTime">{{item.endTime.slice(0,10)}} 到期</span> 
						<span v-else>永久</span>
					   </view>	  
					   <img class="vipBsIcon" v-if="index==0" src="http://dmsphoto.66km.com.cn/thFiles/91FCABC6-775C-47CA-B7D4-3579A4DE8497.png" alt="">
				   </view>
			   </swiper-item>
			 <!--  <swiper-item class="spItem">
				   <view class="topCont">
					   <view class="vipBsbox">
						   <img src="http://dmsphoto.66km.com.cn/thFiles/FAE86FA4-795A-4FAF-81A9-E5D35E7B9AB9.png" alt="" class="vipBsImg">
						   <view class="vipbs">黄金会员</view>
					   </view>
					   <view class="vipTime">2023.12.31 到期</view>	   
				   </view>
			   </swiper-item>
			   <swiper-item class="spItem">
			   <view class="topCont">
				   <view class="vipBsbox">
					   <img src="http://dmsphoto.66km.com.cn/thFiles/FAE86FA4-795A-4FAF-81A9-E5D35E7B9AB9.png" alt="" class="vipBsImg">
					   <view class="vipbs">黄金会员</view>
				   </view>
				   <view class="vipTime">2023.12.31 到期</view>	   
			   </view>
			   </swiper-item> -->
		   </swiper>
		  
	   </view>
	   <view class="contBox">
		   <view class="vipzkBox" v-if="discountList.length>0">
			   <view class="vipzkTop">
				   <img src="http://dmsphoto.66km.com.cn/thFiles/ADE780D4-E3B2-4005-B3A1-8CCD48279159.png" alt="" class="vipzkTopimg">
				   <view class="vipzkTitle">会员折扣</view>
				   <img src="http://dmsphoto.66km.com.cn/thFiles/B9AEA095-2ECD-4595-94F2-A52D8B93A4F2.png" alt="" class="vipzkTopimg">
			   </view>
			   <view class="vipzkLineBox" v-if="all">
				   <view class="vipzkLine" v-for="(item,index) in discountList" v-if="index<8">
					   <img v-if="item.type==2" src="http://dmsphoto.66km.com.cn/thFiles/FBF7C5A9-4436-4233-99B1-1AD3E36ABAAF.png" alt="" class="vipzkLineimg">
					   <img v-if="item.type==1"  src="http://dmsphoto.66km.com.cn/thFiles/C417E31C-4A9E-4CCD-A401-537031E4EEA6.png" alt="" class="vipzkLineimg">
					   <view class="vipzkNum" v-if="item.discount">
						   <span class="vipzkNumSpan1">{{item.discount/10}}</span>折
					   </view>
					   <view class="vipzklineMs">{{item.name}}</view>
				   </view>
				   
			   </view>
			   <view class="vipzkLineBox" v-if="!all">
				   <view class="vipzkLine" v-for="(item,index) in discountList" >
					  <img v-if="item.type==2" src="http://dmsphoto.66km.com.cn/thFiles/FBF7C5A9-4436-4233-99B1-1AD3E36ABAAF.png" alt="" class="vipzkLineimg">
					  <img v-if="item.type==1"  src="http://dmsphoto.66km.com.cn/thFiles/C417E31C-4A9E-4CCD-A401-537031E4EEA6.png" alt="" class="vipzkLineimg">
					   <view class="vipzkNum">
						   <span class="vipzkNumSpan1">{{item.discount/10}}</span>折
					   </view>
					   <view class="vipzklineMs">{{item.name}}</view>
				   </view>
			   				   
			   </view>
			   
			   <view class="vipzkBottom" v-if="discountList.length>8&&all" @click="allBtn">
				   <view class="zkBtxt">查看全部</view>
				   <img src="../../static/img/icon_arrow_down.png" alt="" class="zkbImg">
			   </view>
			   <view class="vipzkBottom" v-if="discountList.length>8&&!all" @click="allBtn">
				   <view class="zkBtxt">收起</view>
				   <img src="../../static/img/icon_arrow_up.png" alt="" class="zkbImg">
			   </view>
		   </view>
		   <!--赠送礼包 -->
		   <view class="giveBox" v-if="data.packageArr.length>0">
			   <view class="vipzkTop">
				   <img src="http://dmsphoto.66km.com.cn/thFiles/ADE780D4-E3B2-4005-B3A1-8CCD48279159.png" alt="" class="vipzkTopimg">
				   <view class="vipzkTitle">赠送礼包</view>
				   <img src="http://dmsphoto.66km.com.cn/thFiles/B9AEA095-2ECD-4595-94F2-A52D8B93A4F2.png" alt="" class="vipzkTopimg">
			   </view>
			   <view class="itemLineBox">
				   <view  v-for="(item,index) in data.packageArr">
					   <view class="itemCard"  v-if="item.details.length>0">
								   <view class="itemCardName">{{item.packName}}</view>
								  <!-- <view class="itemShop">可用门店：<span v-if="item.applyShopId">连锁共享</span> 
								   <span v-if="!item.applyShopId">仅本店使用</span> -->
									 <!-- <image src="../../static/timg/icon_arrow_right.png" mode="" class="shopit"></image> -->
								 <!--  </view> -->
					   </view>
					   <view class="itemrowBox" v-if="item.details.length>0">
							   <view class="itemNameBox">
								   <view class="itemNameTitle">名称</view>
								   <view class="itemNumTitle">数量</view>
								   <view class="itemTimeTitle">有效期</view>
							   </view>
							   <view class="itemRowBorder" >
								   <view class="itemrow" v-for="(v,i) in item.details">
									   <view class="itemNameTitle">{{v.flowName}}</view>
									   <view class="itemNumTitle">{{v.flowQty?v.flowQty:''}}</view>
									   <view class="itemTimeTitle" v-if="v.expireNumber">{{v.expireNumber}}个月</view>
									   <view class="itemTimeTitle" v-else>永久</view>
								   </view>
							   </view>
					   					  
					   </view>
				   </view>
				   
				  
			   </view>
		   </view>
		   <!-- 优惠券-->
		   <view class="giveBox" v-if="data.packageArr.length>0">
			   <view class="vipzkTop">
				   <img src="http://dmsphoto.66km.com.cn/thFiles/ADE780D4-E3B2-4005-B3A1-8CCD48279159.png" alt="" class="vipzkTopimg">
				   <view class="vipzkTitle">优惠券</view>
				   <img src="http://dmsphoto.66km.com.cn/thFiles/B9AEA095-2ECD-4595-94F2-A52D8B93A4F2.png" alt="" class="vipzkTopimg">
			   </view>
			   <view class="couponBox" v-if="!all2">
				   <view class="couponLine" v-for="(item,index) in data.couponArr">
					   <view style="display: flex;justify-content: center;">
						   <view class="couponName">{{item.actName}}</view>
						   <view class="couponNum">*{{item.number}}</view>
					   </view>
					   
					   <view class="couponMs" v-if="item.WhereMoney==0">无门槛</view>
					   <view class="couponMs" v-else>满{{item.WhereMoney}}可用</view>
				   </view>
			   </view>
			   <view class="couponBox" v-if="all2">
					   <view class="couponLine" v-for="(item,index) in data.couponArr" v-if="index<6">
						   <view style="display: flex;justify-content: center;">
							   <view class="couponName">{{item.actName}}</view>
							   <view class="couponNum">*{{item.number}}</view>
						   </view>
						   
						   <view class="couponMs" v-if="item.WhereMoney==0">无门槛</view>
						   <view class="couponMs" v-else>满{{item.WhereMoney}}可用</view>
					   </view>
			   </view>
			   <view class="vipzkBottom" v-if="data.couponArr.length>6&&all2" @click="allBtn2">
				   <view class="zkBtxt">查看全部</view>
				   <img src="../../static/img/icon_arrow_down.png" alt="" class="zkbImg">
			   </view>
			   <view class="vipzkBottom" v-if="data.couponArr.length>6&&!all2" @click="allBtn2">
				   <view class="zkBtxt">收起</view>
				   <img src="../../static/img/icon_arrow_up.png" alt="" class="zkbImg">
			   </view>
			   
			</view>	   
			<!-- 附加权益-->
			<view class="giveBox" v-if="data.equityArr.length>0">
			   <view class="vipzkTop">
				   <img src="http://dmsphoto.66km.com.cn/thFiles/ADE780D4-E3B2-4005-B3A1-8CCD48279159.png" alt="" class="vipzkTopimg">
				   <view class="vipzkTitle">附加权益</view>
				   <img src="http://dmsphoto.66km.com.cn/thFiles/B9AEA095-2ECD-4595-94F2-A52D8B93A4F2.png" alt="" class="vipzkTopimg">
			   </view>
			   <view class="equityBox" v-if="!all3">
				   <view class="equityLine" v-for="(item,index) in data.equityArr">
					   <img src="http://dmsphoto.66km.com.cn/thFiles/FB8E30CD-8771-432E-9486-3B7880DEE018.png" alt="" class="equityLineImg">
				       <view class="equityMs">{{item.Contents}}</view>
				   </view>
			   </view>
			   <view class="equityBox" v-if="all3">
				   <view class="equityLine" v-for="(item,index) in data.equityArr" v-if="index<8">
					   <img src="http://dmsphoto.66km.com.cn/thFiles/FB8E30CD-8771-432E-9486-3B7880DEE018.png" alt="" class="equityLineImg">
					   <view class="equityMs">{{item.Contents}}</view>
				   </view>
			   </view>
			   <view class="vipzkBottom" v-if="data.equityArr.length>8&&all3" @click="allBtn3">
					   <view class="zkBtxt">查看全部</view>
					   <img src="../../static/img/icon_arrow_down.png" alt="" class="zkbImg">
			   </view>
			   <view class="vipzkBottom" v-if="data.equityArr.length>8&&!all3" @click="allBtn3">
					   <view class="zkBtxt">收起</view>
					   <img src="../../static/img/icon_arrow_up.png" alt="" class="zkbImg">
			   </view>
			   
			</view>	 
	   </view>
	   <view class="support"></view>
	   <view class="bottom" v-if="viopId!=data.currentLevel.id&&data.currentLevel.money">
		  <view class="bottomLeft">
			 <view class="price">￥ <span class="priceSpan">{{data.currentLevel.money}}</span> </view>
			 <view class="bottomTitme" v-if="data.cLExpireDate">有效期：{{data.cLExpireDate}}个月</view>
			  <view class="bottomTitme" v-else>永久</view>
		  </view>
		  <view class="btn" @click="vipKt">立即开通</view>
	   </view>
	   
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:'',
				allck:false,
				iStatusBarHeight:'',
				userInfo:'',
				data:'',
				levelList:'',
				currentIndex:'',
				discountList:[],
				all:true,
				all2:true,
				all3:true,
				viopId:'',
				currentspIndex:0,
				loding:false,
			}
		},
		onLoad() {
			 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			 //this.userInfo = this.$store.state.userInfo;
             this.getdetail()
		},
		methods: {
		  allBtn(){
			this.all=!this.all  
		  },
		  allBtn2(){
		  		this.all2=!this.all2 
		  },
		  allBtn3(){
		  		this.all3=!this.all3
		  },
		  vipKt(){
			  uni.showToast({
			  	title: '暂不支持，请联系门店购买',
			  	icon: 'none',
			  	duration: 3000
			  });
		  },
		  spScroll(e){
			  console.log(e);
			  this.currentIndex=e.detail.current;
			  this.getlist()
		  },
		  goback() {
		  	uni.navigateBack({
		  	 	delta: 1
		  	})
		  },
		  getlist(){
			  uni.showLoading({
			  	title: '加载中'
			  })
			  this.$http('customerLevel/detail', {
			    levelId:this.levelList[this.currentIndex].id
			   },'GET').then(res => {
			  		uni.hideLoading();
					res.data.discountGoods.forEach(item=>{
						item.type=1
					})
					res.data.discountProject.forEach(item=>{
						item.type=2
					})
			  		this.data=res.data;
					
					this.discountList=this.data.discountProject.concat(this.data.discountGoods)
			   })
		  },
           getdetail(){
			   uni.showLoading({
			   	title: '加载中'
			   })
			   this.$http('customerLevel/detail', {
			     
			    },'GET').then(res => {
			   		uni.hideLoading();
					var arr=[]
					arr.push(res.data.currentLevel)
					res.data.levelList.forEach(item=>{
						if(item.id!=res.data.currentLevel.id){
							arr.push(item)
						}
					})
					this.levelList=arr;
					res.data.discountGoods.forEach(item=>{
						item.type=1
					})
					res.data.discountProject.forEach(item=>{
						item.type=2
					})
					this.data=res.data;
					this.viopId=res.data.currentLevel.id;
					this.discountList=this.data.discountProject.concat(this.data.discountGoods);
					this.loding=true;
					//console.log(this.list)
			    })
		   }
		},
		onPullDownRefresh(){
			console.log("onPullDownRefresh")
			//this.data=''
			//this.levelList=[];
			//this.loding=false;
			//this.currentspIndex=0
			if(this.currentIndex){
				this.getlist();
			}else{
				this.getdetail()
			}
			
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 3000);
			
		}
	}
</script>

<style scoped>
.topLeft1{
	background: #A9B7C6;
	width: 35rpx;
	height: 288rpx;
	border-top-right-radius: 21rpx;
	border-bottom-right-radius: 21rpx;
	position: absolute;
	left: 0;top: 40rpx;
}
.topRight1{
	background: #7487BB;
	width: 35rpx;
	height: 288rpx;
	border-top-left-radius: 21rpx;
	border-bottom-left-radius: 21rpx;
	position: absolute;
	right: 0;top: 40rpx;
}
.bottom{
  height: 120rpx;width: 100vw;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;left: 0;bottom: 0;
  display: flex;justify-content: space-between;
}
.price{
	color: #FF4F00;font-size: 24rpx;font-weight: 600;
}
.bottomTitme{
	color: #3C3C3C;font-size: 24rpx;padding-top: 5rpx;
}
.bottomLeft{
	padding-left: 24rpx;padding-top: 24rpx;
}
.priceSpan{
	font-size: 34rpx;
}
.btn{
	width: 236rpx;text-align: center;
	height: 80rpx;line-height: 80rpx;
	background: linear-gradient(135deg, #282A44 0%, #1A2027 100%);
	border-radius: 44rpx;font-weight: 500;
color: #FCCEA5;font-size: 28rpx;margin-top: 24rpx;margin-right: 24rpx;
}
.support{
	height: 150rpx;
	 padding-bottom: constant(safe-area-inset-bottom);
	 padding-bottom: env(safe-area-inset-bottom);
}
.contBox{
	padding: 0 24rpx;
}
.equityBox{
	display: flex;
	padding: 30rpx 0;flex-wrap: wrap;
	padding-top: 10rpx;
}
.equityLineImg{
	width: 86rpx;height: 86rpx;
}
.equityLine{
	text-align: center;width: 25%;padding-top: 20rpx;
}
.equityMs{
	color: #3C3C3C;font-size: 24rpx;
}
.couponBox{
	display: flex;
	
	padding: 30rpx 0;
	padding-top: 0rpx;
	flex-wrap: wrap;
}
.couponLine{
	width: 211rpx;
	height: 118rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/95A792BC-5758-4AAA-89E2-1DE6A196C7B3.png') no-repeat;
	background-size: 100% 100%;
	margin-top: 20rpx;
	margin-right: 16rpx;
}
.couponLine:nth-child(3n){
	margin-right: 0rpx;
}
.couponName{
	font-weight: 500;font-size: 26rpx;line-height: 37rpx;
	color: #512108;padding-top: 22rpx;text-align: center;
	overflow: hidden;max-width:170rpx ;
	   white-space: nowrap;
	   text-overflow: ellipsis;
	
}
.couponNum{
	font-weight: 500;font-size: 26rpx;line-height: 37rpx;
	color: #512108;padding-top: 22rpx;
}
.couponMs{
	text-align: center;font-weight: 400;font-size: 22rpx;
color: #907B6E;padding-top: 10rpx;
}
.itemrowBox{
	padding-top: 16rpx;font-size: 26rpx;
}
.itemRowBorder{
	padding-bottom: 20rpx;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	border: 2rpx solid #EEEEEE;
}
.itemrow{
	display: flex;padding-top: 20rpx;
}
.itemNameBox{
	display: flex;
	background: #FFF5ED;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
	line-height: 72rpx;font-weight: 400;
}
.itemNameTitle{
	width: 430rpx;padding-left: 20rpx;
	 overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
}
.itemNumTitle{
	width: 80rpx;text-align: center;
}
.itemTimeTitle{
	width: 120rpx;text-align: center;
}
.itemCard{
	display: flex;justify-content: space-between;
	padding-top: 24rpx;
color: #333333;font-size: 26rpx;
}
.itemCardName{
	font-weight: 500;font-size: 26rpx;
	color: #3C3C3C;line-height: 38rpx;
	overflow: hidden;
	   white-space: nowrap;
	   text-overflow: ellipsis;
	   width: 400rpx;
}
.itemShop{
	display: flex;line-height: 38rpx;color: #999999;font-size: 26rpx;
}
.shopit{
	width: 12rpx;height: 20rpx;margin-top: 10rpx;margin-left: 5rpx;
}
.giveBox{
	background: #FFFFFF;padding: 25rpx 20rpx;
	border-radius: 10rpx;margin-top: 20rpx;
}
.vipzkLineBox{
	display: flex;flex-wrap: wrap;

}
.vipzkLine{
	width: 25%;text-align: center;padding-top: 30rpx;
}
.vipzkLineimg{
	width: 82rpx;height: 82rpx;
}
.vipzkNum{
	width: 82rpx;line-height: 32rpx;text-align: center;
	height: 32rpx;font-size: 20rpx;margin: 0 auto;
	background: linear-gradient(132deg, #FFF0DF 0%, #FED28F 100%);
	border-radius: 20rpx;font-weight: 400;
color: #1F2026;margin-top: -15rpx;position: relative;
}
.vipzkNumSpan1{
	font-weight: bold;font-size: 26rpx;
	color: #1F2026;
}
.vipzklineMs{
	font-weight: 400;
	color: #3C3C3C;font-size: 24rpx;
	line-height: 33rpx;padding-top: 10rpx;
	text-align: center;
	padding-left: 10rpx;padding-right: 10rpx;
}
.vipzkBox{
	background: linear-gradient(180deg, #FFFDFA 0%, #FFFAF3 100%) #FFF7EA;
	border-radius: 17rpx;
	padding: 27rpx 6rpx;
	margin-top: 20rpx;
}
.vipzkTop{
	display: flex;justify-content: center;
}
.vipzkTopimg{
	height: 19rpx;width: 190rpx;margin-top: 15rpx;
}
.vipzkTitle{
font-weight: 500;font-size: 34rpx;
color: #8B4F30;padding: 0 15rpx;
line-height: 48rpx;	
}
.topCont{
	width: 632rpx;height: 320rpx;
	margin-left: 59rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/1EA0546F-7C73-43D7-AE07-CE1C8A3DA375.png');
	background-size: 100% 100%;
	position: relative;
}
.vipBsIcon{
	position: absolute;width: 112rpx;height: 33rpx;top: 0;right: 0;
}
.topCont1{
	width: 632rpx;height: 320rpx;
	margin-left: 59rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/ED1AD76C-9EBF-4C75-923F-565BD56491E1.png');
	background-size: 100% 100%;
}
.spItem{
	height: 320rpx;
}
.swiper{
	height: 320rpx;
}
.vipBsImg{
	width: 48rpx;height: 48rpx;font-size: 41px;font-weight: normal;padding-left: 11rpx;
font-family: FZRUIZHK_ZHONG--GBK1-0, FZRUIZHK_ZHONG--GBK1;
}
.vipbs{
	color: #8B4F30;line-height: 48rpx;font-size: 41rpx;padding-left: 10rpx;font-weight: 600;
}
.vipTime{
	color: #8B4F30;font-size: 24rpx;padding-left: 36rpx;padding-top: 136rpx;font-weight: 600;
}
.vipBsbox{
	display: flex;padding-top: 53rpx;padding-left: 36rpx;
}
.topBox{
	padding-top: 22rpx;position: relative;
}
	.content{
		min-height: 100vh;
		background: #D8D8D8 linear-gradient(315deg, #141337 0%, #101137 100%);
	}
	.zdyNavBox{
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		background: #141337;
	}
	.zdyNav{
		height: 44px;
		display: flex;
		justify-content: space-between;
		
		align-items: center;
	}
	
	.backImg{
		width: 44rpx;
		height: 44rpx;
		/* margin-left: 10rpx; */
		margin-top: 10rpx; 
	}
	.navsx{
		width: 2rpx;
		height: 44rpx;
		background: #e1e1e1;
		margin: 0 26rpx 0rpx 18rpx;
	}
	.homeImg{
		width: 44rpx;
		height: 44rpx;
		
	}
	.zdyNavLeft{
		width: 235rpx;
		margin-left: 15rpx;
	
	}
	.zdyNavTitle{
		width: 100vw;
		height: 44px;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
		color: #fff;
	}
	.vipzkBottom{
		display: flex;justify-content: center;color: #999999;font-size: 24rpx;line-height: 30rpx;
		padding-top: 20rpx;
	}
	.zkbImg{
		width: 22rpx;height: 14rpx;margin-top: 8rpx;margin-left: 10rpx;
	}
</style>
<!-- 
 
 -->