装备栏、技能栏

2025-03-15 11:13:34 +08:00
parent 5d5dc59526
commit 8be0aa2a5a
83 changed files with 353 additions and 60 deletions
@@ -0,0 +1,92 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
+<template>
+  <div>
+    <div class="flex gao-10px">
+    <!-- 套装选择tab -->
+    <div class="flex flex-wrap w-300px">
+      <template v-for="(suit, _) in suits" :key="_">
+        <div class="flex items-center justify-center">
+          <img
+            class="w-40px h-40px object-contain"
+            :src="getImageURL('equipment' + suit.imageUrl)"
+            :alt="suit.name"
+            :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
+            @click="curSuit = suit.value"
+          />
+        </div>
+      </template>
+    </div>
+    <EquipmentRaritySelect v-model="curRarity" />
+    </div>
+
+    <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(equip,_) in suitEquipments" :key="_">
+      <EquipmentIcon :equipment="equip" />
+    </template>
+  </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type'
+import { useInfoStore } from '@/stores'
+import { getImageURL } from '@/utils/images'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+import EquipmentRaritySelect from '@/components/dnf/Equipment/RaritySelect/index.vue'
+const infoStore = useInfoStore()
+const curSuit = ref(16201)
+
+const curRarity = ref()
+
+const props = defineProps<{
+  rowCount?:number
+}>()
+
+const rowCount = Math.max(props.rowCount ?? 0, 14)
+
+const suits = computed(() => {
+  const uniqueSuits = new Map<number, { name: string; value: number; imageUrl: string }>()
+  infoStore.suits.forEach((a) => {
+    if (!uniqueSuits.has(a.suitId)) {
+      uniqueSuits.set(a.suitId, { name: a.name, value: a.suitId, imageUrl: a.imageUrl })
+    }
+  })
+  return Array.from(uniqueSuits.values())
+})
+
+const suitEquipments = computed(() => {
+  const equs =  infoStore.equips.filter((a) => a.suit.includes(curSuit.value) && a.suit.length === 1)
+
+  const res: (IEquipment | undefined)[] = []
+  const raritiyList = ['神器','传说','史诗']
+  raritiyList.forEach((rarity) => {
+    const equ : (IEquipment | undefined)[]  = equs.filter((a) => a.rarity === rarity && !a.name.includes('黑牙'))
+    equ.splice(5,0,undefined)
+    equ.splice(9,0,undefined)
+    res.push(
+      ...equ,
+      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
+    )
+  })
+  const remind = equs.filter(a=>a.rarity == '太初' || a.name.includes('黑牙')).sort((a,b)=>(a.rarity == '太初' ? 1 : 0) - (b.rarity == '太初' ? 1 : 0))
+  res.push(undefined,undefined,...remind.filter(a=>a.itemDetailType == '项链'),undefined,...remind.filter(a=>a.itemDetailType == '手镯'),undefined,...remind.filter(a=>a.itemDetailType == '戒指'),...Array(Math.max(0,rowCount - remind.length -4)).fill(undefined))
+  return res
+  // const raritiyList = [['神器'],['传说'],['史诗','太初']]
+  // const partList = ['上衣','下装','头肩','腰带','鞋','项链','手镯','辅助装备','魔法石','耳环']
+  // // 一个品质占3行
+  // // 第一行 防具5+空+特殊3
+  // // 第二行 首饰3+3+3
+  // // 第三行 全空行
+  // partList.forEach((part) => {
+  //   const equ = equs.filter((a) => a.itemDetailType === part)
+  //   res.push(
+  //     ...equ,
+  //     ...Array(rowCount - equ.length).fill(undefined),
+  //   )
+  // })
+  // return res
+})
+
+
+</script>
@@ -0,0 +1,41 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
+<template>
+  <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(equ,_) in equs" :key="_">
+        <EquipmentIcon :equipment="equ" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type'
+import { 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 equs = computed(() => {
+  const items = infoStore.equips.filter(
+    (equip) => equip.categorize === '通宝装备' || equip.categorize === '稀有装备 套装',
+  )
+  const res: (IEquipment | undefined)[] = []
+  const raritiyList = ['稀有','神器','传说','史诗']
+  raritiyList.forEach((rarity) => {
+    const equ : (IEquipment | undefined)[]  = items.filter((a) => a.rarity === rarity)
+    equ.splice(5,0,undefined)
+    equ.splice(9,0,undefined)
+    res.push(
+      ...equ,
+      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
+    )
+  })
+  return res
+})
+</script>
@@ -1,18 +1,41 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
 <template>
-  <div class="flex flex-wrap gap-2px">
-    <template v-for="weapon in weapons" :key="weapon.id">
-      <div class="w-34px h-34px bg-#2c2d2c rounded-2px flex flex-col items-center">
-        <img class="w-30px h-30px" :src="getImageURL('equipment/'+weapon.imageUrl)" :alt="weapon.name" />
-      </div>
+  <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(weapon,_) in weapons" :key="_">
+        <EquipmentIcon :equipment="weapon" />
    </template>
  </div>
 </template>

 <script lang="ts" setup>
-import { useInfoStore } from '@/stores';
-import { getImageURL } from '@/utils/images';
+import type { IEquipment } from '@/api/info/type'
+import { 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 weapons = computed(()=>infoStore.equips.filter((equip) => equip.itemType === '武器' && infoStore.infos?.weapons.includes(equip.itemDetailType)))
+const weapons = computed(() => {
+  const items = infoStore.equips.filter(
+    (equip) => equip.itemType === '武器' && infoStore.infos?.weapons.includes(equip.itemDetailType),
+  )
+  const res: (IEquipment | undefined)[] = []
+  Array.from(new Set(items.map((item) => item.itemDetailType))).forEach((type) => {
+    const weapon = items.filter((item) => item.itemDetailType === type)
+    res.push(
+      ...weapon.filter((item) => item.categorize === '制式武器'),
+      undefined,
+      ...weapon.filter((item) => item.categorize === '传世武器'),
+    )
+    const remind = rowCount - res.length % rowCount
+    res.push(...Array(remind).fill(undefined))
+  })
+  return res
+})
 </script>
@@ -2,7 +2,12 @@
  <div class="w-100% h-100% main" :class="props.alter.split('.').slice(-1)">
    <div class="header"></div>
    <div class="content flex">
-      <Weapon></Weapon>
+      <div class="flex flex-col gap-20px">
+        <Weapon ></Weapon>
+        <Suit></Suit>
+        <Universal></Universal>
+      </div>
+
      <div class="h-90vh w-560px overflow-y-auto overflow-x-hidden">

      <SkillTree></SkillTree>
@@ -18,7 +23,9 @@
 import { useInfoStore } from '@/stores/info'
 import { getImageURL } from '@/utils/images'
 import SkillTree from './Skill/SkillTree.vue';
+import Suit from './Equipment/Suit.vue';
 import Weapon from './Equipment/Weapon.vue';
+import Universal from './Equipment/Universal.vue';
 const props = defineProps<{
  alter: string
 }>()