<template>
|
<view class="coupon-container">
|
<view class="p10" v-if="source!=='shopping'">
|
<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]"
|
@click.stop="selectCoupon(item)">
|
<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 flex">
|
{{item.couponName||'-'}}
|
<!-- <radio :checked="cache_coupon.id===item.id"
|
v-if="source==='shopping'"
|
class="select-coupon"></radio> -->
|
<view :style="{ 'margin-right': '20rpx'}" v-if="source==='shopping'"
|
class="component-radio m-l-a" :class="[cache_coupon.id===item.id?'cur':'']">
|
|
</view>
|
|
</view>
|
<view class="time">
|
<!-- {{item.effectiveStart&&(item.effectiveStart+' 生效,') || ''}} -->
|
{{item.effectiveEnd&&('有效期至 '+item.effectiveEnd) || '长久有效'}}
|
</view>
|
</view>
|
<view class="img-out">
|
|
</view>
|
<view class="img-used">
|
|
</view>
|
|
.
|
</view>
|
<view class="tip">
|
<span
|
class="t-red">*</span>{{item.couponDescription || '此券每人限领1张。仅限用于花满芫鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用'}}
|
</view>
|
</view>
|
</view>
|
<view style="min-height: 130rpx;" v-if="source!=='shopping'"></view>
|
<view class="bottom-button" v-if="source!=='shopping'" @click="getCoupon">领取优惠券</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
flg: 0,
|
|
tabs: [{
|
name: '未使用',
|
status: 'unused',
|
// unused
|
},
|
{
|
name: '已使用',
|
status: 'used',
|
|
// used
|
},
|
{
|
name: '已过期',
|
status: 'expired',
|
|
// expired
|
},
|
],
|
query: {
|
status: 'unused'
|
},
|
list: [],
|
source: '',
|
paymoney: -1
|
|
}
|
},
|
async onLoad(options) {
|
if (options.source) {
|
this.source = options.source || ''
|
}
|
if (options.paymoney) {
|
this.paymoney = parseFloat(options.paymoney).toFixed(2)
|
}
|
if (this.source === 'shopping') {
|
//只展示可用的
|
this.page.size = 100
|
this.listApi = '/api/v2/coupon/app' + `/mine/unused/list`
|
|
} else {
|
this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
|
|
}
|
await this.$store.dispatch('sign_clear', 'coupon')
|
|
this.getList()
|
},
|
onReachBottom() {
|
this.getMore()
|
},
|
methods: {
|
async selectCoupon(item) {
|
if (this.source == 'shopping') {
|
if (this.cache_coupon.id === item.id) {
|
await this.$message.confirm('是否取消使用此优惠券')
|
await this.$store.dispatch('cache_coupon_select', {})
|
uni.navigateBack()
|
return
|
}
|
console.log('paymoney',this.paymoney)
|
if (this.paymoney >= 0) {
|
//判断是否可以选择使用
|
if (item.couponDiscountType === 'zero') {
|
// if (this.cache_coupon.couponDiscountValue > this.paymoney) {
|
// this.$message.showToast('订单价格小于优惠券优惠额度')
|
// return
|
// }
|
} else if (item.minOrderAmount && item.minOrderAmount > 0) {
|
// if (this.cache_coupon.minOrderAmount > this.paymoney) {
|
// this.$message.showToast('订单价格')
|
// return
|
// }
|
if (this.paymoney < item.minOrderAmount) {
|
this.$message.showToast('订单价格不满足使用条件')
|
this.$nextTick(()=>{
|
this.$forceUpdate()
|
})
|
return
|
}
|
} else {
|
// if (this.cache_coupon.couponDiscountValue > this.paymoney) {
|
// this.$message.showToast('订单价格小于优惠券优惠额度')
|
// return
|
// }
|
}
|
}
|
await this.$store.dispatch('cache_coupon_select', item)
|
uni.navigateBack()
|
}
|
},
|
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()
|
|
},
|
computed: {
|
...mapState({
|
cache_coupon: state => {
|
return state.cache.coupon || {}
|
},
|
cache_goods: state => {
|
return state.cache.goods || []
|
},
|
}),
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import './coupon.scss';
|
|
.coupon-container {
|
|
|
|
.coupont-item.expired {
|
filter: grayscale(100%);
|
|
.img-has {
|
display: unset;
|
}
|
}
|
|
.coupont-item.used {
|
filter: grayscale(100%);
|
|
.img-used {
|
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>
|
