<template> <!-- -----------------------适用于下单页面选择券的时候展示券列表-------------------------- --> <u-popup :show="showPop" :round="20" closeable @close="showPop=false"> <view class="son-wrap"> <view class="head"> <view class="headlist" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)"> <text> {{item}} </text> </view> </view> <!------------------------------------可用--------------------------------------> <view class="middle" v-if="active==0"> <checkbox-group @change="checkboxChange" v-if="masterSlaveCouponList&&masterSlaveCouponList.length>0"> <view v-for="(item,index) of masterSlaveCouponList" :key="index" class="list-box"> <label> <view> {{item.couponName}} <checkbox :value="JSON.stringify(item)" :checked="item.couponId==chooseCoupon.couponId" class="blue" /> </view> <view> {{item.couponRule}} </view> <view> {{item.useStartDate}}-{{item.useEndDate}} <text> <text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}} </text> </view> </label> </view> </checkbox-group> <view class="empty" v-else> 空空如也... </view> </view> <!-- -------------------------------不可用-------------------------------- --> <view v-if="active==1" class="middle"> <view v-if="unusableCouponList&&unusableCouponList.length>0"> <view v-for="(item,index) of unusableCouponList" :key="index" class="list-box"> <view> {{item.couponName}} </view> <view> {{item.couponRule}} <text v-if="item.savedMoney"> <text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}} </text> </view> <view> {{item.useStartDate}}-{{item.useEndDate}} </view> </view> </view> <view class="empty" v-else> 空空如也... </view> </view> </view> <view class="bottom-sure" @click="showPop=false"> 确定 </view> </u-popup> </template> <script> export default{ props:['couponData','chooseCouponObj'], watch: { couponData:{//劵列表 handler(newValue, oldValue){ if(newValue){ //可用优惠券去重 this.masterSlaveCouponList=[] if(newValue.masterSlaveCouponList){ newValue.masterSlaveCouponList.forEach(item=>{ if(!this.masterSlaveCouponList.find(item2=>item2.couponId==item.couponId)){ this.masterSlaveCouponList.push(item) } }) } this.unusableCouponList=newValue.unusableCouponList } }, deep:true, immediate:true }, chooseCouponObj:{//选中的券 handler(newValue, oldValue){ if(newValue){ this.chooseCoupon=this.chooseCouponObj } }, deep:true, immediate:true }, }, data(){ return{ active:0,//导航栏下标 showPop:false,//控制弹窗显示隐藏 masterSlaveCouponList:[],//可用优惠券列表 unusableCouponList:[],//不可用优惠券列表 chooseCoupon:'',//选中的劵 navTitle:['可用','不可用'],//导航标题 } }, methods:{ //---导航栏点击 navClick(index){ this.active=index }, //---多选框值变化 checkboxChange(e){ let value=e.detail.value if(value.length>0){ let obj=JSON.parse(value[value.length-1]) this.$emit('couponChoose',obj) } if(value.length==0){ this.$emit('couponChoose','') } } } } </script> <style scoped="scoped" lang="scss"> .son-wrap{ height:80vh; display: flex; flex-direction:column; } .head{ display: flex; } .headlist{ width: 50%; height: 90rpx; line-height: 90rpx; text-align: center; font-size:30rpx; } .headlist.on text{ border-bottom: 6rpx solid $theme; color: $theme; font-weight: bold; } .middle{ padding:24rpx 24rpx 100rpx 24rpx; background:#f5f5f5; flex: 1; overflow-y: scroll; } .list-box{ background: #FFFFFF; padding:24rpx; border-radius:10rpx; } .middle .list-box:not(:first-child){ margin-top:20rpx; } .list-box view:not(:first-child){ margin-top:20rpx; } .list-box view{ display: flex; justify-content: space-between; } .list-box view:first-child{ font-weight: bold; } .list-box view:last-child{ color: #999999; font-size:24rpx; } .list-box text{ color:#f9690e; font-size:32rpx; font-weight: bold; } .list-box text text{ font-size:24rpx; font-weight: 400; } .empty{ padding:160rpx 0; text-align: center; color: $red; } .bottom-sure{ position: fixed; bottom: 0; left: 0; width: 100%; height: 100rpx; display: flex; align-items: center; justify-content: center; background:$theme; font-size:32rpx; font-weight: bold; color: #ffffff; } </style>