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==1}" @click="tabClick2(1)">可使用</view>
				<view class="tabLine2" :class="{tabActive2:tabIndex2==2}" @click="tabClick2(2)">已使用</view>
				<view class="tabLine2" :class="{tabActive2:tabIndex2==3}" @click="tabClick2(3)">已过期</view>
			</view>
			<view class="itemBg" v-for="(item,index) in items" @click="goDetail(item.ID)">
				<view class="itemTop">
					<view class="leftB">
						<view class="use">￥<span class="use2">{{item.actMoney}}</span></view>
						<!-- <view class="used">￥<span class="used2">{{item.actMoney}}</span></view> -->
					</view>
					<view class="centerB">
						<view class="name">{{item.actName}}</view>
						<view class="time" v-if="item.startTime">有效期：{{item.startTime}}-{{item.endTime}}</view>
						<view class="time" v-else></view>
					</view>
					<view class="rightB"></view>
				</view>

				<view class="itemBottom">
					<view>可用次数：10</view>
					<view>查看详情 ></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
		},
		data() {
			return {

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

			}
		},
		onLoad(opt) {

			this.tabIndex = opt.num;

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

			this.myOrderCoupon()

		},
		methods: {



			tabClick(num) {
				this.tabIndex = num;



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



				this.myOrderCoupon()
			},
			goDetail(id) {
				uni.navigateTo({
					url: 'orderDetail?id=' + id
				})
			},
			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: #F03B3B;
		border-bottom: 4rpx solid #F03B3B;

	}

	.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: #F03B3B;
		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: #F03B3B;
	}

	.use2 {

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

	.used {

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

	.used2 {

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

	.name{
		
		font-size: 30rpx;
		
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}
	.time{
		font-size: 24rpx;
		
		color: #666666;
	}
	.itemBottom {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #EEEEEE;
		font-size: 24rpx;
		color: #999999;
		line-height: 33rpx;
	}
</style>