yihuo/pages/weal_record/index.vue

<template>
    <page :nav="false" title="参与记录" ref="pageRef" light nav-color="transparent">
        <view
            class="pagae-nav"
            :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
        >
            <view class="flex-align-center relative" style="height: 80rpx">
                <text class="cuIcon-back back" @click.stop="back"></text>
                <view class="title line-ellipsis">参与记录</view>
            </view>
        </view>
        <view style="height: 40rpx"></view>
        <view class="roomList">
            <view
                v-for="(item, index) in tableData"
                @click="showDetail(item)"
                :key="index"
                class="roomItem"
                :class="{ grayscale: item.leftTime < 1 }"
                :style="{ backgroundImage: 'url(' + ossurl.welfare.roomBg + ')' }"
            >
                <view class="luckRoomGoodList">
                    <swiper
                        class="moli-swiper"
                        :indicator-dots="false"
                        circular="true"
                        :autoplay="true"
                        interval="5000"
                        duration="500"
                    >
                        <swiper-item
                            v-for="(obj, objIndex) in item.luckRoomGoodsList.slice(0, 3)"
                            :key="index"
                        >
                            <image
                                :key="objIndex"
                                :src="obj.spu.cover"
                                mode="aspectFit"
                                class="item-cover"
                            />
                        </swiper-item>
                    </swiper>
                </view>
                <view class="infoBox">
                    <view class="roomName">
                        {{ item.name }}
                    </view>
                    <view class="roomType">
                        <image :src="TYPE_MAP[item.type].topFlag" class="flag-top" />
                        <view class="luckSize">{{ item.goodsQuantity }}件赠品</view>
                    </view>
                    <view class="roomInfo">
                        <view class="roomUser">
                            <image :src="item.cover" mode="scaleToFill" class="icon" />
                            <view class="nickname">
                                {{ item.user.nickname }}
                            </view>
                        </view>
                        <view class="roomUserAvatar">
                            <view class="cu-avatar-group">
                                <view
                                    class="cu-avatar radius sm"
                                    v-for="user of item.participatingList.slice(0, 5)"
                                    :key="user.userId"
                                >
                                    <image :src="user.avatar" mode="scaleToFill" class="avatar" />
                                </view>
                            </view>
                        </view>
                        <view class="fire">
                            <image :src="ossurl.welfare.fire" mode="scaleToFill" class="fireIcon" />
                            {{ item.participatingList.length }}
                        </view>
                    </view>
                </view>

                <image
                    v-if="item.officialFlag == 1"
                    :src="ossurl.welfare.official"
                    webp
                    class="official"
                />

                <!-- <view class="btn-wrapper flex-align-center">

                        <text class="color-white font2" v-if="item.myParticipatedFlag === 1">
                            已加入
                        </text>
                        <text class="font2" v-else>加入房间</text>
                    </view> -->
                <image v-if="item.prizeMode === 1" :src="ossurl.welfare.must" class="must-flag" />
            </view>
        </view>
        <empty v-if="isEmpty" :top="200" light />
    </page>
</template>
<script>
    import empty from '@/components/empty'
    import pageMixin from './../../mixin/page'
    import resource from '@/utils/resource'
    import loginMixin from '@/mixin/login'
    import ossurl from '@/utils/ossurl'

    const TYPE_MAP = {
        COMMON: {
            itemClass: 'item1',
            topFlag: ossurl.welfare.welfareIcon,
            flag: resource.weal_room_flag1,
            btn: resource.weal_btn_1
        },
        PASSWORD: {
            itemClass: 'item2',
            topFlag: ossurl.welfare.passwordIcon,
            flag: resource.weal_room_flag2,
            btn: resource.weal_btn_2
        },
        ACHIEVEMENT: {
            itemClass: 'item3',
            topFlag: ossurl.welfare.achieveIcon,
            flag: resource.weal_room_flag3,
            btn: resource.weal_btn_3
        },
        EUROPEAN_GAS: {
            itemClass: 'item4',
            topFlag: ossurl.welfare.europeanIcon,
            flag: resource.weal_room_flag4,
            btn: resource.weal_btn_4
        }
    }

    export default {
        mixins: [pageMixin, loginMixin],
        components: { empty },
        data() {
            return {
                TYPE_MAP,
                resource,
                ossurl,
                scrollTop: 0
            }
        },
        computed: {
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 28 - 20) / 3
                let height = (197 / 109) * width
                return { width, height }
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },

            headerBg() {
                return this.scrollTop > 0 ? '#fff' : '#fff'
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        mounted() {
            setTimeout(() => {
                this.refresh(true)
            }, 100)
        },
        onPullDownRefresh() {
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            init() {
                this.refresh()
            },
            async loadData(loading) {
                const res = await this.$service.weal.record(this.pageNum, this.pageSize, loading)
                return res
            },
            showDetail(item) {
                this.$router.push('weal_detail', { id: item.id })
            },
            back() {
                this.$router.back()
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .pagae-nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 100;
        align-items: center;
        .title {
            font-size: 32rpx;
            font-weight: bold;
            text-align: center;
            line-height: 72rpx;
            width: 500rpx;
        }
        .back {
            z-index: 1800;
            font-size: 32rpx;
            line-height: 32rpx;
            position: absolute;
            left: 20rpx;
            top: 24rpx;
        }
    }

    .roomList {
        padding: 0 20rpx;
        padding-top: 180rpx;
        .grayscale {
            filter: grayscale(1);
        }
        .roomItem {
            background-color: #fffdf6;
            background-size: auto 100%;
            background-position: right;
            background-repeat: no-repeat;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
            display: flex;
            width: 100%;
            position: relative;
            .must-flag {
                position: absolute;
                top: 0;
                left: 0;
                width: 102rpx;
                height: 102rpx;
            }
            .luckRoomGoodList {
                background-color: #fff;
                width: 160rpx;
                height: 160rpx;
            }
            .roomName {
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #000000;
                line-height: 40rpx;
            }
            .infoBox {
                flex: 1;
            }
            .item-cover {
                width: 164rpx;
                height: 164rpx;
            }
            .roomType {
                display: flex;
                align-items: center;
                padding: 14rpx 0 24rpx 0;
                .flag-top {
                    width: 104rpx;
                    height: 32rpx;
                }
                .luckSize {
                    background: #fff3d5;
                    font-size: 20rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 350;
                    color: #e8ad00;
                    line-height: 28rpx;
                    padding: 2rpx 24rpx;
                    height: 32rpx;
                    border-radius: 16rpx;
                    margin-left: 20rpx;
                }
            }
            .roomInfo {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .roomUser {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 300;
                color: #666666;
                width: 130rpx;

                .icon {
                    width: 32rpx;
                    min-width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    margin-right: 10rpx;
                }
                .nickname {
                    width: 88rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            .roomUserAvatar {
                background: linear-gradient(90deg, #fff1e6 0%, #fff6cd 100%);
                border-radius: 24rpx;
                padding: 8rpx 16rpx;
                padding-left: 26rpx;

                .cu-avatar-group {
                    padding: 0;
                }
                .avatar {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                }
                .cu-avatar {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    border: none;
                    margin-left: -10rpx;
                }
            }
            .fire {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #000000;
                .fireIcon {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
            .official {
                height: 34rpx;
                width: 86rpx;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
</style>