vue-idle-game/src/views/backpack/grid/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')" @click="clickGrid($event, v)">
                <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 addGrid" @click="addGrid">+</button>
        <button class="button" @click="neaten">{{ t('neaten') }}</button>
        <button class="button" @click="sellAll">{{ t('sellAll') }}</button>
        <AutoSell />
    </div>

    <Confirm ref="confirm" width="8rem" :tip="replace(t('addGrid.1'), [needCoins, addNum])" :confirm="t('addGrid.2')"
        :cancel="t('addGrid.3')" @confirm="confirmAddGrid" />

</template>

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

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const grid = computed(() => {
    return state.grid;
});
const emit = defineEmits(['openEquipMenu']);
const confirm = ref();
const userCoins = computed(() => {
    return state.playerAttribute.coins;
})
const needCoins = 2000000;
const addNum = 8;
const maxNum = 320;

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

const neaten = () => {
    grid.value.sort((a, b) => {
        if (!a && !b) return 0;
        else if (!a) return 1;
        else if (!b) return -1;
        let tmp = b.type.localeCompare(a.type, 'en');
        if (tmp != 0) return tmp;
        tmp = b.base.name.localeCompare(a.base.name, 'en');
        if (tmp != 0) return tmp;
        return b.lv - a.lv;
    });
}
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] })
}

const addGrid = (e) => {
    if (grid.value.length >= maxNum) {
        commit("set_sys_info", { msg: replace(t('addGrid.4'), [maxNum]), type: "warning", });
        return;
    }
    confirm.value.open(0, e)
}
const confirmAddGrid = () => {
    if (userCoins.value < needCoins) {
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    commit("add_player_coins", -1 * needCoins);
    for (let i = 0; i < addNum; i++) {
        grid.value.push(null);
    }
}

const clickGrid = (e, equip) => {
    if (e.altKey && equip) {
        equip.locked = !equip.locked;
    }
}

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: 0.8rem;
    overflow: auto;
}

.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;
    }

    .addGrid {
        padding: 0 0.8rem;
        float: left;
    }
}

@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;
        }

        .addGrid {
            padding: 0 0.4rem;
            float: left;
        }
    }

}
</style>