fix:任务

JX3BOX · Jan 5, 2024 · 8cbc190 · 8cbc190
1 parent 37407d1
commit 8cbc190
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 57 deletions.
diff --git a/src/assets/css/quest/nav.less b/src/assets/css/quest/nav.less
@@ -3,13 +3,14 @@
     .fz(14px, 28px);
     .h(28px);
     user-select: none;
+    color: #0366d6;
 }
 
 //子级节点
 .is-leaf + .el-tree-node__label {
     &:before {
-        // content: '⇨ ';
-        // color: #d0d4dd;
+        content: "» ";
+        color: #3d454d;
         .mr(5px);
     }
 }
@@ -22,20 +23,19 @@
 
 .el-tree-node__label {
     .w(100%);
-    padding-left:10px;
     box-sizing: border-box;
     line-height: 14px;
     text-wrap: wrap;
 
     .u-count {
-        font-size: 12px;
+        font-size: 13px;
         color: #888;
-        margin-left: 0;
+        margin-left: 5px;
         font-style: normal;
     }
 }
 
-.el-tree-node__expand-icon.is-leaf{
+.el-tree-node__expand-icon.is-leaf {
     .none;
 }
 
@@ -58,15 +58,4 @@
     .m-menus {
         background-color: transparent;
     }
-
-    .router-link-exact-active{
-        background-color:@color-link;
-        color:#fff;
-        .r(3px);
-        .u-count{
-            color:#eee;
-        }
-    }
-
-
 }
diff --git a/src/assets/data/quest-type.json b/src/assets/data/quest-type.json
@@ -0,0 +1,17 @@
+{
+    "BIRTH": "新手村",
+    "SCHOOL": "门派",
+    "TEST": "测试",
+    "CITY": "主城",
+    "OLD_CITY": "老主城",
+    "VILLAGE": "野外",
+    "OLD_VILLAGE": "老野外",
+    "DUNGEON": "小队秘境",
+    "CAMP": "阵营",
+    "BATTLE_FIELD": "战场",
+    "RAID": "团队秘境",
+    "ARENA": "竞技场",
+    "OTHER": "其他",
+    "TONG": "帮会",
+    "TONG_BATTLE_FIELD": "帮会战场"
+}
diff --git a/src/components/quest/nav.vue b/src/components/quest/nav.vue
@@ -1,67 +1,93 @@
 <template>
     <nav class="m-nav">
-        <el-input class="u-keyword" v-model="keyword" placeholder="输入分类关键字">
-            <el-select @change="getMenus" style="width: 82px" v-model="by" slot="prepend" placeholder="分类依据">
-                <el-option label="地图" value="map"></el-option>
-                <el-option label="分类" value="class"></el-option>
-            </el-select>
-        </el-input>
+        <el-input class="u-keyword" v-model="keyword" placeholder="输入关键字"> </el-input>
         <div class="m-menus-panel">
-            <el-tree class="m-menus" :data="search_menus" node-key="id" ref="tree">
-                <router-link
-                    v-if="data.name.indexOf(keyword) >= 0"
-                    class="el-tree-node__label"
-                    slot-scope="{ node, data }"
-                    :to="menuLink(data, node)"
-                >
-                    <span class="u-name" v-text="'【 ' + data.name + ' 】'"></span>
-                    <em v-if="data.total" class="u-count" v-text="`(${data.total})`"></em>
-                </router-link>
+            <el-tree
+                :data="maps"
+                :props="defaultProps"
+                :filter-node-method="filterNode"
+                node-key="id"
+                @node-click="clickNode"
+                ref="tree"
+            >
+                <template slot-scope="{ node, data }">
+                    <span v-if="!node.isLeaf" class="el-tree-node__label">
+                        <span class="u-name" v-text="data.name"></span>
+                        <em v-if="data.count" class="u-count" v-text="`(${data.count})`"></em>
+                    </span>
+                    <router-link v-else class="el-tree-node__label" :to="menuLink(data, node)">
+                        <span class="u-name" v-text="data.name"></span>
+                        <em v-if="data.count" class="u-count" v-text="`(${data.count})`"></em>
+                    </router-link>
+                </template>
             </el-tree>
         </div>
     </nav>
 </template>
 
 <script>
-import { getCategory } from "@/service/quest";
+import { getQuestMaps } from "@/service/quest";
+const questType = require("@/assets/data/quest-type.json");
+import Bus from "@jx3box/jx3box-common-ui/service/bus";
 
 export default {
     name: "Nav",
     data: () => ({
         keyword: "",
-        by: "map",
-        menus: [],
+        maps: [],
+        questType,
+        defaultProps: {
+            children: "children",
+            label: "name",
+        },
     }),
     computed: {
-        search_menus() {
-            if (!this.keyword) return this.menus;
-            return this.menus.filter((menu) => {
-                return menu.name.indexOf(this.keyword) >= 0;
-            });
-        },
         client() {
             return this.$store.state.client;
         },
     },
+    watch: {
+        keyword(val) {
+            this.$refs.tree.filter(val);
+        },
+    },
     methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.name.indexOf(value) !== -1;
+        },
         menuLink(menu, node) {
-            if (this.by == "class") {
-                return { name: "result", query: menu.id ? { class_id: menu.id } : {} };
-            } else {
-                return { name: "result", query: menu.id ? { map_id: menu.id } : {} };
-            }
+            return { name: "result", query: menu.id ? { map_id: menu.id } : {} };
         },
-        getMenus() {
-            getCategory({
-                by: this.by,
-                client: this.client,
-            }).then((res) => {
-                this.menus = res.data;
+        loadMaps() {
+            getQuestMaps().then((res) => {
+                const mapObj = res.data?.data || {};
+                const maps = [];
+                for (let key in mapObj) {
+                    console.log(questType[key]);
+                    if (questType[key]) {
+                        maps.push({
+                            id: key,
+                            name: questType[key],
+                            children: mapObj[key],
+                            count: mapObj[key].map((item) => item.count).reduce((a, b) => a + b),
+                        });
+                    }
+                }
+                this.maps = maps;
             });
         },
+        clickNode(data, node) {
+            // 移动端收起边栏
+            if (window.innerWidth < 1024) {
+                if (node.isLeaf) {
+                    Bus.$emit("toggleLeftSide", false);
+                }
+            }
+        },
     },
     mounted() {
-        this.getMenus();
+        this.loadMaps();
     },
 };
 </script>

diff --git a/src/service/quest.js b/src/service/quest.js
@@ -1,12 +1,11 @@
 import { $node, $cms } from "@jx3box/jx3box-common/js/https";
-const $ = $node()
+const $ = $node();
 
 /* import axios from 'axios'
 const $ = axios.create({
     baseURL: 'http://localhost:7002/',
 }) */
 
-
 export function getCategory(params) {
     return $.get(`/quest/category`, { params });
 }
@@ -25,7 +24,11 @@ export function getNewestQuests(params) {
 
 export function getWaiting(params) {
     params = Object.assign(params, {
-        type: 'quest',
+        type: "quest",
     });
     return $cms().get(`/api/cms/wiki/post/waiting`, { params });
 }
+
+export function getQuestMaps() {
+    return $.get(`/quest/maps`);
+}