111 lines
3.1 KiB
Vue
Raw Normal View History

2021-05-13 10:56:04 +08:00
<template>
<div class="wrapper">
<empty v-if="list.length==0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">¥<span class="price">{{item.price | unitPrice}}</span></span>
2021-05-21 17:46:29 +08:00
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span></span>
2021-05-13 10:56:04 +08:00
<span class="describe">{{item.consumeThreshold}}元可用</span>
</div>
<p>使用范围{{useScope(item.scopeType, item.storeName)}}</p>
<p>有效期{{item.endTime}}</p>
</div>
<b></b>
<a class="c-right" @click="go(item)">立即使用</a>
<i class="circle-top"></i>
<i class="circle-bottom"></i>
</li>
</ul>
<Page :total="total" @on-change="changePageNum"
v-if="list.length && total > params.pageNumber"
class="pageration"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-sizer>
</Page>
<Spin v-if="loading" fix></Spin>
</div>
</template>
<script>
import { memberCouponList } from '@/api/member.js';
export default {
data () {
return {
loading: false, // 列表加载状态
params: { // 请求参数
pageNumber: 1,
pageSize: 10
},
total: 0, // 优惠券总数
list: [] // 优惠券列表
};
},
methods: {
2021-05-27 18:03:33 +08:00
getList () { // 获取优惠券列表
2021-05-13 10:56:04 +08:00
this.loading = true
memberCouponList(this.params).then(res => {
this.loading = false
if (res.success) {
this.list = res.result.records
this.total = res.result.total
}
})
},
go (item) { // 根据使用条件跳转商品列表页面
if (item.storeId !== 'platform') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
}
}
},
2021-05-27 18:03:33 +08:00
changePageNum (val) { // 分页改变页码
2021-05-13 10:56:04 +08:00
this.params.pageNumber = val;
this.getList()
},
2021-05-27 18:03:33 +08:00
changePageSize (val) { // 分页改变页数
2021-05-13 10:56:04 +08:00
this.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
2021-05-27 18:03:33 +08:00
useScope (type, storeName) { // 根据字段返回 优惠券适用范围
2021-05-13 10:56:04 +08:00
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
switch (type) {
case 'ALL':
goods = '全部商品'
break;
case 'PORTION_GOODS':
goods = '部分商品'
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
break;
}
return `${shop}${goods}可用`
}
},
mounted () {
this.getList()
}
};
</script>
<style scoped lang="scss">
@import '../../assets/styles/coupon.scss';
2021-05-28 17:25:07 +08:00
.pageration {
text-align: right;
2021-05-13 10:56:04 +08:00
}
</style>