yihuo/pages/weal/catchDoll.vue

<template>
    <view>
        <scroll-view
            class="scroll-wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view class="rule-btn" @click="$refs.rule.show()">
                <image :src="ossurl.welfare.toys.rule" class="width100 height100" />
            </view>
            <view class="win-btn" @click="winRecord()">
                <image :src="ossurl.welfare.toys.record" class="width100 height100" />
            </view>
            <view class="doll_all_win" @click.stop="onAllWin">
                <image :src="ossurl.welfare.toys.reward" class="width100 height100" />
            </view>

            <view class="toysBox">
                <image :src="ossurl.welfare.toys.toys" class="toysBoxImage" mode="widthFix" />

                <view class="molibiBox">
                    <view class="molibi">
                        源力币：
                        <span class="num">{{ molibi }}</span>
                        个
                    </view>
                    <view class="btn" @click.stop="addMolibi">
                        <image :src="ossurl.welfare.toys.get" class="width100 height100" />
                    </view>
                </view>
                <view class="ballsBox">
                    <view
                        class="ball"
                        :animation="ballsAnimationData[item]"
                        v-for="item in 50"
                        :key="item"
                        :style="poslist[item]"
                    >
                        <image :src="ossurl.welfare.toys.ball" class="width100 height100" />
                    </view>
                </view>
                <view class="ballBox" :animation="ballAnimationData">
                    <image :src="ossurl.welfare.toys.ball" class="width100 height100" />
                </view>
                <view class="switchBox" :animation="switchAnimationData" @click="setBallAnimation(),setSwitch()">
                    <image :src="ossurl.welfare.toys.switch" class="width100 height100" />
                </view>
            </view>
            <view class="btnBottom">
                <view class="btn" @click="pressOneLeave">
                    <image :src="ossurl.welfare.toys.one" class="width100 height100" />
                    <view>消耗1源力币</view>
                </view>
                <view class="btn" @click="pressFiveLeave">
                    <image :src="ossurl.welfare.toys.five" class="width100 height100" />
                    <view>消耗5源力币</view>
                </view>
            </view>
        </scroll-view>
        <catch-rule ref="rule" />
        <win-record ref="winRecordRef" />
        <doll-result ref="dollResultRef" />
        <doll-prize ref="dollPrizeRef" />
        <press-sure ref="pressSureRef" @press="onPress" />
        <lack-molib ref="lackMolibRef" />
    </view>
</template>

