dev
This commit is contained in:
@@ -1,60 +0,0 @@
|
||||
`<!-- 每排总计6+4+4,共计14个排列 -->
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
|
||||
<template v-for="(equip, _) in equs" :key="_">
|
||||
<EquipmentIcon
|
||||
:inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id"
|
||||
:equipment="equip"
|
||||
@click="configStore.chooseEqu(equip, true)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup StoneUniversal>
|
||||
import type { IEquipment } from '@/api/info/type'
|
||||
import { useConfigStore, useInfoStore } from '@/stores'
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
rowCount?: number
|
||||
}>()
|
||||
|
||||
const rowCount = Math.max(props.rowCount ?? 0, 14)
|
||||
const infoStore = useInfoStore()
|
||||
const configStore = useConfigStore()
|
||||
|
||||
const equs = computed(() => {
|
||||
const items = infoStore.stones.filter((equip) => equip.categorize.includes('神界'))
|
||||
const res: (IEquipment | undefined)[] = []
|
||||
res.push(
|
||||
...items.filter((a) => a.rarity === '太初'),
|
||||
...Array(Math.max(0, rowCount - items.filter((a) => a.rarity === '太初').length)).fill(
|
||||
undefined,
|
||||
),
|
||||
)
|
||||
|
||||
;['手镯', '项链', '戒指', '', '辅助装备', '魔法石', '耳环', ''].forEach((cat) => {
|
||||
const equ: (IEquipment | undefined)[] = items.filter(
|
||||
(a) => a.rarity === '史诗' && a.itemDetailType == cat,
|
||||
)
|
||||
res.push(...equ, ...Array(Math.max(0, 7 - equ.length)).fill(undefined))
|
||||
})
|
||||
|
||||
// const categorize = Array.from(new Set(items.map((item) => item.categorize)))
|
||||
// raritiyList.forEach((rarity) => {
|
||||
// categorize.forEach((cat) => {
|
||||
// const equ : (IEquipment | undefined)[] = items.filter((a) => a.rarity === rarity && a.categorize === cat)
|
||||
// equ.splice(5,0,undefined)
|
||||
// res.push(
|
||||
// ...equ,
|
||||
// ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
|
||||
// )
|
||||
// })
|
||||
// })
|
||||
return res
|
||||
})
|
||||
</script>
|
||||
`
|
||||
@@ -15,7 +15,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { IEquipment } from '@/api/info/type'
|
||||
import { useConfigStore, useInfoStore } from '@/stores'
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -126,7 +126,7 @@ import PartSelect from '@/components/dnf/Equipment/PartSelect/index.vue'
|
||||
import EquipmentRaritySelect from '@/components/dnf/Equipment/RaritySelect/index.vue'
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import { rarityClass } from '@/utils'
|
||||
import type { IEquipment, IOathInfo } from '@/api/info/type'
|
||||
import type { IEquipment } from '@/api/info/type'
|
||||
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
|
||||
import Info from '@/components/dnf/Equipment/Info/index.vue'
|
||||
import SuitInfo from '@/components/dnf/Equipment/SuitInfo/index.vue'
|
||||
@@ -259,7 +259,7 @@ const equs = computed(() => {
|
||||
)
|
||||
} else {
|
||||
return formatOath(
|
||||
total as unknown as IOathInfo[],
|
||||
total as unknown as IEquipment[],
|
||||
suitList.value.find((a) => a.value == curSuit.value),
|
||||
)
|
||||
}
|
||||
@@ -275,7 +275,7 @@ const isActive = computed(() => {
|
||||
return configStore.config.equips[item.itemDetailType].id == item.id
|
||||
}
|
||||
} else {
|
||||
// return configStore.config.equips[item.itemDetailType].fusion == item.id
|
||||
return configStore.config.oaths[item.oathPos].id == item.id
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -288,8 +288,8 @@ const chooseEqu = (item?: IEquipment) => {
|
||||
? configStore.config.equips[
|
||||
item.itemType.includes('武器') ? item.itemType : item.itemDetailType
|
||||
]
|
||||
: configStore.config.equips[item.itemDetailType]
|
||||
target[type.value === 'equ' ? 'id' : 'fusion'] = isActive.value(item) ? '' : item.id
|
||||
: configStore.config.oaths[item.oathPos]
|
||||
target['id'] = isActive.value(item) ? '' : item.id
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { IEquipment, IOathInfo } from '@/api/info/type'
|
||||
import type { IEquipment } from '@/api/info/type'
|
||||
|
||||
export const rowCount = 10
|
||||
|
||||
@@ -293,7 +293,7 @@ export const formatStone = (total: IEquipment[], curSuit?: string) => {
|
||||
}
|
||||
|
||||
export const formatOath = (
|
||||
total: IOathInfo[],
|
||||
total: IEquipment[],
|
||||
curSuit?: { name: string; value: number; imageUrl: string },
|
||||
) => {
|
||||
// oath
|
||||
@@ -303,7 +303,7 @@ export const formatOath = (
|
||||
const primer = []
|
||||
const primerItem = total.filter((equip) => equip.itemDetailType == '星蕴石')
|
||||
for (let i = 0; i < 11; i++) {
|
||||
const temp = primerItem.filter((a) => a.position.includes(i.toString()))
|
||||
const temp = primerItem.filter((a) => a.oathPos == i.toString())
|
||||
primer.push(
|
||||
...temp,
|
||||
...Array(temp.length == 0 ? rowCount : rowCount - (temp.length % rowCount)).fill(undefined),
|
||||
|
||||
@@ -5,14 +5,12 @@ import { useInfoStore, useConfigStore } from '@/stores'
|
||||
import ClothList from '@/components/dnf/Avatar/List/index.vue'
|
||||
export default defineComponent({
|
||||
name: 'Clothes',
|
||||
setup(props) {
|
||||
setup() {
|
||||
const configStore = useConfigStore()
|
||||
const part = ref('武器装扮')
|
||||
|
||||
// const globalStore = useGlobalStore()
|
||||
|
||||
/** 是否有徽章 */
|
||||
const has_socket = computed(() => ['武器装扮', '光环', '皮肤'].includes(part.value as string))
|
||||
const basicInfoStore = useInfoStore()
|
||||
const has_enchant = computed(() => {
|
||||
return !['头部', '帽子', '脸部', '胸部', '上衣', '腰带', '下装', '鞋'].includes(
|
||||
@@ -26,9 +24,9 @@ export default defineComponent({
|
||||
.sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0))
|
||||
})
|
||||
|
||||
const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
|
||||
return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
|
||||
})
|
||||
// const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
|
||||
// return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
|
||||
// })
|
||||
|
||||
const currentInfo = function <T>(name: string, defaultValue?: T) {
|
||||
return computed<string | number>({
|
||||
@@ -36,7 +34,7 @@ export default defineComponent({
|
||||
let key: 'avatar' | 'equips' = 'avatar'
|
||||
if (part.value == '宠物') key = 'equips'
|
||||
return (
|
||||
(configStore.config[key]?.[part.value] as Record<string, any>)?.[name] ??
|
||||
(configStore.config[key]?.[part.value] as Record<string, string | number>)?.[name] ??
|
||||
defaultValue ??
|
||||
0
|
||||
)
|
||||
@@ -48,10 +46,13 @@ export default defineComponent({
|
||||
let key: 'avatar' | 'equips' = 'avatar'
|
||||
if (part.value == '宠物') key = 'equips'
|
||||
if (!configStore.config[key][part.value]) {
|
||||
configStore.config[key][part.value] = key === 'avatar' ? { ...configStore.defaultAvatarConfig } : { ...configStore.defaultEqusConfig }
|
||||
configStore.config[key][part.value] =
|
||||
key === 'avatar'
|
||||
? { ...configStore.defaultAvatarConfig }
|
||||
: { ...configStore.defaultEqusConfig }
|
||||
}
|
||||
if (configStore.config[key][part.value]) {
|
||||
;(configStore.config[key][part.value] as Record<string, any>)[name] = val
|
||||
;(configStore.config[key][part.value] as Record<string, string | number>)[name] = val
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -60,11 +61,11 @@ export default defineComponent({
|
||||
// 附魔
|
||||
const enchant = currentInfo<string | number>('enchant')
|
||||
|
||||
// 镶嵌栏1
|
||||
const emblem_0 = currentInfo<string | number>('emblem_0', 0)
|
||||
// // 镶嵌栏1
|
||||
// const emblem_0 = currentInfo<string | number>('emblem_0', 0)
|
||||
|
||||
// 镶嵌栏2
|
||||
const emblem_1 = currentInfo<string | number>('emblem_1')
|
||||
// // 镶嵌栏2
|
||||
// const emblem_1 = currentInfo<string | number>('emblem_1')
|
||||
|
||||
// 品级
|
||||
const id = currentInfo<string | number>('id')
|
||||
@@ -76,9 +77,9 @@ export default defineComponent({
|
||||
* 同步徽章1到徽章2
|
||||
* @param val
|
||||
*/
|
||||
function changeSocket(val: number) {
|
||||
emblem_1.value = val
|
||||
}
|
||||
// function changeSocket(val: number) {
|
||||
// emblem_1.value = val
|
||||
// }
|
||||
|
||||
return () => {
|
||||
return (
|
||||
@@ -127,33 +128,6 @@ export default defineComponent({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{has_socket.value ? (
|
||||
<div class="equ-profile-item">
|
||||
<div class="row-name">徽章</div>
|
||||
<calc-select
|
||||
onChange={changeSocket}
|
||||
v-model={emblem_0.value}
|
||||
class="flex-1 !h-20px"
|
||||
>
|
||||
<calc-option value={0}>无</calc-option>
|
||||
{renderList(emblem_list.value ?? [], (item) => (
|
||||
<calc-option
|
||||
value={item.id}
|
||||
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
|
||||
))}
|
||||
</calc-select>
|
||||
<calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
|
||||
<calc-option value={0}>无</calc-option>
|
||||
{renderList(emblem_list.value ?? [], (item) => (
|
||||
<calc-option
|
||||
value={item.id}
|
||||
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
|
||||
))}
|
||||
</calc-select>
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Emblems"></script>
|
||||
@@ -6,7 +6,7 @@ import EquList from '@/components/dnf/Equipment/List/index.vue'
|
||||
import { getImageURL } from '@/utils/images'
|
||||
export default defineComponent({
|
||||
name: 'Equip',
|
||||
setup(props) {
|
||||
setup() {
|
||||
const configStore = useConfigStore()
|
||||
const part = ref('头肩')
|
||||
const can_upgrade = computed(() => {
|
||||
@@ -15,14 +15,6 @@ export default defineComponent({
|
||||
|
||||
// const globalStore = useGlobalStore()
|
||||
|
||||
/** 是否有徽章 */
|
||||
const has_socket = computed(
|
||||
() => !['称号', '宠物', '耳环', '武器'].includes(part.value as string),
|
||||
)
|
||||
/** 是否有右侧徽章 */
|
||||
const has_emblem_1 = computed(
|
||||
() => has_socket.value && !['辅助装备', '魔法石'].includes(part.value as string),
|
||||
)
|
||||
/** 是否可以设置秘宝精度 */
|
||||
const can_set_secret = computed(() => {
|
||||
return ['武器', '辅助装备', '魔法石', '耳环'].includes(part.value as string)
|
||||
@@ -40,9 +32,9 @@ export default defineComponent({
|
||||
.sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0))
|
||||
})
|
||||
|
||||
const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
|
||||
return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
|
||||
})
|
||||
// const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
|
||||
// return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
|
||||
// })
|
||||
|
||||
const global_change = ref(false)
|
||||
|
||||
@@ -50,6 +42,7 @@ export default defineComponent({
|
||||
return computed<string | number>({
|
||||
get() {
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(configStore.config.equips?.[part.value] as Record<string, any>)?.[name] ??
|
||||
defaultValue ??
|
||||
0
|
||||
@@ -59,10 +52,10 @@ export default defineComponent({
|
||||
if (val == undefined && name !== 'weaponFusion') {
|
||||
return
|
||||
}
|
||||
if (name == 'emblem_1' && !has_emblem_1.value) {
|
||||
// configStore.setForge(part.value, name, 0)
|
||||
return
|
||||
}
|
||||
// if (name == 'emblem_1' && !has_emblem_1.value) {
|
||||
// // configStore.setForge(part.value, name, 0)
|
||||
// return
|
||||
// }
|
||||
|
||||
let parts: string[] = []
|
||||
|
||||
@@ -75,16 +68,16 @@ export default defineComponent({
|
||||
parts = enchant.position
|
||||
}
|
||||
}
|
||||
if (['emblem_0', 'emblem_1'].includes(name)) {
|
||||
const emblem = basicInfoStore?.emblems?.find(
|
||||
(item) => item.id.toString() == val.toString(),
|
||||
) as IEnchantingInfo | undefined
|
||||
if (emblem?.position) {
|
||||
parts = emblem.position.filter(
|
||||
(item) => !['皮肤', '武器装扮', '光环'].includes(item),
|
||||
)
|
||||
}
|
||||
}
|
||||
// if (['emblem_0', 'emblem_1'].includes(name)) {
|
||||
// const emblem = basicInfoStore?.emblems?.find(
|
||||
// (item) => item.id.toString() == val.toString(),
|
||||
// ) as IEnchantingInfo | undefined
|
||||
// if (emblem?.position) {
|
||||
// parts = emblem.position.filter(
|
||||
// (item) => !['皮肤', '武器装扮', '光环'].includes(item),
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
if (['reinforceType', 'reinforce', 'adaptation'].includes(name)) {
|
||||
parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
|
||||
}
|
||||
@@ -96,6 +89,7 @@ export default defineComponent({
|
||||
configStore.config.equips[part] = { ...configStore.defaultEqusConfig }
|
||||
}
|
||||
if (configStore.config.equips[part]) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
;(configStore.config.equips[part] as Record<string, any>)[name] = val
|
||||
}
|
||||
}
|
||||
@@ -106,11 +100,11 @@ export default defineComponent({
|
||||
// 附魔
|
||||
const enchant = currentInfo<string | number>('enchant')
|
||||
|
||||
// 镶嵌栏1
|
||||
const emblem_0 = currentInfo<string | number>('emblem_0', 0)
|
||||
// // 镶嵌栏1
|
||||
// const emblem_0 = currentInfo<string | number>('emblem_0', 0)
|
||||
|
||||
// 镶嵌栏2
|
||||
const emblem_1 = currentInfo<string | number>('emblem_1')
|
||||
// // 镶嵌栏2
|
||||
// const emblem_1 = currentInfo<string | number>('emblem_1')
|
||||
|
||||
// 增幅
|
||||
const reinforce_type = currentInfo<string | number>('reinforceType', 1)
|
||||
@@ -133,11 +127,11 @@ export default defineComponent({
|
||||
* 同步徽章1到徽章2
|
||||
* @param val
|
||||
*/
|
||||
function changeSocket(val: number) {
|
||||
if (has_emblem_1.value) {
|
||||
emblem_1.value = val
|
||||
}
|
||||
}
|
||||
// function changeSocket(val: number) {
|
||||
// if (has_emblem_1.value) {
|
||||
// emblem_1.value = val
|
||||
// }
|
||||
// }
|
||||
|
||||
const setWeaponFusion = (val: number) => {
|
||||
if (val == weaponFusion.value) {
|
||||
@@ -240,37 +234,6 @@ export default defineComponent({
|
||||
))}
|
||||
</calc-select>
|
||||
</div>
|
||||
{has_socket.value ? (
|
||||
<div class="equ-profile-item">
|
||||
<div class="row-name">徽章</div>
|
||||
<calc-select
|
||||
onChange={changeSocket}
|
||||
v-model={emblem_0.value}
|
||||
class="flex-1 !h-20px"
|
||||
>
|
||||
<calc-option value={''}>无</calc-option>
|
||||
{renderList(emblem_list.value ?? [], (item) => (
|
||||
<calc-option
|
||||
value={item.id}
|
||||
key={item.id}
|
||||
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
|
||||
))}
|
||||
</calc-select>
|
||||
{has_emblem_1.value && (
|
||||
<calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
|
||||
<calc-option value={''}>无</calc-option>
|
||||
{renderList(emblem_list.value ?? [], (item) => (
|
||||
<calc-option
|
||||
value={item.id}
|
||||
key={item.id}
|
||||
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
|
||||
))}
|
||||
</calc-select>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
|
||||
{can_upgrade.value ? (
|
||||
<div class="equ-profile-item">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="flex gap-2 mt-5px">
|
||||
<calc-select class="flex-1 !h-20px" v-model="configStore.config.jades[key].id">
|
||||
<calc-option :value="0">无</calc-option>
|
||||
<calc-option v-for="(item, index) in infoStore.jades" :key="item.id" :value="item.id">
|
||||
<calc-option v-for="item in infoStore.jades" :key="item.id" :value="item.id">
|
||||
{{ item.name }}
|
||||
</calc-option>
|
||||
</calc-select>
|
||||
@@ -17,7 +17,7 @@
|
||||
></calc-slider> -->
|
||||
<calc-select class="flex-1 !h-20px" v-model="configStore.config.jades[key].value">
|
||||
<calc-option
|
||||
v-for="(item, index) in valueList(configStore.config.jades[key].id)"
|
||||
v-for="item in valueList(configStore.config.jades[key].id)"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
@@ -38,26 +38,25 @@ import { getFloat } from '@/utils'
|
||||
const configStore = useConfigStore()
|
||||
const infoStore = useInfoStore()
|
||||
|
||||
const currentJade = computed(() => {
|
||||
return function (id: number = -1) {
|
||||
if (id == -1) {
|
||||
return undefined
|
||||
} else {
|
||||
const res = []
|
||||
const cur = infoStore.jades?.find((e) => e.id == id) as IJade
|
||||
return cur
|
||||
}
|
||||
}
|
||||
})
|
||||
// const currentJade = computed(() => {
|
||||
// return function (id: number = -1) {
|
||||
// if (id == -1) {
|
||||
// return undefined
|
||||
// } else {
|
||||
// const cur = infoStore.jades?.find((e) => e.id == id) as IJade
|
||||
// return cur
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
const formatValue = (id: number) => {
|
||||
return (value: number) => {
|
||||
if (currentJade.value(id)?.unit.includes('等级')) {
|
||||
return `$等级 +${value}`
|
||||
}
|
||||
return `${getFloat(value, 1)}${currentJade.value(id)?.unit}`
|
||||
}
|
||||
}
|
||||
// const formatValue = (id: number) => {
|
||||
// return (value: number) => {
|
||||
// if (currentJade.value(id)?.unit.includes('等级')) {
|
||||
// return `$等级 +${value}`
|
||||
// }
|
||||
// return `${getFloat(value, 1)}${currentJade.value(id)?.unit}`
|
||||
// }
|
||||
// }
|
||||
|
||||
const valueList = computed(() => {
|
||||
return function (id: number = -1) {
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="h-150px flex justify-center items-center">
|
||||
<Oath v-model:part="part" :withBg="false" />
|
||||
</div>
|
||||
<div class="flex flex-wrap equ-profile">
|
||||
<div class="equ-profile-item">
|
||||
<div class="mr-10px row-name">当前部位</div>
|
||||
<span>{{ part == '11' ? '誓约' : `星蕴石-${parseInt(part) + 1}` }}</span>
|
||||
<calc-checkbox
|
||||
style="margin-left: auto"
|
||||
v-model="global_change"
|
||||
label="全局修改"
|
||||
></calc-checkbox>
|
||||
</div>
|
||||
<div class="equ-profile-item">
|
||||
<div class="row-name">调适</div>
|
||||
<calc-select v-model="adaptation" class="flex-1 !h-20px">
|
||||
<template v-for="i in Array.from({ length: 4 }, (_, i) => i)" :key="i">
|
||||
<calc-option :value="i">{{ i }}</calc-option>
|
||||
</template>
|
||||
</calc-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Oaths">
|
||||
import Oath from '@/components/dnf/Equipment/Oath/index.vue'
|
||||
import { useConfigStore, useInfoStore } from '@/stores'
|
||||
|
||||
const part = ref('0')
|
||||
|
||||
const global_change = ref(false)
|
||||
|
||||
const configStore = useConfigStore()
|
||||
|
||||
const infoStore = useInfoStore()
|
||||
|
||||
const currentInfo = function <T>(name: string, defaultValue?: T) {
|
||||
return computed<string | number>({
|
||||
get() {
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(configStore.config.oaths?.[part.value] as Record<string, any>)?.[name] ?? defaultValue ?? 0
|
||||
)
|
||||
},
|
||||
set(val) {
|
||||
if (val == undefined) {
|
||||
return
|
||||
}
|
||||
// if (name == 'emblem_1' && !has_emblem_1.value) {
|
||||
// // configStore.setForge(part.value, name, 0)
|
||||
// return
|
||||
// }
|
||||
|
||||
let parts: string[] = []
|
||||
|
||||
if (global_change.value) {
|
||||
parts = infoStore.oathParts
|
||||
} else {
|
||||
parts = [part.value]
|
||||
}
|
||||
for (const part of parts) {
|
||||
if (!configStore.config.oaths[part]) {
|
||||
configStore.config.oaths[part] = { ...configStore.defaultOathConfig }
|
||||
}
|
||||
if (configStore.config.oaths[part]) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
;(configStore.config.oaths[part] as Record<string, any>)[name] = val
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 调适
|
||||
const adaptation = currentInfo<string | number>('adaptation')
|
||||
</script>
|
||||
@@ -12,7 +12,7 @@
|
||||
class="flex-1 !h-20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="equ-profile-item">
|
||||
<!-- <div class="equ-profile-item">
|
||||
<div class="row-name">勋章</div>
|
||||
<calc-select
|
||||
v-for="(key, index) in ['medal_rarity', 'medal_reinforce']"
|
||||
@@ -37,7 +37,7 @@
|
||||
{{ item.name }}
|
||||
</calc-option>
|
||||
</calc-select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="equ-profile-item">
|
||||
<div class="row-name">冒险团</div>
|
||||
<calc-slider
|
||||
|
||||
@@ -2,11 +2,15 @@
|
||||
<div class="w-420px overflow-auto">
|
||||
<calc-collapse class="w-100%" title="装备/时装打造(点击部位切换)">
|
||||
<calc-tabs v-model="partTab" class="!mb-2">
|
||||
<calc-tab :value="0">装备栏</calc-tab>
|
||||
<calc-tab :value="1">时装栏</calc-tab>
|
||||
<calc-tab :value="0">装备</calc-tab>
|
||||
<calc-tab :value="2">誓约</calc-tab>
|
||||
<calc-tab :value="1">时装</calc-tab>
|
||||
<calc-tab :value="3">徽章</calc-tab>
|
||||
</calc-tabs>
|
||||
<equipment v-if="partTab === 0"></equipment>
|
||||
<clothes v-if="partTab === 1"></clothes>
|
||||
<oaths v-if="partTab === 2"></oaths>
|
||||
<emblems v-if="partTab === 3"></emblems>
|
||||
</calc-collapse>
|
||||
<calc-collapse class="w-100%" title="辟邪玉">
|
||||
<jade></jade>
|
||||
@@ -19,6 +23,8 @@
|
||||
<script setup lang="ts">
|
||||
import equipment from './components/Equipments.vue'
|
||||
import clothes from './components/Avatars.vue'
|
||||
import emblems from './components/Emblems.vue'
|
||||
import oaths from './components/Oaths.vue'
|
||||
import jade from './components/Jades.vue'
|
||||
import sundry from './components/Sundry.vue'
|
||||
const partTab = ref(0)
|
||||
|
||||
@@ -5,11 +5,30 @@
|
||||
<calc-button class="flex-1" @click="setStandard">设为基准</calc-button>
|
||||
<calc-button class="flex-1" @click="clearStandard">清空基准</calc-button>
|
||||
</div>
|
||||
<div class="flex bg-#101012 h-40px text-#6C5E4A font-bold z-10">
|
||||
<div
|
||||
class="flex-1 text-15px flex items-center justify-center"
|
||||
@click="chooseCategory('equ')"
|
||||
:class="{ active: type === 'equ' }"
|
||||
>
|
||||
装备
|
||||
</div>
|
||||
<div class="w-auto text-18px flex items-center justify-center !font-normal">|</div>
|
||||
<div
|
||||
class="flex-1 text-15px flex items-center justify-center"
|
||||
@click="chooseCategory('oath')"
|
||||
:class="{ active: type === 'oath' }"
|
||||
>
|
||||
誓约
|
||||
</div>
|
||||
</div>
|
||||
<Info
|
||||
:suits="configStore.result.state.suits"
|
||||
:info="configStore.result.state.info"
|
||||
:equs="configStore.config.equips"
|
||||
:avatar="configStore.config.avatarLink"
|
||||
:oaths="configStore.config.oaths"
|
||||
:display="type"
|
||||
></Info>
|
||||
</div>
|
||||
<Skill
|
||||
@@ -31,10 +50,10 @@ import { useConfigStore, useInfoStore } from '@/stores'
|
||||
import Info from './components/Info.vue'
|
||||
import Skill from './components/Skill.vue'
|
||||
import BufferSkill from './components/BufferSkill.vue'
|
||||
import type { IResultSkill } from '@/api/calc/type'
|
||||
|
||||
const configStore = useConfigStore()
|
||||
const infoStore = useInfoStore()
|
||||
const type = ref<'equ' | 'oath'>('equ')
|
||||
|
||||
const setStandard = () => {
|
||||
if (!configStore?.result?.state?.uuid) return
|
||||
@@ -44,6 +63,45 @@ const setStandard = () => {
|
||||
const clearStandard = () => {
|
||||
infoStore.setStandard(undefined)
|
||||
}
|
||||
|
||||
const chooseCategory = (cat: 'equ' | 'oath') => {
|
||||
type.value = cat
|
||||
console.log(type.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style lang="scss" scoped>
|
||||
.active {
|
||||
color: #ccc088;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 15px;
|
||||
opacity: 0.35;
|
||||
background: #bf8d20;
|
||||
filter: blur(7px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: url('@/assets/img/active.png') no-repeat;
|
||||
width: 148px;
|
||||
height: 16px;
|
||||
bottom: 2px;
|
||||
transform: translate(0, 50%);
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.item-head {
|
||||
background: linear-gradient(#2b2817, #171407);
|
||||
border-top: 1px solid #423d2c;
|
||||
border-bottom: 1px solid #211d15;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
:detail="props.equs"
|
||||
:with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0) > 0"
|
||||
:avatar="props.avatar"
|
||||
v-show="display == 'equ'"
|
||||
></EquList>
|
||||
<Oath :detail="props.oaths" v-show="display == 'oath'"></Oath>
|
||||
</div>
|
||||
<div class="flex flex-wrap border-y-1px my-1px border-y-solid border-#FFFF/10 gap-1% px-1%">
|
||||
<template v-for="info in props.info" :key="info.id">
|
||||
@@ -37,37 +39,71 @@
|
||||
<div class="border-y-1px border-y-solid my-1px border-#FFFF/10">
|
||||
<div class="flex">
|
||||
<div class="flex-1 flex items-center justify-center bg-#221A08 text-#9A7E4A">
|
||||
穿戴装备信息
|
||||
穿戴{{ display == 'equ' ? '装备' : '誓约' }}信息
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="part in partOrder" :key="part">
|
||||
<div class="flex p-2px partItem gap-5px">
|
||||
<img
|
||||
:src="getImageURL(`/equipment/part/${part}.png`)"
|
||||
alt=""
|
||||
class="w-20px h-20px object-contain"
|
||||
/>
|
||||
<div class="flex items-center justify-center" v-if="adaptation(part) > 0">
|
||||
<template v-if="display == 'equ'">
|
||||
<template v-for="part in partOrder" :key="part">
|
||||
<div class="flex p-2px partItem gap-5px">
|
||||
<img
|
||||
:src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
|
||||
:src="getImageURL(`/equipment/part/${part}.png`)"
|
||||
alt=""
|
||||
class="w-11px h-10px object-contain"
|
||||
class="w-20px h-20px object-contain"
|
||||
/>
|
||||
<div class="flex items-center justify-center" v-if="adaptation(part) > 0">
|
||||
<img
|
||||
:src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
|
||||
alt=""
|
||||
class="w-11px h-10px object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-if="props.equs[part]?.reinforce > 0"
|
||||
:class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
|
||||
>
|
||||
+{{ props.equs[part]?.reinforce }}
|
||||
</div>
|
||||
<div class="rare" v-if="props.equs[part]?.refine > 0">
|
||||
({{ props.equs[part]?.refine }})
|
||||
</div>
|
||||
<div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
|
||||
{{ equ(props.equs?.[part]?.id)?.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-if="props.equs[part]?.reinforce > 0"
|
||||
:class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
|
||||
>
|
||||
+{{ props.equs[part]?.reinforce }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-for="part in oathOrder" :key="part">
|
||||
<div class="flex p-2px partItem gap-5px">
|
||||
<img
|
||||
:src="getImageURL(`/equipment/part/${part == '11' ? '誓约' : '星蕴石'}.png`)"
|
||||
alt=""
|
||||
class="w-20px h-20px object-contain"
|
||||
/>
|
||||
<div class="flex items-center justify-center" v-if="adaptation(part) > 0">
|
||||
<img
|
||||
:src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
|
||||
alt=""
|
||||
class="w-11px h-10px object-contain"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="flex items-center"
|
||||
v-if="props.equs[part]?.reinforce > 0"
|
||||
:class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
|
||||
>
|
||||
+{{ props.equs[part]?.reinforce }}
|
||||
</div> -->
|
||||
<!-- <div class="rare" v-if="props.equs[part]?.refine > 0">
|
||||
({{ props.equs[part]?.refine }})
|
||||
</div> -->
|
||||
{{ equ(props.equs?.[part]?.id) }}
|
||||
<div :class="rarityClass(equ(props.oaths?.[part]?.id)?.rarity ?? '')">
|
||||
{{ equ(props.oaths?.[part]?.id)?.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="rare" v-if="props.equs[part]?.refine > 0">
|
||||
({{ props.equs[part]?.refine }})
|
||||
</div>
|
||||
<div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
|
||||
{{ equ(props.equs?.[part]?.id)?.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="h-40px w-full"></div>
|
||||
@@ -79,14 +115,17 @@ import { getImageURL } from '@/utils/images'
|
||||
import { rarityClass } from '@/utils'
|
||||
import type { IResultUserInfo, IResultSuit } from '@/api/calc/type'
|
||||
import EquList from '@/components/dnf/Equipment/List/index.vue'
|
||||
import type { IConfigEquip } from '@/stores/config'
|
||||
import Oath from '@/components/dnf/Equipment/Oath/index.vue'
|
||||
import type { IConfigEquip, IConfigOath } from '@/stores/config'
|
||||
import { useInfoStore } from '@/stores'
|
||||
|
||||
const props = defineProps<{
|
||||
info: IResultUserInfo[]
|
||||
suits: IResultSuit[]
|
||||
equs: Record<string, IConfigEquip>
|
||||
oaths: Record<string, IConfigOath>
|
||||
avatar: string
|
||||
display: 'oath' | 'equ'
|
||||
}>()
|
||||
|
||||
const partOrder = [
|
||||
@@ -103,9 +142,15 @@ const partOrder = [
|
||||
'魔法石',
|
||||
'耳环',
|
||||
]
|
||||
|
||||
const oathOrder = Array.from({ length: 12 }, (_, i) => (11 - i).toString())
|
||||
const infoStore = useInfoStore()
|
||||
|
||||
const equ = (id: string) => {
|
||||
if (props.display == 'oath') {
|
||||
console.log(props.oaths, id)
|
||||
return infoStore.oaths.find((e) => e.id == id)
|
||||
}
|
||||
return infoStore.equips.find((e) => e.id == id)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user