|
|
@@ -1,88 +1,91 @@
|
|
|
<template>
|
|
|
<view class="container clearfix">
|
|
|
- <view class="container-banner">
|
|
|
- <image
|
|
|
- class="image2x"
|
|
|
- src="https://static.caimei365.com/app/meibohui/app/activity-banner@2x.png"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="container-title">超值优惠券</view>
|
|
|
- <view class="container-list" v-show="isRequest">
|
|
|
- <view class="empty-container" v-if="showEmpty">
|
|
|
- <image class="empty-container-image" :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"></image>
|
|
|
- <text class="error-text">暂无可领的优惠券~</text>
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
+ <view class="container-content tui-skeleton" v-else>
|
|
|
+ <view class="container-banner">
|
|
|
+ <image
|
|
|
+ class="image2x"
|
|
|
+ src="https://static.caimei365.com/app/meibohui/app/activity-banner@2x.png"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
- <template v-else>
|
|
|
- <view v-for="(coupon, index) in coupinList" :key="index" :id="coupon.id" class="coupon-list">
|
|
|
- <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 class="list-cell-ri">
|
|
|
- <view class="list-cell-top">
|
|
|
- <view class="list-cell-type">
|
|
|
- <view class="list-cell-tags">
|
|
|
- <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
- <text class="tags" v-if="coupon.moneyCouponType == 1"
|
|
|
- >意向{{ coupon.couponType | TypeFormat }}</text
|
|
|
+ <view class="container-title">超值优惠券</view>
|
|
|
+ <view class="container-list" v-show="isRequest">
|
|
|
+ <view class="empty-container" v-if="showEmpty">
|
|
|
+ <image class="empty-container-image" :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"></image>
|
|
|
+ <text class="error-text">暂无可领的优惠券~</text>
|
|
|
+ </view>
|
|
|
+ <template v-else>
|
|
|
+ <view v-for="(coupon, index) in coupinList" :key="index" :id="coupon.id" class="coupon-list">
|
|
|
+ <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 class="list-cell-ri">
|
|
|
+ <view class="list-cell-top">
|
|
|
+ <view class="list-cell-type">
|
|
|
+ <view class="list-cell-tags">
|
|
|
+ <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
+ <text class="tags" v-if="coupon.moneyCouponType == 1"
|
|
|
+ >意向{{ coupon.couponType | TypeFormat }}</text
|
|
|
+ >
|
|
|
+ <text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
|
|
|
+ </template>
|
|
|
+ </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 class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
|
|
|
- </template>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ </view>
|
|
|
</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 class="list-cell-btn">
|
|
|
- <view class="icon-used">
|
|
|
- <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
- <view class="icon-used-text">购买</view>
|
|
|
- <view class="icon-used-btn buy" @click="toPayCoupon(coupon)"
|
|
|
- >￥{{ coupon.moneyCouponPrice }}</view
|
|
|
- >
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view
|
|
|
- class="icon-used-btn receive"
|
|
|
- v-if="coupon.couponBtnType == 0"
|
|
|
- @click="receiveCoupon(coupon)"
|
|
|
- >领取</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="icon-used-btn make"
|
|
|
- v-if="coupon.couponBtnType == 1"
|
|
|
- @click="toUseCoupon(coupon)"
|
|
|
- >去使用</view
|
|
|
- >
|
|
|
- </template>
|
|
|
+ <view class="list-cell-btn">
|
|
|
+ <view class="icon-used">
|
|
|
+ <template v-if="coupon.moneyCouponFlag == 1">
|
|
|
+ <view class="icon-used-text">购买</view>
|
|
|
+ <view class="icon-used-btn buy" @click="toPayCoupon(coupon)"
|
|
|
+ >￥{{ coupon.moneyCouponPrice }}</view
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn receive"
|
|
|
+ v-if="coupon.couponBtnType == 0"
|
|
|
+ @click="receiveCoupon(coupon)"
|
|
|
+ >领取</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="icon-used-btn make"
|
|
|
+ v-if="coupon.couponBtnType == 1"
|
|
|
+ @click="toUseCoupon(coupon)"
|
|
|
+ >去使用</view
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </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>
|
|
|
- <!--加载loadding-->
|
|
|
- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
- <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
|
|
|
- <!--加载loadding-->
|
|
|
- </template>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#FFF1EB'" :text="nomoreText"></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -114,7 +117,8 @@ export default {
|
|
|
pullUpOn: true,
|
|
|
pullFlag: true,
|
|
|
isReceiveLoading: false, //领券操作状态
|
|
|
- userIdentity: 0
|
|
|
+ userIdentity: 0,
|
|
|
+ skeletonShow:true
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -165,6 +169,7 @@ export default {
|
|
|
this.showEmpty = false
|
|
|
this.hasNextPage = response.data.hasNextPage
|
|
|
this.coupinList = data.list
|
|
|
+ this.skeletonShow = false
|
|
|
this.pullFlag = false
|
|
|
setTimeout(() => {
|
|
|
this.pullFlag = true
|
|
|
@@ -360,7 +365,7 @@ export default {
|
|
|
return {
|
|
|
title: '采美线上美博会盛大开启，众多优惠等着您~',
|
|
|
path: '/pages/user/coupon/coupon-activity?type=share',
|
|
|
- imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
|
|
|
+ imageUrl: 'https://static.caimei365.com/app/meibohui/app/activity-share@2x.jpg'
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh() {
|
