1212121

Web/src/pages/user/equ/index.vue

@@ -1,72 +1,76 @@
 <template>
     <div class="content">
-        手持: <Abutton>[+]</Abutton>
+        手持: <Abutton @click="chooseEqu(1, Hold)">[+]</Abutton>
         <div class="item" v-for="item in Hold">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        副手: <Abutton>[+]</Abutton>
+        副手: <Abutton @click="chooseEqu(2, Vice)">[+]</Abutton>
         <div class="item" v-for="item in Vice">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        头戴: <Abutton>[+]</Abutton>
+        头戴: <Abutton @click="chooseEqu(3, Head)">[+]</Abutton>
         <div class="item" v-for="item in Head">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        身穿: <Abutton>[+]</Abutton>
+        身穿: <Abutton @click="chooseEqu(4, Wear)">[+]</Abutton>
         <div class="item" v-for="item in Wear">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        腰带: <Abutton>[+]</Abutton>
+        腰带: <Abutton @click="chooseEqu(5, Waist)">[+]</Abutton>
         <div class="item" v-for="item in Waist">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        脚穿: <Abutton>[+]</Abutton>
+        脚穿: <Abutton @click="chooseEqu(6, Foot)">[+]</Abutton>
         <div class="item" v-for="item in Foot">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        佩戴: <Abutton>[+]</Abutton>
+        佩戴: <Abutton @click="chooseEqu(7, Ornaments)">[+]</Abutton>
         <div class="item" v-for="item in Ornaments">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        时装: <Abutton>[+]</Abutton>
+        时装: <Abutton @click="chooseEqu(8, Fashion)">[+]</Abutton>
         <div class="item" v-for="item in Fashion">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        羽翼: <Abutton>[+]</Abutton>
+        羽翼: <Abutton @click="chooseEqu(9, Wing)">[+]</Abutton>
         <div class="item" v-for="item in Wing">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
         </div>
     </div>
     <div class="content">
-        装饰: <Abutton>[+]</Abutton>
+        装饰: <Abutton @click="chooseEqu(10, Decorate)">[+]</Abutton>
         <div class="item" v-for="item in Decorate">
-            <Abar :href='"/prop/equ?ue=" + item.ueId'>{{ item.equName }}({{ item.lev }}级)</Abar>[<Abutton
-                @click="DownEqu(item.ueId)">卸下</Abutton>]
+            <GameEqu :equ-data="item" :show-url="true"></GameEqu>[<Abutton
+                @click="DownAndOnEqu(item.ueId, '')">卸下</Abutton>]
+        </div>
+    </div>
+    <div class="content" v-if="suit.length > 0">        
+        <div class="item" v-for="item in suit">
+            套装:<Abar :href='"/user/equ/suit?id=" + item.suitCode'>{{ item.suitName }}</Abar>
         </div>
     </div>
     <div class="content">
@@ -74,6 +78,37 @@
         <Abar href="/">我的圣痕</Abar><br>
         <Abar href="/user/bag">装备物品</Abar>
     </div>
