<template>
<view class="box">
<!-- <view class="headerBox">
<view class="vip">
<view class="headerTop">
<image src="http://dmsphoto.66km.com.cn/thFiles/785A657B-2FA6-4B22-A356-D555BFE2E18D.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view class="headerRight">
<view class="nameBox">
<view class="name">{{vipData.name}}</view>
<image src="../../static/img/icon_vip.png" mode=""
style="width: 112rpx;height: 34rpx;margin-left: 10rpx;"></image>
</view>
<view class="phone">{{userInfo.mobilePhone}}</view>
</view>
</view>
<view class="kahaoBox">
<image src="../../static/img/icon_kahao.png" mode=""
style="width: 28rpx;height: 28rpx;margin-right: 10rpx;"></image>
<view class="kahao">卡号 {{vipData.cardCode}}</view>
</view>
</view>
<view class="tab">
<view>
<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">计次</view>
<view :class="{line:tabIndex==1}"></view>
</view>
<viw>
<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">储值</view>
<view :class="{line:tabIndex==2}"></view>
</viw>
</view>
</view> -->
<view class="newTop">
<view class="newTopCont" v-if="vipData.cardCode">
<image src="../../static/timg/icon_vip.png" mode="" class="topVipIcon"></image>
<span style="padding-right: 10rpx;padding-left: 10rpx;">卡号</span>
<span>{{vipData.cardCode}}</span>
</view>
</view>
<view class="btnBox" @click="dis=!dis">
<image v-if="dis" src="../../static/img/icon_selectY.png" mode="" style="width: 36rpx;height: 36rpx;">
</image>
<image v-else src="../../static/img/icon_selectN.png" mode="" style="width: 36rpx;height: 36rpx;">
</image>
<view style="margin-left: 10rpx;color: #3C3C3C;font-size: 24rpx;">不展示剩余为0项</view>
</view>
<!-- 计次 -->
<view class="mainBox" ><!-- v-if="tabIndex==1" -->
<!-- 卡制度 -->
<view v-for="(item,index) in vipData.f2ccard" class="ftwoccard">
<view class="itemBox" ><!-- v-if="AmountQtyJsFcard(item.detail)" -->
<view class="itemTop">
<view class="itemName">
<span class="titleType2" >卡</span>
{{item.card.cardName}}
</view>
<view class="fcardJt" v-if="item.detail.length>0" :class="{active:item.open}" @click="changeState(item)">
<image v-if="item.open==false" src="../../static/img/icon_arrow_down.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
<image v-if="item.open==true" src="../../static/img/icon_arrow_up.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
</view>
</view>
<view class="fcardBottom" :class="{fcardBottomactive:item.open}">
<view class="fcardCardCode">{{item.card.cardCode}}</view>
<view class="fcardCardCode" v-if="item.card.expireTime">{{item.card.expireTime.slice(0,10)}}</view>
</view>
<view v-if="item.open">
<!-- 不展示剩余为0项 -->
<!-- <view class="itemBg " v-if="dis&&v.lastCount!=0" v-for="(v,index2) in item.detail" :key="index2">
<view class="nameTop" v-if="v.type==2"><span class="type">项目</span> {{v.bizName}}</view>
<view class="nameTop" v-if="v.type==1"><span class="type">商品</span> {{v.bizName}}</view>
<view class="itemBgFcard">
<view class="discountTypeBox">
<view class="fcardType" v-if="v.discountType==2">会员价</view>
<view class="fcardType" v-if="v.discountType==1">折扣</view>
<view class="discountNum" v-if="v.discountType==2">{{v.discountNum}}</view>
<view class="discountNum" v-if="v.discountType==1">{{v.discountNum}}折</view>
</view>
<view class="timeBottom">
<view>剩余/总：<span
style="color: #FF3B30;">{{v.lastCount}}</span>/{{v.useCount}}
</view>
</view>
</view>
</view> -->
<!-- 展示所有 -->
<view class="itemBg " v-for="(v,index2) in item.detail" :key="index2"><!-- v-if="!dis" -->
<view class="nameTop" v-if="v.type==2"><span class="type">项目</span> {{v.bizName}}</view>
<view class="nameTop" v-if="v.type==1"><span class="type">商品</span> {{v.bizName}}</view>
<view class="itemBgFcard">
<view class="discountTypeBox">
<view class="fcardType" v-if="v.discountType==2">会员价</view>
<view class="fcardType" v-if="v.discountType==1">折扣</view>
<view class="discountNum" v-if="v.discountType==2">{{v.discountNum}}</view>
<view class="discountNum" v-if="v.discountType==1">{{v.discountNum}}折</view>
</view>
<view class="timeBottom">
<view>剩余/总：<span
style="color: #FF3B30;">{{v.lastCount}}</span>/{{v.useCount}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-for="(item,index) in vipData.cardTimeList">
<view v-if="AmountQtyJs(item.list)" class="itemBox">
<view class="itemTop">
<view class="itemName">
<span class="titleType">计次</span>
{{item.PackName}}
</view>
<view class="tiaokuan" @click="useCl(item.useComment)">使用条款</view>
</view>
<view class="itemBottom" :class="{active:item.open&&item.list.length>0}" @click="changeState(item)">
<view class="shopName">{{item.shopName}}</view>
<image v-if="item.open==false&&item.list.length>0" src="../../static/img/icon_arrow_down.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
<image v-if="item.open==true&&item.list.length>0" src="../../static/img/icon_arrow_up.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
</view>
<view v-if="item.open">
<!-- 不展示剩余为0项 -->
<view class="itemBg" v-if="dis&&v.AmountQty!=0" v-for="(v,index2) in item.list" :key="index2">
<view class="nameTop" v-if="v.FlowType==2"><span class="type">项目</span> {{v.FlowName}}</view>
<view class="nameTop" v-if="v.FlowType==1"><span class="type">商品</span> {{v.FlowName}}</view>
<view class="timeBottom">
<view class="time" v-if="v.ExpireTime&&v.ExpireTime!=null&&v.ExpireTime!='null'">有效期：{{v.ExpireTime.slice(0,10)}}</view>
<view class="time" v-else>有效期：永久</view>
<view>剩余/总：<span
style="color: #FF3B30;">{{v.AmountQty}}</span>/{{v.TotalQty}}
</view>
</view>
</view>
<!-- 展示所有 -->
<view class="itemBg" v-if="!dis" v-for="(v,index2) in item.list" :key="index2">
<view class="nameTop" v-if="v.FlowType==2"><span class="type">项目</span> {{v.FlowName}}</view>
<view class="nameTop" v-if="v.FlowType==1"><span class="type">商品</span> {{v.FlowName}}</view>
<view class="timeBottom">
<view class="time" v-if="v.ExpireTime&&v.ExpireTime!=null&&v.ExpireTime!='null'">有效期：{{v.ExpireTime.slice(0,10)}}</view>
<view class="time" v-else>有效期：永久</view>
<view>剩余/总：<span
style="color: #FF3B30;">{{v.AmountQty}}</span>/{{v.TotalQty}}
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 无数据空白页 -->
<!-- nodata v-if="vipData.cardTimeList.length==0"></nodata> -->
<!-- 使用条款-->
<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
<view class="shiyongCont" @click.stop="">
<view class="shiyongContTop">
<view class="shiyongContTopTitle">使用条款</view>
<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
@click="shiyongShowHlde"></image>
</view>
<view class="shiyonghtml">
<view v-html="useComment" v-if="useComment"></view>
<view v-else class="shiyongno">使用条款暂无内容</view>
</view>
</view>
</view>
<!-- 储值 -->
<view v-for="(item,index) in vipData.carMoneyList">
<!-- 不展示剩余为0项 -->
<view v-if="disCz&&item.Money!=0" class="itemBox">
<view class="itemTop">
<view class="itemName">
<span class="titleType">储值</span>
{{item.PacKName}}
</view>
<view class="tiaokuan" @click="useCl(item.useComment)">使用条款</view>
</view>
<view class="moneyBox"><span style="font-size: 24rpx; color: #FF3B30; padding-top: 2rpx;">￥</span><span class="money">{{item.Money}}</span> <span
style="color: #3C3C3C;font-size: 24rpx;">(充{{item.ChargeMoney}}送{{item.GiftMoney}})</span>
</view>
<view class="itemBottom" :class="{active:item.open}" @click="changeState(item)">
<view class="shopName">{{item.ShopName}}</view>
<image v-if="item.open==false&&item.payList.length>0" src="../../static/img/icon_arrow_down.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
<image v-if="item.open==true&&item.payList.length>0" src="../../static/img/icon_arrow_up.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
</view>
<view class="itemBg" v-if="item.open" v-for="(v,index2) in item.payList" :key="index2">
<view class="timeBottom">
<view class="time" style="color: #666666;" v-if="v.CreateTime">{{v.CreateTime}}</view>
<view style="color: #3C3C3C;font-weight: 500;" v-if="v.Type==2">-{{v.Money}}</view>
<view class="count" style="font-weight: 500;" v-else>+{{v.Money}}</view>
</view>
</view>
</view>
<!-- 展示所有 -->
<view v-if="!disCz" class="itemBox">
<view class="itemTop">
<view class="itemName">{{item.PacKName}}</view>
<view class="tiaokuan" @click="useCl(item.useComment)">使用条款</view>
</view>
<view class="moneyBox"><span style="font-size: 24rpx; color: #FF3B30; padding-top: 2rpx;">￥</span><span class="money">{{item.Money}}</span> <span
style="color: #3C3C3C;font-size: 24rpx;">(充{{item.ChargeMoney}}送{{item.GiftMoney}})</span>
</view>
<view class="itemBottom" :class="{active:item.open}" @click="changeState(item)">
<view class="shopName">{{item.ShopName}}</view>
<image v-if="item.open==false" src="../../static/img/icon_arrow_down.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
<image v-if="item.open==true" src="../../static/img/icon_arrow_up.png"
mode="" style="width: 34rpx;height: 22rpx;"></image>
</view>
<view class="itemBg" v-if="item.open" v-for="(v,index2) in item.payList" :key="index2">
<view class="timeBottom">
<view class="time" style="color: #666666;" v-if="v.CreateTime">{{v.CreateTime}}</view>
<view v-if="v.Type==2" style="font-weight: 500;color: #3C3C3C;">-{{v.Money}}</view>
<view class="count" style="font-weight: 500;" v-else>+{{v.Money}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 储值 -->
<view class="mainBox" v-if="tabIndex==2"><!-- -->
<view class="btnBox" @click="disCz=!disCz">
<image v-if="disCz" src="../../static/img/icon_selectY.png" mode="" style="width: 36rpx;height: 36rpx;">
</image>
<image v-else src="../../static/img/icon_selectN.png" mode="" style="width: 36rpx;height: 36rpx;">
</image>
<view style="margin-left: 10rpx;color: #3C3C3C;font-size: 24rpx;">不展示剩余为0项</view>
</view>
<!-- 无数据空白页 -->
<!-- <nodata v-if="vipData.carMoneyList.length==0"></nodata> -->
<!-- 使用条款-->
<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
<view class="shiyongCont" @click.stop="">
<view class="shiyongContTop">
<view class="shiyongContTopTitle">使用条款</view>
<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
@click="shiyongShowHlde"></image>
</view>
<view class="shiyonghtml">
<view v-html="useComment" v-if="useComment"></view>
<view v-else class="shiyongno">使用条款暂无内容</view>
</view>
</view>
</view>
</view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
</template>
<script>
import nodata from '../../components/nodata/nodata.vue'
export default {
components: {
nodata,
},
data() {
return {
tabIndex: '1',
vipData: {},
userInfo: '',
shiyongShow: false,
useComment: '',
dis: true,
disCz: true,
authorizShow:false,
userInfo:'',
ext:'',
wxOpenData:'',
}
},
onLoad() {
//this.userInfo = uni.getStorageSync("userInfo");
this.userInfo=this.$store.state.userInfo;
this.ext=this.$common.getExtStoreId();
if(this.userInfo){
this.myOrderCoupon();
}else{
this.$common.automaticlogin().then(val => {
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
this.themeColor = uni.getStorageSync("themeColor");
if(!this.userInfo){
this.authorizShow=true
}
this.myOrderCoupon();
})
}
},
filter:{
filter_formatId(value) {
console.log(value)
return value//.slice(0,10);
}
},
methods: {
shiyongShowHlde(){
this.shiyongShow=false;
},
AmountQtyJs (item) {
var state = false
if (this.dis) {
item.forEach(v => {
if (v.AmountQty != 0) {
state = true
}
})
} else {
state = true
}
return state
},
AmountQtyJsFcard (item) {
var state = false
if (this.dis) {
item.forEach(v => {
if (v.lastCount != 0) {
state = true
}
})
} else {
state = true
}
return state
},
useCl(useComment) {
this.useComment = useComment;
this.shiyongShow = true;
},
myOrderCoupon() {
uni.showLoading({
title: '加载中'
})
this.$http('openweiXinCardInfoController/queryCardTimeAndMondyList', {
// page: this.page,
// limit: 10,
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
var list = res.data
list.cardTimeList.forEach((item, index) => {
for (const key in item) {
item['open'] = false
}
})
list.carMoneyList.forEach((item, index) => {
for (const key in item) {
item['open'] = false
}
})
list.f2ccard.forEach((item, index) => {
for (const key in item) {
item['open'] = false
}
})
this.vipData = list
console.log(this.vipData)
})
},
tabClick(tag) {
this.tabIndex = tag
},
changeState(item) {
item.open = !item.open
},
gonavigateTo(url) {
uni.navigateTo({
url: url
})
},
decryptPhoneNumber: function(e) {
console.log(e);
this.code=e.detail.code
this.wxPhoneLogin()
this.authorizShow=false;
},
wxPhoneLogin(){
var that=this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:this.ext.appId,
unionId:this.ext.unionId,
code:this.code,
openId:this.wxOpenData.openid
},'POST').then(res => {
var data = res.data;
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.myOrderCoupon()
}
})
},
},
// 下拉刷新
onPullDownRefresh() {
// this.page = 1
this.myOrderCoupon()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style scoped>
.ftwoccard .active{
margin-bottom: 0rpx;
}
.fcardBottomactive{
padding-bottom: 20rpx;
}
.titleType2{
width: 32rpx;height: 32rpx; color: #FFFFFF;font-size: 24rpx;background: #FF8113;
border-radius: 4rpx;margin-right: 8rpx;text-align: center;line-height: 32rpx;
display: inline-block;font-weight: 400;
}
.titleType{
color: #FFFFFF;font-size: 24rpx;font-weight: 400;height: 32rpx;
padding:0px 4rpx;background: #FF8113;line-height: 32rpx;
border-radius: 4rpx;margin-right: 8rpx;
}
.discountTypeBox{
display: flex;line-height: 30rpx;
}
.fcardType{
background: #fff1ea;color: #FF4F00;
border-radius: 5rpx;
line-height: 32rpx;
padding: 0 6rpx;
font-size: 22rpx;
height: 30rpx;
display: block;
}
.discountNum{
font-weight: 500;
color: #FF4F00;
font-size: 26rpx;
padding-left: 10rpx;
}
.fcardBottom{
display: flex;justify-content: space-between;color: #999999;font-size: 24rpx;
padding-top: 12rpx;
padding-right: 20rpx;
}
.topVipIcon{
width: 41rpx;height: 40rpx;
}
.newTopCont{
border-radius: 16rpx;line-height: 40rpx;
border: 1px solid #EAC799;font-size: 28rpx;
padding: 19rpx 26rpx;color: #F7D4B5;
display: flex;
}
.newTop{
background-color: #171723;
padding: 10rpx 24rpx;
padding-bottom: 50rpx;
}
.box {
min-height: 100vh;
padding-bottom: 60rpx;
}
.headerBox {
background-color: #171723;
height: 525rpx;
width: 100vw;
padding: 30rpx 0rpx;
/* position: fixed;
left: 0;
top: 0;
z-index: 999; */
}
.vip {
background: url(http://dmsphoto.66km.com.cn/thFiles/0EEEE7DB-02ED-41B4-A633-2F2669E0DF7E.png);
background-size: 100% 100%;
height: 320rpx;
/* width: 100vw; */
margin: 0rpx 24rpx;
padding: 48rpx 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.headerTop {
display: flex;
justify-content: flex-start;
}
.headerRight {
padding-left: 18rpx;
}
.nameBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.name {
font-size: 30rpx;
font-weight: bold;
color: #523509;
line-height: 42rpx;
}
.phone {
margin-top: 12rpx;
font-size: 24rpx;
font-weight: bold;
color: #523509;
line-height: 33rpx;
}
.kahaoBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.kahao {
font-size: 24rpx;
font-weight: bold;
color: #523509;
line-height: 33rpx;
}
.tab {
background: #FFFFFF;
margin-top: 30rpx;
display: flex;
justify-content: space-around;
line-height: 60rpx;
height: 60rpx;
border-radius: 26rpx 26rpx 0rpx 0rpx;
padding: 28rpx;
}
.tabLine {
font-size: 30rpx;
line-height: 42rpx;
color: #3C3C3C;
text-align: center;
}
.line{
width: 40rpx;
margin: 0rpx 10rpx;
height: 4rpx;
background: #FF0000;
margin-top: 8rpx;
}
.tabActive {
color: #3C3C3C;
font-weight: bold;
}
.mainBox {
/* margin-top: 590rpx; */
background-color: #F4F5F7;
padding: 24rpx;
min-height: 100vh;
padding-top: 1rpx;
}
.btnBox {
display: flex;background: #FFFFFF;
border-radius: 24rpx 24rpx 0rpx 0rpx;
padding: 26rpx 24rpx;
margin-top: -24rpx;
}
.itemBox {
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 24rpx 20rpx;
margin-top: 20rpx;
padding-right: 0px;
}
.itemTop {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-right: 20rpx;
}
.itemBottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15rpx;
padding-right: 20rpx;
}
.active {
margin-bottom: 30rpx;
}
.itemName {
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 42rpx;
}
.tiaokuan {
width: 136rpx;
height: 52rpx;
background: #FFFFFF;
border-radius: 28rpx;
border: 1rpx solid #DDDDDD;
color: #3C3C3C;
font-size: 24rpx;
text-align: center;
line-height: 52rpx;
}
.shopName {
border-radius: 5rpx;
/* border: 1rpx solid #DDDDDD; */
color: #999999;
font-size: 24rpx;
padding: 2rpx 12rpx;
padding-left: 0rpx;
/* max-width: 300rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; */
}
.itemBg {
padding: 30rpx 0rpx;
border-top: 1rpx solid #EEEEEE;
padding-right: 20rpx;
}
.itemBgFcard{
display: flex;
justify-content: space-between;
}
.itemBg:last-child{
padding-bottom: 0;
}
.nameTop {
display: flex;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 34rpx;
margin-bottom: 20rpx;
}
.type {
height: 26rpx;
border-radius: 5rpx;
border: 1rpx solid #F19D01;
margin-right: 10rpx;
font-size: 24rpx;
color: #F19D01;
line-height: 30rpx;
padding: 2rpx 0;
text-align: center;
width: 60rpx;
}
.timeBottom {
display: flex;
justify-content: space-between;
color: #999999;
font-size: 24rpx;
}
.money {
font-size: 36rpx;
font-weight: bold;
color: #FF0000;
line-height: 50rpx;
}
.moneyBox{
flex-grow: 1;
display: flex;
/* justify-content: flex-end; */
margin-right: 10rpx;
align-items: center;
}
.count {
color: #FF0000;
}
.shiyongBox {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
z-index: 9999;
}
.shiyongCont {
width: 100%;
height: 70vh;
background: #ffffff;
left: 0;
bottom: 0;
position: absolute;
border-radius: 24rpx 24rpx 0rpx 0rpx;
}
.shiyongContTopX {
width: 36rpx;
height: 36rpx;
padding: 10rpx;
}
.shiyongContTop {
display: flex;
justify-content: space-between;
padding: 24rpx;
color: #3C3C3C;
font-size: 30rpx;
border-bottom: 1rpx solid #EEEEEE;
align-items: center;
}
.shiyongContTopTitle {
font-size: 30rpx;
color: #3C3C3C;
font-weight: bold;
}
.shiyonghtml {
padding: 24rpx;
height: calc(70vh - 100px);
overflow-y: scroll;
}
.shiyongno {
color: #666666;
font-size: 26rpx;
}
.authorizBox{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont{
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg{
width: 62rpx;
height: 62rpx;
}
.sqLogoBox{
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName{
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs{
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton{
width: 422rpx;
height: 88rpx;
background: #D53533;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size:30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left:71rpx;
}
</style>