Procházet zdrojové kódy

完善路由跳转,字母检索

shaun-sheep před 4 roky
rodič
revize
74e2103691

+ 271 - 0
src/components/brand/detail/sagaBrandDetail.vue

@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div class="saga-brand-box mt90 por">
+      <div class="breadcrumb-content">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item>所有分类</el-breadcrumb-item>
+          <el-breadcrumb-item>品牌名称</el-breadcrumb-item>
+        </el-breadcrumb>
+        <span v-for="(item,index) in sys" v-if="item.show" class="select">{{item.name}}
+          <i class="el-icon-close" @click="deleteCurrent(index)"></i></span>
+        <span class="total poa">共<b>42</b>件相关产品</span>
+      </div>
+      <div class="device-sys">
+        <div class="left">能源设备系统:</div>
+        <div class="main">
+          <ul>
+            <li v-for="(item,index) in sys" :key="index" v-if="index < limitSys" @click="currentSys(index)"
+                :class="item.show ? 'light':''">
+              {{item.name}}
+            </li>
+          </ul>
+        </div>
+        <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'">
+          <p style="cursor: pointer;">{{more}}
+            <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="saga-brand-box mt20">
+      <detailTable/>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import detailTable from "../../public/table";
+
+  export default {
+    components: {detailTable},
+    created() {
+    },
+    mounted() {
+      this.limitSys = this.sys.length
+    },
+    data() {
+      return {
+        more: '更多',
+        limitSys: 18,
+        isShow: true,
+        sys: [
+          {
+            id: 1,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 2,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 3,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 4,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 5,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 6,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 7,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 8,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 9,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 10,
+            name: '喷灌控制箱',
+            show: false,
+          }, {
+            id: 11,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 12,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 13,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 14,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 15,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 16,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 17,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 18,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 19,
+            name: '喷灌机组',
+            show: false,
+          }, {
+            id: 20,
+            name: '喷灌机组',
+            show: false,
+          }
+        ]
+      }
+    },
+    computed: {},
+    methods: {
+      allData() {
+        this.isShow = !this.isShow
+        if (this.isShow) {
+          this.more = '收起'
+          this.limitSys = this.sys.length
+        } else {
+          this.more = '更多'
+          this.limitSys = 18
+        }
+      },
+      currentSys(index) {
+        for (let i = 0; i < this.sys.length; i++) {
+          if (i == index) {
+            this.sys[i].show = true
+          } else {
+            this.sys[i].show = false
+          }
+        }
+      },
+      deleteCurrent(index) {
+        for (let i = 0; i < this.sys.length; i++) {
+          if (i == index) {
+            this.sys[i].show = false
+          } else {
+            this.sys[i].show = false
+          }
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mt90 {
+    margin-top: 90px;
+  }
+
+  .mt20 {
+    margin-top: 20px;
+  }
+
+  .por {
+    position: relative;
+  }
+
+  .poa {
+    position: absolute;
+  }
+
+  .saga-brand-box {
+    width: 100%;
+    padding: 16px;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 1);
+
+    .breadcrumb-content {
+      display: flex;
+      border-bottom: 1px solid #EFF0F1;
+      padding-bottom: 20px;
+
+      .total {
+        text-align: right;
+        color: #8D9399;
+        right: 0;
+        margin-right: 30px;
+
+        b {
+          color: #1F2429;
+        }
+      }
+
+      .select {
+        margin-left: 20px;
+        display: inline-block;
+        background: #EFF0F1;
+        padding: 0 10px;
+        line-height: 20px;
+        cursor: pointer;
+        margin-top: -3px;
+      }
+    }
+
+    .device-sys {
+      display: flex;
+      margin-top: 10px;
+      border-bottom: 1px solid #EFF0F1;
+      padding-bottom: 10px;
+
+      .left {
+        padding-top: 6px;
+        color: #8D9399;
+        width: 130px;
+      }
+
+      .right {
+        width: 100px;
+        text-align: center;
+        padding-top: 6px;
+
+      }
+
+      .main {
+        color: #1F2429;
+        width: 1020px;
+
+        ul {
+          li {
+            display: inline-block;
+            line-height: 25px;
+            width: 102px;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    /deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner:first-child {
+      color: #8D9399
+    }
+
+    .dark {
+      color: #8D9399
+    }
+
+    .light {
+      color: #3A8DDE;
+    }
+  }
+
+</style>

+ 87 - 76
src/components/brand/sagaBrand.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyu
  * @Date: 2020-05-08 16:06:03
- * @Info: 
+ * @Info:
  * @LastEditTime: 2020-05-12 19:31:47
  -->
 <template>
@@ -26,10 +26,16 @@
     <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
       <h3 class="saga-brand-letter">{{letter}}</h3>
       <ul class="saga-brand-list">
-        <li class="saga-brand-item" :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}" v-for="item in list" :key="item.id" :title="item.zhName">
+        <li class="saga-brand-item"
+            :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}"
+            v-for="(item,index) in list"
+            :key="item.id"
+            :title="item.BrandCname"
+            @click="brandDetail(item)"
+        >
           <div class="saga-brand-name">
-            <p class="saga-brand-zhName">{{item.zhName}}</p>
-            <p class="saga-brand-enName" :title="item.enName">{{item.enName}}</p>
+            <p class="saga-brand-zhName">{{item.BrandCname}}</p>
+            <p class="saga-brand-enName" :title="item.enName">{{item.BrandName}}</p>
           </div>
           <div class="saga-brand-logo">
             <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
@@ -43,7 +49,7 @@
     </div>
     <ul class="saga-letter-ul" :style="`transform:translate(${boxWidth+4}px,0)`" @click.stop="handleClickLetter">
       <li
-        v-for="(list, letter, index) in brandList" 
+        v-for="(list, letter, index) in brandList"
         v-show="list.length"
         :key="`nav-${letter}`"
         :data-index="index"
@@ -57,86 +63,91 @@
 </template>
 
 <script>
-import brandList from "@/data/brandList"
-export default {
-  components: {},
-  created() {
-    this.brandList = brandList
-  },
-  mounted() {
-    this.boxWidth = this.$refs.brandBox.clientWidth
-    let listener = document.querySelector('.page-content-scroll')
-    listener.addEventListener('scroll', this.onScroll)
-  },
-  data() {
-    return {
-      sortMap: {
-        zh: "中文排序",
-        en: "英文排序",
-      },
-      sort: "中文排序",
-      brandList: {},
-      boxWidth: 0,
-      stepActive: 0, //锚点
-      keyWord: "", //检索关键字
-    }
-  },
-  methods: {
-    handleCommand(command) {// 切换排序方式
-      this.sort = this.sortMap[command]
+  import brandList from "@/data/brandList"
+
+  export default {
+    components: {},
+    created() {
+      this.brandList = brandList
     },
-    ChangeKeyWord(keyWord) {// 品牌检索
-      debugger
+    mounted() {
+      this.boxWidth = this.$refs.brandBox.clientWidth
+      let listener = document.querySelector('.page-content-scroll')
+      listener.addEventListener('scroll', this.onScroll)
     },
-    handleClickLetter(e) {
-      let index = e.target.dataset.index
-      if (index) {
-        this.stepActive = index
-        let jump = document.querySelectorAll('.saga-brand-group'),
-          total = jump[index].offsetTop - 127,// 获取需要滚动的距离
-          listener = document.querySelector('.page-content-scroll'),
-          distance = listener.scrollTop,
-          step = total / 50;
-        if (total > distance) {
-          smoothDown()
-        } else {
-          let newTotal = distance - total + 100
-          step = newTotal / 50
-          smoothUp()
-        }
-
-        function smoothDown() {
-          if (distance < total) {
-            distance += step
-            listener.scrollTop = distance
-            setTimeout(smoothDown, 10)
+    data() {
+      return {
+        sortMap: {
+          zh: "中文排序",
+          en: "英文排序",
+        },
+        sort: "中文排序",
+        brandList: {},
+        boxWidth: 0,
+        stepActive: 0, //锚点
+        keyWord: "", //检索关键字
+      }
+    },
+    methods: {
+      handleCommand(command) {// 切换排序方式
+        this.sort = this.sortMap[command]
+      },
+      ChangeKeyWord(keyWord) {// 品牌检索
+        debugger
+      },
+      handleClickLetter(e) {
+        let index = e.target.dataset.index
+        if (index) {
+          this.stepActive = index
+          let jump = document.querySelectorAll('.saga-brand-group'),
+            total = jump[index].offsetTop - 127,// 获取需要滚动的距离
+            listener = document.querySelector('.page-content-scroll'),
+            distance = listener.scrollTop,
+            step = total / 50;
+          if (total > distance) {
+            smoothDown()
           } else {
-            listener.scrollTop = total
+            let newTotal = distance - total + 100
+            step = newTotal / 50
+            smoothUp()
           }
-        }
 
-        function smoothUp() {
-          if (distance > total) {
-            distance -= step
-            listener.scrollTop = distance
-            setTimeout(smoothUp, 10)
-          } else {
-            listener.scrollTop = total
+          function smoothDown() {
+            if (distance < total) {
+              distance += step
+              listener.scrollTop = distance
+              setTimeout(smoothDown, 10)
+            } else {
+              listener.scrollTop = total
+            }
+          }
+
+          function smoothUp() {
+            if (distance > total) {
+              distance -= step
+              listener.scrollTop = distance
+              setTimeout(smoothUp, 10)
+            } else {
+              listener.scrollTop = total
+            }
           }
         }
-      }
-    },
-    onScroll() {
-      let scrolled = document.querySelector('.page-content-scroll').scrollTop
-      let jump = document.querySelectorAll('.saga-brand-group')
-      for (let i = 0; i < jump.length; i++) {
-        if ((jump[i].offsetTop - 127) >= scrolled) {
-          this.stepActive = i
-          break
+      },
+      onScroll() {
+        let scrolled = document.querySelector('.page-content-scroll').scrollTop
+        let jump = document.querySelectorAll('.saga-brand-group')
+        for (let i = 0; i < jump.length; i++) {
+          if ((jump[i].offsetTop - 127) >= scrolled) {
+            this.stepActive = i
+            break
+          }
         }
+      },
+      brandDetail(item) {
+        this.$router.push({path: 'brand/brandDetail', query: {id: item.id, name: item.BrandCname, productId: '3'}})
+
       }
     }
-  }
 }
 </script>
 <style lang="scss" scoped>
@@ -265,4 +276,4 @@ export default {
     cursor: pointer;
     color: #1F2429;
   }
-</style>
+</style>

+ 0 - 108
src/components/product/detail/productDetailTool.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="saga-toolbar-box">
-    <div class="saga-toolbar-main">
-      <selectTree
-        :props="props"
-        :options="optionData"
-        :value="valueId"
-        :clearable="isClearable"
-        :accordion="isAccordion"
-        @getValue="getValue($event)"/>
-      <span style="float: right;">
-        <el-button type="primary" @click="handBrand">添加产品</el-button>
-      </span>
-    </div>
-
-
-    <addBrand ref="addBrand" title="添加品牌"></addBrand>
-
-  </div>
-</template>
-
-<script>
-  import selectTree from "@/components/public/selectTree";
-  import addBrand from "@/components/business/addBrand";
-
-  export default {
-    components: {selectTree, addBrand},
-
-    created() {
-    },
-    mounted() {
-    },
-    data() {
-      return {
-        isClearable: true,      // 可清空(可选)
-        isAccordion: true,      // 可收起(可选)
-        valueId: 20,            // 初始ID(可选)
-        props: {                // 配置项(必选)
-          value: 'id',
-          label: 'name',
-          children: 'children',
-          // disabled:true
-        },
-        // 选项列表(必选)
-        list: [
-          {id: 1, parentId: 0, name: "一级菜单A",},
-          {id: 2, parentId: 0, name: "一级菜单B",},
-          {id: 3, parentId: 0, name: "一级菜单C",},
-          {id: 4, parentId: 1, name: "二级菜单A-A",},
-          {id: 5, parentId: 1, name: "二级菜单A-B",},
-          {id: 6, parentId: 2, name: "二级菜单B-A",},
-          {id: 7, parentId: 4, name: "三级菜单A-A-A",},
-          {id: 20, parentId: 0, name: "一级菜单C",},
-          {id: 39, parentId: 0, name: "一级菜单C",},
-          {id: 40, parentId: 0, name: "一级菜单end",}
-        ],
-      }
-    },
-    methods: {
-      handBrand() {
-        this.$refs.addBrand.outerVisible = true
-      },
-      // 取值
-      getValue(value) {
-        this.valueId = value
-        console.log(this.valueId);
-      },
-    },
-    computed: {
-      /* 转树形数据 */
-      optionData() {
-        let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
-        return cloneData.filter(father => {                      // 循环所有项,并添加children属性
-          let branchArr = cloneData.filter(child => father.id == child.parentId);       // 返回每一项的子级数组
-          branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性,并赋值
-          return father.parentId == 0;      //返回第一层
-        });
-      }
-    },
-  }
-</script>
-<style lang="scss" scoped>
-  .saga-toolbar-box {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 70px;
-    background: #fff;
-    z-index: 11;
-
-    .saga-toolbar-main {
-      width: 1200px;
-      height: 100%;
-      margin: auto;
-      padding-top: 20px;
-
-    }
-
-
-    .reset-input {
-      /deep/ .el-input__inner {
-        background: #F6F6F6;
-
-      }
-    }
-  }
-</style>

+ 245 - 18
src/components/product/detail/sagaProductDetail.vue

@@ -1,19 +1,68 @@
 <template>
   <div>
-    <div class="saga-brand-box mt90">
-      <span @click="changeHandle">打开或者收缩</span>
-
-      <collapse>
-        33333
-        <div class="collapse-wrap"
-             v-show="isActive">
-          23333
-<!--          <slot></slot>-->
+    <div class="saga-brand-box mt90 por">
+      <div class="breadcrumb-content">
+        <div>
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item>所有分类</el-breadcrumb-item>
+            <el-breadcrumb-item>给排水专业</el-breadcrumb-item>
+            <el-breadcrumb-item>燃气系统</el-breadcrumb-item>
+            <el-breadcrumb-item>品牌名称</el-breadcrumb-item>
+          </el-breadcrumb>
         </div>
-      </collapse>
+        <div style="width: 750px;">
+              <span v-for="(item,index) in allDate" v-if="item.check" class="select">{{item.BrandCname}}
+          <i class="el-icon-close" @click="deleteCurrent(item,index)"></i></span>
+        </div>
+
+        <span class="total poa">共<b>42</b>件相关产品</span>
+      </div>
+      <div class="device-sys">
+        <div class="left">品牌:</div>
+
+        <div class="main" :class="more=='收起'? 'mt30':''">
+          <ul v-if="more=='更多'">
+            <li v-for="(item,index) in allDate" :key="index" v-if="index < 8" @click="handleCurrentBrand(item,index)"
+                :class="item.check ?'light':''">
+              {{item.BrandCname}}
+            </li>
+          </ul>
+          <template v-else>
+            <div :class="more=='收起' ? 'check':''">
+              <span
+                class="saga-product-letter"
+                v-for="(list, letter,index) in brandList"
+                @click="handleLetter(index,list,letter)"
+                :class="idx=== index?'litter-light':''"
+              > {{letter}}</span>
+            </div>
+            <ul>
+              <li v-for="(item,index) in allDate" :key="index" @click="handleCurrentBrand(item,index)"
+                  :class="item.check ?'light':''">{{item.BrandCname}}
+              </li>
+            </ul>
+
+          </template>
+
+        </div>
+        <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
+          <el-dropdown @command="handleCommand" style="line-height: 40px;" v-show="more=='收起'"
+                       :class="more=='收起'?'pos-drop':''">
+        <span class="el-dropdown-link">
+          {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <p style="cursor: pointer;" :class="more=='收起'? 'pos-down':''">{{more}}
+            <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
+          </p>
+        </div>
+      </div>
     </div>
     <div class="saga-brand-box mt20">
-<detailTable/>
+      <detailTable/>
     </div>
   </div>
 
@@ -21,39 +70,217 @@
 
 <script>
   import detailTable from "../../public/table";
-  import collapse from "@/data/upDown"
+  import brandList from "@/data/brandList"
 
   export default {
-    components: {detailTable, collapse},
+    components: {detailTable},
     created() {
+      this.brandList = Object.assign({
+        '全部': [{
+          id: 0,
+          name: '全部'
+        }
+        ]
+      }, brandList)
+
+      for (let key in this.brandList) {
+        if (Array.isArray(brandList[key])) {
+          let list = this.temporary.concat(brandList[key])
+          list.map(i => this.$set(i, 'check', false))
+          this.temporary = list
+          this.allDate = list
+        }
+      }
     },
     mounted() {
     },
     data() {
       return {
-        isActive: true
+        idx: 0,
+        more: '更多',
+        // limitSys: 18,
+        isShow: true,
+        brandList: {},
+        allDate: [],
+        temporary: [],//全部数据
+        sortMap: {
+          zh: "中文排序",
+          en: "英文排序",
+        },
+        sort: "中文排序",
+
       }
     },
+    computed: {},
     methods: {
-      changeHandle() {
-        this.isActive = !this.isActive
+      handleCommand(command) {// 切换排序方式
+        this.sort = this.sortMap[command]
+      },
+      allData() {
+        this.isShow = !this.isShow
+        if (this.isShow) {
+          this.more = '收起'
+        } else {
+          this.more = '更多'
+        }
+      },
+      handleLetter(index, list, letter) {
+        this.idx = index
+        this.allDate = list
+        if (index == 0) {
+          this.allDate = this.temporary
+        }
+      },
+      handleCurrentBrand(item, index) {
+        item.check = !item.check
+
+
+      },
+      deleteCurrent(item, index) {
+        item.check = false
       }
     }
   }
 </script>
 <style lang="scss" scoped>
-  .mt90{
+  .mt90 {
     margin-top: 90px;
   }
-  .mt20{
+
+  .mt20 {
     margin-top: 20px;
   }
+
+  .mt30 {
+    margin-top: 30px;
+  }
+
+  .por {
+    position: relative;
+  }
+
+  .poa {
+    position: absolute;
+  }
+
   .saga-brand-box {
     width: 100%;
     padding: 16px;
     box-sizing: border-box;
     background: rgba(255, 255, 255, 1);
 
+    .breadcrumb-content {
+      display: flex;
+      border-bottom: 1px solid #EFF0F1;
+      padding-bottom: 20px;
+
+      .total {
+        text-align: right;
+        color: #8D9399;
+        right: 0;
+        margin-right: 30px;
+
+
+        b {
+          color: #1F2429;
+        }
+      }
+
+      .select {
+        margin-left: 20px;
+        display: inline-block;
+        background: #EFF0F1;
+        padding: 0 10px;
+        line-height: 20px;
+        cursor: pointer;
+        margin-top: -3px;
+        margin-bottom: 10px;
+      }
+    }
+
+    .device-sys {
+      display: flex;
+      margin-top: 10px;
+      border-bottom: 1px solid #EFF0F1;
+      padding-bottom: 10px;
+      position: relative;
+
+      .left {
+        padding-top: 6px;
+        color: #8D9399;
+        width: 50px;
+      }
+
+      .right {
+        width: 100px;
+        text-align: center;
+        padding-top: 6px;
+
+      }
+
+      .main {
+        color: #1F2429;
+        width: 1020px;
+        max-height: 150px;
+        overflow: auto;
+
+        ul {
+          li {
+            display: inline-block;
+            line-height: 25px;
+            width: 230px;
+            margin-right: 20px;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .saga-product-letter {
+        display: inline-block;
+        padding: 3px;
+        background: #EEEEEE;
+        margin-right: 5px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+    }
+
+    /deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner:first-child {
+      color: #8D9399
+    }
+
+    .dark {
+      color: #8D9399
+    }
+
+    .light {
+      color: #3A8DDE;
+    }
+
+    .litter-light {
+      background: #D1E3F4 !important;
+      color: #3A8DDE;
+    }
+
+    .check {
+      position: absolute;
+      top: 5px;
+    }
+
+    .pos-drop {
+      top: -10px;
+      left: -80px;
+
+    }
+
+    .pos-down {
+      position: relative;
+      top: -38px;
+    }
   }
 
 </style>

+ 5 - 0
src/components/product/sagaProduct.vue

@@ -63,6 +63,11 @@ export default {
   components: {
     sagaBrand,
   },
+  methods:{
+    handleDetail() {
+      this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
+    }
+  }
 }
 </script>
 

+ 121 - 121
src/data/brandList.js

@@ -1,380 +1,380 @@
 /*
  * @Author: zhangyu
  * @Date: 2020-05-09 16:02:06
- * @Info: 
+ * @Info:
  * @LastEditTime: 2020-05-12 12:33:24
  */
 export default {
   A: [
     {
       id: 1,
-      zhName: "阿迪达斯体育(中国)有限公司",
-      enName: "adidas",
+      BrandCname: "阿迪达斯体育(中国)有限公司",
+      BrandName: "adidas",
       logoUrl: ""
     },
     {
       id: 2,
-      zhName: "阿拉善盟矿产能源投资(集团)有限公司",
-      enName: "alxakcny",
+      BrandCname: "阿拉善盟矿产能源投资(集团)有限公司",
+      BrandName: "alxakcny",
       logoUrl: ""
     },
     {
       id: 3,
-      zhName: "阿能集团有限公司",
-      enName: "aneng",
+      BrandCname: "阿能集团有限公司",
+      BrandName: "aneng",
       logoUrl: ""
     },
     {
       id: 4,
-      zhName: "阿尔发能源集团有限公司",
-      enName: "aerfa",
+      BrandCname: "阿尔发能源集团有限公司",
+      BrandName: "aerfa",
       logoUrl: ""
     },
     {
       id: 5,
-      zhName: "阿艾夫技术有限公司",
-      enName: "cdrfc",
+      BrandCname: "阿艾夫技术有限公司",
+      BrandName: "cdrfc",
       logoUrl: ""
     },
   ],
   B: [
     {
       id: 6,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: "",
       new: true,
     },
     {
       id: 7,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 8,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 9,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 10,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 11,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 12,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 13,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 14,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 15,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 16,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 17,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 18,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 19,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 20,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
   ],
   C: [
     {
       id: 21,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 22,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 23,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 24,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 25,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 26,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 27,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 28,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 29,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 30,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
   ],
   D: [
     {
       id: 31,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 32,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 33,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 34,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 35,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 36,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 37,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 38,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 39,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 40,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
   ],
   E: [
     {
       id: 41,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 42,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 43,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 44,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 45,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 46,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 47,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 48,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 49,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 50,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
   ],
   F: [
     {
       id: 51,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 52,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 53,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 54,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 55,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 56,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 57,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 58,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 59,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
     {
       id: 60,
-      zhName: "公司名称-中文",
-      enName: "company name",
+      BrandCname: "公司名称-中文",
+      BrandName: "company name",
       logoUrl: ""
     },
   ],

+ 10 - 4
src/router/system.js

@@ -3,9 +3,10 @@ import LayoutMain from '@/framework/layout/Main'
 import login from '@/framework/layout'
 // 品牌管理
 import brand from '@/views/brand'
+import brandDetail from "@/views/brand/detail"
 //产品管理
 import product from "@/views/product/index"
-import detail from "@/views/product/detail"
+import productDetail from "@/views/product/detail"
 //从已有数据填充产品
 import supplement from "@/views/supplement"
 //测试页面
@@ -42,9 +43,9 @@ export default [
       component: product,
     },
       {
-        path: '/detail',
-        name: 'detail',
-        component: detail,
+        path: '/product/productDetail',
+        name: 'productDetail',
+        component: productDetail,
       }
     ]
   },
@@ -58,6 +59,11 @@ export default [
         name: 'brand',
         component: brand
       },
+      {
+        path:'/brand/brandDetail',
+        name:'brand',
+        component: brandDetail
+      }
     ]
   },
   // 从已有数据填充产品

+ 21 - 0
src/views/brand/detail/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="brand-detail">
+    hello
+    <brandTool/>
+    <sagaBrandDetail/>
+  </div>
+</template>
+
+<script>
+  import brandTool from "../../../components/brand/brandTool";
+  import sagaBrandDetail from "../../../components/brand/detail/sagaBrandDetail";
+
+  export default {
+    name: "index",
+    components: {brandTool, sagaBrandDetail}
+  }
+</script>
+
+<style scoped>
+
+</style>

+ 5 - 4
src/views/product/detail/index.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="productDetailTool">
-    <productDetailTool/>
+    <productTool/>
     <sagaProductDetail/>
   </div>
 </template>
 
 <script>
-  import productDetailTool from "../../../components/product/detail/productDetailTool";
-import sagaProductDetail from "../../../components/product/detail/sagaProductDetail";
+  import productTool from "../../../components/product/productTool";
+  import sagaProductDetail from "../../../components/product/detail/sagaProductDetail";
+
   export default {
     name: "index",
-    components: {productDetailTool,sagaProductDetail}
+    components: {productTool,sagaProductDetail}
   }
 </script>