yihuo/pages/weal_detail/index.vue

<template>
    <page :nav="false" 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 v-if="data" class="title line-ellipsis">
                    {{ TYPE_MAP[data.type].title }}
                </view>
            </view>
        </view>
        <view class="roomBg" :style="'background-image:url(' + ossurl.box.headbj + ')'">
            <view v-if="data">
                <view class="roomTitle">
                    {{ data.name }}
                </view>
                <view class="roomType">
                    <image :src="TYPE_MAP[data.type].topFlag" class="topFlag" />
                </view>
                <!-- <view class="description">{{ data.description }}</view> -->
                <view class="timeBox">
                    <image :src="ossurl.welfare.detail.time" class="image" />
                    开赏：
                    <span class="time">{{ data.luckTime }}</span>
                </view>

                <view class="flex-align-between marginT10">
                    <view
                        v-if="data.groupBtnFlag === 1"
                        class="filter-wrapper flex-shrink0 relative marginR10"
                    >
                        <image :src="resource.group_add" class="image" />
                        <cell
                            class="group-btn"
                            url="https://work.weixin.qq.com/gm/140cdeace2d2c03b35d693b1b755b815"
                        />
                    </view>

                    <view
                        v-if="data.prizeMode !== 1 && data.type !== 'EUROPEAN_GAS'"
                        class="recordBtn"
                        @click="winRecord()"
                    >
                        <image :src="ossurl.welfare.detail.record" class="image" />
                    </view>
                    <view
                        v-if="data.type === 'EUROPEAN_GAS'"
                        class="numberSignBox"
                        @click="myLuckNum(1)"
                    >
                        <image :src="ossurl.welfare.detail.numberSign" class="image" />
                    </view>
                </view>
            </view>
            <view v-if="data" class="cardBox">
                <view class="cardTitle">
                    赠品池
                    <view class="cardNum">{{ tableData.length }}件赠品</view>
                </view>
                <view class="cardList">
                    <scroll-view scroll-y :style="{ height: 440 + 'rpx' }">
                        <view class="dataList">
                            <view
                                class="item"
                                v-for="(item, index) in tableData"
                                :key="index"
                                @click="showGoodsDetail(item)"
                            >
                                <image :src="item.spu.cover" mode="aspectFit" class="itemImage" />
                                <view class="text line-ellipsis">{{ item.spu.name }}</view>
                                <view
                                    class="num"
                                    :style="
                                        'background-image:url(' + ossurl.welfare.detail.numBg + ')'
                                    "
                                    v-if="data.status == 1"
                                >
                                    x{{ item.quantity }}
                                </view>
                                <view
                                    v-if="
                                        data.status == 2 &&
                                        data.prizeMode !== 1 &&
                                        data.type == 'EUROPEAN_GAS'
                                    "
                                    class="user flex-column-align-center"
                                >
                                    <image
                                        class="avatar"
                                        :src="item.avatar"
                                        :style="{
                                            width: '40px',
                                            height: '40px',
                                            borderRadius: '20px'
                                        }"
                                    />
                                    <view class="nickname">
                                        {{ item.nickname }}
                                    </view>
                                    <view class="sign">
                                        {{ item.sign }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <view class="people-wrapper" v-if="data">
            <view class="peopleNum">
                参与度
                <view class="num">{{ data.participatingList.length }}个玩家</view>
            </view>
            <view class="peopleList">
                <scroll-view scroll-y :style="{ height: 440 + 'rpx' }">
                    <template v-if="data.participatingList">
                        <view
                            class="item"
                            v-for="item in data.participatingList"
                            :key="item.userId"
                        >
                            <image :src="item.avatar" mode="scaleToFill" />
                            <view class="text line-ellipsis">{{ item.nickname }}</view>
                        </view>
                    </template>
                </scroll-view>
            </view>
        </view>
        <view class="bottom" v-if="data">
            <view class="bottomTimeBox" v-if="data.status == 1">
                <image :src="ossurl.welfare.detail.time" webp style="width: 32rpx; height: 32rpx" />
                <view class="marginL10 bottomTime">
                    <text>倒计时：</text>
                    <text class="time">{{ leftTimeStr }}</text>
                </view>
            </view>
            <view v-else></view>
            <view class="flex btnBox">
                <view
                    class="btn addBtn marginR8"
                    @click="myLuckNum(2)"
                    v-if="
                        data.status == 1 &&
                        data.myParticipatedFlag === 1 &&
                        data.type === 'EUROPEAN_GAS'
                    "
                >
                    <text>增加号签</text>
                </view>
                <view class="btn" @click="join" v-if="data.status == 1" :style="'background: url(' + ossurl.mine.butbj + ') no-repeat; background-size: 100% 100%;'">
                    <text v-if="data.myParticipatedFlag === 1">
                        <text v-if="data.participateMode == 1 && data.myAuditStatus == 0">
                            待审核
                        </text>
                        <text v-else-if="data.participateMode == 1 && data.myAuditStatus == 1">
                            审核不通过
                        </text>
                        <text v-else>等待开赏</text>
                    </text>
                    <text v-else>加入房间，即可参与</text>
                </view>
                <view class="btn" v-else>
                    <text>已开奖</text>
                </view>
            </view>
        </view>
        <join ref="joinRef" @success="joinSuccess" :roomId="roomId" />
        <poster
            v-if="data"
            ref="posterRef"
            :imgs="data.luckRoomGoodsList.slice(0, 6)"
            :tip="tip"
            page="pages/weal_detail/index"
            :scene="roomId"
            :userId="user.username"
            @success="shareSuccess"
        />
        <goods-detail ref="goodsDetailRef" />
        <win-record ref="winRecordRef" />
        <luck-num ref="luckNumRef" @success="share" />
    </page>
</template>

<script>
    import join from './join'
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import { WX_PUSH_MESSAGE_ID } from '@/utils/config'
    import loginMixin from '@/mixin/login'
    import poster from './poster'
    import { throttle } from '@/utils'
    import goodsDetail from '@/pages/store/goods_detail'
    import winRecord from './winRecord.vue'
    import luckNum from './luck_num_dialog.vue'

    const TYPE_MAP = {
        COMMON: {
            title: '福利房',
            itemClass: 'item1',
            topFlag: ossurl.welfare.welfareIcon,
            flag: resource.weal_room_flag1,
            btn: resource.weal_btn_1
        },
        PASSWORD: {
            title: '口令房',
            itemClass: 'item2',
            topFlag: ossurl.welfare.passwordIcon,
            flag: resource.weal_room_flag2,
            btn: resource.weal_btn_2
        },
        ACHIEVEMENT: {
            title: '成就房',
            itemClass: 'item3',
            topFlag: ossurl.welfare.achieveIcon,
            flag: resource.weal_room_flag3,
            btn: resource.weal_btn_3
        },
        EUROPEAN_GAS: {
            title: '欧气房',
            itemClass: 'item4',
            topFlag: ossurl.welfare.europeanIcon,
            flag: resource.weal_room_flag4,
            btn: resource.weal_btn_4
        }
    }

    export default {
        mixins: [loginMixin],
        components: { join, poster, goodsDetail, winRecord, luckNum },
        data() {
            return {
                TYPE_MAP,
                resource,
                ossurl,
                roomId: null,
                title: '',
                data: null,
                leftTime: 0,
                tip: '',
                tableData: null,
                shareId: null,
                scrollTop: 0
            }
        },
        computed: {
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },

            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            supportShare() {
                let systemInfo = this.$store.state.systemInfo
                if (!systemInfo) return false
                return this.$common.compareVersion(systemInfo.SDKVersion, '2.14.3') >= 0
            },
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 28 - 28 - 20) / 3
                let height = (132 / 100) * width
                return { width, height }
            },
            scrollHeight() {
                let height = this.$store.state.systemInfo.screenHeight
                let statusBarHeight = this.$store.state.systemInfo.statusBarHeight
                return height - (statusBarHeight + 36) - 123 - 48 - 34 - (25 + 44) - 118
            },
            leftTimeStr() {
                if (!this.data || this.data.status != 1) return ''
                let second = this.leftTime / 1000
                let baseMin = 60
                let baseHour = baseMin * 60
                let baseDay = baseHour * 24

                let str = ''
                let hasDay = false
                let hasHour = false
                if (second >= baseDay) {
                    str += parseInt(second / baseDay) + '天'
                    second = second % baseDay
                    hasDay = true
                }
                if (second >= baseHour) {
                    str += parseInt(second / baseHour) + '时'
                    second = second % baseHour
                    hasHour = true
                }

                if (hasDay) {
                    return str
                }

                if (second >= baseMin) {
                    str += parseInt(second / baseMin) + '分'
                    second = second % baseMin
                }

                if (hasHour) {
                    return str
                }

                if (parseInt(second) > 0) {
                    str += parseInt(second) + '秒'
                }
                return str
            },
            user() {
                return this.$store.state.userInfo
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        onLoad(options) {
            if (options.scene) {
                var param = options.scene.split('%3A')
                this.roomId = param[0]
                this.shareId = param[1]
            } else {
                this.roomId = options.id
                this.shareId = options.userId
            }
        },
        mounted() {
            setTimeout(() => {
                this.getData(true)
            }, 100)
        },
        onUnload() {
            this.stopTimer()
        },
        onShareAppMessage(res) {
            return {
                title: '参与房间 和我一起免费抢手办吧！',
                path: `/pages/weal_detail/index?id=${this.roomId}&userId=${this.user.username}`,
                imageUrl: ossurl.welfare.roomShare
            }
        },
        onShareTimeline() {
            return {
                title: '参与房间 和我一起免费抢手办吧！',
                query: `id=${this.roomId}&userId=${this.user.username}`,
                imageUrl: ossurl.welfare.roomShare
            }
        },
        methods: {
            init() {
                this.getData(false)
            },
            startTimer() {
                this.stopTimer()
                this.timer = setInterval(() => {
                    if (this.leftTime <= 0) {
                        this.getData(false, false)
                        this.stopTimer()
                    } else {
                        this.leftTime -= 1000
                    }
                }, 1000)
            },
            stopTimer() {
                if (this.timer) {
                    clearInterval(this.timer)
                    this.timer = null
                }
            },
            async getData(loading = false, loop = true) {
                this.stopTimer()
                const res = await this.$service.weal.detail({ roomId: this.roomId }, loading)
                if (res) {
                    if (res.participatingList.length > 100) {
                        res.participatingList = res.participatingList.splice(0, 100)
                    }
                    this.data = res
                    this.tableData =
                        this.data.status == 1 || this.data.prizeMode == 1
                            ? this.data.luckRoomGoodsList
                            : this.data.luckParticipateList
                    this.title = res.name
                    if (loop) {
                        this.leftTime = res.leftTime
                        if (this.data.status == 1) {
                            this.startTimer()
                        } else {
                            this.stopTimer()
                        }
                    }
                }
            },
            async join() {
                if (!this.$common.checkLogin()) return
                if (!this.data || this.data.status != 1 || this.data.myParticipatedFlag === 1)
                    return
                if (
                    this.data.type === 'COMMON' ||
                    this.data.type === 'ACHIEVEMENT' ||
                    this.data.type === 'EUROPEAN_GAS'
                ) {
                    if (WX_PUSH_MESSAGE_ID && WX_PUSH_MESSAGE_ID.length > 0) {
                        wx.requestSubscribeMessage({
                            tmplIds: WX_PUSH_MESSAGE_ID,
                            success(res) {},
                            complete: async () => {
                                throttle.call(this.realJoin)
                            }
                        })
                    } else {
                        throttle.call(this.realJoin)
                    }
                } else {
                    this.$refs.joinRef.show()
                }
            },
            async realJoin() {
                if (this.data.type === 'ACHIEVEMENT') {
                    this.$message.showLoading()
                    const res = await this.$service.weal.join2(this.roomId)
                    this.$message.hideLoading()
                    if (res.success) {
                        this.joinSuccess()
                    } else {
                        if (res.code == 996) {
                            this.$message.alert(res.msg)
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                } else {
                    const res = await this.$service.weal.join(this.roomId, null, this.shareId)
                    if (res) {
                        this.joinSuccess()
                    }
                }
            },
            async joinSuccess() {
                if (this.data.participateMode == 1) {
                    this.$message.success('加入成功，请等待房主审核')
                } else {
                    this.$message.success('加入成功')
                }
                this.getData()
            },
            share() {
                if (!this.data || this.data.myParticipatedFlag !== 1) return
                this.tip = `快来和${this.$store.getters.user.nickname}一起免费领手办吧~`
                this.$refs.posterRef.share()
            },
            shareSuccess() {
                setTimeout(() => {
                    // this.$message.success('欧气 +1')
                }, 200)
            },
            showGoodsDetail(item) {
                if (!item.spu) return
                this.$refs.goodsDetailRef.show(item.spu)
            },
            winRecord() {
                this.$refs.winRecordRef.show(this.roomId)
            },
            myLuckNum(type) {
                this.$refs.luckNumRef.show(type, this.roomId)
            },
            back() {
                this.$router.back()
            }
        }
    }
</script>

<style></style>
<style lang="scss" scoped>
    .roomBg {
        background-size: 100% auto;
        padding-top: 180rpx;
        border-radius: 0 0 40rpx 40rpx;
        position: relative;
        .roomTitle {
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 500;
            color: #000000;
            line-height: 46rpx;
            text-align: center;

            font-weight: 500;
        }
        .roomType {
            text-align: center;
            padding: 16rpx 0;
            .topFlag {
                width: 104rpx;
                height: 32rpx;
            }
        }
        .description {
            font-size: 24rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: #644b00;
            text-align: center;
            padding-bottom: 14rpx;
        }
        .timeBox {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 24rpx;
            .time {
                color: #333;
            }
            .image {
                width: 32rpx;
                height: 32rpx;
                margin-right: 6rpx;
            }
        }
    }
    .numberSignBox,
    .recordBtn {
        position: absolute;
        right: 0;
        top: 180rpx;
        .image {
            width: 184rpx;
            height: 68rpx;
        }
    }
    .cardBox {
        display: flex;
        padding: 0 20rpx;
        padding-top: 40rpx;
        .cardTitle {
            font-size: 40rpx;
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: 700;
            color: #000000;
            line-height: 40rpx;
            min-width: 160rpx;
            padding-right: 40rpx;
            .cardNum {
                padding-top: 28rpx;
                font-size: 24rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #333;
                line-height: 28rpx;
            }
        }
        .cardList {
            flex: 1;
        }
    }
    .dataList {
        .item {
            display: inline-block;
            width: 164rpx;
            height: 206rpx;
            background-color: #fff;
            border-radius: 12rpx;
            position: relative;
            padding: 10rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            .itemImage {
                width: 144rpx;
                height: 146rpx;
                background: #fff0c0;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
            }
            .text {
                font-size: 24rpx;
            }
            .num {
                width: 36rpx;
                height: 32rpx;
                background-size: 100% 100%;
                font-size: 20rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #ffffff;
                line-height: 32rpx;
                text-align: center;
                position: absolute;
                right: 0;
                top: 0;
            }
            &:nth-child(3n) {
                margin-right: 0;
            }
            .user {
                .avatar {
                    position: absolute;
                    top: -40rpx;
                    width: 64rpx;
                    height: 64rpx;
                    opacity: 1;
                    border: 4rpx solid #ffe996;
                    border-radius: 50%;
                }
                .nickname {
                    padding-top: 40rpx;
                }
                .sign {
                    background: rgba(254, 196, 51, 0.16);
                    padding: 4rpx 8rpx;
                    border-radius: 8rpx;
                    margin-top: 4rpx;
                }
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.9);
                color: #fec433;

                border-radius: 12rpx;
                padding: 8rpx;
            }
        }
    }
    .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;
        }
    }

    .people-wrapper {
        position: relative;
        padding: 0 20rpx;
        border-radius: 16rpx;
        display: flex;
        padding-top: 50rpx;

        .peopleNum {
            font-size: 40rpx;
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: 700;
            color: #000000;
            line-height: 40rpx;
            padding-right: 40rpx;
            min-width: 160rpx;
            .num {
                font-size: 24rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #999999;
                line-height: 28rpx;
                padding-top: 28rpx;
            }
        }
        .peopleList {
            .item {
                display: inline-block;
                padding: 0 18px;
                margin-bottom: 40rpx;
                image {
                    width: 30px;
                    height: 30px;
                    // border-radius: 15px;
					border-radius: 50%;
					border: 4rpx solid #FFE957;
                }

                .text {
                    width: 30px;
                    font-size: 10px;

                    text-align: center;
                    padding-top: 8px;
                }
            }
        }
    }

    .bottom {
        padding: 0 14px;
        position: fixed;
        bottom: 25px;
        left: 0;
        right: 0;
        .bottomTimeBox {
            text-align: center;
            display: flex;
            justify-content: center;
            font-size: 24rpx;
            color: #333;
            .time {
                color: #333;
            }
        }
        .btnBox {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 26rpx;
        }
        .btn {
            height: 64rpx;
            // background: #fec433;
            line-height: 64rpx;
            font-size: 28rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: #000000;
            text-align: center;
            flex: 1;
            border: none;
            border-radius: 32rpx;
            max-width: 426rpx;
        }
        .addBtn {
            background: #fff7e3;
        }
    }

    .group-wrapper {
        width: 200rpx;
        height: 50rpx;
        position: relative;
        overflow: hidden;
        margin-right: 20rpx;

        .btn {
            position: absolute;
            left: 0;
            top: 0;
            width: 200rpx;
            height: 50rpx;
            background: linear-gradient(270deg, #2affff 0%, #4d70f2 100%);
            border-radius: 25rpx;
            text-align: center;

            font-size: 28rpx;
        }

        .group-btn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
    }
    .filter-wrapper {
        width: 226rpx;
        height: 72rpx;
        position: relative;
        overflow: hidden;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 226rpx;
            height: 72rpx;
        }
        .group-btn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
    }
</style>