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.
108 lines
2.5 KiB
108 lines
2.5 KiB
<template>
|
|
<!-- 20221015 -->
|
|
<view class="discount-coupon-my-coupon-list-page">
|
|
<!-- 页面内容 -->
|
|
<view class="page-content padding-bottom-safe-footer-20">
|
|
|
|
<!-- tab栏 -->
|
|
<view class="jc-header-title bg-main">
|
|
<ty-tab-around :list="tabList" :list-key="tabListKey" color-type="white" color="#ffffff"
|
|
:active.sync="tabIndex" @click="changeTabs">
|
|
</ty-tab-around>
|
|
</view>
|
|
|
|
<!-- 我的优惠券列表 -->
|
|
<view class="padding-top-title-header">
|
|
<ty-list-list :status="load_status">
|
|
<view v-for="(item,index) in list" :key="index">
|
|
<jc-discount-coupon :data="item">
|
|
<view
|
|
class="width-100 line-height-40 radius-20 bg-main-gradient text-center text-22 text-ff"
|
|
v-if="item.status == 1" @tap="go('pages/mall/index',3)">
|
|
去使用
|
|
</view>
|
|
<view class="" v-else-if="item.status == 2">
|
|
<image class="status-img" src="/static/coupon/shiyong.png"></image>
|
|
</view>
|
|
<view class="" v-else-if="item.status == 3">
|
|
<image class="status-img" src="/static/coupon/guoqi.png"></image>
|
|
</view>
|
|
</jc-discount-coupon>
|
|
</view>
|
|
</ty-list-list>
|
|
</view>
|
|
|
|
<!-- 底部栏 -->
|
|
<view class="jc-footer-safe">
|
|
<view class="margin-bottom-20 block-center width-400 line-height-70 border-ed bg-ff text-center text-22"
|
|
@tap="go('/pages/discount/coupon/index')">
|
|
更多好券，去领券中心看看
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面浮层 -->
|
|
<view class="page-layer">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import coupon from '../api/coupon.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// tab栏内容
|
|
tabList: ['未使用', '已使用', '已过期'],
|
|
// tab栏选中
|
|
tabIndex: 0,
|
|
// tab栏显示key值
|
|
tabListKey: '',
|
|
// 列表内容
|
|
list: [],
|
|
// 列表状态
|
|
load_status: ''
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
this.loadList(1)
|
|
},
|
|
|
|
onReachBottom() {
|
|
this.loadList(0)
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 点击切换标签
|
|
* @param {int} index tab栏选中
|
|
* @date 2022-10-15
|
|
*/
|
|
changeTabs(index) {
|
|
this.loadList(1)
|
|
},
|
|
|
|
/**
|
|
* 分页加载列表
|
|
* @param {int} isFirstPage 是否第一页 0--不是 1--是
|
|
* @date 2022-10-15
|
|
*/
|
|
loadList(isFirstPage) {
|
|
let status = this.tabIndex + 1
|
|
coupon.listMyCoupon(this, isFirstPage, status)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status-img {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -10rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
</style>
|