orderCoupon.vue 4.89 KB
Newer Older
潘永坪's avatar
潘永坪 committed
1 2
<template>
	<!----------------适用于订单选择券的时候展示券列表-------------------------->
潘永坪's avatar
潘永坪 committed
3 4 5 6 7 8 9 10 11 12 13 14
	<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">
15
			<view class="middle">
16 17 18
				<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">
潘永坪's avatar
潘永坪 committed
19 20
							<view>
								{{item.couponName}}
21
								<checkbox :value="item.couponId" :checked="item.couponId==chooseCoupon.couponId" />
22 23 24 25 26 27 28
							</view>
							<view>
								{{item.couponRule}}
							</view>
							
							<view>
								{{item.useStartDate}}-{{item.useEndDate}}
潘永坪's avatar
潘永坪 committed
29
								<text>
30 31 32 33 34 35
									<text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}}
								</text>
							</view>
						</label>
					</view>
				</checkbox-group>
潘永坪's avatar
潘永坪 committed
36
			</view>
潘永坪's avatar
潘永坪 committed
37
			
38
			<view class="empty" v-if="!couponList.masterSlaveCouponList||couponList.masterSlaveCouponList.length==0">
潘永坪's avatar
潘永坪 committed
39
				空空如也...
潘永坪's avatar
潘永坪 committed
40 41 42 43 44 45 46 47
			</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>
潘永坪's avatar
潘永坪 committed
48
						{{item.couponName}}
潘永坪's avatar
潘永坪 committed
49 50
					</view>
					<view>
潘永坪's avatar
潘永坪 committed
51
						{{item.couponRule}}
潘永坪's avatar
潘永坪 committed
52
						<text v-if="item.savedMoney">
潘永坪's avatar
潘永坪 committed
53
							<text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}}
潘永坪's avatar
潘永坪 committed
54 55 56 57
						</text>
					</view>
	  
					<view>
潘永坪's avatar
潘永坪 committed
58
						{{item.useStartDate}}-{{item.useEndDate}}
潘永坪's avatar
潘永坪 committed
59 60 61
					</view>
				</view>
			</view>
潘永坪's avatar
潘永坪 committed
62
			<view class="empty" v-if="!couponList.unusableCouponList||couponList.unusableCouponList.length==0">
潘永坪's avatar
潘永坪 committed
63
				空空如也...
潘永坪's avatar
潘永坪 committed
64 65 66 67
		   </view> 
	   </view>
	</u-popup>
	
潘永坪's avatar
潘永坪 committed
68 69 70 71
</template>

<script>

潘永坪's avatar
潘永坪 committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
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){
122
				  this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
潘永坪's avatar
潘永坪 committed
123
          return item.couponId==evt.detail.value[0]
124
				  })
潘永坪's avatar
潘永坪 committed
125 126 127 128 129 130 131
				  this.$emit('couponChoose',this.chooseCoupon)
      }else if(evt.detail.value.length==0){
        this.$emit('couponChoose','')
      }
    }
  }
}
潘永坪's avatar
潘永坪 committed
132 133 134

</script>

潘永坪's avatar
潘永坪 committed
135 136 137
<style scoped="scoped" lang="scss">
	.title{display: flex;height: 80rpx;}
	.titleContent{flex:1;text-align: center;font-size:30rpx;}
潘永坪's avatar
潘永坪 committed
138 139
	.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;}
潘永坪's avatar
潘永坪 committed
140 141
	.middle{padding:24rpx;background:#f5f5f5;}
	.listBox{background: #FFFFFF;padding:24rpx;border-radius:10rpx;}
142
  .middle .listBox:not(:first-child){margin-top:20rpx;}
潘永坪's avatar
潘永坪 committed
143 144 145 146 147 148 149
	.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;}
潘永坪's avatar
潘永坪 committed
150
	.empty{padding:100rpx 0;text-align: center;background: #f5f5f5;}
潘永坪's avatar
潘永坪 committed
151
</style>