orderCoupon.vue

<template>
	<!----------------适用于订单选择券的时候展示券列表-------------------------->
	<u-popup v-model="show" mode="bottom">
		<view class="title">
			<view class="titleContent" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)">
				<view style="position: relative;top:15rpx;">{{item}}</view>
				<view v-show="active==index">
					<text></text>
				</view>
				
			</view>
		</view>
		<!----------------------------------------------------可用------------------------------------------>
		<view v-show="active==0">
			<view class="middle">
				<checkbox-group @change="checkboxChange" v-if="couponList.masterSlaveCouponList&&couponList.masterSlaveCouponList.length>0">
					<view v-for="(item,index) of couponList.masterSlaveCouponList" :key="index" class="listBox">
						<label class="listLabel">
							<view>
								{{item.couponName}}
								<checkbox :value="item.couponId" :checked="item.couponId==chooseCoupon.couponId" />
							</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>
			
			<view class="empty" v-if="!couponList.masterSlaveCouponList||couponList.masterSlaveCouponList.length==0">
				空空如也...
			</view>
		</view>
		
		<!--------------------------------------不可用------------------------------------------------------------>   
	   <view v-show="active==1">
			<view class="middle" v-if="couponList.unusableCouponList&&couponList.unusableCouponList.length>0">
				<view v-for="(item,index) of couponList.unusableCouponList" :key="index" class="listBox">
					<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-if="!couponList.unusableCouponList||couponList.unusableCouponList.length==0">
				空空如也...
		   </view> 
	   </view>
	</u-popup>
	
</template>

<script>

export default{
  props:['couponData','chooseCouponObj'],
  watch: {
    couponData:{//
      handler(newValue, oldValue){
        if(newValue){
          this.couponList=this.couponData
        }
      },
      deep:true,
      immediate:true
    },
    chooseCouponObj:{//
      handler(newValue, oldValue){
        if(newValue){
          this.chooseCoupon=this.chooseCouponObj
        }
      },
      deep:true,
      immediate:true
    },
  },
  data(){
    return{
      active:0,//导航栏下标
      show:false,//控制弹窗显示隐藏
      current:0,//控制选项卡默认显示第几个
      couponList:'',//券列表
      chooseCoupon:'',//选中的劵
      navTitle:['可用','不可用'],//导航标题
    }
  },
  methods:{
    navClick(index){//------------------------------------------导航栏点击
      this.active=index
    },
    showCoupon(){//----------------------------------------展示弹窗
      this.show=true
    },
    //---多选框值变化
    checkboxChange(evt){
      if(evt.detail.value.length==2){
        //删除第一个
        evt.detail.value.splice(0,1)
        //获取选中券，传值给父组件
        this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
          return item.couponId==evt.detail.value[0]
        })
        this.$emit('couponChoose',this.chooseCoupon)
      }else if(evt.detail.value.length==1){
				  this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
          return item.couponId==evt.detail.value[0]
				  })
				  this.$emit('couponChoose',this.chooseCoupon)
      }else if(evt.detail.value.length==0){
        this.$emit('couponChoose','')
      }
    }
  }
}

</script>

<style scoped="scoped" lang="scss">
	.title{display: flex;height: 80rpx;}
	.titleContent{flex:1;text-align: center;font-size:30rpx;}
	.titleContent.on{color: $blue;font-weight: bold;}
	.titleContent view text{width: 40rpx;height: 6rpx;background:$blue;border-radius:6rpx;display:inline-block;position: relative;top:-10rpx;}
	.middle{padding:24rpx;background:#f5f5f5;}
	.listBox{background: #FFFFFF;padding:24rpx;border-radius:10rpx;}
  .middle .listBox:not(:first-child){margin-top:20rpx;}
	.middle view view:not(:first-child){margin-top:20rpx;}
	.middle view view{display: flex;justify-content: space-between;}
	.middle view view:first-child{font-weight: bold;}
	.middle view view:nth-child(2){font-size:24rpx;}
	.middle view view:last-child{color: #666666;font-size:24rpx;}
	.middle view text{color:#f9690e;font-size:30rpx;font-weight: bolder;}
	.middle view text text{font-size:24rpx;font-weight: 400;}
	.empty{padding:100rpx 0;text-align: center;background: #f5f5f5;}
</style>