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

<template>
    <div class="inherited" v-if="target && source">
        <div class="coins">
            {{ t('coins.0') }}:{{ userCoins }}
        </div>
        <div class="message">
            <p>{{ t('inherited.1') + needCoins }}</p>
            <div class="tips">
                <p>- {{ t('inherited.2') }}</p>
                <p>- {{ t('inherited.3') }}</p>
                <p>- {{ t('inherited.4') }}</p>
            </div>
            <div class='btn-div'>
                <button class="button" @click="inherited">{{ t('inheritedConfirm.0') }}</button>
            </div>
        </div>
        <div class="equip">
            <EquipIcon :equip="target" />
            <div class='name' :class="target.quality.quality">
                {{ t(target.type + '.' + target.base.name + '.0') }}
                {{ '(+' + target.strengthenLv + ')' }}
                <span>➡</span>
                {{ '(+' + source.strengthenLv + ')' }}
            </div>
        </div>
        <div class="entry">
            <div>
                <div v-for="v in target.base.entry" :key="v.id">
                    {{ t(v.type + '.0') }} : + {{ strengthenValue(v.value, target.strengthenLv) }}
                </div>
            </div>
            <div class="arror">➡</div>
            <div>
                <div v-for="v in target.base.entry" :key="v.id">
                    <span>{{ strengthenValue(v.value, source.strengthenLv) }}</span>
                    <span class="set">
                        ⬆({{ strengthenValue(v.value, source.strengthenLv) -
                            strengthenValue(v.value, target.strengthenLv) }})
                    </span>
                </div>
            </div>
        </div>
        <div class="equip">
            <EquipIcon :equip="source" />
            <div class='name' :class="source.quality.quality">
                {{ t(source.type + '.' + source.base.name + '.0') }}
                {{ '(+' + source.strengthenLv + ')' }}
                <span>➡</span>
                {{ '(+0)' }}
            </div>
        </div>
        <div class="entry">
            <div>
                <div v-for="v in source.base.entry" :key="v.id">
                    {{ t(v.type + '.0') }} : + {{ strengthenValue(v.value, source.strengthenLv) }}
                </div>
            </div>
            <div class="arror">➡</div>
            <div>
                <div v-for="v in source.base.entry" :key="v.id">
                    <span>{{ strengthenValue(v.value, 0) }}</span>
                    <span class="down">
                        ⬇({{ strengthenValue(v.value, source.strengthenLv) - strengthenValue(v.value, 0) }})
                    </span>
                </div>
            </div>
        </div>
    </div>

    <Confirm ref="confirm" width="8rem" :tip="t('inheritedConfirm.1')" :confirm="t('inheritedConfirm.2')"
        :cancel="t('inheritedConfirm.3')" @confirm="confirmInherited" />
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { strengthenAvgCoins, strengthenValue } from "@/tool";
import { EquipIcon, Confirm } from "@/components";


const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const userCoins = computed(() => {
    return state.playerAttribute.coins;
})
const needCoins = computed(() => {
    const need = strengthenAvgCoins(prop.target.lv, prop.source.strengthenLv, prop.target.quality.quality)
    const used = strengthenAvgCoins(prop.source.lv, prop.source.strengthenLv, prop.source.quality.quality)
    return need > used ? need - used : 0;
})
const confirm = ref();
const emit = defineEmits(['close'])

const prop = defineProps({
    target: {
        type: Object,
        default: null
    },
    source: {
        type: Object,
        default: null
    }
});

const inherited = (e) => {
    confirm.value.open(0, e)
}

const confirmInherited = () => {
    if (userCoins.value < needCoins.value) {
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    commit("add_player_coins", -1 * needCoins.value);
    prop.target.strengthenLv = prop.source.strengthenLv;
    prop.source.strengthenLv = 0;
    commit("set_sys_info", { msg: t('inheritedConfirm.4'), type: "win", });
    emit('close');
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.inherited {
    color: #f1f1f1;
    width: 25rem;
    height: auto;
    background: rgba(0, 0, 0, 0.2);
    border: #393839;
    border-radius: 0.4rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.coins {
    display: flex;
    align-items: center !important;
    justify-content: center;
    font-size: 1.1rem;
    color: #2fe20f;
}

.message {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.8rem;

    p {
        margin: 0.7rem;
    }

    .tips {
        padding-left: 1.3rem;

        p {
            color: #999;
            font-size: 0.8rem;
            margin: 0rem;
        }
    }

    .btn-div {
        padding: 0.1rem;
        display: flex;
        justify-content: flex-end;
        padding-right: 2rem;
    }
}

.equip {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;

    .name {
        height: 3.5rem;
        line-height: 3.5rem;
        margin-left: 1.6rem;
        font-size: 1.2rem;
    }
}

.entry {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-around;
    font-size: 1.2rem;
    align-items: center;

    div {
        text-align: left;

        &>div {
            height: 2rem;
        }

        .set {
            color: #2fe20f;
            margin-left: 0.7rem;
        }

        .down {
            color: #f70d05;
            margin-left: 0.7rem;
        }
    }
}

@media only screen and (max-width: 768px) {
    .inherited {
        width: 23rem;
    }

    .equip .name {
        height: 2.5rem;
        line-height: 2.5rem;
        margin-left: 1rem;
        font-size: 1rem;
    }

    .entry {
        font-size: 1rem;
    }
}
</style>