vue-idle-game/src/views/backpack/grid.vue

<template>
    <div class="body">
        <span class="grid" v-for="(v, idx) in grid">
            <div class="equip" v-if="v" @contextmenu.prevent.stop="emit('openEquipMenu', idx, $event)"
                @touchstart="mobile.onTouchStart($event, [v, idx])" @touchmove="mobile.onTouchMove"
                @touchend="mobile.onTouchEnd" @dblclick="commit('close_equip_tip'); dispatch('useEquip', idx);"
                @mouseover="commit('show_equip_tip', { equip: v, compare: true, e: $event })"
                @mouseleave="commit('close_equip_tip')">
                <EquipIcon :equip="v" />
                <div class="equip-lock" v-if="v.locked">
                    <img :src="lock_icon">
                </div>
            </div>
        </span>
    </div>
    <div class="footer">
        <span class="capacity" :class="{ 'height': itemNum / grid.length > 0.8 }">
            {{ itemNum }}/{{ grid.length }}
        </span>
        <button class="button" @click="neaten">{{ t('neaten') }}</button>
        <button class="button" @click="sellAll">{{ t('sellAll') }}</button>
        <AutoSell />
    </div>

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import EquipIcon from "@/components/equip-icon.vue";
import { lock_icon, backpack_num } from "@/config";
import AutoSell from "./auto-sell.vue";
import { userMobile } from "@/tool";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const grid = computed(() => {
    return state.grid;
});
const emit = defineEmits(['openEquipMenu'])

const itemNum = computed(() => {
    let i = 0;
    state.grid.forEach((item) => {
        if (item) {
            i++;
        }
    })
    return i;
});

const neaten = () => {
    const tem = new Array(backpack_num);
    let i = 0;
    state.grid.forEach((item) => {
        if (item) {
            tem[i] = item
            i++;
        }
    })
    commit("set_backpack", tem);
}
const sellAll = () => {
    state.grid.forEach((item, index) => {
        if (item && !item.locked) {
            dispatch('sell_equip', index)
        }
    })
}

const mobile = userMobile();
mobile.onLongTouch = (e, data) => {
    e.touches[0].preventDefault = () => { };
    emit('openEquipMenu', data[1], e.touches[0]);
}
mobile.onClick = (e, data) => {
    commit('show_equip_tip', { equip: data[0], compare: true, e: e.touches[0] })
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.body {
    width: 30rem;
    height: 14rem;
    margin-top: 1rem;
    justify-items: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    display: flex;
    padding-left: 1.3rem;
}

.grid {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    box-shadow: inset 0 0 6px 6px rgba($color: #000000, $alpha: 0.5);

    .equip {
        display: flex;
        width: 100%;
        cursor: pointer;
        position: relative;
        -webkit-touch-callout: none;
        /*系统默认菜单被禁用*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -khtml-user-select: none;
        /*早起浏览器*/
        -moz-user-select: none;
        /*火狐浏览器*/
        -ms-user-select: none;
        /*IE浏览器*/
        user-select: none;
        /*用户是否能够选中文本*/
    }

    .equip-lock {
        position: absolute;
        top: -0.2rem;
        right: -1.1rem;
        border-left: 1.7rem solid transparent;
        border-right: 1.7rem solid transparent;
        border-bottom: 1.7rem solid rgba(255, 0, 0, 0.658);
        transform: rotate(45deg);

        img {
            width: 1rem;
            height: 1rem;
            transform: rotate(-45deg) translate(-50%, -0%);
            position: absolute;
            top: 50%;
            left: 50%;
        }
    }
}

.footer {
    height: 4rem;
    width: 100%;

    .capacity {
        font-size: 1.5rem;
        line-height: 4rem;
        float: left;
        color: white;
    }

    .height {
        color: red;
    }

    .button {
        float: right;
        margin-top: 0.9rem;
    }
}

@media only screen and (max-width: 768px) {
    .body {
        width: 22rem;
        height: 10rem;
    }

    .grid {
        width: 2.5rem;
        height: 2.5rem;


        .equip-lock {
            top: -0.2rem;
            right: -0.7rem;
            border-left: 1.2rem solid transparent;
            border-right: 1.2rem solid transparent;
            border-bottom: 1.2rem solid rgba(255, 0, 0, 0.658);

            img {
                width: 0.7rem;
                height: 0.7rem;
            }
        }
    }

    .footer {
        height: 3rem;

        .capacity {
            font-size: 1.2rem;
            line-height: 3rem;
        }

        .button {
            margin-top: 0.5rem;
        }
    }

}
</style>