lookcommon_course/pages_tool/pages/game/game.vue

<template>
    <view>
        <view class="flex-container">
            <view class="result" :style="'visibility:' + isShow">
                <text>恭喜，您摇到的数字是：{{ total }}</text>
            </view>
            <view class="dice-box">
                <view v-if="num1 === 0" class="first face">
                    <view class="pip"></view>
                </view>
                <view v-else-if="num1 === 1" class="second face">
                    <view class="pip"></view>
                    <view class="pip"></view>
                </view>
                <view v-else-if="num1 === 2" class="third face">
                    <view class="pip"></view>
                    <view class="pip third-item-center"></view>
                    <view class="pip"></view>
                </view>
                <view v-else-if="num1 === 3" class="fourth face">
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                </view>
                <view v-else-if="num1 === 4" class="fifth face">
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                    <view class="column fifth-column-center">
                        <view class="pip"></view>
                    </view>
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                </view>
                <view v-else class="sixth face">
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                    <view class="column">
                        <view class="pip"></view>
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                </view>
            </view>
            <view class="second-row">
                <view class="dice-box">
                    <view v-if="num2 === 0" class="first face">
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num2 === 1" class="second face">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num2 === 2" class="third face">
                        <view class="pip"></view>
                        <view class="pip third-item-center"></view>
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num2 === 3" class="fourth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                    <view v-else-if="num2 === 4" class="fifth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column fifth-column-center">
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                    <view v-else class="sixth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                </view>
                <view class="dice-box">
                    <view v-if="num3 === 0" class="first face">
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num3 === 1" class="second face">
                        <view class="pip"></view>
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num3 === 2" class="third face">
                        <view class="pip"></view>
                        <view class="pip third-item-center"></view>
                        <view class="pip"></view>
                    </view>
                    <view v-else-if="num3 === 3" class="fourth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                    <view v-else-if="num3 === 4" class="fifth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column fifth-column-center">
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                    <view v-else class="sixth face">
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                        <view class="column">
                            <view class="pip"></view>
                            <view class="pip"></view>
                            <view class="pip"></view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="button-box">
                <button @tap="shakeClick" class="btnc" :type="buttonType">{{ buttonValue }}</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dice: ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'],
            buttonType: 'primary',
            buttonValue: '摇一摇',
            isShow: 'hidden',
            num1: 0,
            num2: 0,
            num3: 0,
            total: 0,

            global: {
                timer: null,
                isRand: false
            }
        };
    },
    onHide() {
        if (this.global?.timer) {
            clearInterval(this.global.timer);
            this.global.isRand = false;
        }
    },
    onUnload() {
        if (this.global?.timer) {
            clearInterval(this.global.timer);
            this.global.isRand = false;
        }
    },
    methods: {
        shakeClick: function () {
            var that = this;
            this.global.isRand = !this.global.isRand;
            if (this.global.isRand) {
                this.global.timer = setInterval(() => {
                    const a = Math.floor(6 * Math.random());
                    const i = Math.floor(6 * Math.random());
                    const s = Math.floor(6 * Math.random());

                    this.num1 = a;
                    this.num2 = i;
                    this.num3 = s;
                    this.total = a + i + s + 3; // 0-5映射为1-6
                }, 50);
            } else {
                clearInterval(this.global.timer);
            }
            this.dice = this.dice;
            this.buttonType = this.global.isRand ? 'default' : 'primary';
            this.buttonValue = this.global.isRand ? '停止' : '摇一摇';
            this.isShow = this.global.isRand ? 'hidden' : 'visible';


        }
    }
};
</script>
<style>
@import './game.css';
</style>