wxThird/pages/index/vipCard.vue

<template>
	<view class="box">

		<view class="headerBox">
			<view class="vip">
				<view class="headerTop">
					<image src="../../static/img/vipheader.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="mainBox" v-if="tabIndex==1">
			<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 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}">
					<view class="shopName">{{item.shopName}}</view>
					<image @click="changeState(item)" v-if="item.open==false" src="../../static/img/icon_arrow_down.png"
						mode="" style="width: 34rpx;height: 22rpx;"></image>
					<image @click="changeState(item)" 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="shiyongShow=false"></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="itemBottom" :class="{active:item.open}">
					<view class="shopName">{{item.ShopName}}</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>
					<image @click="changeState(item)" v-if="item.open==false" src="../../static/img/icon_arrow_down.png"
						mode="" style="width: 34rpx;height: 22rpx;"></image>
					<image @click="changeState(item)" 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="itemBottom" :class="{active:item.open}">
					<view class="shopName">{{item.ShopName}}</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>
					<image @click="changeState(item)" v-if="item.open==false" src="../../static/img/icon_arrow_down.png"
						mode="" style="width: 34rpx;height: 22rpx;"></image>
					<image @click="changeState(item)" 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="shiyongShow=false"></image>
					</view>
					<view class="shiyonghtml">
						<view v-html="useComment" v-if="useComment"></view>
						<view v-else class="shiyongno">使用条款暂无内容</view>
					</view>
				</view>
			</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,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.myOrderCoupon();
		},

		methods: {
			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
				})
			}
		}
	}
</script>

<style scoped>
	.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;
	}


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

	}

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

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

	.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;
	}
</style>