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 style="height: 92rpx;"></view>
			<view class="itemBg" v-for="(item,index) in currentList" @click="goDetail(item.id)">
				<view class="leftB" v-if="item.discountType==1 " style="display: flex;align-items: center;justify-content: center;">
					<view>
						<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>
				
				<view class="leftB" v-if="item.discountType!=1" style="display: flex;align-items: center;justify-content: center;">
					<image src="http://dmsphoto.66km.com.cn/thFiles/5340A784-FEE2-43FA-8ED1-C509FADFDBED.png"
					 mode="" style="width: 77rpx;height:48rpx;"></image>
				</view>
				<view style="width: 460rpx;">
					
				<view class="itemTop">
					
					
					<view class="centerB">
						<view class="name" >
						 <span class="djq" v-if="item.discountType==1">代金券</span>
						 <span class="djq" v-if="item.discountType==2">商品券</span>
						 <span class="djq" v-if="item.discountType==3">服务券</span>
						 <span>{{item.actName}}</span>
						</view>
						<view class="plateNumer" v-if="item.plateNumer">限鲁{{item.plateNumer}}使用</view>
						<view class="time" v-if="item.startTime">有效期：{{item.startTime.slice(0,10)}}至{{item.endTime.slice(0,10)}}</view>
						<view class="time" v-else>有效期：领取后{{item.endOffsetDays}}天</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" @click.stop="">
					<view  class="rightJian">使用规则
					  <image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					</view>
					<view class="gouse" v-if="item.state==0" @click="goUseFn(item)">去使用</view>
				</view>
				</view>

				<!-- <view class="itemBottom">
					<view></view>
					<view @click="goDetail(item.id)" class="rightJian">查看详情 
					<image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					</view>
					
				</view> -->
			</view>

			<!-- 无数据空白页 -->
			<nodata v-if="items.length==0"></nodata>
		</view>
		
		<!-- 核销码 -->
		<view class="authorizBox" v-if="hxShow" @click="hxclose">
			<view class="hxBox" @click.stop="">
				<view class="chBox">
					<img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="hxclose"/>
				</view>
				<view class="hxName">{{detail.actName}}</view>
				<view class="hxTime" v-if="detail.startTime">
					有效期：{{detail.startTime.slice(0,10)}}至{{detail.endTime.slice(0,10)}}</view>
				<view class="hxTime" v-else>有效期：领取后{{detail.endOffsetDays}}天</view>
				<view style="display: flex;justify-content: center;padding-top:50rpx;">
					<tki-qrcode cid="qrcode1" ref="qrcode" :val="detail.couponCode" :size="400" :unit="unit"
						:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
						:loadMake="loadMake" :usingComponents="true" @result="qrR" />
					
				</view>
				<view class="couponCode">{{detail.couponCode}}</view>
				<view class="couponCodeTs">请到店出示券码即可开始服务</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			nodata,tkiQrcode
		},
		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: [],
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				val: '二维码', // 要生成的二维码值
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#262637', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				src: '', // 二维码生成后的图片地址或base64
				hxShow:false,
				detail:'',

			}
		},
		onLoad(opt) {

			this.tabIndex = opt.num;

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

			this.myOrderCoupon()

		},
		methods: {

			goDetail(id) {
				uni.navigateTo({
					url: 'discountCardDetail?id=' + id
				})
			},
             hxclose(){
             	this.hxShow=false;
             },
			 goUseFn(item){
				 this.detail=item;
				 this.hxShow=true;
			 },
			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;
	}
.djq{
	background: linear-gradient(128deg, #FFE4C5 0%, #FDC692 100%);
	border-radius: 4rpx;
	height: 34rpx;
	width: 76rpx;
	line-height: 34rpx;
	text-align: center;
	color: #2B2219;
	font-size: 20rpx;
	margin-top: 4rpx;
	margin-right: 10rpx;
}
.plateNumer{
	color: #FF0000;
	line-height: 30rpx;
	font-size: 22rpx;
	padding: 3rpx 0rpx;
	width: 193rpx;
	text-align: center;
	background: rgba(255,0,0,0.06);
	border-radius: 4rpx;
	margin-top: 10rpx;
}
.gouse{
	width: 99rpx;
	height: 44rpx;
	border-radius: 22rpx;
	border: 1px solid #FF0000;
	text-align: center;
	line-height: 42rpx;
	color: #FF0000;
}
	.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: 24rpx 20rpx 20rpx;
		    display: flex;
	}
	.leftB{
		width: 200rpx;
	}

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

	.use {
            text-align: center;
		font-size: 26rpx;
		color: #FF0000;
	}

	.use2 {
        padding-right: 8rpx;
		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;
		display: flex;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}
	.time{
		font-size: 24rpx;
		
		color: #666666;
		margin-top: 10rpx;
	}
	.itemBottom {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999999;
		line-height: 33rpx;
		
	}
	.couponlineTopImg{
		width: 118rpx;
		height: 100rpx;
		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;
	}
	.rightJian{
		display: flex;
		align-items: center;
	}
	.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 11;
		}
		.hxBox{
			width: 750rpx;
			height: 75vh;
			margin-top: 25vh;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			z-index: 222;
		}
		.couponCode{
			font-weight: 500;
			color: #333333;
			font-size: 30rpx;
			padding-top: 40rpx;
			text-align: center;
		}
		.couponCodeTs{
			color: #666666;font-size: 24rpx;
			text-align: center;padding-top: 10rpx;
		}
		.hxName{
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 26rpx;
		}
		.hxTime{
			color: #3C3C3C;font-size: 24rpx;	text-align: center;padding-top: 16rpx;
			padding-bottom: 50rpx;
			border-bottom: 1px dashed #C3C3C3;
		}
		.chahaoImg{
			width: 36rpx;height: 36rpx;
		}
		.chBox{
			text-align: right;
			padding-top: 33rpx;
			padding-right: 24rpx;
		}
		.couponCodeBox{
			display: flex;
			padding-top: 15rpx;
		}
</style>