From 76839ca6ea978cf3211d45ad01663b562858e525 Mon Sep 17 00:00:00 2001
From: shenyuan <shenyuan2825@163.com>
Date: Thu, 12 Jan 2023 18:11:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E8=A3=85=E7=B1=BB=E5=9E=8B=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E8=8F=9C=E5=8D=95+=E7=BB=BC=E5=90=88=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/config/router.config.js               |   4 +
 .../src/views/shopping/pages/clothDetail.vue  |  32 +++
 .../src/views/shopping/pages/clothType.vue    | 237 ++++++++++--------
 3 files changed, 172 insertions(+), 101 deletions(-)
 create mode 100644 ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue

diff --git a/ant-design-vue-jeecg/src/config/router.config.js b/ant-design-vue-jeecg/src/config/router.config.js
index eba4194f..eb93e038 100644
--- a/ant-design-vue-jeecg/src/config/router.config.js
+++ b/ant-design-vue-jeecg/src/config/router.config.js
@@ -632,4 +632,8 @@ export const constantRouterMap = [
     path: '/shopping/views/sirendingzhi',//这里是你需要设置新窗口打开的页面的路径s
     component: () => import('@/views/shopping/pages/sirendingzhi'),
   },
+  {
+    path: '/shopping/views/ClothDetail',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/pages/clothDetail'),
+  },
 ]
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue
new file mode 100644
index 00000000..d7c9cc70
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="clothDetails">
+    <Header fontColor="#000"></Header>
+    <div class="detailDiv">
+      详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{
+      this.$route.query.title
+      }}
+    </div>
+  </div>
+</template>
+<script>
+  import Header from "../components/Header/HeaderView";
+  export default {
+    name: "clothDetail",
+    components: { Header },
+    data() {
+      return {};
+    },
+  };
+</script>
+<style>
+  .clothDetails .top .middle .router-link-exact-active.router-link-active {
+    border-bottom: 2px solid #000;
+  }
+</style>
+<style lang="less" scoped>
+  .clothDetails {
+    .detailDiv {
+      padding-top: 100px;
+    }
+  }
+</style>
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue b/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
index 5ee3bade..9ff5c7bd 100644
--- a/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
@@ -5,58 +5,44 @@
       <div class="main">
         <div class="jz d-flex">
           <el-menu
-            default-active="2"
             class="el-menu-vertical-demo"
-            @open="handleOpen"
-            @close="handleClose"
+            @select="handleSelet"
             style="width: 10%; min-width: 140px"
             :unique-opened="true"
           >
-            <el-submenu v-for="(item, i) in typeData" :key="i" index="i+1">
+            <el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id">
               <template slot="title">
                 <i class="el-icon-male"></i>
                 <span>{{ item.name }}</span>
               </template>
-              <el-menu-item-group v-for="(j, i2) in item.childrens" :key="i2">
+              <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">
                 <template slot="title">{{ j.name }}</template>
-                <el-menu-item
-                  index="1-1"
-                  v-for="(k, i3) in j.childrens"
-                  :key="i3"
-                >{{ k.name }}</el-menu-item
-                >
-              </el-menu-item-group>
+                <el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item>
+              </el-submenu>
             </el-submenu>
-            <!-- <el-menu-item index="2">
-              <i class="el-icon-female"></i>
-              <span slot="title">女装</span>
-            </el-menu-item>
-            <el-menu-item index="3">
-              <i class="el-icon-lollipop"></i>
-              <span slot="title">童装</span>
-            </el-menu-item> -->
           </el-menu>
           <div class="right">
             <div class="name d-flex">
-              <span>Polo衫</span>
+              <span>{{this.current.name}}</span>
               <div class="d-flex">
-                <el-dropdown>
+                <el-dropdown @command="handleCommand">
                 <span class="el-dropdown-link">
-                  综合<i class="el-icon-arrow-down el-icon--right"></i>
+                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>按销量排序</el-dropdown-item>
-                    <el-dropdown-item>按评分排序</el-dropdown-item>
-                    <el-dropdown-item>按价格排序</el-dropdown-item>
+                    <el-dropdown-item command="heat">热度</el-dropdown-item>
+<!--                    <el-dropdown-item command="esteem">评分</el-dropdown-item>-->
+                    <el-dropdown-item command="high">价格降序</el-dropdown-item>
+                    <el-dropdown-item command="low">价格升序</el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
-                <div class="iconDiv d-flex">
-                  <span>价格</span>
-                  <div class="icon d-flex">
-                    <i class="el-icon-arrow-up"></i>
-                    <i class="el-icon-arrow-down"></i>
-                  </div>
-                </div>
+<!--                <div class="iconDiv d-flex">-->
+<!--                  <span>价格</span>-->
+<!--                  <div class="icon d-flex">-->
+<!--                    <i class="el-icon-arrow-up"></i>-->
+<!--                    <i class="el-icon-arrow-down"></i>-->
+<!--                  </div>-->
+<!--                </div>-->
               </div>
             </div>
             <div class="clothDiv d-flex">
