caimei-applets-store/pages/views/coupon/coupon-user.vue

<template>
    <view class="coupon-user">
        <!-- tabs选项卡 -->
        <tui-tabs
            :tabs="tabs"
            selectedColor="#f83c6c"
            sliderBgColor="#f83c6c"
            badgeBgColor="#f83c6c"
            itemWidth="33.333%"
            :isFixed="true"
            :currentTab="currentTab"
            @change="tabChange"
        ></tui-tabs>
        <!-- 轮播区域 -->
        <swiper
            :indicator-dots="false"
            :autoplay="false"
            :duration="400"
            :current="currentTab"
            @change="swiperChange"
            class="swiper"
        >
            <swiper-item v-for="(tab, index) in tabs" :key="index">
                <!-- 优惠券列表为空 -->
                <template v-if="list.length <= 0">
                    <tui-no-data :imgUrl="staticUrl + 'icon-coupon-empty.png'" :imgHeight="230" :imgWidth="290">
                        <view class="empty-tip">暂无任何优惠券~~</view>
                    </tui-no-data>
                </template>
                <scroll-view scroll-y="true" class="scroll-box" v-else @scrolltolower="onScrollToLower">
                    <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
                    <view style="height: 24rpx;"></view>
                    <view class="coupon-section" v-for="item in list" :key="item.couponId">
                        <template v-if="currentTab === 0">
                            <cm-coupon controlType="use" :couponData="item"></cm-coupon>
                        </template>
                        <template v-if="currentTab === 1">
                            <cm-coupon bgType="off" status="used" :couponData="item"></cm-coupon>
                        </template>
                        <template v-if="currentTab === 2">
                            <cm-coupon bgType="off" status="expired" :couponData="item"></cm-coupon>
                        </template>
                    </view>
                    <!-- 优惠券说明 -->
                    <!-- <coupon-desc-entry @click="toDescDetail"></coupon-desc-entry> -->
                    <cm-loadmore :hasMore="hasNextPage" :isLoading="isLoading" :visiable="visiable"></cm-loadmore>
                    <view style="height: 140rpx;"></view>
                </scroll-view>
            </swiper-item>
        </swiper>
        
        <!-- 领取优惠券 -->
        <view class="control">
            <tui-button
                class="create"
                type="base"
                :size="28"
                width="650rpx"
                height="88rpx"
                shape="circle"
                @click="receiveCouponCenter"
            >
                领券中心
            </tui-button>
        </view>
    </view>
</template>

<script>
import { fetchReceivedCouponList } from '@/services/api/coupon.js'
import { debounce } from '@/common/utils.js'
import { mapGetters,mapActions } from 'vuex'
export default {
    data() {
        return {
            tabs: [
                {
                    name: '未使用',
                    num: 10,
                    isDot: false,
                    disabled: false
                },
                {
                    name: '已使用',
                    num: 10,
                    isDot: false,
                    disabled: false
                },
                {
                    name: '已失效',
                    num: '',
                    isDot: false,
                    disabled: false
                }
            ],
            isLoading: false,
            isRequest: true,
            currentTab: 0,
            listQuery: {
                status: 0,
                userId: 0,
                pageNum: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            hasNextPage: true
        }
    },
    computed: {
        ...mapGetters(['userId', 'unusedNum', 'expiredNum', 'usedNum']),
        visiable() {
            return this.list.length > this.listQuery.pageSize
        }
    },
    onLoad() {
        this.initCount()
        this.initCouponList()
    },
    onShow() {
      if(this.$router.checkRefreshType('receiveCouponBack')){
          this.initCount()
          this.initCouponList()
      }
    },
    methods: {
        ...mapActions('coupon',['initCouponCount']),
        // 初始化优惠券数量统计
        async initCount() {
            await this.initCouponCount()
            this.tabs[0].num = this.unusedNum
            this.tabs[1].num = this.usedNum
            this.tabs[2].num = this.expiredNum
        },
        // 初始化优惠券列表
        initCouponList() {
            this.isRequest = true
            this.listQuery.pageNum = 1
            this.listQuery.status = this.currentTab + 1
            this.listQuery.userId = this.userId
            this.list = []
            this.hasNextPage = true
            this.fetchCouponList()
        },
        // 获取优惠券列表
        fetchCouponList: debounce(async function() {
            if (!this.hasNextPage) return
            this.isLoading = true
            try {
                const res = await fetchReceivedCouponList(this.listQuery)
                this.list = [...this.list, ...res.data.list]
                this.total = res.data.total
                this.hasNextPage = res.data.hasNextPage
                this.listQuery.pageNum++
            } catch (e) {
                console.log(e)
            } finally {
                this.isRequest = false
                this.isLoading = false
            }
        }, 200),
        // tab切换
        tabChange(e) {
            this.currentTab = e.index
            this.initCouponList()
        },
        // 轮播切换
        swiperChange(e) {
            this.currentTab = e.detail.current
            this.initCouponList()
        },
        // 滚动到底部
        onScrollToLower() {
            this.fetchCouponList()
        },
        // 跳转领券中心
        receiveCouponCenter() {
            this.$router.redirectTo('coupon/coupon-receive')
        },
        // 查看描述详情
        toDescDetail(entry){
            this.$router.navigateTo('coupon/coupon-description?entryType=' + entry.id)
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper {
    height: 100vh;

    .scroll-box {
        height: 100vh;
        padding-top: 80rpx;
        box-sizing: border-box;

        .coupon-section {
            margin: 24rpx;
            margin-top: 0;
        }
    }
}

.control {
    @extend .cm-flex-center;
    @extend .fixed-bottom;
    align-items: flex-start;
    height: 140rpx;
}
</style>