weCom/pages/index/package.vue

<template>
	<view class="content">
		<view  class="nodataBox" v-show="nodataShow">
			<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>
	<view class="box" v-show="!nodataShow">
		<view class="line" @click="detailFn(1,item.listCar)" v-for="(item,index) in czList">
				 <view class="lineNameBox">
					 <view class="lnameLeft">
						 <view class="type">储值</view>
						 <view class="lname">{{item.PacKName}}</view>
					 </view>
					 <view class="lBtn">使用条款</view>
				 </view>
				 <view class="lprice">
					 <span class="price1">￥</span>
					 <span class="price2">4566</span>
					 <span class="price3">( 充{{item.ChargeMoney}}送{{item.GiftMoney}} )</span>
				 </view>
				 <view class="lShop">
					 <view class="lShopName">可用门店：{{item.ShopName}}</view>
					 <image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
				 </view>
		</view>
		<view class="line" @click="detailFn(2,item.maps)" v-for="(item,index) in jcList">
				 <view class="lineNameBox">
					 <view class="lnameLeft">
						 <view class="type">计次</view>
						 <view class="lname">{{item.packName}}</view>
					 </view>
					 <view class="lBtn">使用条款</view>
				 </view>
				 <!-- <view class="lprice">
					 <span class="price1">￥</span>
					 <span class="price2">4566</span>
					 <span class="price3">( 充10000送1000 )</span>
				 </view> -->
				 <view class="lShop">
					 <view class="lShopName" v-if="item.shoplist.length==0">可用门店：全部</view>
					 <view class="lShopName" v-else>可用门店：
					    <span v-for="(s,i) in item.shoplist">{{s.shopName}}</span>
					 </view>
					 <image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
				 </view>
		</view>
	</view>
	 
	 
	 
	 <uni-popup ref="popup" type="bottom" >
	 	<view class="popupBox" v-if="type==1">
	 	  <view class="popupTitleBox">
	 		  <view class="popupTitle">储值详情</view>
	 		  <image src="../../static/img/cha.png" mode="" class="chaImg" @click="guanbi"></image>
	 	  </view>
		  <view class="dlineBox">
			  <view class="dLine" v-for="(item,index) in listCar">
				  <view class="dlineTime">06-13 11:28</view>
				  <view class="dlineprice1">-￥1.00</view>
			  </view>
		  </view>
	 	</view>
		
		<view class="popupBox" v-if="type==2">
		  <view class="popupTitleBox">
			  <view class="popupTitle">计次详情</view>
			  <image src="../../static/img/cha.png" mode="" class="chaImg" @click="guanbi"></image>
		  </view>
		  <view class="dlineBox">
			  <view class="dLine2" v-for="(item,index) in maps">
				<view class="jcNameBox">
						<view class="jcType" v-if="item.FlowType==2">项目</view>
						<view class="jcType" v-if="item.FlowType==1">商品</view>
						<view class="jcNameTxt">{{item.FlowName}}</view>
				</view>
				<view class="jcTitme">
					<view class="jcYxq" v-if="item.ExpireTime&&item.ExpireTime!=null&&item.ExpireTime!='null'">有效期：{{item.ExpireTime.slice(0,10)}}</view>
					<view class="jcYxq" v-else>有效期：永久</view>
					<view class="jcNum">
						<span>剩余/总：<span style="color: #FF3B30;">{{item.AmountQty}}</span> /{{item.TotalQty}}</span>
					</view>
				</view>
			  </view>
		  </view>
		</view>
	 	
	 </uni-popup>
	 
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				czList:[],
				jcList:[],
				listCar:'',
				maps:'',
				nodataShow:false,
			}
		},
		onLoad() {

		},
		methods: {
		  getdata(){
			  var that=this;
			  this.customerId=uni.getStorageSync('customerId')
			  //储值信息
			  if(!this.customerId){
			  	this.nodataShow=true
			  }else{
				  this.$http('enterprise/wechat/cardMoneyInfo', {
				    id:this.customerId,
				  }, 'GET').then(res => {
				     this.czList=res.data
				  	
				  })
				  //计次信息
				  this.$http('enterprise/wechat/listCardTimesInfo', {
				    id:this.customerId,
				  }, 'GET').then(res => {
				     this.jcList=res.data
				  	
				  })
			  }
			  
		  },
          detailFn(num,list){
			  this.type=num;
			  if(num==1){
				  this.listCar=list
			  }
			  if(num==2){
				  this.maps=list
			  }
			  this.$refs.popup.open('bottom')
		  },
		  guanbi(){
			    this.$refs.popup.close()
		  }
		}
	}
</script>

<style scoped>
.carUpimg{
		width: 26rpx;height: 16rpx;
	}
.box{
	padding: 0 24rpx;
}
.line{
	background: #fff;
	padding: 30rpx 20rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
.lineNameBox{
	display: flex;justify-content: space-between;
	padding-bottom: 10rpx;
}
.lnameLeft{
	display: flex;
}
.type{
	idth: 64rpx;
	height: 36rpx;
	background: #FF8113;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 36rpx;
	margin-top: 8rpx;
}
.lname{
	font-size: 28rpx;
	color: #333333;
	line-height: 52rpx;
	padding-left: 12rpx;
}
.lBtn{
	width: 136rpx;
	height: 52rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	border: 1rpx solid #DDDDDD;
	font-size: 24rpx;
	color: #3C3C3C;
	text-align: center;
	line-height: 52rpx;
}
.price1{
	font-size: 24rpx;
	color: #FF3B30;
}
.price2{
	font-size: 36rpx;
	color: #FF3B30;
}
.price3{
	font-size: 24rpx;
	color: #3C3C3C;
}
.lShop{
	display: flex;
	justify-content: space-between;
	padding-top: 10rpx;
}
.lShopName{
	font-size: 24rpx;
	color: #999999;
}
.popupBox{
		width: 750rpx;
		height: 60vh;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
	}
	.popupTitleBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.popupTitle{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
	}
	.chaImg{
		width: 27rpx;height: 27rpx;margin-top: 9rpx;
	}
	.dLine{
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.dLine2{
		padding: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.dlineTime{
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.dlineprice1{
		font-weight: 500;
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.dlineBox{
		height: calc(60vh - 120rpx);
		overflow-y: auto;
	}
	.jcNameBox{
		display: flex;
	}
	.jcType{
		width: 62rpx;
		height: 32rpx;
		border-radius: 5rpx;
		border: 1px solid #F19D01;
		text-align: center;
		line-height: 32rpx;
		font-size: 24rpx;
		color: #F19D01;
	}
	.jcNameTxt{
		font-size: 26rpx;
		color: #333333;
		padding-left: 10rpx;
		line-height: 36rpx;
	}
	.jcTitme{
		display: flex;justify-content: space-between;
		padding-top: 20rpx;
	}
	.jcYxq{
		font-size: 24rpx;
		color: #999999;
	}
	.jcNum{
		font-size: 24rpx;
		color: #999999;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 32rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
	}
</style>