You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.1 KiB
140 lines
3.1 KiB
<template>
|
|
<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="moreCoupon()">
|
|
<!-- 优惠券列表 -->
|
|
<view class="list">
|
|
<view class="list-item" v-for="item in couponList" @click="select(item)" :key="item.id">
|
|
|
|
<!-- 已领取 -->
|
|
<template v-if="item.status == 0">
|
|
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-useful.png" ></image>
|
|
</template>
|
|
<!-- 已使用 -->
|
|
<template v-else-if="item.status == 1">
|
|
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-used.png" ></image>
|
|
</template>
|
|
<!-- 已过期 -->
|
|
<template v-else-if="item.status == 2">
|
|
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-overtime.png" ></image>
|
|
</template>
|
|
|
|
<text class="list-item-count">{{ item.discountAmount }}</text>
|
|
<text class="list-item-deadline">{{ `有效期至${item.validDate ? $dayjs(item.validDate).format('YYYY-MM-DD') : '-'}` }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<uv-empty v-if="couponList.length == 0" text="空空如也" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CouponList',
|
|
props: {
|
|
status: {
|
|
type: String | Number,
|
|
default: 'all'
|
|
},
|
|
height: {
|
|
default: 'calc(90vh - 180rpx)'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
couponList: [],
|
|
total: 0
|
|
}
|
|
},
|
|
watch: {
|
|
status: function() {
|
|
this.getCouponList()
|
|
}
|
|
},
|
|
methods: {
|
|
select(item) {
|
|
this.$emit('select', item)
|
|
},
|
|
|
|
//获取优惠券列表
|
|
getCouponList() {
|
|
let params = {
|
|
...this.queryParams,
|
|
type: 0, // type：0-抵扣 1-代金券
|
|
}
|
|
|
|
// todo: check “已过期”
|
|
// status: 0-未使用 1-已使用
|
|
if (this.status === 'all') {
|
|
delete params.status
|
|
} else {
|
|
params.status = this.status
|
|
}
|
|
|
|
this.$api('queryVouchersList', params, res => {
|
|
if (res.code == 200) {
|
|
this.couponList = res.result.records
|
|
this.total = res.result.total
|
|
}
|
|
})
|
|
},
|
|
|
|
//格式化年月日
|
|
formatDate(date) {
|
|
if(!date){
|
|
return ''
|
|
}
|
|
date = new Date(date.replace(/-/g,'/'));
|
|
// const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保是两位数
|
|
const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数
|
|
|
|
return `${month}-${day}`;
|
|
},
|
|
|
|
// 加载更多
|
|
moreCoupon() {
|
|
if (this.queryParams.pageSize > this.total) return
|
|
this.queryParams.pageSize += 10
|
|
this.getCouponList()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
padding: 32rpx 50rpx;
|
|
|
|
&-item {
|
|
width: 100%;
|
|
height: 211rpx;
|
|
position: relative;
|
|
|
|
&-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-count {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: 48rpx;
|
|
color: $uni-color-light;
|
|
font-size: 78rpx;
|
|
font-weight: 900;
|
|
line-height: 110rpx;
|
|
}
|
|
|
|
&-deadline {
|
|
position: absolute;
|
|
bottom: 58rpx;
|
|
left: 156rpx;
|
|
color: $uni-color-light;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|