重铸新增确认保留功能

src/config/i18n/zh/index.ts

@@ -73,7 +73,8 @@ export default class Zh {
     '强化概率：6级80%，7级65%，8级45%，9级30%，10级以后20%',
   ];
   reforge = '重铸';
-  reforgeDesc = ['重铸说明', '点击任意词条花费金币重铸装备所有词条', '重铸时词条颜色与百分比值显示了该词条的等级'];
+  reforgeAction = ['点击花费${0}金币重铸', '恢复原词条', '保留新词条'];
+  reforgeDesc = ['点击任意词条花费金币重铸装备所有词条', '重铸时词条颜色与百分比值显示了该词条的等级', '重铸后可选择保留原词条或新词条'];
   lock = '锁定';
   unlock = '解锁';
   sell = '出售';

src/views/backpack/reforge.vue

@@ -0,0 +1,162 @@
+<template>
+    <div @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;" @click="reforge">
+        <div class="extraEntry" v-if="!reforgeFlag || reforgeing">
+            <div v-if="tempEntry" class="extraEntry-item" v-for="(v, k) in tempEntry" :key="k">
+                <button class="button">
+                    <div>
+                        {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
+                    </div>
+                </button>
+            </div>
+            <div v-if="!tempEntry" class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.type + k">
+                <button class="button">
+                    <div>
+                        {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
+                    </div>
+                </button>
+            </div>
+        </div>
+        <div class="reforge-tip" v-if="reforgeFlag && !reforgeing">
+            <div :class="useCoins < reforgeNeed ? 'red' : ''">{{ replace(t('reforgeAction.0'), [reforgeNeed]) }} </div>
+            <div>-{{ t('reforgeDesc.0') }}</div>
+            <div>-{{ t('reforgeDesc.1') }}</div>
+            <div>-{{ t('reforgeDesc.2') }}</div>
+        </div>
+    </div>
+    <div class="btn-group">
+        <button class="button" @click="saveOld">{{ t('reforgeAction.1') }}</button>
+        <button class="button" @click="saveNew">{{ t('reforgeAction.2') }}</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, computed, watch } from "vue";
+import { Tooltip, EquipIcon } from "@/components"
+import { createt } from "@/config/i18n";
+import { Entry, extra_entry_num, weaponExtraEntry, armorExtraEntry, neckExtraEntry, ringExtraEntry, jewelryExtraEntry, pantsExtraEntry, shoesExtraEntry, bracersExtraEntry } from "@/config";
+import { replace } from "@/tool";
+import { useI18n } from "vue3-i18n";
+
+const { t } = useI18n();
+const { state, commit, dispatch } = useStore();
+const reforgeFlag = ref(false);
+const reforgeing = ref(false);
+const reforgeNeed = computed(() => {
+    const equip = prop.equip;
+    if (!equip) {
+        return 0;
+    }
+    return Math.round(equip.lv * equip.quality.qualityCoefficient * (200 + 10 * equip.lv) / 6);
+})
+const useCoins = computed(() => {
+    return state.playerAttribute.coins;
+})
+const height = computed(() => {
+    if (prop.equip) {
+        return prop.equip.extraEntry.length * 2.5 + 'rem';
+    }
+    return '1rem';
+})
+const tempEntry = ref<Entry[] | null>();
+const tempId = ref();
+
+const prop = defineProps({
+    equip: {
+        type: Object,
+        default: null
+    }
+});
+watch(() => prop.equip, (n) => {
+    tempEntry.value = null;
+})
+
+const reforger = {
+    weapon: weaponExtraEntry,
+    armor: armorExtraEntry,
+    neck: neckExtraEntry,
+    ring: ringExtraEntry,
+    jewelry: jewelryExtraEntry,
+    pants: pantsExtraEntry,
+    shoes: shoesExtraEntry,
+    bracers: bracersExtraEntry,
+}
+const reforge = () => {
+    if (useCoins.value < reforgeNeed.value) {
+        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
+        return
+    }
+    const equip = prop.equip;
+    const quality = equip.quality.quality;
+    const extraQuality = equip.quality.extraQuality;
+    const extraEntryNum = extra_entry_num[quality];
+    const extraEntry = new Array();
+    for (let i = 0; i < extraEntryNum; i++) {
+        const entry = reforger[equip.type](quality, equip.lv, extraQuality);
+        extraEntry.push(entry);
+    }
+    commit("add_player_coins", -1 * reforgeNeed.value);
+    tempId.value = equip.id;
+    tempEntry.value = extraEntry;
+    reforgeing.value = true;
+}
+
+const saveOld = () => {
+    tempEntry.value = null;
+}
+const saveNew = () => {
+    if (!tempEntry.value) {
+        return;
+    }
+    prop.equip.extraEntry = tempEntry.value;
+    tempEntry.value = null;
+}
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.extraEntry {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    padding-left: 1.2rem;
+    padding-bottom: 0.6rem;
+    height: v-bind('height');
+    cursor: pointer;
+
+    div {
+        display: flex;
+        justify-content: center;
+
+        &>div {
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+    .button {
+        border: 0;
+        width: 80%;
+    }
+
+
+}
+
+.reforge-tip {
+    width: 100%;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    height: v-bind('height');
+    color: #68d5ed;
+}
+
+.red {
+    color: red !important;
+}
+
+.btn-group {
+    margin-bottom: 0.5rem;
+}
+</style>

src/views/backpack/strengthen.vue

@@ -49,24 +49,7 @@
             <p>{{ t('stren.5') }}...</p>
             <button class="button" @click="stopAuto">{{ t('stren.6') }}</button>
         </div>
-        <Tooltip :infos="[t('reforgeDesc.1'), t('reforgeDesc.2')]" width="8rem">
+        <Reforge :equip="equip" />
-            <div class="descript">- {{ t('reforgeDesc.0') }} -</div>
-        </Tooltip>
-
-        <div class="extraEntry" @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;"
-            @click="reforge">
-            <div class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.id"
-                v-if="!reforgeFlag || reforgeing">
-                <button class="button">
-                    <div>
-                        {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
-                    </div>
-                </button>
-            </div>
-            <div :class="['extraEntry-item', useCoins < reforgeNeed ? 'red' : '']" v-if="reforgeFlag && !reforgeing">
-                点击花费{{ reforgeNeed }}金币重铸
-            </div>
-        </div>
     </div>
 </template>
 
@@ -75,30 +58,18 @@ import { useStore } from "vuex";
 import { reactive, onMounted, ref, computed, watch } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, EquipIcon } from "@/components"
-import { strengthenValue, strengthenCoins } from "@/tool"
+import { strengthenValue, strengthenCoins, replace } from "@/tool"
-import { extra_entry_num, weaponExtraEntry, armorExtraEntry, neckExtraEntry, ringExtraEntry, strengthen_rates, jewelryExtraEntry, pantsExtraEntry, shoesExtraEntry, bracersExtraEntry } from "@/config";
+import { extra_entry_num, weaponExtraEntry, armorExtraEntry, neckExtraEntry, ringExtraEntry, strengthen_rates, jewelryExtraEntry, pantsExtraEntry, shoesExtraEntry, bracersExtraEntry, Entry } from "@/config";
+import { createt } from "@/config/i18n";
+import Reforge from "./reforge.vue";
 
+const mt = createt('backpack.');
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 const auto = ref(false);
 const autoLv = ref(12);
-const reforgeFlag = ref(false);
-const reforgeing = ref(false);
 const testFlag = ref(false);
 const testResult = ref(0);
-const height = computed(() => {
-    if (prop.equip) {
-        return prop.equip.extraEntry.length * 2.5 + 'rem';
-    }
-    return '1rem';
-})
-const reforgeNeed = computed(() => {
-    const equip = prop.equip;
-    if (!equip) {
-        return 0;
-    }
-    return Math.round(equip.lv * equip.quality.qualityCoefficient * (200 + 10 * equip.lv) / 6);
-})
 
 const prop = defineProps({
     equip: {
@@ -150,36 +121,6 @@ const stopAuto = () => {
     auto.value = false;
 };
 
-const reforger = {
-    weapon: weaponExtraEntry,
-    armor: armorExtraEntry,
-    neck: neckExtraEntry,
-    ring: ringExtraEntry,
-    jewelry: jewelryExtraEntry,
-    pants: pantsExtraEntry,
-    shoes: shoesExtraEntry,
-    bracers: bracersExtraEntry,
-}
-
-const reforge = () => {
-    if (useCoins.value < reforgeNeed.value) {
-        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
-        return
-    }
-    const equip = prop.equip;
-    const quality = equip.quality.quality;
-    const extraQuality = equip.quality.extraQuality;
-    const extraEntryNum = extra_entry_num[quality];
-    const extraEntry = new Array();
-    for (let i = 0; i < extraEntryNum; i++) {
-        const entry = reforger[equip.type](quality, equip.lv, extraQuality);
-        extraEntry.push(entry);
-    }
-    commit("add_player_coins", -1 * reforgeNeed.value);
-    equip.extraEntry = extraEntry;
-    reforgeing.value = true;
-}
-
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
@@ -259,43 +200,6 @@ onMounted(() => { });
     }
 }
 
-.extraEntry {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    padding-left: 1.2rem;
-    padding-bottom: 0.6rem;
-    color: #68d5ed;
-    height: v-bind('height');
-    cursor: pointer;
-
-    div {
-        display: flex;
-        justify-content: center;
-
-        &>div {
-            display: flex;
-            justify-content: center;
-        }
-    }
-
-    .button {
-        border: 0;
-        width: 80%;
-    }
-
-    .reforge-tip {
-        height: 100%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .red {
-        color: red;
-    }
-}
-
 @media only screen and (max-width: 768px) {
     .strengthen {
         width: 23rem;