caimei-applets-caimei/pages/seller/cart/coupon.vue

<template>
    <view class="container clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <view class="container-list" v-else>
            <template v-if="coupinList.length > 0">
                <view v-for="(coupon, index) in coupinList" :key="index" :id="coupon.id" class="coupon-list">
                    <view class="list-cell-le">
                        <template v-if="coupon.couponTextFlag === 1">
                            <view class="coupon-maxMoney"> <text class="small">￥</text> {{ coupon.couponAmount }} </view>
                            <view class="coupon-minMoney"> 满{{ coupon.touchPrice }}可用 </view>
                        </template>
                        <template v-else>
                            <view class="coupon-maxMoney six"> <text class="small">￥</text> {{ coupon.couponText }} </view>
                        </template>
                    </view>
                    <view class="list-cell-ri">
                        <view class="list-cell-top">
                            <view class="list-cell-type">
                                <view class="list-cell-tags">
                                    <template v-if="coupon.moneyCouponFlag == 1">
                                        <text class="tags"
                                            v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</text>
                                        <text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
                                    </template>
                                    <template v-else>
                                        <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
                                    </template>
                                </view>
                                <view class="list-cell-texts">
                                    <text v-if="coupon.couponType == 0">
                                        {{
											coupon.productType && coupon.productType == 1
												? '全商城商品通用'
												: '仅可购买指定商品'
										}}
                                    </text>
                                    <text v-if="coupon.couponType == 1">
                                        {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
                                    </text>
                                    <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
                                    <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
                                </view>
                            </view>
                            <view class="list-cell-btn">
                                <view class="icon-used">
                                    <button v-if="coupon.moneyCouponFlag === 1" open-type="share"
                                        class="icon-used-btn receive" :data-coupon="coupon">
                                        分享购买
                                    </button>
                                    <button v-else open-type="share" class="icon-used-btn share" :data-coupon="coupon">
                                        分享领取
                                    </button>
                                </view>
                            </view>
                        </view>
                        <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
                    </view>
                </view>
                <!--加载loadding-->
                <tui-loadmore :visible="loadding" :index="3" type="black" />
                <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
                <!--加载loadding-->
            </template>
            <view class="empty-container" v-else>
                <image class="empty-container-image" :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"></image>
                <text class="error-text">暂无优惠券~</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import { COUPON_TEXT_MAP } from '@/utils/coupon.share.js'
    import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
    export default {
        components: {
            couponTabs
        },
        data() {
            return {
                StaticUrl: this.$Static,
                isIphoneX: this.$store.state.isIphoneX,
                listQuery: {
                    userId: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                shareUserId: '',
                coupinList: [],
                skeletonShow: true,
                nomoreText: '上拉显示更多',
                hasNextPage: false,
                loadding: false,
                pullUpOn: true,
                pullFlag: true,
                isReceiveLoading: false, //领券操作状态
            }
        },
        onLoad() {
            uni.hideShareMenu()
            this.initGetStotage()
        },
        filters: {
            TypeFormat(value) {
                switch (value) {
                    case 0:
                        return '活动券'
                        break
                    case 1:
                        return '品类券'
                        break
                    case 2:
                        return '用户专享券'
                        break
                    case 3:
                        return '店铺券'
                        break
                    case 4:
                        return '新用户券'
                        break
                }
            }
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity'])
        },
        methods: {
            async initGetStotage() {
                const userInfo = await this.$api.getStorage()
                this.shareUserId = userInfo.userId
                this.QueryCouponList()
                setTimeout(() => {
                    this.skeletonShow = false
                }, 500)
            },
            async QueryCouponList() {
                // 初始化查询优惠券列表
                try {
                    this.coupinList = []
                    this.listQuery.pageNum = 1
                    const res = await this.ProductService.QueryCouponCollarList(this.listQuery)
                    const data = res.data
                    if (data.list && data.list.length > 0) {
                        this.hasNextPage = data.hasNextPage
                        this.coupinList = data.list
                        this.pullFlag = false
                        setTimeout(() => {
                            this.pullFlag = true
                        }, 500)
                        if (this.hasNextPage) {
                            this.pullUpOn = false
                            this.nomoreText = '上拉显示更多'
                        } else {
                            if (this.coupinList.length < 8) {
                                this.pullUpOn = true
                            } else {
                                this.pullUpOn = false
                                this.loadding = false
                                this.nomoreText = '已至底部'
                            }
                        }
                    }
                } catch (error) {
                    this.$util.msg(error.msg, 2000)
                }
            },
            async getOnReachBottomData() {
                // 上滑加载分页
                try {
                    this.listQuery.pageNum += 1
                    const res = await this.ProductService.QueryCouponCollarList(this.listQuery)
                    const data = res.data
                    if (data.list && data.list.length > 0) {
                        this.hasNextPage = data.hasNextPage
                        this.coupinList = this.coupinList.concat(data.list)
                        this.pullFlag = false // 防上拉暴滑
                        setTimeout(() => {
                            this.pullFlag = true
                        }, 500)
                        if (this.hasNextPage) {
                            this.pullUpOn = false
                            this.nomoreText = '上拉显示更多'
                        } else {
                            this.pullUpOn = false
                            this.loadding = false
                            this.nomoreText = '已至底部'
                        }
                    }
                } catch (error) {
                    this.$util.msg(error.msg, 2000)
                }
            },
            navigator(url) {
                this.$api.navigateTo(url)
            }
        },
        onShareAppMessage(res) {
            //分享购买优惠券
            const coupon = res.target.dataset.coupon
            if (res.from === 'button') {
                const randomIndex = Math.floor(Math.random() * COUPON_TEXT_MAP.length)
                const shareTitle = coupon.moneyCouponFlag === 1 ?
                    `${coupon.moneyCouponPrice}抵${coupon.couponAmount}，限时优惠券等您抢购~` :
                    COUPON_TEXT_MAP[randomIndex]
                return {
                    title: coupon.shareCouponTopic ? `${coupon.shareCouponTopic}` : shareTitle,
                    path: `pages/user/coupon/coupon-details?couponId=${coupon.couponId}&shareUserId=${this.shareUserId}`,
                    imageUrl: coupon.shareCouponImage ? `${coupon.shareCouponImage}` :
                        'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
                }
            }
        },
        onPullDownRefresh() {
            setTimeout(() => {
                this.QueryCouponList()
                uni.stopPullDownRefresh()
            }, 200)
        },
        onReachBottom() {
            if (this.hasNextPage) {
                this.loadding = true
                this.pullUpOn = true
                this.getOnReachBottomData()
            }
        },
        onShow() {}
    }
</script>

<style lang="scss">
    page {
        background-color: #f7f7f7;
    }

    .container {
        width: 100%;
        height: auto;
    }

    .container-list {
        box-sizing: border-box;
        padding: 24rpx;

        .empty-container-image {
            width: 260rpx;
            height: 260rpx;
            margin-top: -300rpx;
        }

        .toIndexPage {
            bottom: 390rpx;
        }

        .coupon-list {
            width: 100%;
            height: 200rpx;
            margin-bottom: 24rpx;
            box-sizing: border-box;
            background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
            background-size: cover;
            position: relative;

            .list-cell-le {
                width: 224rpx;
                height: 100%;
                box-sizing: border-box;
                padding: 37rpx 0;
                float: left;

                .coupon-maxMoney {
                    width: 100%;
                    height: 78rpx;
                    line-height: 78rpx;
                    font-size: 56rpx;
                    color: #ffffff;
                    text-align: center;
                    &.six{
                        margin-top: 20rpx;
                    }
                    .small {
                        font-size: $font-size-24;
                    }
                }

                .coupon-minMoney {
                    width: 100%;
                    height: 33rpx;
                    line-height: 33rpx;
                    font-size: $font-size-24;
                    color: #ffffff;
                    text-align: center;
                }
            }

            .list-cell-ri {
                width: 478rpx;
                height: 100%;
                box-sizing: border-box;
                padding: 20rpx 24rpx 0 24rpx;
                float: right;

                .list-cell-top {
                    width: 100%;
                    height: 121rpx;
                    float: left;
                    border-bottom: 1px solid #e1e1e1;

                    .list-cell-type {
                        width: 286rpx;
                        height: 100%;
                        float: left;

                        .list-cell-tags {
                            width: 100%;
                            height: 32rpx;
                            margin-bottom: 7rpx;

                            .tags {
                                display: inline-block;
                                padding: 0 10rpx;
                                height: 32rpx;
                                line-height: 32rpx;
                                background-color: #ffdcce;
                                color: #f94b4b;
                                font-size: $font-size-20;
                                border-radius: 8rpx;
                                text-align: center;
                                float: left;
                            }
                        }

                        .list-cell-texts {
                            width: 100%;
                            height: auto;
                            line-height: 35rpx;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            word-break: break-all;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            font-size: 26rpx;
                            color: #333333;
                        }
                    }

                    .list-cell-btn {
                        width: 128rpx;
                        height: 100%;
                        float: right;

                        .icon-used {
                            width: 100%;
                            height: 100%;
                            box-sizing: border-box;
                            padding-top: 57rpx;

                            .icon-used-btn {
                                width: 128rpx;
                                height: 48rpx;
                                border-radius: 28rpx;
                                line-height: 48rpx;
                                font-size: $font-size-24;
                                text-align: center;

                                &.receive {
                                    background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
                                    color: #ffffff;
                                }

                                &.share {
                                    background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
                                    color: #ffffff;
                                }
                            }
                        }
                    }
                }

                .list-cell-time {
                    width: 100%;
                    height: 58rpx;
                    line-height: 58rpx;
                    text-align: left;
                    font-size: $font-size-20;
                    color: #999999;
                }
            }
        }
    }
</style>