@@ -68,9 +54,6 @@
               >
                 <div class="imgDiv">
                   <img :src="item.imgUrl" alt="" />
-                  <!-- <div class="button c_000 f_16" @click="clothChoice(item)">
-                    点击选择
-                  </div> -->
                 </div>
                 <div class="clothTitle">
                   <p class="price d-flex">
@@ -90,6 +73,32 @@
 </template>
 <script>
   import Header from '../components/Header/HeaderView'
+  let compareDown = function (prop) {
+    return function (obj1, obj2) {
+      var val1 = obj1[prop];
+      var val2 = obj2[prop];
+      if (val1 < val2) {
+        return 1;
+      } else if (val1 > val2) {
+        return -1;
+      } else {
+        return 0;
+      }
+    }
+  }
+  let compareUp = function (prop) {
+    return function (obj1, obj2) {
+      var val1 = obj1[prop];
+      var val2 = obj2[prop];
+      if (val1 < val2) {
+        return -1;
+      } else if (val1 > val2) {
+        return 1;
+      } else {
+        return 0;
+      }
+    }
+  }
   export default {
     name:"clothType",
     components: {Header},
@@ -100,15 +109,15 @@
           {
             id: 1,
             imgUrl: require("../assets/cloth.png"),
-            currentPrice: 599,
+            currentPrice: 199,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3100,
           },
           {
             id: 2,
             imgUrl: require("../assets/cloth.png"),
-            currentPrice: 599,
+            currentPrice: 299,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
             heat: 3200,
@@ -116,18 +125,18 @@
           {
             id: 3,
             imgUrl: require("../assets/cloth.png"),
-            currentPrice: 599,
+            currentPrice: 399,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3300,
           },
           {
             id: 4,
             imgUrl: require("../assets/cloth.png"),
-            currentPrice: 599,
+            currentPrice: 499,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3400,
           },
           {
             id: 5,
@@ -135,15 +144,15 @@
             currentPrice: 599,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3500,
           },
           {
             id: 6,
             imgUrl: require("../assets/cloth.png"),
-            currentPrice: 599,
+            currentPrice: 699,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3600,
           },
           {
             id: 7,
@@ -151,7 +160,7 @@
             currentPrice: 599,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3700,
           },
           {
             id: 8,
@@ -159,7 +168,7 @@
             currentPrice: 599,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3800,
           },
           {
             id: 9,
@@ -167,7 +176,7 @@
             currentPrice: 599,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat: 3900,
           },
           {
             id: 10,
@@ -175,89 +184,89 @@
             currentPrice: 599,
             historicalPrice: 799,
             title: "HOODIE 运动长袖连帽卫衣套头衫",
-            heat: 3200,
+            heat:4000,
           },
         ],
         // 菜单数据
         typeData: [
           {
-            id: 1,
+            id: '1',
             name: "男装",
             childrens: [
               {
-                id: 1 - 1,
+                id: '11',
                 name: "上衣",
                 childrens: [
                   {
-                    id: 1 - 1 - 1,
+                    id: '111',
                     name: "衬衫",
                   },
                   {
-                    id: 1 - 1 - 2,
+                    id: '112',
                     name: "卫衣",
                   },
                   {
-                    id: 1 - 1 - 3,
+                    id: '113',
                     name: "Polo衫",
                   },
                   {
-                    id: 1 - 1 - 4,
+                    id: '114',
                     name: "针织衫",
                   },
                 ],
               },
               {
-                id: 1 - 2,
+                id: '12',
                 name: "外套",
                 childrens: [
                   {
-                    id: 1 - 2 - 1,
+                    id: '121',
                     name: "夹克",
                   },
                   {
-                    id: 1 - 2 - 2,
+                    id: '122',
                     name: "羽绒服",
                   },
                   {
-                    id: 1 - 2 - 3,
+                    id: '123',
                     name: "风衣",
                   },
                 ],
               },
               {
-                id: 1 - 3,
+                id: '13',
                 name: "裤子",
                 childrens: [
                   {
-                    id: 1 - 3 - 1,
+                    id: '131',
                     name: "休闲裤",
                   },
                   {
-                    id: 1 - 3 - 2,
+                    id: '132',
                     name: "西裤",
                   },
                   {
-                    id: 1 - 3 - 3,
+                    id: '133',
                     name: "工装裤",
                   },
                   {
-                    id: 1 - 3 - 4,
+                    id: '134',
                     name: "运动裤",
                   },
                   {
-                    id: 1 - 3 - 5,
+                    id: '135',
                     name: "卫裤",
                   },
                   {
-                    id: 1 - 3 - 6,
+                    id: '136',
                     name: "九分裤",
                   },
                   {
-                    id: 1 - 3 - 7,
+                    id: '137',
                     name: "短裤",
                   },
                   {
-                    id: 1 - 3 - 8,
+                    id: '138',
                     name: "哈伦裤",
                   },
                 ],
@@ -265,83 +274,83 @@
             ],
           },
           {
-            id: 2,
+            id: '2',
             name: "女装",
             childrens: [
               {
-                id: 2 - 1,
+                id: '21',
                 name: "上衣",
                 childrens: [
                   {
-                    id: 2 - 1 - 1,
+                    id: '211',
                     name: "衬衫",
                   },
                   {
-                    id: 2 - 1 - 2,
+                    id: '212',
                     name: "卫衣",
                   },
                   {
-                    id: 2 - 1 - 3,
+                    id: '213',
                     name: "Polo衫",
                   },
                   {
-                    id: 2 - 1 - 4,
+                    id: '214',
                     name: "针织衫",
                   },
                 ],
               },
               {
-                id: 2 - 2,
+                id: '22',
                 name: "外套",
                 childrens: [
                   {
-                    id: 2 - 2 - 1,
+                    id: '221',
                     name: "夹克",
                   },
                   {
-                    id: 2 - 2 - 2,
+                    id: '222',
                     name: "羽绒服",
                   },
                   {
-                    id: 2 - 2 - 3,
+                    id: '223',
                     name: "风衣",
                   },
                 ],
               },
               {
-                id: 2 - 3,
+                id: '23',
                 name: "裤子",
                 childrens: [
                   {
-                    id: 2 - 3 - 1,
+                    id: '231',
                     name: "休闲裤",
                   },
                   {
-                    id: 2 - 3 - 2,
+                    id: '232',
                     name: "西裤",
                   },
                   {
-                    id: 2 - 3 - 3,
+                    id: '233',
                     name: "工装裤",
                   },
                   {
-                    id: 2 - 3 - 4,
+                    id: '234',
                     name: "运动裤",
                   },
                   {
-                    id: 2 - 3 - 5,
+                    id: '235',
                     name: "卫裤",
                   },
                   {
-                    id: 2 - 3 - 6,
+                    id: '236',
                     name: "九分裤",
                   },
                   {
-                    id: 2 - 3 - 7,
+                    id: '237',
                     name: "短裤",
                   },
                   {
-                    id: 2 - 3 - 8,
+                    id: '238',
                     name: "哈伦裤",
                   },
                 ],
@@ -349,25 +358,51 @@
             ],
           },
         ],
+        // 目前选择的菜单
+        current:{
+          id:'',
+          name:''
+        }
       };
     },
     methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
+      findIndex(indexPath){
+        const indexa =  this.typeData.findIndex((value, keys, arr) => {
+          return value.id == indexPath[0]
+        })
+        const indexb =  this.typeData[indexa].childrens.findIndex((value, keys, arr) => {
+          return value.id == indexPath[1]
+        })
+        const indexc =  this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
+          return value.id == indexPath[2]
+        })
+        this.current.name =  this.typeData[indexa].childrens[indexb].childrens[indexc].name
+        this.current.id =  this.typeData[indexa].childrens[indexb].childrens[indexc].id
       },
-      clothChoice(item) {
-        this.dialogModel.imgUrl = item.imgUrl;
-        this.dialogModel.name = item.title;
-        this.dialogModel.price = item.currentPrice;
-        this.dialogVisible = true;
+      handleSelet(index,indexPath){
+        this.findIndex(indexPath)
       },
-      dialogSure() {
-        this.dialogVisible = false;
-        this.current = 1;
+      clothDetails(item) {
+        this.$router.push({
+          path: "/shopping/views/ClothDetail",
+          query: { id: item.id, title: item.title },
+        });
       },
+      handleCommand(command){
+        if(command == 'heat'){//按热度排序
+          this.clothsList.sort(compareDown("heat"))
+        }
+        else if(command == 'high'){//价格降序
+          this.clothsList.sort(compareDown("currentPrice"))
+        }
+        // else if(command == 'esteem'){//按评分排序
+        //   this.clothsList.sort(compare("heat"))
+        // }
+
+        else if(command == 'low'){//价格升序
+          this.clothsList.sort(compareUp("currentPrice"))
+        }
+      }
     },
   }
 </script>