3

src/views/cpdat01.vue

@@ -1,177 +1,190 @@
 <template>
   <div class="main">
-				<div class="von-in">
-					<img src="@/assets/img/cpdat01.png">	
-				</div>
-				<div class="von-cpdat-qh">
-					<div class="qh-tit d-flex">
-						<a :class="type=='cp01'?'active':''" @click="type='cp01'">2排屑槽</a>
-						<a :class="type=='cp02'?'active':''" @click="type='cp02'">3排屑槽</a>
-                        <a :class="type=='cp03'?'active':''" @click="type='cp03'">4排屑槽</a>
-					</div>
-					<div class="qh-cen">
-						<div id="qhcenin01" class="qh-cen-in">
-							<img src="@/assets/img/cpdat03.png">	
-						</div>
-					</div>
-					<div class="qh-btn">
-                        <a href="#/cpdat02">
-						<button type="button" class="btn"><i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数</button>
-                        </a>
-					</div>
-				</div>
-				 <ul class="ulimg">
-				  <li>
-				  	<img src="@/assets/img/cpdat04.png" width="100%">	
-				  </li>
-				  <li>
-				  	<img src="@/assets/img/cpdat04.png" width="100%">	
-				  </li>
-				  <li>
-				  	<img src="@/assets/img/cpdat04.png" width="100%">	
-				  </li>
-				  <li>
-				  	<img src="@/assets/img/cpdat04.png" width="100%">	
-				  </li> 
-				</ul>  
-				<div class="von-cpdat-hd bg-grew">
-					<div class="hd-tit d-flex">
-						<span></span>
-						<p>2排屑槽</p>
-					</div>
-					<div class="hd-cen">
-						<ul>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-				<div class="von-cpdat-hd bg-grew">
-					<div class="hd-tit d-flex">
-						<span></span>
-						<p>3排屑槽</p>
-					</div>
-					<div class="hd-cen">
-						<ul>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-				<div class="von-cpdat-hd bg-grew">
-					<div class="hd-tit d-flex">
-						<span></span>
-						<p>4排屑槽</p>
-					</div>
-					<div class="hd-cen">
-						<ul>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-							<li>
-								<a href=""><img src="@/assets/img/cpdat05.png" width="100%">	</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-				<div class="qh-btn bg-grew"><a href="#/cpdat02">
-						<button type="button" class="btn"><i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数</button></a>
-					</div>
-		<app-nav/>         
-     <app-footer/>
-			
+    <div class="von-in">
+      <img src="@/assets/img/cpdat01.png" />
+    </div>
+    <div class="von-cpdat-qh">
+      <div class="qh-tit d-flex">
+        <a :class="type == 'cp01' ? 'active' : ''" @click="type = 'cp01'"
+          >2排屑槽</a
+        >
+        <a :class="type == 'cp02' ? 'active' : ''" @click="type = 'cp02'"
+          >3排屑槽</a
+        >
+        <a :class="type == 'cp03' ? 'active' : ''" @click="type = 'cp03'"
+          >4排屑槽</a
+        >
+      </div>
+      <div class="qh-cen">
+        <div id="qhcenin01" class="qh-cen-in">
+          <img src="@/assets/img/cpdat03.png" />
+        </div>
+      </div>
+      <div class="qh-btn">
+        <a href="#/cpdat02">
+          <button type="button" class="btn">
+            <i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数
+          </button>
+        </a>
+      </div>
+    </div>
+    <ul class="ulimg">
+      <li>
+        <img src="@/assets/img/cpdat04.png" width="100%" />
+      </li>
+      <li>
+        <img src="@/assets/img/cpdat04.png" width="100%" />
+      </li>
+      <li>
+        <img src="@/assets/img/cpdat04.png" width="100%" />
+      </li>
+      <li>
+        <img src="@/assets/img/cpdat04.png" width="100%" />
+      </li>
+    </ul>
+    <div class="von-cpdat-hd bg-grew">
+      <div class="hd-tit d-flex">
+        <span></span>
+        <p>2排屑槽</p>
+      </div>
+      <div class="hd-cen">
+        <ul>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="von-cpdat-hd bg-grew">
+      <div class="hd-tit d-flex">
+        <span></span>
+        <p>3排屑槽</p>
+      </div>
+      <div class="hd-cen">
+        <ul>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="von-cpdat-hd bg-grew">
+      <div class="hd-tit d-flex">
+        <span></span>
+        <p>4排屑槽</p>
+      </div>
+      <div class="hd-cen">
+        <ul>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+          <li>
+            <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="qh-btn bg-grew">
+      <a href="#/cpdat02">
+        <button type="button" class="btn" @click="goCpDat02">
+          <i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数
+        </button></a>
+    </div>
+    <app-nav />
+    <app-footer />
   </div>
 </template>
 
 <script>