<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import catchRule from './catch_rule'
    import winRecord from './catch_record.vue'
    import dollResult from './doll_result.vue'
    import dollPrize from './doll_allPrize.vue'
    import pressSure from './doll_press_sure.vue'
    import lackMolib from './lackMolib.vue'

    export default {
        components: { catchRule, winRecord, dollResult, dollPrize, pressSure, lackMolib },
        props: {
            statusBarHeight: Number
        },
        data() {
            return {
                resource,
                ossurl,
                data: null,
                pressOneFlag: false,
                pressFiveFlag: false,
                refreshing: false,
                prizeListThree: [], // 前三奖品
                molibi: 0, // 源力币
                ballAnimationData: null,
                switchAnimationData: null,
                ballsAnimationData: [],
                poslist: [],
                lotteryFlag: false,
                zhuashouImg: resource.zhuashou,

                dollHandleList: [
                    resource.doll_handle1,
                    resource.doll_handle2,
                    resource.doll_handle3,
                    resource.doll_handle4,
                    resource.doll_handle5,
                    resource.doll_handle6,
                    resource.doll_handle7,
                    resource.doll_handle8
                ]
            }
        },
        computed: {
            top() {
                return this.statusBarHeight + uni.upx2px(72) + 45
            }
        },
        mounted() {
            this.onAllWin('three')
            this.getMolibi()
            this.setBallAnimation()
            this.getPosition()
        },
        methods: {
            getPosition() {
              this.poslist = []
                for (let i = 0; i < 50; i++) {
                    let bottom = Math.random() * 80 + 'px'
                    let left = Math.random() * 172 + 'px'
                    let style = `bottom:${bottom};left:${left}`

                    this.poslist.push(style)
                }
            },
            setBallAnimation() {
              this.ballsAnimationData = []
                for (let i = 0; i < 50; i++) {
                    let bottom = (Math.random()-0.8) * 100
                    let left =  (Math.random()-0.5) * 20

                    let animation = wx.createAnimation({
                        duration: 300,
                        timingFunction: 'linear'
                    })

                    this.animation = animation
                    bottom =  (Math.random()-0.5) * 200
                    left =  (Math.random()-0.5) * 50
                    animation.translate(left, bottom).rotate(Math.random()*90).step({
                        duration: 200,
                        timingFunction: 'linear'
                    })
                    bottom =  (Math.random()-0.5) * 200
                    left =  (Math.random()-0.5) * 50
                    animation.translate(left, bottom).rotate(Math.random()*360).step({
                        duration: 300,
                        timingFunction: 'ease'
                    })
                    animation.translate(Math.random()*50, Math.random()*50).rotate(Math.random()*90).step({
                        duration: 300,
                        timingFunction: 'linear'
                    })
                    this.ballsAnimationData.push(animation.export())
                }
            },
            setBall() {
                let animation = wx.createAnimation({
                    duration: 1000,
                    timingFunction: 'ease'
                })

                this.animation = animation
                animation.scale(1, 1).rotate(45).opacity(1).step()

                this.ballAnimationData = animation.export()

                setTimeout(
                    function () {
                        animation.opacity(0).scale(0, 0).step()
                        animation.opacity(0).step()
                        this.ballAnimationData = animation.export()
                    }.bind(this),
                    2000
                )
            },
            setSwitch() {
                let animation = wx.createAnimation({
                    duration: 500,
                    timingFunction: 'ease'
                })
                this.animation = animation
                animation.rotate(90).step()

                this.switchAnimationData = animation.export()
                setTimeout(
                    function () {
                        animation.rotate(0).step()
                        this.switchAnimationData = animation.export()
                    }.bind(this),
                    1000
                )
            },
            pullRefresh() {
                this.refreshing = true
                this.onAllWin('three')
                this.getMolibi()
                setTimeout(() => {
                    this.refreshing = false
                }, 1000)
            },
            winRecord() {
                this.$refs.winRecordRef.show()
            },
            onExchange() {
                this.$router.push('exchange')
            },
            async onAllWin(type) {
                this.$service.weal.catchDollDetail().then((res) => {
                    if (res.code === '0') {
                        if (type === 'three') {
                            this.prizeListThree = res.data.luckWheelGoodsList.slice(0, 3)
                        } else {
                            this.$refs.dollPrizeRef.show(res.data.luckWheelGoodsList)
                        }
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            async getMolibi() {
                const res = await this.$service.wallet.info('MAGIC_POWER_COIN')
                res && (this.molibi = res.balance)
            },
            pressOne() {
                this.pressOneFlag = true
            },
            pressOneLeave() {
                this.pressOneFlag = false
                if (this.lotteryFlag) {
                    this.$message.warn('请不要重复点击')
                    return
                } else {
                    if (this.molibi == 0) {
                        this.$refs.lackMolibRef.show()
                    } else {
                        this.$refs.pressSureRef.show(1)
                    }
                }
            },
            pressFive() {
                this.pressFiveFlag = true
            },
            pressFiveLeave() {
                this.pressFiveFlag = false
                if (this.lotteryFlag) {
                    this.$message.warn('请不要重复点击')
                    return
                } else {
                    if (this.molibi < 5) {
                        this.$refs.lackMolibRef.show()
                    } else {
                        this.$refs.pressSureRef.show(5)
                    }
                }
            },
            onPress(pressType) {
                this.pressSubmit(pressType)
            },

            pressSubmit(quantity) {
                this.lotteryFlag = true
                this.$service.weal.dollLottery({ quantity }).then((res) => {
                    if (res.code === '0') {
                        this.getMolibi()
                        // this.animateClaw()
                        this.setSwitch()
                        setTimeout(() => {
                          this.setBallAnimation()
                        }, 500)
                        setTimeout(() => {
                          this.setBall()
                        }, 800)
                        setTimeout(() => {
                            this.$refs.dollResultRef.show(res.data)
                            this.lotteryFlag = false
                        }, 2000)

                    } else {
                        this.$message.error(res.msg)
                        this.lotteryFlag = false
                    }
                })
            },
            addMolibi() {
                this.$router.switchTab('award')
            },


        }
    }
</script>
<style lang="scss" scoped>
    .scroll-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .doll_all_win {
        position: fixed;
        left: 0;
        top: 250rpx;
        width: 58rpx;
        height: 128rpx;
        z-index: 99;
    }

    .rule-btn {
        position: fixed;
        right: 0;
        top: 250rpx;
        width: 58rpx;
        height: 84rpx;
        text-align: center;
        z-index: 99;
    }
    .win-btn {
        position: fixed;
        right: 0;
        top:360rpx;
        width: 58rpx;
        height: 128rpx;
        font-size: 24rpx;
        line-height: 24px;
        text-align: center;
        z-index: 99;
    }
    .btnBottom {
        position: fixed;
        bottom: 20rpx;
        z-index: 99;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
            padding: 0 20rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #c74104;
            image {
                width: 306rpx;
                height: 96rpx;
            }
        }
    }
    .toysBox {
        width: 100vw;
        text-align: center;
        position: relative;
        .toysBoxImage {
            width: 750rpx;
            position: relative;
            z-index: 2;
        }

        .molibiBox {
            position: absolute;
            top: 700rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 100rpx;
            padding-top: 8rpx;
            z-index: 5;
            .molibi {
                font-size: 22rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #ffffff;
                line-height: 32rpx;
                .num {
                    font-size: 32rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 700;
                    color: #ffffff;
                    line-height: 46rpx;
                }
            }
            .btn {
                width: 160rpx;
                height: 60rpx;
            }
        }
        .ballBox {
            position: absolute;
            top: 878rpx;
            left: 180rpx;
            width: 132rpx;
            height: 132rpx;
            transform: scale(0);
            z-index: 3;
        }
        .switchBox {
            position: absolute;
            top: 878rpx;
            right: 206rpx;
            height: 120rpx;
            width: 120rpx;
            z-index: 3;
        }
        .ballsBox {
            width: 476rpx;
            height: 476rpx;
            background-color: #5e62ca;
            position: absolute;
            top: 90rpx;
            left: 140rpx;
            z-index: 1;
            overflow: hidden;
            .ball {
                position: absolute;
                bottom: 10rpx;
                left: 10rpx;
                width: 132rpx;
                height: 132rpx;
            }
        }
    }
</style>