<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>
<!--
-->