<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">
|
<image :lazy-load="true" :src="item.cover" class="cover" mode="scaleToFill"></image>
|
</view>
|
<view class="info flex1">
|
<view class="title">
|
{{item.name||''}}
|
</view>
|
<view class="time word-e">
|
{{item.description||''}}
|
</view>
|
<view class="button" @click="getPointGood(item)">
|
查看详情
|
</view>
|
</view>
|
</view>
|
<view class="tip">
|
<span class="t-red">*</span>此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用
|
</view>
|
</view>
|
</view>
|
<view style="min-height: 130rpx;"></view>
|
<view class="bottom-button" @click="toGoodAll">前往兑换</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
flg: 0,
|
|
tabs: [{
|
name: '未使用',
|
status: 'A',
|
// unused
|
},
|
{
|
name: '已使用',
|
status: 'U',
|
|
// used
|
},
|
{
|
name: '已过期',
|
status: 'E',
|
|
// expired
|
},
|
],
|
query: {
|
status: 'A'
|
},
|
list: []
|
}
|
},
|
async onLoad() {
|
this.listApi = '/api/customer/point/goods/exchange/list'
|
|
this.getList()
|
},
|
|
methods: {
|
changeTab(flg) {
|
this.flg = '' + flg
|
this.query.status = this.tabs[flg].status
|
this.refreshList()
|
},
|
getPointGood(item) {
|
uni.navigateTo({
|
url: `/sub_pages/customer/coupon/good-detail?id=${item.id}`
|
})
|
},
|
toGoodAll() {
|
uni.navigateTo({
|
url: `/sub_pages/customer/coupon/good-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 {
|
.container {
|
background-image: unset;
|
|
.info-price {
|
.cover {
|
width: 150rpx;
|
height: 150rpx;
|
}
|
}
|
|
.info {
|
.time {
|
margin-top: 0rpx;
|
}
|
|
.button {
|
width: 150rpx;
|
height: 46rpx;
|
// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.14);
|
border-radius: 24rpx;
|
border: 2rpx solid rgba(68, 119, 90, 1);
|
font-weight: 400;
|
font-size: 24rpx;
|
color: rgba(68, 119, 90, 1);
|
line-height: 46rpx;
|
text-align: center;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
}
|
|
|
|
.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;
|
}
|
}
|
</style>
|
