XEH-miniProgram/pages/taxationLesson/ticket.vue

<template>
  <view class="ticket-box">
     <view class="ticket-child" v-for="(item,index) in ticketList" :key="index" :style="{'backgroundImage':
	 item.receive > 0 ? 'url('+bgSrc+')' : 'url('+bgEmptySrc+')'}">
		 <view class="left-box">
			  <view class="title">￥<text> {{item.money}}</text> {{item.name}}</view>
			  <view class="date">有效日期：至{{item.date}}</view>
			  <view class="desc">{{item.type === 'all' ? '所有产品品类通用' :'指定产品品类使用' }}</view>
			  <view class="desc">{{item.limit}}</view>
		 </view>
		 
		 <view class="right-box">
			  <view class="type" :style="{'fontSize':item.receive > 0 ? '28rpx' : '32rpx'}">{{item.receive > 0 ? '仅剩' : '已领完'}}</view>
			  <view class="type" v-show="item.remainder > 0">{{item.remainder}}张</view>
			  <view class="font margin-top-20" v-show="item.receive === 0">持续发放中</view>
			  <view class="font" v-show="item.receive === 0">下次再领</view>
			  <view class="receive-box" v-show="item.receive > 0" @click="receiveCoupon(item.receive)"> 可领{{item.receive}}张</view>
		 </view>
		 
	 </view>
	 

  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      id: "",
	  bgSrc:'data:image/png;base64,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',
	  bgEmptySrc:'data:image/png;base64,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',
      ticketList:[
		  {
			money:100,
			name:'兔年全年有效代金券',
			date:'2023-12-31',
			type:'all',//使用类型
			limit:'满100元可用',//使用限制
			remainder:17, //剩余数量
			receive:2,// 可领取数量
		  },
		  {
			money:1200,
			name:'一年税控托管免费',
			date:'2023-12-31',
			type:'notAll',
			limit:'使用无限制',//使用限制
			remainder:0, //剩余数量
			receive:0,// 可领取数量
		  },
		  {
			money:88,
			name:'双十一特惠券',
			date:'2023-12-31',
			type:'notAll',
			limit:'使用无限制',//使用限制
			remainder:8, //剩余数量
			receive:1,// 可领取数量
		  }		  
	  ]  
    };
  },
  onLoad(op) {
    // this.id = op.id;
  },
  methods: {
	receiveCoupon(param){
		if(param){
			uni.showModal({
				content:'恭喜您领取成功~',
				confirmText:'去使用',
				confirmColor:'#039bfb',
				cancelText:'继续领取',
				cancelColor:'#666666',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
		else {
			uni.showModal({
				content:'抱歉，别人手快一步，名额已领完，下次早点来哦～',
				confirmText:'我知道了',
				confirmColor:'#039bfb',
				showCancel:false,
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} 
				}
			})
		}
	}
  },
};
</script>

<style lang="scss" scoped>
.ticket-box {
  display: flex;
  flex-direction: column;
  .ticket-child {
	display: flex;
    width: 96%;
    height: 200rpx;
    background-size: 100% 100%;
    margin: 2% 2% 0 2%;
	align-items: center;
	.left-box {
		width: 70%;
		.title {
			padding-left: 20rpx;
			font-size: 34rpx;
			text {
				font-size: 56rpx;
				margin-right: 10rpx;
			}
		}
		.date {
			padding-left: 30rpx;
			font-size: 30rpx;
		}
		.desc {
			padding-left: 30rpx;
			font-size: 26rpx;
			color: #999;
		}
	}
	.right-box {
		width: 30%;
		view {
			text-align: center;
		}
		.type {
			color: #ffffff;
			font-size: 30rpx;
		}
		.font {
			color: #ffffff;
			font-size: 28rpx;
		}
		.receive-box {
			width: 80%;
			height: 56rpx;
			background-color: #fff;
			border-radius: 10rpx;
			color: #00bdef;
			font-size: 28rpx;
			margin: 7% 0 0 10%;
			line-height: 56rpx;
		} 
	}
	
  }
   
}

.margin-top-20 {
	margin-top: 20rpx;
}

</style>