yihuo/pages/rich/index.vue

<template>
    <page title="大富翁" ref="pageRef" light nav-color="transparent">
        <view class="bg"></view>
        <image :src="resource.popularize_bg" class="bg-2" />
        <scroll-view scroll-y>
            <view class="flex-align-center" style="padding-top: 120rpx">
                <view class="content">
                    <view
                        v-for="(item, index) in grids"
                        :key="item.seq"
                        class="cell flex-align-center"
                        :class="[
                            item.seq == 0 && 'first',
                            item.seq == 200 && 'last',
                            item.seq == current && !isAnimal && 'current',
                            item.event && 'luck',
                            [10, 34, 58, 82, 106, 130, 154, 178].includes(item.seq) && 'tr',
                            [12, 36, 60, 84, 108, 132, 156, 180].includes(item.seq) && 'br',
                            [22, 46, 70, 94, 118, 142, 166, 190].includes(item.seq) && 'tl',
                            [24, 48, 72, 96, 120, 144, 168, 192].includes(item.seq) && 'bl'
                        ]"
                        :style="{ left: item.position.x + 'rpx', top: item.position.y + 'rpx' }"
                    >
                        <view v-if="item.seq == 0" class="text">起</view>
                        <image
                            v-else-if="item.seq == 100"
                            :src="resource.rick_star"
                            class="radius4"
                            style="width: 58rpx; height: 58rpx"
                        />
                        <view v-else-if="item.seq == 200" class="text">终</view>
                        <image
                            v-else-if="item.event && item.event.type === 'MAGIC'"
                            :src="resource.rich_magic"
                            class="radius4"
                            style="width: 58rpx; height: 58rpx"
                        />
                        <image
                            v-else-if="item.event && item.event.type === 'COUPON'"
                            :src="resource.rich_coupon"
                            class="radius4"
                            style="width: 58rpx; height: 58rpx"
                        />
                        <image
                            v-else-if="item.event && item.event.type === 'ADD_TICKET'"
                            :src="resource.rich_dice_small"
                            class="radius4"
                            style="width: 58rpx; height: 58rpx"
                        />
                        <view
                            v-else-if="item.event && item.event.type === 'RANDOM'"
                            class="font0 flex-column-align-center color-white"
                        >
                            <view>随机</view>
                            <view>事件</view>
                        </view>
                        <view
                            v-else-if="item.event && item.event.type === 'FORWARD'"
                            class="font1 flex-column-align-center color-white"
                        >
                            +{{ item.event.relation }}步
                        </view>
                        <view
                            v-else-if="item.event && item.event.type === 'BACKWARD'"
                            class="font1 flex-column-align-center color-white"
                        >
                            -{{ item.event.relation }}步
                        </view>
                        <view
                            v-else-if="item.event && item.event.type === 'STAY'"
                            class="font0 flex-column-align-center color-white"
                        >
                            <view>停留</view>
                            <view>一次</view>
                        </view>
                        <view v-else class="text">{{ item.seq }}</view>
                    </view>
                    <view
                        class="people"
                        :class="[isAnimal && 'animal']"
                        :style="{ left: map[current].x + 'rpx', top: map[current].y + 'rpx' }"
                    >
                        <view class="relative height100 width100">
                            <image :src="resource.rich_people" class="image" />
                            <image :src="user.avatar || resource.logo" class="tx" />
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="fill"></view>
        <view class="bottom paddingB25">
            <view v-if="point && isAnimal" class="flex-align-center res">+{{ point }}</view>
            <view class="flex-align-center relative">
                <image
                    :src="resource.rich_dice"
                    class="dice"
                    :class="[isRequest && 'rock']"
                    @click="apply"
                />
                <view class="num translateX">
                    <view class="relative flex-align-center height100 width100">
                        <image :src="resource.rich_num" class="image" />
                        <view class="color-white font2 relative">X{{ num }}次</view>
                    </view>
                </view>
            </view>
            <view class="flex-align-center paddingT8">
                <image
                    :src="resource.prize_entrance"
                    style="width: 336rpx; height: 108rpx"
                    @click="$router.push('rich_prize')"
                />
                <image
                    :src="resource.popularize_btn_2"
                    style="width: 336rpx; height: 108rpx"
                    @click="showRank"
                />
            </view>
        </view>
        <view class="index" @click="$router.index()">首页</view>
        <view class="rule" @click="showRule">规则</view>
        <rule ref="ruleRef" />
        <rank ref="rankRef" />
        <result-com ref="resultRef" />
    </page>
</template>

<script>
import resource from '@/utils/resource'
import rule from './rule.vue'
import rank from './rank'
import resultCom from './result'

