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

<template>
    <view class="coupon-receive">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <!-- 优惠券列表 -->
        <view class="coupon-list">
            <!-- 优惠券列表为空 -->
            <template v-if="list.length <= 0 && !isLoading">
                <cm-empty :imageUrl="staticUrl + 'icon-coupon-empty.png'" :imgHeight="230" :imgWidth="290">
                    <view class="empty-tip">暂无任何优惠券~~</view>
                </cm-empty>
            </template>
            <view class="coupon-section" v-for="item in list" :key="item.couponId">
                <cm-coupon controlType="receive" :couponData="item" @click="handleClick"></cm-coupon>
            </view>
        </view>
        <!-- 优惠券说明 -->
        <coupon-desc-entry @click="toDescDetail" v-if="userId" :couponTipStr="couponTipStr"></coupon-desc-entry>
        <!-- 加载更多 -->
        <cm-loadmore :hasMore="hasNextPage" :isLoading="isLoading" :visiable="visiable"></cm-loadmore>
        <!-- 占位 -->
        <view style="height: 140rpx;"></view>
        <!-- 我的优惠券 -->
        <view class="control" v-if="userId > 0">
            <tui-button
                class="create"
                type="base"
                :size="28"
                width="650rpx"
                height="88rpx"
                shape="circle"
                @click="userCouponCenter"
            >
                我的优惠券
            </tui-button>
        </view>
    </view>
</template>

<script>
import { fetchCouponCenterInfo, fetchCouponDisplay } from '@/services/api/coupon.js'
import { debounce } from '@/common/utils.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            listQuery: {
                userId: 0,
                pageNum: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            hasNextPage: true,
            isLoading: false,
            isRequest: true,
            couponTipStr: ''
        }
    },
    computed: {
        ...mapGetters(['userId']),
        visiable() {
            return this.list.length > this.listQuery.pageSize
        }
    },
    onReachBottom() {
        this.fetchCouponList()
    },
    onLoad() {
        this.initCouponList()
        this.fetchCouponDisplay() // 获取可领取优惠券类型
    },
    methods: {
        // 优惠券操作事件
        handleClick(coupon) {
            console.log(coupon)
            this.initCouponList()
            this.$router.addRefreshType('receiveCouponBack')
        },
        // 初始化优惠券列表
        initCouponList() {
            this.listQuery.pageNum = 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 fetchCouponCenterInfo(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),

        // 获取可领取优惠券类型
        async fetchCouponDisplay() {
            try {
                const res = await fetchCouponDisplay({ userId: this.userId })
                this.couponTipStr = res.data
            } catch (e) {
                console.log('获取优惠券类型失败')
            }
        },

        // 查看描述详情
        toDescDetail(entry) {
            this.$router.navigateTo(`coupon/coupon-description?entryType=${entry.id}&title=${entry.name}`)
        },
        // 我的优惠券
        userCouponCenter() {
            this.$router.redirectTo('coupon/coupon-user')
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-list {
    padding-top: 24rpx;

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

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