yihuo/pages/weal/reel.vue

<template>
    <view>
        <scroll-view
            class="scroll-wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            @scrolltolower="loadMore"
        >
            <view class="notice marginX22">
                重要通知：魔天轮将于7月26日24:00下线，请各位魔主及时使用门票，届时门票将清零！
            </view>
            <view class="paddingX22 flex-align-between paddingY10">
                <image
                    :src="resource.weal_reel_rule_btn"
                    webp
                    style="width: 188rpx; height: 68rpx"
                    @click="$refs.rule.show()"
                />
                <view class="relative" style="width: 176rpx; height: 56rpx">
                    <image
                        :src="resource.weal_reel_ticket"
                        webp
                        style="width: 176rpx; height: 56rpx"
                    />
                    <view class="ticket translateY">{{ tickets }}</view>
                </view>
            </view>
            <view class="paddingX32 flex-align-end paddingB10">
                <view class="color-white font4 underline relative">
                    进群领门票
                    <cell
                        class="group-btn"
                        url="https://work.weixin.qq.com/gm/140cdeace2d2c03b35d693b1b755b815"
                    />
                </view>
            </view>
            <view class="reel-wrapper" v-if="data">
                <image :src="resource.weal_bg_reel_bottom" class="bottom translateX" />
                <image v-if="titleImg" :src="titleImg" class="title translateX" mode="heightFix" />
                <view class="top flex-align-center">
                    <image :src="resource.weal_bg_reel_top2" webp class="bg" />
                    <view class="inner-wrapper" :animation="animationData">
                        <image
                            :src="resource.weal_bg_reel_inner_right"
                            webp
                            class="inner translateXY"
                        />
                        <view class="relative width100 height100">
                            <view
                                v-for="(item, index) in data"
                                :key="item.spuId"
                                :class="[`award_${index + 1}`]"
                                class="award flex-align-center"
                            >
                                <image
                                    :src="item.spu.cover"
                                    mode="aspectFit"
                                    style="width: 49px; height: 49px"
                                />
                            </view>
                        </view>
                    </view>
                    <image
                        :src="resource.weal_reel_pointer"
                        webp
                        class="point translateXY"
                        @click="start"
                    />
                </view>
            </view>
            <view class="paddingT25">
                <view class="flex-align-center marginB15">
                    <image :src="resource.weal_reel_record" style="width: 372rpx; height: 30rpx" />
                </view>
                <view v-for="(item, index) in tableData" class="cell flex-align" :key="index">
                    <image :src="item.avatar || resource.defaultAvatar" class="icon" />
                    <view class="font2 color-white marginL12 flex1">{{ item.nickname }}</view>
                    <view class="marginL20 font2 color-white line-ellipsis" style="width: 40%">
                        {{ item.name }}
                    </view>
                    <image :src="item.cover" class="image marginL20" />
                </view>
            </view>
        </scroll-view>
        <reel-result ref="result" />
        <reel-rule ref="rule" />
    </view>
</template>

