caimei-applets-store/pages/views/activity/activity-area.vue

<template>
    <view class="activity">
        <template v-if="activityList.length > 0">
            <view class="activity-content">
                <view
                    class="activity-list"
                    v-for="(activity, index) in activityList"
                    :key="index"
                    @click="handleToDetail(activity)"
                >
                    <view class="activity-list-pic">
                        <image class="activity-image" :src="activity.listImage" mode=""></image>
                    </view>
                    <view class="activity-list-msg">
                        <view class="activity-title">{{ activity.name }}</view>
                        <view class="activity-numbe"
                            >商品数：<text class="color">{{ activity.productCount }}</text>
                        </view>
                        <view class="activity-times">
                            <text class="label">活动时间：</text>
                            <text class="color">{{ activity.beginTime }} ~ {{ activity.endTime }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <cm-loadmore
                :hasMore="hasNextPage"
                :isLoading="isLoading"
                :visiable="visiable"
                backgroundColor="#ff457b"
            ></cm-loadmore>
        </template>
        <template v-else>
            <tui-no-data :imgUrl="staticUrl + 'icon-empty-activity.png'" :imgHeight="230" :imgWidth="290">
                <view class="empty-tip">您还没有活动哟~</view> <view class="empty-tip">可联系采美帮您设置活动~</view>
            </tui-no-data>
        </template>
    </view>
</template>

<script>
import { fetchProductActivityAreaList } from '@/services/api/goods.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            activityList: [],
            hasNextPage: false,
            listQuery: {
                userId: 0,
                pageNum: 1,
                pageSize: 10
            },
            isRefresh: false,
            isLoading: true
        }
    },
    computed: {
        ...mapGetters(['userId']),
        visiable() {
            return this.activityList.length > this.listQuery.pageSize
        }
    },
    onLoad() {
        this.listQuery.userId = this.userId
        this.getActivityAreaList()
    },
    methods: {
        async getActivityAreaList() {
            this.isLoading = true
            try {
                //初始化活动列表数据
                const { data } = await fetchProductActivityAreaList(this.listQuery)
                this.hasNextPage = data.hasNextPage
                if (this.isRefresh) {
                    this.activityList = data.results
                } else {
                    this.activityList = [...this.activityList, ...data.results]
                }
            } catch (e) {
                console.log(e)
            } finally {
                this.isLoading = false
                if (this.isRefresh) {
                    setTimeout(() => {
                        uni.stopPullDownRefresh()
                    }, 500)
                }
            }
        },
        handleToDetail(item) {
            this.$router.navigateTo(`activity/activity-detail?activityId=${item.activityId}&name=${item.name}`)
        }
    },
    //下拉刷新
    onPullDownRefresh() {
        this.isRefresh = true
        this.listQuery.pageNum = 1
        this.activityList = []
        this.getActivityAreaList()
    },
    // 加载更多
    onReachBottom() {
        if (this.hasNextPage) {
            this.getActivityAreaList()
        }
    }
}
</script>

<style lang="scss" scoped>
.activity-content {
    width: 100%;
    min-height: 100vh;
    background-color: #f83c6c;
    box-sizing: border-box;
    padding: 24rpx;
    .activity-list {
        width: 100%;
        height: 228rpx;
        box-sizing: border-box;
        padding: 24rpx 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        .activity-list-pic {
            width: 180rpx;
            height: 180rpx;
            float: left;
            box-sizing: border-box;
            border: 1px solid #e1e1e1;
            border-radius: 8rpx;
            .activity-image {
                width: 178rpx;
                height: 178rpx;
                display: block;
                border-radius: 8rpx;
            }
        }
        .activity-list-msg {
            width: 460rpx;
            height: 100%;
            float: right;
            position: relative;
            .activity-title {
                width: 100%;
                height: auto;
                line-height: 36rpx;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 26rpx;
                color: #333333;
                text-align: justify;
                float: left;
            }
            .activity-numbe {
                width: 100%;
                height: 28rpx;
                float: left;
                margin-top: 4rpx;
                text-align: left;
                line-height: 28rpx;
                font-size: 24rpx;
                color: #999999;
                .color {
                    color: #666666;
                }
            }
            .activity-times {
                width: 100%;
                height: 44rpx;
                position: absolute;
                bottom: 0;
                left: 0;
                font-size: 18rpx;
                color: #666666;
                line-height: 44rpx;
                .label {
                    display: inline-block;
                    float: left;
                }
                .color {
                    display: inline-block;
                    float: left;
                    color: #f83c6c;
                }
            }
        }
    }
}
.activity-content-empty {
    position: relative;
}
</style>