wxThird/pages/index/discountCard.vue

<template>
	<view class="box">
		<view class="tab">

			<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">可使用</view>
			<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">可赠送</view>

		</view>
		
		<view class="main" :class="{mainActive:tabIndex==1}">
			<view class="okBox" v-if="tabIndex==1">
				<view class="tabLine2" :class="{tabActive2:tabIndex2==0}" @click="tabClick2(0)">可使用</view>
				<view class="tabLine2" :class="{tabActive2:tabIndex2==2}" @click="tabClick2(2)">已使用</view>
				<view class="tabLine2" :class="{tabActive2:tabIndex2==1}" @click="tabClick2(1)">已过期</view>
			</view>
			<view class="itemBg" v-for="(item,index) in currentList">
				<view class="itemTop">
					<view class="leftB">
						<view class="use" v-if="item.state==0">￥<span class="use2">{{item.actMoney}}</span></view>
						<view class="used" v-else>￥<span class="used2">{{item.actMoney}}</span></view>
						<view class="tiaojian">{{item.whereMoney!==0?'满'+item.whereMoney+'元可用':'满任意金额可用'}}</view>
					</view>
					<view class="centerB">
						<view class="name">{{item.actName}}</view>
						<view class="time" v-if="item.startTime">有效期：{{item.startTime.slice(0,10)}}-{{item.endTime.slice(0,10)}}</view>
						<view class="time" v-else>有效期：</view>
					</view>
					<view class="rightB">
						<image src="../../static/img/icon_yishiyong.png" mode="" v-if="item.state==2&&tabIndex==1"  class="couponlineTopImg"></image>
						<image src="../../static/img/icon_guoqi.png" mode="" v-if="item.state==1&&tabIndex==1"  class="couponlineTopImg"></image>
						
						<view class="shareB"  v-if="item.shareQty>0&&tabIndex==2" @click.stop="">
						  <image  src="../../static/img/icon_share.png" alt="" class="couponlineshareImg"></image>
						  <view class="keshare">赠送给好友</view>
						</view>
					</view>
				</view>

				<view class="itemBottom">
					<view v-if="tabIndex==1">可用次数:{{item.avaQty}}</view>
					<view v-else>可分享次数:{{item.shareQty}}</view>
					<view @click="goDetail(item.id)">查看详情 ></view>
					
				</view>
			</view>

			<!-- 无数据空白页 -->
			<nodata v-if="items.length==0"></nodata>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	export default {
		components: {
			nodata
		},
		computed: {
		  currentList () {
		    if (this.tabIndex == 2) {
		      return this.items.filter(item => ~~item.shareQty > 0)
		    } else {
		      return this.items.filter(item => item.state == this.tabIndex2)
		    }
		  }
		},
		data() {
			return {

				tabIndex: 1,
				tabIndex2: 0,
				items: [],

			}
		},
		onLoad(opt) {

			this.tabIndex = opt.num;

			this.myOrderCoupon()
		},
		onShow() {
			console.log(this.tabIndex)

			this.myOrderCoupon()

		},
		methods: {

			goDetail(id) {
				uni.navigateTo({
					url: 'discountCardDetail?id=' + id
				})
			},

			tabClick(num) {
				this.tabIndex = num;

				
			},
			tabClick2(num) {
				this.tabIndex2 = num;

			},
			
			myOrderCoupon() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('opencoupon/listCoupon', {

					// page: this.page,
					// limit: 10,
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data

					// 处理 undefined和null转为空白字符串
					// list.forEach((item, index) => {
					// 	for (const key in item) {
					// 		item[key] = this.$praseStrEmpty(item[key])
					// 	}
					// })

					this.items = list






				})
			},

		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 92rpx;
		position: fixed;
		width: calc(100vw - 48rpx);
		padding-left: 24rpx;
		padding-right: 24rpx;
		height: 92rpx;
		z-index: 11;
	}

	.tabLine {

		font-size: 30rpx;
		text-align: center;
	}

	.tabActive {
		color: #FF0000;
		border-bottom: 4rpx solid #FF0000;

	}

	.main {
		padding-top: 92rpx;
		padding-bottom: 20rpx;
		background-color: #F4F5F7;
	}
	.mainActive{
		padding-top: 184rpx;
		padding-bottom: 20rpx;
		background-color: #F4F5F7;
	}

	.okBox {
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
		position: fixed;
		width: 100vw;
		padding-left: 24rpx;
		padding-right: 24rpx;
		margin-top: -93rpx;
		height: 92rpx;
		z-index: 11;
	}

	.tabLine2 {

		font-size: 28rpx;
		text-align: center;
		width: 144rpx;
		height: 56rpx;
		background: #F4F5F7;
		border-radius: 28rpx;
		line-height: 56rpx;
		margin-right: 24rpx;
	}

	.tabActive2 {

		background-color: rgba(240, 59, 59, 0.06);
		border-radius: 28rpx;
		background-color: 0.06;

		font-size: 28rpx;

		color: #FF0000;
		width: 144rpx;
		height: 56rpx;
		line-height: 56rpx;
		margin-right: 24rpx;
	}

	.itemBg {
		margin: 20rpx 24rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 20rpx 20rpx;
	}

	.itemTop {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.use {

		font-size: 26rpx;
		color: #FF0000;
	}

	.use2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #FF0000;
		line-height: 56rpx;
	}

	.used {

		font-size: 26rpx;
		color: #666666;
	}

	.used2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #666666;
		line-height: 56rpx;
	}
	.rightB{
		position: relative;
	}
	.tiaojian{
		
		font-size: 24rpx;
		
		color: #666666;
		
	}
	.name{
		
		font-size: 30rpx;
		
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}
	.time{
		font-size: 24rpx;
		
		color: #666666;
		margin-top: 15rpx;
	}
	.itemBottom {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #EEEEEE;
		font-size: 24rpx;
		color: #999999;
		line-height: 33rpx;
	}
	.couponlineTopImg{
		width: 118rpx;
		height: 86rpx;
		position: absolute;
		top: -24rpx;
		right: 0;
	}
	.shareB{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.couponlineshareImg{
		width: 44rpx;
		height: 44rpx;
		
	}
	.keshare{
		font-size: 22rpx;
		color: #666666;
		margin-top: 15rpx;
	}
</style>