<script>
import pageMixin from './../../mixin/page'
import resource from '@/utils/resource'
import reelResult from './reel_result'
import reelRule from './reel_rule'
export default {
    mixins: [pageMixin],
    components: { reelResult, reelRule },
    props: {
        statusBarHeight: Number
    },
    data() {
        return {
            resource,
            requesting: false,
            reelRequesting: false,
            isRefreshClear: false,
            animationData: null,
            data: null,
            titleImg: '',
            tickets: 0
        }
    },
    computed: {
        top() {
            return this.statusBarHeight + uni.upx2px(72) + 45
        }
    },
    mounted() {
        this.init(true)
        this.animation = wx.createAnimation({
            timingFunction: 'ease'
        })
    },
    methods: {
        init(loading) {
            this.getTicker()
            this.getDetail()
            this.refresh()
        },
        async getTicker() {
            const res = await this.$service.wallet.info('LUCK_WHEEL_TICKET')
            res && (this.tickets = res.balance)
        },
        async getDetail() {
            const res = await this.$service.weal.reelDetail(1)
            if (res) {
                this.titleImg = res.cover
                if (res.luckWheelGoodsList && res.luckWheelGoodsList.length > 0) {
                    this.data = res.luckWheelGoodsList
                } else {
                    this.data = null
                }
            }
        },
        async start() {
            if (!this.$common.checkLogin()) return
            if (!this.tickets || this.tickets <= 0) {
                this.$message.warn('您的门票不足')
                return
            }
            if (this.reelRequesting) {
                this.$message.warn('请不要重复点击')
                return
            }
            this.reelRequesting = true
            const res = await this.$service.weal.reelJoin(1)
            this.getTicker()
            if (res.success) {
                let index = this.getIndex(res.data.spuId)
                if (index === -1) {
                    this.$message.error('系统异常，请联系客服处理')
                    this.reelRequesting = false
                    return
                }
                this.startAnimal(index)
                setTimeout(() => {
                    this.reelRequesting = false
                    this.refresh()
                    this.$refs.result.show(this.data[index - 1].spu)
                    setTimeout(() => {
                        this.rotateNormal()
                    }, 200)
                }, 4100)
            } else {
                this.$message.error(res.msg)
                this.reelRequesting = false
            }
        },
        getIndex(spuId) {
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].spuId === spuId) {
                    return i + 1
                }
            }
            return -1
        },
        rotateNormal() {
            this.animation.rotate(0).step({
                duration: 0
            })
            this.animationData = this.animation.export()
        },
        startAnimal(number) {
            this.rotateNormal()
            let offset = -Math.floor(Math.random() * 40 + 5)
            setTimeout(() => {
                this.animation.rotate(360 * 3 + (-60 * (number - 1) + offset)).step({
                    duration: 4000
                })
                this.animationData = this.animation.export()
            }, 50)
        },
        async loadData(loading = false) {
            this.requesting = true
            const res = await this.$service.weal.reelList(1, this.pageNum, this.pageSize)
            setTimeout(() => {
                this.requesting = false
            }, 1000)
            return res
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.notice {
    height: 106rpx;
    background: rgba(0, 0, 0, 0.3);
    color: red;
    font-size: 32rpx;
    border-radius: 32rpx;
    padding: 10rpx 22rpx 0;
}
.ticket {
    position: absolute;
    right: 26rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
}
.reel-wrapper {
    margin: 0 auto;
    position: relative;
    width: 284px;
    height: 350px;
    .top {
        width: 284px;
        height: 284px;
        position: relative;
        .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 284px;
            height: 284px;
        }
        .inner-wrapper {
            position: relative;
            width: 233px;
            height: 233px;
            .inner {
                position: absolute;
                width: 233px;
                height: 233px;
            }
            .award {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 54px;
                height: 54px;
                margin-top: -27px;
                margin-left: -27px;
                &.award_1 {
                    transform: translate(40px, -72px) rotateZ(30deg);
                }
                &.award_2 {
                    transform: translateX(80px) rotateZ(90deg);
                }
                &.award_3 {
                    transform: translate(40px, 72px) rotateZ(150deg);
                }
                &.award_4 {
                    transform: translate(-40px, 72px) rotateZ(210deg);
                }
                &.award_5 {
                    transform: translateX(-80px) rotateZ(270deg);
                }
                &.award_6 {
                    transform: translate(-40px, -72px) rotateZ(330deg);
                }
            }
        }
        .point {
            position: absolute;
            width: 124px;
            height: 124px;
        }
    }
    .bottom {
        width: 227px;
        height: 156px;
        position: absolute;
        bottom: 0;
    }
    .title {
        position: absolute;
        bottom: 13px;
        height: 22px;
        width: 0;
    }
}
.cell {
    padding: 0 16rpx 0 40rpx;
    margin: 0 28rpx 20rpx 28rpx;
    height: 116rpx;
    border-radius: 8rpx;
    background: rgba(34, 35, 53, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    .icon {
        width: 52rpx;
        height: 52rpx;
        border-radius: 20rpx;
    }
    .image {
        width: 84rpx;
        height: 84rpx;
        border-radius: 8rpx;
    }
}
.group-btn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
</style>