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

<template>
    <!-- TODO -->
    <view class="coupon-find-list">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <template v-else>
            <!-- 顶部提示 -->
            <view class="top-tip" v-if="couponList.length > 0">
                <view class="tip-text">如何领取更多优惠券？</view>
                <view class="tip-btn" @click="popupVisible = true">去了解</view>
            </view>
            <!-- 优惠券列表 -->
            <view class="coupon-list">
                <template v-for="(coupon, index) in couponList">
                    <cm-coupon :key="index" :couponData="coupon" @btnClick="couponClick"></cm-coupon>
                </template>
            </view>
            <template v-if="couponList.length >= 6">
                <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
                <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
            </template>
            <!-- 优惠券列表为空 -->
            <cm-empty
                v-if="couponList.length <= 0"
                message="暂无任何优惠券~"
                :image="baseUrl + 'icon-coupon-empty.png'"
                :offset="100"
            ></cm-empty>
            <!-- 侧边 -->
            <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
        </template>
        <!-- 如何获取更多优惠券 -->
        <message-popup @close="closePopup" :visible="popupVisible" class="message-popup">
            <template v-slot:title>
                <view class="title"> 如何获取更多优惠券？ </view>
            </template>
            <template v-slot:content>
                <view class="content">
                    <view class="row">
                        <view class="dt">好友邀请券</view>
                        <view class="dd">
                            登录用户可将商城分享给好友，邀请好友进行注册登录，当好友成功登录后，您就可以获得一张好邀请券的领券资格。
                        </view>
                    </view>
                    <view class="row">
                        <view class="dt">好友消费券</view>
                        <view class="dd">
                            您邀请成功的好友每消费一笔订单，您就可以获得一张好友消费券的领券资格。
                        </view>
                    </view>
                </view>
            </template>
        </message-popup>
    </view>
</template>

<script>
import MessagePopup from '@/components/message-popup/message-popup.vue'
import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
import CmCoupon from '@/components/cm-module/cm-coupon/cm-coupon.vue'
import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        MessagePopup,
        CmCoupon,
        CmEmpty,
        CmDrawer
    },
    data() {
        return {
            baseUrl: this.$Static,
            popupVisible: false,
            listQuery: {
                pageNum: 1,
                pageSize: 6,
                userId: ''
            },
            couponList: [],
            hasNextPage: false,
            total: 0,
            isScrollTop: false,
            isRequest: true,
            loadmore: false, // 正在加载更多
            timer: null
        }
    },
    computed: {
        ...mapGetters(['userId']),
        loadingText() {
            return this.hasNextPage ? '上拉加载更多' : '没有更多了'
        }
    },
    onLoad() {
        this.listQuery.userId = this.userId
        this.getCouponList()
    },
    methods: {
        // 关闭信息弹窗
        closePopup() {
            this.popupVisible = false
        },
        // 获取待优惠券列表
        getCouponList() {
            this.loadmore = true
            this.CouponService.GetCouponCenterInfo(this.listQuery).then(res => {
                this.couponList = res.data.list
                this.hasNextPage = res.data.hasNextPage
                this.total = res.data.total
                this.isRequest = false
                this.listQuery.pageNum++
                this.loadmore = false
            })
        },
        // 操作优惠券
        couponClick() {
            this.listQuery.pageNum = 1
            this.getCouponList()
        }
    },
    onPageScroll(e) {
        this.isScrollTop = e.scrollTop > 400
    },
    onReachBottom() {
        if (!this.hasNextPage) return
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            console.log('触底了')
            this.getCouponList()
        }, 200)
    }
}
</script>

<style lang="scss" scoped>
$tip-height: 80rpx;
$grid: 24rpx;
.coupon-find-list {
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: $tip-height;
    background: #f7f7f7;
    overflow: hidden;
}
.top-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: $tip-height;
    padding: 0 $grid;
    background: #fff3f7;
    box-sizing: border-box;
    .tip-text {
        font-size: 26rpx;
        color: #ff457b;
    }
    .tip-btn {
        width: 128rpx;
        height: 48rpx;
        border: 1rpx solid #ff457b;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        color: #ff457b;
    }
}
.message-popup {
    .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
    }
    .content {
        .row {
            padding-left: 32rpx;
            margin: $grid 0;
            .dt {
                position: relative;
                font-size: 26rpx;
                font-weight: 600;
                line-height: 40rpx;
                color: #333333;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: -$grid;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 10rpx;
                    height: 10rpx;
                    background: #ff457b;
                }
            }
            .dd {
                font-size: 26rpx;
                line-height: 40rpx;
                color: #666666;
                margin-top: $grid;
            }
        }
    }
}
</style>