yihuo/pages/award_detail/prince.vue

<template>
    <view>
        <view class="wrapper flex-align-between" v-if="data">
            <image :src="resource.prince_bg" class="bg" mode="scaleToFill" />
            <view class="flex-column-around flex1 overflow-hidden">
                <view class="flex-align">
                    <image v-if="data.status == 1" :src="resource.prince_ing" class="flag" />
                    <image v-else-if="data.status == 0" :src="resource.prince_wait" class="flag" />
                </view>
                <view class="flex-align paddingY15">
                    <image :src="resource.prince_fun1" class="item" @click="showRule" />
                    <image :src="resource.prince_fun2" class="marginL5" style="width: 108rpx; height: 40rpx" @click="showRank" />
                </view>
                <view class="time-wrapper">
                    <text v-if="data.status == 0">距开始：{{leftTimeStr}}</text>
                    <text v-if="data.status == 1">距结束：{{leftTimeStr}}</text>
                </view>
            </view>
            <!-- <view class="goods-wrapper flex-shrink0">
                <image :src="data.spu.cover" class="cover" @click="showGoodsDetail(data.spu)" />
            </view> -->
            <view class="flex-column-align-center">
                <image :src="resource.prince_magic_current" style="height: 33rpx; width: 0" mode="heightFix"/>
                <view class="paddingT12 bold font10" style="color: #19F4FF">{{data.magicQuantity}}</view>
            </view>
            <prince-rule ref="ruleRef" v-if="data.luckKing" :luckKing="data.luckKing" />
            <prince-rank ref="rankRef" v-if="data.luckKing" :poolId="poolId" :luckKing="data.luckKing"/>
            <prince-goods ref="ruleGoods" :poolId="poolId" @showDetail="showGoodsDetail" />
            <goods-detail ref="goodsDetailRef" @close="goodsDetailColse" />
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import princeRule from './prince_rule'
import princeRank from './prince_rank'
import princeGoods from './prince_goods'
import goodsDetail from './../store/goods_detail'

export default {
    components: { goodsDetail, princeRule, princeRank, princeGoods },
    props: {
        poolId: Number
    },
    data() {
        return {
            data: null,
            resource,
            leftTime: 0
        }
    },
    computed: {
        leftTimeStr() {
            if (!this.data || !this.leftTime) return ''
            return this.generaTimeStr(this.leftTime)
        }
    },
    mounted() {
    },
    beforeDestroy() {
        this.stopTimer()
    },
    methods: {
        refresh() {
            this.getData()
        },
        async getData() {
            const res = await this.$service.award.king(this.poolId)
            this.data = res
            if (res) {
                this.handleLeftTime()
            }
        },
        handleLeftTime() {
            if (!this.data || !this.data.leftTime) {
                this.stopTimer()
                return
            }
            this.leftTime = parseInt(this.data.leftTime / 1000)
            this.startTimer()
        },
        startTimer() {
            this.stopTimer()
            this.timer = setInterval(() => {
                this.leftTime -= 1
                if (this.leftTime <= -1) {
                    this.stopTimer()
                    this.$emit('refresh')
                }
            }, 1000)
        },
        stopTimer() {
            if (this.timer) {
                this.leftTime = 0
                clearInterval(this.timer)
                this.timer = null
            }
        },
        showRule() {
            this.$refs.ruleRef.show()
        },
        showRank() {
            this.$refs.rankRef.show()
        },
        showGoods() {
            this.$refs.ruleGoods.show()
        },
        showGoodsDetail(spu) {
            this.$parent.$parent.lock = true
            this.$refs.goodsDetailRef.show(spu)
        },
        goodsDetailColse() {
            this.$parent.$parent.lock = false
        },
        generaTimeStr(value) {
            let second = value
            let baseMin = 60
            let baseHour = baseMin * 60
            let baseDay = baseHour * 24

            let str = ''

            if (second >= baseHour) {
                let hours = parseInt(second / baseHour)
                str += (hours < 10 ? '0' + hours : hours) + ':'
                second = second % baseHour
            } else {
                str += '00:'
            }

            if (second >= baseMin) {
                let mins = parseInt(second / baseMin)
                str += (mins < 10 ? '0' + mins : mins) + ':'
                second = second % baseMin
            } else {
                str += '00:'
            }

            if (parseInt(second) > 0) {
                str += second < 10 ? '0' + second : second
            } else {
                str += '00'
            }
            return str
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    margin: 0 28rpx;
    height: 228rpx;
    background: rgba(10, 10, 25, 0.6);
    box-shadow: 0px 0px 4px 2px rgba(147, 67, 255, 0.3),
        inset 0px 0px 20px 0px rgba(0, 131, 255, 0.8);
    border-radius: 10px;
    border: 1px solid #5b9cff;
    overflow: hidden;
    padding: 0 32rpx 0 200rpx;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .goods-wrapper {
        margin-left: 10px;
        position: relative;
        width: 74px;
        height: 88px;
        box-shadow: 0px 0px 10px 10px rgba(147, 67, 255, 0.3);
        border-radius: 4px;
        border: 1px solid #00a2e7;
        overflow: hidden;
        .mask {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba($color: #000000, $alpha: 0.4);
        }
        .last-flag {
            position: absolute;
            top: 8rpx;
            width: 80rpx;
            height: 20rpx;
            text-align: center;
        }
        .nickname {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12rpx;
            height: 24rpx;
            background: linear-gradient(315deg, #2bebe8 0%, #3ba1ff 100%);
            text-align: center;
            font-size: 20rpx;
            line-height: 24rpx;
            color: #fff;
        }
        .cover {
            width: 100%;
            height: 100%;
        }
        .avatar {
            position: absolute;
            width: 56rpx;
            height: 56rpx;
            border-radius: 28rpx;
        }
    }
    .refresh {
        position: absolute;
        right: 0;
        top: 0;
        width: 50rpx;
        height: 36rpx;
    }
    .flag {
        width: 104rpx;
        height: 32rpx;
    }
    .schedule-wrapper {
        background: rgba($color: #85bbff, $alpha: 0.3);
        width: 230rpx;
        height: 20rpx;
        overflow: hidden;
        border-radius: 2rpx;
    }
    .num-wrapper {
        width: 12px;
        height: 16px;
        line-height: 16px;
        background: linear-gradient(315deg, #2bebe8 0%, #3ba1ff 100%);
        color: white;
        font-size: 13px;
        text-align: center;
    }
    .item {
        width: 88rpx;
        height: 40rpx;
    }
    .time-wrapper {
        height: 16px;
        background: linear-gradient(315deg, #2bebe8 0%, #3ba1ff 100%);
        color: #000;
        font-size: 12px;
        text-align: center;
    }
}
</style>