<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]">
|
<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||''}}
|
<radio :checked="isIngood(item)" @click.stop="updateSelectGood(item)" v-if="source==='shopping'" class="select-coupon"></radio>
|
|
</view>
|
<view class="time word-e">
|
{{item.description||''}}
|
</view>
|
<view class="button" @click="getPointGood(item)" v-if="source!=='shopping'">
|
查看详情
|
</view>
|
<!-- <view class="button" @click="updateSelectGood(item)" v-if="source=='shopping'">
|
{{isIngood(item)?'移除':'添加'}}
|
</view> -->
|
</view>
|
</view>
|
<!-- <view class="tip">
|
<span class="t-red">*</span>此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用
|
</view> -->
|
</view>
|
</view>
|
<view style="min-height: 130rpx;" v-if="source=='shopping'"></view>
|
<view class="bottom-button" @click="backpage()" v-if="source=='shopping'">返回订单结算</view>
|
|
<!-- <view class="bottom-button" @click="toGoodAll">前往兑换</view> -->
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
computed: {
|
...mapState({
|
cache_goods: state => {
|
return state.cache.goods || []
|
},
|
}),
|
},
|
|
data() {
|
return {
|
flg: 0,
|
|
tabs: [{
|
name: '未使用',
|
status: 'A',
|
// unused
|
},
|
{
|
name: '已使用',
|
status: 'U',
|
|
// used
|
},
|
{
|
name: '已过期',
|
status: 'E',
|
|
// expired
|
},
|
],
|
query: {
|
status: 'A'
|
},
|
list: [],
|
source: ''
|
|
}
|
},
|
onReachBottom() {
|
this.getMore()
|
},
|
async onLoad(options) {
|
if (options.source) {
|
this.source = options.source || ''
|
}
|
if (this.source === 'shopping') {
|
//只展示可用的
|
this.page.size = 100
|
this.listApi = '/api/customer/point/goods/exchange/list'
|
} else {
|
this.listApi = '/api/customer/point/goods/exchange/list'
|
}
|
|
this.getList()
|
},
|
|
methods: {
|
isIngood(item) {
|
for (var tmp of this.cache_goods) {
|
if (tmp.goodsId == item.goodsId) {
|
return true
|
}
|
}
|
|
return false
|
},
|
async updateSelectGood(item) {
|
var has = false
|
for (var tmp of this.cache_goods) {
|
if (tmp.goodsId == item.goodsId) {
|
has = true
|
break
|
}
|
}
|
var arr = []
|
|
if (has) {
|
//移除
|
var arr = []
|
for (var tmp of this.cache_goods) {
|
if (tmp.goodsId == item.goodsId) {} else {
|
arr.push(tmp)
|
}
|
}
|
} else {
|
//添加
|
for (var tmp of this.cache_goods) {
|
arr.push(tmp)
|
}
|
arr.push(item)
|
}
|
await this.$store.dispatch('cache_goods_select', arr)
|
this.$forceUpdate()
|
|
},
|
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.goodsId}`
|
})
|
},
|
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>
|
