wxThird/pages/index/vipCard.vue

<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">
			   <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.cardTimeList">
				<view v-if="AmountQtyJs(item.list)" class="itemBox">
				<view class="itemTop">
					<view class="itemName">{{item.PackName}}</view>
					<view class="tiaokuan" @click="useCl(item.useComment)">使用条款</view>
				</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 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.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.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>

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

			<view v-for="(item,index) in vipData.carMoneyList">
				<!-- 不展示剩余为0项 -->
				<view v-if="disCz&&item.Money!=0" 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: #999999;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" v-if="v.CreateTime">{{v.CreateTime}}</view>


						<view v-if="v.Type==2">-{{v.Money}}</view>
						<view class="count" 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: #999999;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" v-if="v.CreateTime">{{v.CreateTime}}</view>
				
				
						<view v-if="v.Type==2">-{{v.Money}}</view>
						<view class="count" v-else>+{{v.Money}}</view>
					</view>
				</view>
				
				</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();
				})
			}
			
		},

		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
			},
			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
						}
					})

					this.vipData = list





				})
			},
			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>
	.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;
	}

	.btnBox {
		display: flex;background: #F4F5F7;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 26rpx 24rpx;
		margin-top: -24rpx;
	}


	.itemBox {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
	}

	.itemTop {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.itemBottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;

	}

	.active {
		margin-bottom: 30rpx;
	}

	.itemName {

		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.tiaokuan {
		width: 136rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		border: 1rpx solid #DDDDDD;
		color: #666666;
		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;
       /* max-width: 300rpx;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           -o-text-overflow: ellipsis; */
	}

	.itemBg {
		padding: 30rpx 0rpx;
		border-top: 1rpx solid #EEEEEE;
	}
    .itemBg:last-child{
		padding-bottom: 0;
	}
	.nameTop {

		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}

	.type {
		width: 72rpx;
		height: 36rpx;
		border-radius: 5rpx;
		border: 1rpx solid #F19D01;

		margin-right: 10rpx;

		font-size: 24rpx;
		color: #F19D01;
		line-height: 36rpx;
		padding: 2rpx 12rpx;
		text-align: center;
	}

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