-import AppNav from '@/components/Nav.vue'
-import AppFooter from '@/components/footer.vue'
+import AppNav from "@/components/Nav.vue";
+import AppFooter from "@/components/footer.vue";
 export default {
-   components: {
-        AppFooter,
-        AppNav
-    },
-    data(){
-        return{
-           type:'cp01' 
-        }
-        
-    }
-
-}
+	components: {
+		AppFooter,
+		AppNav,
+	},
+	data() {
+		return {
+		type: "cp01",
+		};
+	},
+	methods: {
+		goCpDat02() {
+			this.$router.push({ path: this.redirect || "/cpdat02" });
+		},
+	},
+};
 </script>
 
 <style>
-.d-flex{
-    display: flex;
+.d-flex {
+  display: flex;
+}
+.qh-btn .btn {
+  padding: 6px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 4px;
+  border: none;
+}
+ul.ulimg {
+  padding: 10px 15px;
+  margin: 0;
+  background: #282828;
+  clear: both;
+  overflow: hidden;
+}
+ul.ulimg li {
+  width: 50%;
+  box-sizing: border-box;
+  padding: 5px;
+}
+ul.ulimg li:nth-child(odd) {
+  float: left;
 }
-.qh-btn .btn{
-    padding: 6px 6px;
-    font-size: 12px;
-    line-height: 1.5;
-    border-radius: 4px;
-    border: none;
+ul.ulimg li:nth-child(even) {
+  float: right;
 }
- ul.ulimg  {
-    padding: 10px 15px;
-    margin: 0;
-    background: #282828;
-    clear: both;
-    overflow: hidden;
-    }
-  ul.ulimg li  {
-      width: 50%;
-      box-sizing: border-box;
-      padding: 5px;
-    }
-    ul.ulimg li:nth-child(odd){
-        float: left;
-    }
-     ul.ulimg li:nth-child(even){
-        float: right;
-    }
 </style>

src/views/cpdat02.vue

@@ -2,63 +2,23 @@
   <div class="con">
      <div class="fixnav">
           <ul class="first">
-          <li :class="type=='cp01'?'active':''" @click="type='cp01'"><a href="#/cpdat02">2槽</a></li>
-          <li :class="type=='cp02'?'active':''" @click="type='cp02'"><a href="#/cpdat02">3槽</a></li>
-          <li :class="type=='cp03'?'active':''" @click="type='cp03'"><a href="#/cpdat02">4槽</a></li>
+          <li :class="type=='cp01'?'active':''" @click="listCommoditys('474adbcd-5940-4e5a-90c4-9a05ae703614','cp01')"><a>2槽</a></li>
+          <li :class="type=='cp02'?'active':''" @click="listCommoditys('55dcfab7-e15c-4588-a17f-b20c4394033f','cp02')"><a>3槽</a></li>
+          <li :class="type=='cp03'?'active':''" @click="listCommoditys('704e1adf-6348-405e-bdc0-b213991aff0b','cp03')"><a>4槽</a></li>
         </ul>
         <ul class="second">
-          <div class="tab" v-if="type=='cp01'">
-          <li :class="tabsecond=='tab01'?'active':''" @click="tabsecond='tab01'">
-							<a href="#/cpdat02">D002/<br>D012系列</a>
+          <div class="tab">
+            <li :class="tabsecond==item.id?'active':''" v-for="item in Commoditys" :key="item.id" @click="PicShow(item.productPicture,item.id)">
+							<a>{{item.productModel}}</a>
 						</li>
-						<li :class="tabsecond=='tab02'?'active':''" @click="tabsecond='tab02'">
-							<a href="#/cpdat02">2819系列</a>
-						</li>
-						<li :class="tabsecond=='tab03'?'active':''" @click="tabsecond='tab03'">
-							<a href="#/cpdat02">4002/4012/<br>4022系列</a>
-						</li>
-						<li :class="tabsecond=='tab04'?'active':''" @click="tabsecond='tab04'">
-							<a href="#/cpdat02">D001/<br>D011系列</a>
-						</li>
-						<li :class="tabsecond=='tab05'?'active':''" @click="tabsecond='tab05'">
-							<a href="#/cpdat02">2838系列</a>
-						</li>
-						<li :class="tabsecond=='tab06'?'active':''" @click="tabsecond='tab06'">
-							<a href="#/cpdat02">4000/<br>4010系列</a>
-						</li>
-						<li :class="tabsecond=='tab07'?'active':''" @click="tabsecond='tab07'">
-							<a href="#/cpdat02">4001/4011/<br>4021系列</a>
-						</li>
-            </div>
-            <div class="tab" v-if="type=='cp02'">
-          <li class="active">
-							<a href="#/cpdat02">D002/<br>D012系列</a>
-						</li>
-						<li class="">
-							<a href="#/cpdat02">2819系列</a>
-						</li>
-						<li class="">
-							<a href="#/cpdat02">4002/4012/<br>4022系列</a>
-						</li>
-            </div>
-            <div class="tab" v-if="type=='cp03'">
-						<li class="active">
-							<a href="#/cpdat02">2838系列</a>
-						</li>
-						<li class="">
-							<a href="#/cpdat02">4000/<br>4010系列</a>
-						</li>
-						<li class="">
-							<a href="#/cpdat02">4001/4011/<br>4021系列</a>
-						</li>
-            </div>
+          </div>
         </ul>
         <a class="von-call-btn" @click="windowt=true">
-						<span class="iconfont icondianhua"></span>
-						<div class="">
-							联系我们
-						</div>
-					</a>
+          <span class="iconfont icondianhua"></span>
+          <div class="">
+            联系我们
+          </div>
+        </a>
  </div>
 <!--弹窗-->
     <div class="von-showpic" v-if="windowt==true">
@@ -72,20 +32,18 @@
     <app-nav/>
 
     <div class="maincon">
-    
-        <div class="detail01">
-          <div class="">
-						<img src="@/assets/img/cpdat06.png" width="100%"/>
-					</div>
-          <div class="">
-						<img src="@/assets/img/cpdat07.png" width="100%"/>
-					</div>
+      <div class="detail01">
+        <div class="">
+          <img src="@/assets/img/cpdat06.png" width="100%"/>
+        </div>
+        <div class="">
+          <img :src="imgContent" width="100%"/>
+        </div>
+      </div>
+      <div class="detail02">
+        <div class="">
+          <img src="@/assets/img/cpdat06.png" width="100%"/>
         </div>
-        <div class="detail02">
-          <div class="">
-						<img src="@/assets/img/cpdat06.png" width="100%"/>
-					</div>
-        
       </div>
     </div>
     <app-footer/>
@@ -95,6 +53,8 @@
 <script>
 import AppNav from '@/components/Nav.vue'
 import AppFooter from '@/components/footer.vue'
+import commodityApi from "@/api/commodity";
+
 export default {
  components: {
         AppFooter,
@@ -104,13 +64,40 @@ export default {
     return{
       windowt:false,
       type:'cp01',
-      tabsecond:'tab01'
-
+      tabsecond:'tab01',
+      Commoditys: {},
+      imgContent: ""
     }
-
   },
-  method:{
+  mounted: function () {
+    this.listCommoditys('474adbcd-5940-4e5a-90c4-9a05ae703614','cp01');
+	},
+  methods:{
+    listCommoditys(cataloguesId,type) {
+      var self = this;
+      self.type = type;
 
+      var formData = new FormData();
+      formData.append("cataloguesId", cataloguesId);
+      commodityApi.findListByCataloguesId(formData).then(function (response) {
+          self.loading = false;
+          var jsonData = response.data;
+          if (jsonData.result) {
+              self.Commoditys = jsonData.data;
+              self.tabsecond = self.Commoditys[0].id;
+              self.imgContent = self.Commoditys[0].productPicture;
+          } else {
+              self.$message.error(jsonData.message + "");
+          }
+      })
+      .catch((error) => {
+          self.loading = false;
+      });
+    },
+    PicShow(url,checkedId) {
+      this.tabsecond = checkedId;
+      this.imgContent = url;
+    },
   }
 }
 </script>

src/views/djadmin.vue

@@ -1,46 +1,46 @@
 <template>
   <div class="main">
-<div class="von-in">
-					<img src="@/assets/img/dj01.png">	
-				</div>
-				<div class="von-in">
-					<img src="@/assets/img/dj02.png">	
-					<div class="von-in-btn4 von-in-btn7">
-						<button type="button" class="btn">下载刀具管理样本</button>
-					</div>
-					<!--弹窗-->
-					<div class="von-showpic">
-					    <span></span>
-					    <div class="dj-demo">
-					    	<img src="@/assets/img/dj04.png" alt="">
-					    	<img class="dj-demo-off" src="@/assets/img/off.png" alt="">
-					    </div>
-					</div>
-				</div>
-				<div class="von-in">
-					<img src="@/assets/img/dj03.png">	
-				</div>
-   <app-nav/>
- <app-footer/>
+    <div class="von-in">
+      <img src="@/assets/img/dj01.png" />
+    </div>
+    <div class="von-in">
+      <img src="@/assets/img/dj02.png" />
+      <div class="von-in-btn4 von-in-btn7">
+        <button type="button" class="btn">下载刀具管理样本</button>
+      </div>
+      <!--弹窗-->
+      <!-- <div class="von-showpic">
+        <span></span>
+        <div class="dj-demo">
+          <img src="@/assets/img/dj04.png" alt="" />
+          <img class="dj-demo-off" src="@/assets/img/off.png" alt="" />
+        </div>
+      </div> -->
+    </div>
+    <div class="von-in">
+      <img src="@/assets/img/dj03.png" />
+    </div>
+    <app-nav />
+    <app-footer />
   </div>
 </template>
 
 <script>
-import AppNav from '@/components/Nav.vue'
-import AppFooter from '@/components/footer.vue'
+import AppNav from "@/components/Nav.vue";
+import AppFooter from "@/components/footer.vue";
 export default {
- components: {
-        AppFooter,
-        AppNav
-      },
-}
+  components: {
+    AppFooter,
+    AppNav,
+  },
+};
 </script>
 
 <style>
-.von-showpic{
-    box-sizing: border-box;
+.von-showpic {
+  box-sizing: border-box;
 }
-.von-showpic{
-    z-index: 0;
+.von-showpic {
+  z-index: 0;
 }
 </style>

src/views/djxm.vue

@@ -9,13 +9,13 @@
 						<button type="button" class="btn btn-warning">查看地图</button>
 					</div>
 					<!--弹窗-->
-				<div class="von-showpic">
+				<!-- <div class="von-showpic">
 					<span></span>
 					<div class="dj-demo">
 						<img src="@/assets/img/dj04.png" alt="">
 						<img class="@/assets/dj-demo-off" src="@/assets/img/off.png" alt="">
 					</div>
-					</div>
+				</div> -->
 				</div>
 				<div class="von-in">
 					<img src="@/assets/img/djxm03.png">