caimei-applets-hehe/pages/user/activity/coupon-list.vue

<template>
    <!-- TODO -->
    <view class="coupon-find-list">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <!-- tabs -->
        <template v-else>
            <tui-tabs
                :tabs="tabs"
                :currentTab="currentTab"
                @change="tabChange"
                :sliderWidth="118"
                color="#333333"
                selectedColor="#FF457B"
                sliderBgColor="#FF457B"
            ></tui-tabs>
            <!-- 优惠券列表 -->
            <swiper
                :indicator-dots="false"
                :autoplay="false"
                class="swiper"
                :style="{ height: swiperHeight + 'px' }"
                :current="currentTab"
                @change="swiperChange"
            >
                <swiper-item class="coupon-list" v-for="(item, type) of couponData" :key="type">
                    <cm-empty
                        v-if="item.couponList.length <= 0"
                        message="暂无任何优惠券~"
                        :image="baseUrl + 'icon-coupon-empty.png'"
                        :offset="-12"
                    ></cm-empty>
                    <scroll-view :scroll-y="item.couponList.length >= 5" class="coupon-scorll" @scrolltolower="scorllBottom" v-else>
                        <template v-for="(coupon, index) in item.couponList">
                            <cm-coupon
                                :key="index"
                                :couponData="coupon"
                                @btnClick="couponClick"
                                :showStatus="item.showStatus"
                            ></cm-coupon>
                        </template>
                        <template v-if="item.couponList.length >= 6">
                            <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
                            <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
                        </template>
                    </scroll-view>
                </swiper-item>
            </swiper>
            <!-- 跳转领券中心 -->
            <view class="footer">
                <view class="btn" @click="$api.navigateTo('/pages/user/activity/coupon-find-list')">领券中心</view>
            </view>
        </template>
    </view>
</template>

<script>
import CmCoupon from '@/components/cm-module/cm-coupon/cm-coupon.vue'
import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
    components: {
        CmCoupon,
        CmEmpty
    },
    data() {
        return {
            windowHeight: 0,
            baseUrl: this.$Static,
            isRequest: true,
            loadmore: false, // 正在加载更多
            currentTab: 0,
            pageSize: 10,
            timer: null,
            couponData: null
        }
    },
    computed: {
        ...mapGetters(['isIphoneX', 'userId', 'unusedNum', 'expiredNum', 'usedNum']),
        swiperHeight() {
            if (this.isIphoneX) {
                return this.windowHeight - 144
            }
            return this.windowHeight - 120
            // return this.swiperHeight
        },
        // 当前选中tab对应的优惠券列表信息
        queryInfo() {
            if (!this.couponData) return
            return this.couponData[this.currentTab]
        },
        loadingText() {
            if (!this.couponData) return '没有更多了'
            return this.queryInfo.hasNextPage ? '上拉加载更多' : '没有更多了'
        },
        // tabs列表
        tabs() {
            return [
                {
                    name: this.makeTabText(this.unusedNum, '未使用')
                },
                {
                    name: this.makeTabText(this.usedNum, '已使用')
                },
                {
                    name: this.makeTabText(this.expiredNum, '已失效')
                }
            ]
        }
    },
    onLoad() {
        this.getWindowHeight()
    },
    onShow() {
        this.couponData = this.resetCouponData()
        this.initCouponList()
    },
    methods: {
        // tab文字提示
        makeTabText(number, text) {
            if (number <= 0) return text
            return number > 99 ? `${text} (99+)` : `${text} (${number})`
        },
        // 初始化列表
        async initCouponList() {
            try {
                await this.fetchCouponList(1)
                await this.fetchCouponList(2)
                await this.fetchCouponList(3)
                this.isRequest = false
            } catch (e) {
                //TODO handle the exception
                console.log(e)
            }
        },
        // 获取优惠券
        fetchCouponList(status) {
            let query = null
            if (status) {
                query = this.couponData[status - 1]
            } else {
                query = this.couponData[this.currentTab]
            }
            // 查询参数
            const listQuery = {
                userId: this.userId,
                pageSize: this.pageSize,
                pageNum: query.pageNum,
                status: status || query.status
            }
            this.loadmore = true
            return this.CouponService.CouponReceiveList(listQuery).then(res => {
                query.hasNextPage = res.data.hasNextPage
                query.total = res.data.total
                query.couponList = [...query.couponList, ...res.data.list]
                query.pageNum++
                this.loadmore = false
            })
        },
        // tab切换
        tabChange(e) {
            this.currentTab = e.index
            if (this.queryInfo.pageNum === 1) this.fetchCouponList()
        },
        // 轮播图切换
        swiperChange(e) {
            this.currentTab = e.detail.current
            if (this.queryInfo.pageNum === 1) this.fetchCouponList()
        },
        // 获取可用屏幕高度
        getWindowHeight() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight
            console.log(this.windowHeight)
        },
        // 加载更多
        scorllBottom() {
            if (!this.queryInfo.hasNextPage) return
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                console.log('触底了')
                this.fetchCouponList()
            }, 200)
        },
        couponClick() {},
        // 初始化优惠券分类查询信息
        resetCouponData() {
            return {
                // 已领取/未使用
                0: {
                    type: 'received',
                    pageNum: 1,
                    status: 1,
                    hasNextPage: false,
                    couponList: [],
                    showStatus: false,
                    total: 0
                },
                // 已使用
                1: {
                    type: 'used',
                    pageNum: 1,
                    status: 2,
                    hasNextPage: false,
                    couponList: [],
                    showStatus: true,
                    total: 0
                },
                // 已过期
                2: {
                    type: 'expired',
                    pageNum: 1,
                    status: 3,
                    hasNextPage: false,
                    couponList: [],
                    showStatus: true,
                    total: 0
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-find-list {
    width: 100%;
    min-height: 100vh;
    background: #f7f7f7;
}
.swiper {
    background: #f7f7f7;
    .coupon-list {
        height: 100%;
        .coupon-scorll {
            height: 100%;
        }
    }
}
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    padding-top: 20rpx;
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600rpx;
        height: 90rpx;
        background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
        border-radius: 45rpx;
        font-size: 30rpx;
        color: #ffffff;
    }
}
</style>