const size = 58
const rowCount = 11
export default {
    components: { rule, rank, resultCom },
    data() {
        return {
            resource,
            grids: [],
            isAnimal: false,
            isRequest: false,
            num: 3, //次数
            point: 0, //点数
            current: 0,
            map: {}
        }
    },
    computed: {
        user() {
            return this.$store.state.userInfo
        }
    },
    mounted() {
        this.getData(this.initGrid())
    },
    methods: {
        initGrid() {
            let array = []
            this.initHGrid(array, 0, 1)
            this.initVGrid(array, 11, rowCount, 2)
            this.initHGrid2(array, 12, 3)
            this.initVGrid(array, 23, 1, 4)
            this.initHGrid(array, 24, 5)
            this.initVGrid(array, 35, rowCount, 6)
            this.initHGrid2(array, 36, 7)
            this.initVGrid(array, 47, 1, 8)
            this.initHGrid(array, 48, 9)
            this.initVGrid(array, 59, rowCount, 10)
            this.initHGrid2(array, 60, 11)
            this.initVGrid(array, 71, 1, 12)
            this.initHGrid(array, 72, 13)
            this.initVGrid(array, 83, rowCount, 14)
            this.initHGrid2(array, 84, 15)
            this.initVGrid(array, 95, 1, 16)
            this.initHGrid(array, 96, 17)
            this.initVGrid(array, 107, rowCount, 18)
            this.initHGrid2(array, 108, 19)
            this.initVGrid(array, 119, 1, 20)
            this.initHGrid(array, 120, 21)
            this.initVGrid(array, 131, rowCount, 22)
            this.initHGrid2(array, 132, 23)
            this.initVGrid(array, 143, 1, 24)
            this.initHGrid(array, 144, 25)
            this.initVGrid(array, 155, rowCount, 26)
            this.initHGrid2(array, 156, 27)
            this.initVGrid(array, 167, 1, 28)
            this.initHGrid(array, 168, 29)
            this.initVGrid(array, 179, rowCount, 30)
            this.initHGrid2(array, 180, 31)
            this.initVGrid(array, 191, 1, 32)
            this.initHGrid(array, 192, 33)
            return array
        },
        initHGrid(array, offset, row) {
            let max = rowCount
            if (rowCount + offset > 200) {
                max = 200 - offset + 1
            }
            for (let i = 0; i < max; i++) {
                array.push({
                    seq: offset + i,
                    position: { x: i * size, y: (row - 1) * size }
                })
                this.map[offset + i] = {
                    x: i * size + size / 2 - 68 / 2,
                    y: (row - 1) * size + size / 2 - 70
                }
            }
        },
        initHGrid2(array, offset, row) {
            for (let i = 0; i < rowCount; i++) {
                array.push({
                    seq: offset + i,
                    position: { x: (rowCount - i - 1) * size, y: (row - 1) * size }
                })
                this.map[offset + i] = {
                    x: (rowCount - i - 1) * size + size / 2 - 68 / 2,
                    y: (row - 1) * size + size / 2 - 70
                }
            }
        },
        initVGrid(array, num, i, row) {
            array.push({
                seq: num,
                position: { x: (i - 1) * size, y: (row - 1) * size }
            })
            this.map[num] = {
                x: (i - 1) * size + size / 2 - 68 / 2,
                y: (row - 1) * size + size / 2 - 70
            }
        },
        async getData(array) {
            const res = await this.$service.weal.rich()
            if (res) {
                this.current = res.currentPosition
                this.num = res.currentTicket
                if (res.eventMap) {
                    const eventMap = JSON.parse(res.eventMap)
                    array.forEach((item) => {
                        if (eventMap[item.seq + '']) {
                            item.event = eventMap[item.seq + '']
                        }
                    })
                    this.grids = array
                }
            }
        },
        async refreshTicket() {
            const res = await this.$service.weal.rich()
            if (res) {
                this.num = res.currentTicket
            }
        },
        showRule() {
            this.$refs.ruleRef.show()
        },
        showRank() {
            this.$refs.rankRef.show()
        },
        async apply() {
            if (this.num <= 0) {
                this.$refs.resultRef.show('请前往宝箱抽取骰子')
                return
            }
            if (this.current >= 200) {
                this.$refs.resultRef.show(
                    '恭喜魔主抵达终点，（前十：奖励将于活动结束后三个工作日内发放至仓库。 十名之后：获奖结果将于活动结束后于公众号中公布。）',
                    4000
                )
                return
            }
            if (this.num <= 0 || this.current >= 200 || this.isRequest || this.isAnimal) return
            this.isRequest = true
            const res = await this.$service.weal.richRoll()
            if (res) {
                setTimeout(() => {
                    this.point = res.point
                    if (res.event) {
                        res.event.eventDesc = res.eventDesc
                    }
                    this.beginAnimal(res.point, res.event)
                    this.isRequest = false
                }, 1000)
            }
            this.refreshTicket()
        },
        beginAnimal(nums, result) {
            this.isAnimal = true
            if (nums > 0) {
                this.changeCurrent(nums, result)
            } else if (nums < 0) {
                this.changeCurrent2(nums, result)
            }
        },
        changeCurrent(num, result) {
            if (num <= 0 || this.current >= 200) {
                this.handleResult(result)
                return
            }
            setTimeout(() => {
                this.current += 1
                this.changeCurrent(num - 1, result)
            }, 500)
        },
        changeCurrent2(num, result) {
            if (num >= 0) return
            setTimeout(() => {
                this.current -= 1
                this.changeCurrent2(num + 1, result)
            }, 500)
        },
        handleResult(result) {
            this.endAnimal()
            if (this.current === 200) {
                this.$refs.resultRef.show(
                    '恭喜魔主抵达终点，（前十：奖励将于活动结束后三个工作日内发放至仓库。 十名之后：获奖结果将于活动结束后于公众号中公布。）',
                    4000
                )
            }
            if (!result) return
            if (result.eventDesc) {
                this.$refs.resultRef.show(result.eventDesc)
            }
            if (result.type === 'FORWARD') {
                this.isAnimal = true
                setTimeout(() => {
                    this.beginAnimal(result.relation)
                }, 350)
            } else if (result.type === 'BACKWARD') {
                this.isAnimal = true
                setTimeout(() => {
                    this.beginAnimal(-result.relation)
                }, 350)
            }
        },
        endAnimal() {
            this.point = 0
            setTimeout(() => {
                this.isAnimal = false
            }, 350)
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #8332f5 0%, #2f4abd 100%);
    z-index: -1;
}

.bg-2 {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 1624rpx;
    z-index: 0;
}

.index {
    position: fixed;
    top: 160rpx;
    right: 0;
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(315deg, #0bd1ce 0%, #3ba1ff 100%);
    border-radius: 200rpx 0px 0px 200rpx;
    line-height: 48rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    z-index: 100;
}

.rule {
    position: fixed;
    top: 230rpx;
    right: 0;
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(315deg, #ff345a 0%, #ffa25e 100%);
    border-radius: 200rpx 0px 0px 200rpx;
    line-height: 48rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    z-index: 100;
}

.fill {
    height: 328rpx;
}

.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    .dice {
        width: 164rpx;
        height: 154rpx;
    }

    .res {
        font-size: 60rpx;
        color: #fff;
        font-weight: 500;
        background: #6c6fff;
        width: 150rpx;
        border-radius: 20rpx;
        margin: 0 auto;
    }

    .num {
        position: absolute;
        width: 81rpx;
        height: 42rpx;
        top: -20rpx;
        margin-left: 100rpx;

        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 81rpx;
            height: 42rpx;
        }
    }
}

.content {
    width: 638rpx;
    height: 986rpx;
    position: relative;

    .people {
        position: absolute;
        width: 68rpx;
        height: 81rpx;
        animation: updown 1.5s linear infinite;
        padding: 4rpx 4rpx 0;

        &.animal {
            transition: left 0.5s, top 0.5s;
        }

        .image {
            position: absolute;
            width: 68rpx;
            height: 81rpx;
            left: 0;
            top: 0;
        }

        .tx {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background: #7b9ebe;
        }
    }

    .cell {
        width: 58rpx;
        height: 58rpx;
        background: #ffffff;
        box-shadow: inset 0px 0px 4rpx 0px rgba(125, 84, 255, 0.5);
        position: absolute;
        border-radius: 2rpx;

        &.current {
            background: linear-gradient(270deg, #0bd1ce, #3ba1ff);
        }

        &.first {
            border-top-left-radius: 8rpx;
            border-bottom-left-radius: 8rpx;
            background: linear-gradient(270deg, #ffa959, #ffc72d);
        }

        &.last {
            border-top-right-radius: 8rpx;
            border-bottom-right-radius: 8rpx;
            background: linear-gradient(270deg, #6c6fff, #a948ff);
        }

        &.luck {
            background: linear-gradient(270deg, #ff345a, #ffa25e);
        }

        &.tr {
            border-top-right-radius: 8rpx;
        }

        &.br {
            border-bottom-right-radius: 8rpx;
        }

        &.tl {
            border-top-left-radius: 8rpx;
        }

        &.bl {
            border-bottom-left-radius: 8rpx;
        }

        .text {
            color: #7138e9;
            font-size: 30rpx;
            font-weight: 500;
        }

        &.first,
        &.last {
            .text {
                color: #fff;
                font-size: 32rpx;
            }
        }
    }
}

.rock {
    animation: rock 0.5s linear infinite;
}

@keyframes rock {
    0% {
        transform: rotateZ(-20deg);
    }

    25% {
        transform: rotateZ(0deg);
    }

    50% {
        transform: rotateZ(20deg);
    }

    75% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-20deg);
    }
}

@keyframes updown {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(3px);
    }

    100% {
        transform: rotateZ(0px);
    }
}
</style>