feat: 菜单和布局问题

src/components/layout/header/index.vue

@@ -86,9 +86,9 @@ export default {
     nav.forEach((nav_) => {
       if (this.$route.path.startsWith(nav_.link)) {
         this.currentNav = nav_.id;
-        nav_.children &&
-          nav_.children.length > 0 &&
-          this.$store.commit("system/SET_SUB_NAV", nav_.children);
+        // nav_.children &&
+        //   nav_.children.length > 0 &&
+        //   this.$store.commit("system/SET_SUB_NAV", nav_.children);
         if (nav_.link === this.$route.path) {
           nav_.breadcrumb &&
             this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);

src/components/layout/header/search.js

@@ -4,7 +4,7 @@ export default  {
     id: "3",
     name: "条码查询",
     index: 3,
-    link: "/search/tool",
+    link: "/search",
     breadcrumb: [
         { name: "服务中心", path: "/service" },
         { name: "查询服务", path: "/search/tool" },

src/components/layout/header/service.js

@@ -5,7 +5,7 @@ export default  {
     id: "4",
     name: "服务中心",
     index: 4,
-    link: "/Service/BarcodeV",
+    link: "/Service",
     breadcrumb: [
         { name: "服务中心", path: "/Service/BarcodeV" },
         { name: "产品服务", path: "/Service/BarcodeV" },
@@ -264,7 +264,7 @@ export default  {
                 },
             ]
         },
-        {...JSON.parse(JSON.stringify(search)),index:4,},
+        ...JSON.parse(JSON.stringify(search.children)),
         {
             id: uuid("gs_nav"),
             name: "平台服务",

src/components/main.vue

 <template>
   <div>
     <Header></Header>
-    <div class="router-view">
+    <div class="router-view marginTop20 mb-4">
       <router-view></router-view>
     </div>
     <Footer></Footer>

src/views/Search/internal.vue

@@ -12,41 +12,42 @@
             </el-radio-group>
 
             <el-form
-              label-position="left"
-              label-width="180px"
-              style="margin-top:50px"
-              :model="companySearch"
+                label-position="left"
+                label-width="180px"
+                style="margin-top:50px"
+                :model="companySearch"
             >
               <el-form-item label="境内商品条码信息查询：">
                 <el-input
-                  v-show="company === CODE"
-                  v-model="companySearch.code"
-                  placeholder="请输入正确的厂商识别代码！"
-                  class="w240"
+                    v-show="company === CODE"
+                    v-model="companySearch.code"
+                    placeholder="请输入正确的厂商识别代码！"
+                    class="w240"
                 ></el-input>
                 <el-input
-                  v-show="company === NAME"
-                  v-model="companySearch.name"
-                  placeholder="请输入正确的商品条码！"
-                  class="w240"
+                    v-show="company === NAME"
+                    v-model="companySearch.name"
+                    placeholder="请输入正确的商品条码！"
+                    class="w240"
                 ></el-input>
                 <el-input
-                  v-show="company === ADDRESS"
-                  v-model="companySearch.address"
-                  placeholder="请输入正确的商品条码！"
-                  class="w240"
+                    v-show="company === ADDRESS"
+                    v-model="companySearch.address"
+                    placeholder="请输入正确的商品条码！"
+                    class="w240"
                 ></el-input>
               </el-form-item>
 
               <el-form-item label="验证码：">
                 <el-button type="primary" class="w240">
                   <div style="diplay:flex;align-item:center">
-                    <img style="height:14px" src="./img/guard.png" alt="" />
+                    <img style="height:14px" src="./img/guard.png" alt=""/>
                     点击此处进行验证
                   </div>
                 </el-button>
-                <el-button style="margin-left:40px" type="primary"
-                  >查询</el-button
+                <el-button style="margin-left:40px" type="primary" @click="handleSearchCompany"
+                >查询
+                </el-button
                 >
               </el-form-item>
             </el-form>
@@ -55,38 +56,50 @@
 
         <el-tab-pane label="查询产品信息" name="second">
           <el-form
-            label-position="left"
-            label-width="180px"
-            style="margin-top:50px"
-            :model="productSearch"
+              label-position="left"
+              label-width="180px"
+              style="margin-top:50px"
+              :model="productSearch"
           >
             <el-form-item label="境内商品条码信息查询：">
               <el-input
-                v-model="productSearch.code"
-                placeholder="请输入13位或14位的商品条码"
-                class="w240"
+                  v-model="productSearch.code"
+                  placeholder="请输入13位或14位的商品条码"
+                  class="w240"
               ></el-input>
             </el-form-item>
 
             <el-form-item label="验证码：">
               <el-button type="primary" class="w240">
                 <div style="diplay:flex;align-item:center">
-                  <img style="height:14px" src="./img/guard.png" alt="" />
+                  <img style="height:14px" src="./img/guard.png" alt=""/>
                   点击此处进行验证
                 </div>
               </el-button>
               <el-button style="margin-left:40px" type="primary"
-                >查询</el-button
+              >查询
+              </el-button
               >
             </el-form-item>
           </el-form>
         </el-tab-pane>
       </el-tabs>
+
+      <div class="result-box" v-if="showResult&&activeName==='first'">
+        <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
+        <div class="result-box-body">
+          <template v-if="result">
+            <!--结果表格-->
+          </template>
+          <span v-else>没有符合条件的记录！</span>
+        </div>
+      </div>
     </div>
+
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/pic_ex_jl.png" align="right" alt="" />
+        <img src="./img/pic_ex_jl.png" align="right" alt=""/>
         <p>
           1、商品条码
           （又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
@@ -123,8 +136,23 @@ export default {
       productSearch: {
         code: "",
       },
+      result: null,
+      searchCodeShow: '',
+      showResult: false,
     };
   },
+  methods: {
+    handleSearchCompany() {
+      this.showResult = true;
+      if (this.company === CODE) {
+        this.searchCodeShow = this.companySearch.code;
+      } else if (this.company === NAME) {
+        this.searchCodeShow = this.companySearch.name;
+      } else {
+        this.searchCodeShow = this.companySearch.address;
+      }
+    }
+  },
 };
 </script>
 

src/views/Search/tools.vue

@@ -2,22 +2,25 @@
   <div class="search-tools">
     <div class="title">条码信息查询</div>
     <div class="tools-wrapper">
-      <div class="tool-card" v-for="item in tool" :key="item.name">
+      <div class="tool-card"
+           v-for="item in tool"
+           :key="item.name"
+           @click="$router.push({path:item.path})">
         <div class="tool-img">
-          <img :src="item.img" alt="" />
+          <img :src="item.img" alt=""/>
         </div>
         <div class="tool-name">
           {{ item.name }}
         </div>
       </div>
 
-      <div class="tool-card">
+      <div class="tool-card" @click="window.open('http://www.chinatrace.org/')">
         <div class="tool-img">
-          <img src="./img/pic_tiaomashuisu.png" alt="" />
+          <img src="./img/pic_tiaomashuisu.png" alt=""/>
         </div>
         <div class="tool-name">
-          <img src="./img/icon_android.png" alt="" />Android
-          <img src="./img/icon_iphone.png" alt="" />Iphone
+          <img src="./img/icon_android.png" alt=""/>Android
+          <img src="./img/icon_iphone.png" alt=""/>Iphone
         </div>
       </div>
     </div>
@@ -32,11 +35,17 @@ export default {
         {
           name: "境内商品条码信息查询",
           img: require("./img/pic_guoneitiaoma.png"),
+          path: '/search/internal'
+        },
+        {
+          name: "缩短码查询",
+          img: require("./img/pic_suoduanma.png"),
+          path: '/search/shortcode'
         },
-        { name: "缩短码查询", img: require("./img/pic_suoduanma.png") },
         {
           name: "境外商品条码信息查询",
           img: require("./img/pic_jingwaishangpin.png"),
+          path: '/search/external'
         },
         // {name:'',img:require('./img/pic_tiaomazhuisu.png')}
       ],
@@ -59,6 +68,7 @@ export default {
   min-height: 100%;
 
   .tool-card {
+    cursor: pointer;
     width: 194px;
     height: 210px;
     background-color: white;
@@ -70,6 +80,7 @@ export default {
 
     .tool-img {
       height: 145px;
+
       > img {
         width: 100%;
         height: 100%;