<template>
|
<view class="coupon-container">
|
<view class="p10">
|
<top-tabs :tabs="tabs" :flg="flg" @change="changeTab" type="coupon">
|
|
</top-tabs>
|
</view>
|
<view class="">
|
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
|
|
<view v-for="(item,index) of list" :key="index" class="coupont-item" :class="[query.status]">
|
<view class="flex container img100">
|
<view class="info-price">
|
<view class="price1">
|
{{item.maxDiscountAmount?(`${item.maxDiscountAmount}折`):(`￥${item.couponDiscountValue}`)}}
|
</view>
|
<view class="price2">{{item.minOrderAmount?(`满￥${item.minOrderAmount}可用`):'无门槛'}}</view>
|
</view>
|
<view class="info flex1">
|
<view class="title">
|
{{item.couponName||'-'}}
|
</view>
|
<view class="time">
|
{{item.usageEndDate&&('有效期至：'+item.usageEndDate) || '长久有效'}}
|
</view>
|
</view>
|
</view>
|
<view class="tip">
|
<span
|
class="t-red">*</span>{{item.couponDescription || '此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用'}}
|
</view>
|
</view>
|
</view>
|
<view style="min-height: 130rpx;"></view>
|
<view class="bottom-button" @click="getCoupon">领取优惠券</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
flg: 0,
|
|
tabs: [{
|
name: '未使用',
|
status: 'unused',
|
// unused
|
},
|
{
|
name: '已使用',
|
status: 'used',
|
|
// used
|
},
|
{
|
name: '已过期',
|
status: 'expired',
|
|
// expired
|
},
|
],
|
query: {
|
status: 'unused'
|
},
|
list: []
|
}
|
},
|
async onLoad() {
|
this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
|
await this.$store.dispatch('sign_clear', 'coupon')
|
|
this.getList()
|
},
|
|
methods: {
|
changeTab(flg) {
|
this.flg = '' + flg
|
this.query.status = this.tabs[flg].status
|
this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
|
this.refreshList()
|
},
|
getCoupon() {
|
uni.navigateTo({
|
url: '/sub_pages/customer/coupon/coupon-all'
|
})
|
}
|
},
|
async onShow() {
|
if (this.sign['coupon']) {
|
this.$store.dispatch('sign_clear', 'coupon');
|
this.refreshList()
|
}
|
},
|
async onPullDownRefresh() {
|
await this.refreshList()
|
uni.stopPullDownRefresh()
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import './coupon.scss';
|
|
.coupon-container {
|
|
|
|
.coupont-item.expired {
|
filter: grayscale(100%);
|
|
.img-has {
|
display: unset;
|
}
|
}
|
|
|
.bottom-button {
|
width: 690rpx;
|
height: 90rpx;
|
border-radius: 46rpx;
|
border: 2rpx solid #20613D;
|
position: fixed;
|
bottom: 30rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #20613D;
|
text-align: center;
|
line-height: 90rpx;
|
z-index: 99;
|
background-color: #fbfbfb;
|
}
|
}
|
</style>
|