+    <!-- 选择装备 -->
+    <GamePopup v-model:show="showChooseEqu" title="【选择装备】" style="min-width: 60%;">
+        <!-- 自定义内容 -->
+        <div class="content">
+            <div class="mapList" style="max-height: 300px;margin-top: 15px;">
+                <div v-for="(item, index) in equData" :key="index">
+                    {{ index + 1 }}.
+                    <Abutton @click="OnEqu(item.ueId)">
+                        <GameEqu :equ-data="item" :show-url="false"></GameEqu>
+                    </Abutton>
+                </div>
+                <span v-if="equData.length == 0">暂无装备.</span>
+            </div>
+
+        </div>
+    </GamePopup>
+    <GamePopup v-model:show="showChangeEqu" title="【替换装备】" style="min-width: 60%;">
+        <!-- 自定义内容 -->
+        <div class="content">
+            <div class="mapList" style="max-height: 300px;margin-top: 15px;">
+                <div v-for="(item, index) in changeData" :key="index">
+                    {{ index + 1 }}.
+                    <Abutton @click="ChangeEqu(item.ueId)">
+                        <GameEqu :equ-data="item" :show-url="false"></GameEqu>
+                    </Abutton>
+                </div>
+                <span v-if="changeData.length == 0">暂无装备.</span>
+            </div>
+
+        </div>
+    </GamePopup>
 </template>
 <script setup lang="ts">
 definePageMeta({
@@ -81,6 +116,7 @@ definePageMeta({
     middleware: middleware.loading
 })
 const data = ref<Array<any>>([]);
+const suit = ref<Array<any>>([]);
 const Hold = ref<Array<any>>([]);
 const Vice = ref<Array<any>>([]);
 const Head = ref<Array<any>>([]);
@@ -91,12 +127,17 @@ const Ornaments = ref<Array<any>>([]);
 const Fashion = ref<Array<any>>([]);
 const Wing = ref<Array<any>>([]);
 const Decorate = ref<Array<any>>([]);
-
+const showChooseEqu = ref(false);
+const showChangeEqu = ref(false);
+const equData = ref<Array<any>>([]);
+const changeData = ref<Array<any>>([]);
+const onUpEqu = ref('');
 
 const BindData = async (): Promise<void> => {
     let result = await EquService.GetUserOnEqu();
     if (result.code == 0) {
-        data.value = result.data;
+        data.value = result.data.data;
+        suit.value = result.data.suit;
         Hold.value = data.value.filter(it => it.code == 'Hold');
         Vice.value = data.value.filter(it => it.code == 'Vice');
         Head.value = data.value.filter(it => it.code == 'Head');
@@ -106,7 +147,7 @@ const BindData = async (): Promise<void> => {
         Ornaments.value = data.value.filter(it => it.code == 'Ornaments');
         Fashion.value = data.value.filter(it => it.code == 'Fashion');
         Wing.value = data.value.filter(it => it.code == 'Wing');
-        Decorate.value = data.value.filter(it => it.code == 'Decorate');
+        Decorate.value = data.value.filter(it => it.code == 'Decorate');     
     }
     else {
         MessageExtend.ShowDialog("我的装备", result.msg);
@@ -123,8 +164,44 @@ onMounted(async () => {
     }
 })
 
-const DownEqu = async (ueId: string) => {
-    alert(ueId);
+const DownAndOnEqu = async (ueId: string, de: string) => {
+    MessageExtend.LoadingToast("操作中...");
+    let result = await EquService.DownOrUpEqu(ueId, de);
+    MessageExtend.LoadingClose();
+    if (result.code == 0) {
+        await BindData();
+        MessageExtend.Notify(result.msg, "success");
+    }
+    else if (result.code == 100) {
+        onUpEqu.value = ueId;
+        showChangeEqu.value = true;
+    }
+    else {
+        MessageExtend.ShowDialog("穿/卸装备", result.msg);
+    }
 }
 
+
+const chooseEqu = async (type: number, data: Array<any>) => {
+    showChooseEqu.value = true;
+    changeData.value = data;
+    let result = await EquService.GetCanOnEqu(type);
+    if (result.code == 0) {
+        equData.value = result.data;
+    }
+    else {
+        MessageExtend.ShowDialog("装备提示", result.msg);
+    }
+}
+
+const OnEqu = async (ueId: string) => {
+    showChooseEqu.value = false;
+    await DownAndOnEqu(ueId, "");
+}
+const ChangeEqu = async (ueId: string) => {
+    showChangeEqu.value = false;
+    await DownAndOnEqu(onUpEqu.value, ueId);
+}
+
+
 </script>

Web/src/pages/user/equ/suit.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="content">
+        【套装介绍】
+    </div>
+    <div class="content">
+        套装名称：{{ data.suitName }}<br>
+        套装介绍：<span v-html="data.sign"></span><br>
+    </div>
+    <div class="content">
+        ---◈套装部件◈---<br>
+        <div class="item" v-for="item in onEqu">
+            ▸<Abar :href='"/prop/equ?id=" + item.equId'>{{ item.equName }}</Abar>
+        </div>
+    </div>
+    <div class="content">
+        ---◈套装属性◈---<br>
+        <div v-for="item in suitAttr">
+            <div class="content" v-for="attr in item.attrItem">
+                <span>{{ item.type == 0 ? "✧" : "✡" }}</span>
+                <span>{{ attr.tip }}</span>
+            </div>
+        </div>
+    </div>
+     <div class="content">
+        ---◈已激活属性◈---<br>
+        <div v-for="item in OnSuitAttr">
+            <div class="content" v-for="attr in item.attrItem">
+                <span>{{ item.type == 0 ? "✧" : "✡" }}</span>
+                <span>{{ attr.tip }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+definePageMeta({
+    layout: layout.default,
+    middleware: 'page-loading'
+})
+const data = ref<any>({});
+const onEqu = ref<Array<any>>([]);
+const suitAttr = ref<Array<any>>([]);
+const OnSuitAttr = ref<Array<any>>([]);
+onMounted(async () => {
+    try {
+        await BindData();
+    }
+    finally {
+        PageLoading.Close();
+    }
+})
+
+
+
+const BindData = async (): Promise<void> => {
+    let suitCode = PageExtend.QueryString("id");
+    let result = await EquService.GetUserOnSuitInfo(suitCode);    
+    if (result.code == 0) {
+        data.value = result.data.data;
+        onEqu.value = data.value.onEqu;
+        suitAttr.value = data.value.attr;
+        OnSuitAttr.value = result.data.suit.suitAttr;
+    }
+    else {
+        MessageExtend.ShowDialog("提示", result.msg);
+    }
+};
+</script>