|
|
@@ -14,45 +14,51 @@
|
|
|
</view>
|
|
|
<div class="tui-popup-main coupon">
|
|
|
<scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
- <view v-for="(coupon,index) in dataList" :key="index" class="coupon-list" @click.stop="checkedCoupon(index)">
|
|
|
- <view class="list-cell-le">
|
|
|
- <view class="coupon-maxMoney">
|
|
|
- <text class="small">￥</text>
|
|
|
- {{ coupon.couponAmount }}
|
|
|
- </view>
|
|
|
- <view class="coupon-minMoney">
|
|
|
- 满{{ coupon.touchPrice }}可用
|
|
|
+ <view class="coupon-empty" v-if="isCouponEmpty">
|
|
|
+ <image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
|
|
|
+ <text class="error-text">暂无可用优惠券~</text>
|
|
|
+ </view>
|
|
|
+ <template>
|
|
|
+ <view v-for="(coupon,index) in dataList" :key="index" class="coupon-list" @click.stop="checkedCoupon(index)" v-if="dataList.length>0">
|
|
|
+ <view class="list-cell-le">
|
|
|
+ <view class="coupon-maxMoney">
|
|
|
+ <text class="small">￥</text>
|
|
|
+ {{ coupon.couponAmount }}
|
|
|
+ </view>
|
|
|
+ <view class="coupon-minMoney">
|
|
|
+ 满{{ coupon.touchPrice }}可用
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-ri">
|
|
|
- <view class="list-cell-top">
|
|
|
- <view class="list-cell-type">
|
|
|
- <view class="list-cell-tags">
|
|
|
- <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="list-cell-texts">
|
|
|
- <text v-if="coupon.couponType == 0">
|
|
|
- {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 1">
|
|
|
- {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
- <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <view class="list-cell-top">
|
|
|
+ <view class="list-cell-type">
|
|
|
+ <view class="list-cell-tags">
|
|
|
+ <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-texts">
|
|
|
+ <text v-if="coupon.couponType == 0">
|
|
|
+ {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 1">
|
|
|
+ {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-btn">
|
|
|
- <view class="list-cell-checkbox">
|
|
|
- <view class="checkbox iconfont"
|
|
|
- :class="[coupon.ischecked ?'icon-yixuanze':'icon-weixuanze']"
|
|
|
- >
|
|
|
+ <view class="list-cell-btn">
|
|
|
+ <view class="list-cell-checkbox">
|
|
|
+ <view class="checkbox iconfont"
|
|
|
+ :class="[coupon.ischecked ?'icon-yixuanze':'icon-weixuanze']"
|
|
|
+ >
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
|
|
|
</view>
|
|
|
- <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</scroll-view>
|
|
|
</div>
|
|
|
<view class="tui-right-flex tui-popup-btn">
|
|
|
@@ -75,8 +81,10 @@
|
|
|
},
|
|
|
data() {
|
|
|
return{
|
|
|
- popupShow:false,
|
|
|
+ StaticUrl:this.$Static, //静态图片路径
|
|
|
isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ popupShow:false,
|
|
|
+ isCouponEmpty:false,
|
|
|
checkedIndex:null,
|
|
|
dataList:[],
|
|
|
coupon:{
|
|
|
@@ -112,16 +120,27 @@
|
|
|
created(){
|
|
|
this.initData(this.couponList)
|
|
|
},
|
|
|
- computed: {
|
|
|
-
|
|
|
+ watch: {
|
|
|
+ couponList: {
|
|
|
+ handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
|
|
|
+ console.log(el)
|
|
|
+ this.couponList = el
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
methods:{
|
|
|
initData(data){
|
|
|
- data.forEach((el,index) => {
|
|
|
- this.dataList.push(Object.assign({},el,{ischecked:false}))
|
|
|
- })
|
|
|
- this.coupon.couponAmount = data[0].couponAmount
|
|
|
- this.dataList[0].ischecked = true
|
|
|
+ if(data.length>0){
|
|
|
+ data.forEach((el,index) => {
|
|
|
+ this.dataList.push(Object.assign({},el,{ischecked:false}))
|
|
|
+ })
|
|
|
+ this.coupon.couponAmount = data[0].couponAmount
|
|
|
+ this.dataList[0].ischecked = true
|
|
|
+ this.isCouponEmpty = false
|
|
|
+ }else{
|
|
|
+ this.isCouponEmpty = true
|
|
|
+ }
|
|
|
},
|
|
|
checkedCoupon(idx){// 选择优惠券
|
|
|
this.checkedIndex = idx;
|
|
|
@@ -229,6 +248,27 @@
|
|
|
.tui-popup-scroll{
|
|
|
width: 100%;
|
|
|
height: 600rpx;
|
|
|
+ .coupon-empty{
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ background: $bg-color;
|
|
|
+ .empty-container-image{
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .error-text{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.coupon-list{
|
|
|
width: 100%;
|
|
|
height: 200rpx;
|
