'产品查询'

src/pages/productQuery/product-list.vue

@@ -18,7 +18,7 @@
           <img src="@/assets/distributorSign/search.png" alt="">
         </div>
       </div>
-      <list-item v-for="item in lists" :item-height="102" :key="item.product_id">
+      <list-item v-for="item in lists" :key="item.product_id">
         <item>
           <div slot="name" class="item-pic">
             <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
@@ -135,7 +135,7 @@ export default {
     .arrow {
         width: 16px;
         height: 16px;
-        margin-left: 30px;
+       // margin-left: 30px;
         margin-top: 16px;
     }
     .item-pic {
@@ -147,19 +147,21 @@ export default {
           }
     }
     .item-content {
-          height: 102px;
-         // width: 100%;
+         // height: 102px;
+          width: 100%;
+          margin-left: 20px;
           .center:nth-of-type(1) {
               margin-top: 16px;
           }
           .center:nth-of-type(2) {
-              margin-top: 10px;
+              margin-top: 6px;
           }
           .center:nth-of-type(3) {
-              margin-top: 10px;
+              margin-top: 6px;
           }
           .center {
             //   margin-top: 6px;
+            // white-space: nowrap;
               font-family: PingFangSC-Semibold;
               font-size: 13px;
               color: rgba(56,63,69,0.60);
@@ -172,10 +174,13 @@ export default {
                   color: rgba(56,63,69,0.60);
               }
               .seconds {
-                  margin-left: 20px;
+                  margin-left: 16px;
                   font-family: PingFangSC-Regular;
                   font-size: 13px;
                   color: #383F45;
+                  // white-space: nowrap;
+                  // overflow: hidden;
+                  // text-overflow: ellipsis;
               }
           }
     }

src/pages/productQuery/query-home.vue

@@ -2,7 +2,7 @@
    * @Descrip: 查询首页
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-10-16 15:55:05
+ * @LastEditTime: 2019-10-17 13:33:48
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -20,9 +20,9 @@
           <img src="@/assets/distributorSign/search.png" alt="">
         </div>
       </div>
-      <div v-for="item in prolists" :key="item.factory_bp_id" class="wrap">
+      <div v-for="(item,index) in prolists" :key="index" class="wrap">
 
-        <div class="box" @click="goLists(item.division)">
+        <div class="box">
           <div class="first">
             <img src="@/assets/productQuery/product-query.png" alt="">
             <p class="product-class">产品类别</p>
@@ -30,10 +30,17 @@
           </div>
           <div class="second">
             <p class="product-class">产品线</p>
-            <p class="product">{{ item.division_n }}</p>
-            <img src="@/assets/productQuery/pull.png" alt="">
+            <div class="product">
+              <p>{{ item.division_n }}</p>
+              <div v-for="items in divisionList" v-if="list_flag&&item.factory_bp_id === factory_bp_id " :key="items.division" class="division-lists">
+                <div>
+                  <p @click="checkDivision(items.product_line,items.division,index)">{{ items.product_line }}</p>
                 </div>
-          <img class="arrow" src="@/assets/productQuery/getIn.png" alt="">
+              </div>
+            </div>
+            <img src="@/assets/productQuery/pull.png" alt="" @click="queryDivision(item.factory_bp_id)">
+          </div>
+          <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" @click="goLists(item.division)">
         </div>
       </div>
     </h-content>
@@ -46,6 +53,9 @@ export default {
   data () {
     return {
       prolists: [],
+      divisionList: [],
+      list_flag: false,
+      factory_bp_id: '',
     }
   },
   computed: {},
@@ -84,6 +94,28 @@ export default {
        },
      })
    },
+   queryDivision (val) {
+     let vm = this
+     let url = $config.basePath + 'prd_product_division_list'
+     let param = {
+       factory_bp_id: val,
+     }
+     vm.$post(url, param).then(function (res) {
+       console.log(res)
+       if (res.result === 'S') {
+         vm.divisionList = res.lists
+         vm.list_flag = !vm.list_flag
+         vm.factory_bp_id = val
+       } else {
+         hlsPopup.showLongCenter(res.message)
+       }
+     })
+   },
+   checkDivision (val, division, index) {
+     this.prolists[index].division_n = val
+     this.prolists[index].division = division
+     this.list_flag = !this.list_flag
+   },
  },
 }
 </script>
@@ -184,7 +216,28 @@ export default {
                 font-family: PingFangSC-Regular;
                 font-size: 14px;
                 color: #383F45;
-                margin-left: 16px
+                margin-left: 16px;
+                .division-lists {
+                  width: 100%;
+                  height: auto;
+                  position: relative;
+                  z-index: 1000;
+                  border: 1px solid #ccc;
+                    border-bottom: none;
+                  // margin-top: 4px;
+                  div {
+                  background: #fff;
+                  //border: 1px solid #ccc;
+
+                  p {
+                    width: 100%;
+                    height: 24px;
+                    line-height: 24px;
+                    border-bottom: 1px solid #ccc;
+                    // text-align: center
+                  }
+                  }
+                }
             }
             img {
                 width: 16px;

src/pages/productQuery/tab.vue

@@ -2,33 +2,36 @@
  * @Description: 详情tab
  * @Author: your name
  * @Date: 2019-09-25 19:47:59
- * @LastEditTime: 2019-10-16 09:29:53
+ * @LastEditTime: 2019-10-17 10:55:24
  * @LastEditors: Please set LastEditors
  -->
 <template>
   <div class="tab-style">
-    <span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
-    <span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
-    <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
+    <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?baseInfo:unBaseInfo"><span
+      :class="{'colored':tabNum == 0}">基本信息</span></div>
+    <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?detail:unDetail"><span
+      :class="{'colored':tabNum == 1}">商品详情</span></div>
+    <div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?config:unConfig"><span
+      :class="{'colored':tabNum == 2}">产品配置</span></div>
   </div>
 </template>
 <script>
-import check1 from '@/assets/distributorSign/check1.png'
-import check2 from '@/assets/distributorSign/check2.png'
-import check3 from '@/assets/distributorSign/guaranteed.png'
-import uncheck1 from '@/assets/distributorSign/uncheck1.png'
-import uncheck2 from '@/assets/distributorSign/uncheck2.png'
-import uncheck3 from '@/assets/distributorSign/guarantee.png'
+import baseInfo from '@/assets/productQuery/baseInfo.png'
+import unBaseInfo from '@/assets/productQuery/unBaseInfo.png'
+import detail from '@/assets/productQuery/detail.png'
+import unDetail from '@/assets/productQuery/unDetail.png'
+import config from '@/assets/productQuery/config.png'
+import unConfig from '@/assets/productQuery/unConfig.png'
 export default {
   data () {
     return {
       tabNum: 0,
-      check1: check1,
-      check2: check2,
-      check3: check3,
-      uncheck1: uncheck1,
-      uncheck2: uncheck2,
-      uncheck3: uncheck3,
+      baseInfo: baseInfo,
+      unBaseInfo: unBaseInfo,
+      detail: detail,
+      unDetail: unDetail,
+      config: config,
+      unConfig: unConfig,
     }
   },
   methods: {
@@ -49,19 +52,47 @@ export default {
     padding-bottom: 8px;
     align-items: center;
     box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
-    span{
+    .tab-content {
       display: block;
-        width:112px;
+      width: 33%;
       height: 32px;
-        border-radius:16px;
+      background: rgba(220, 220, 221, 0.26);
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span {
+        margin-left: 2%;
+        font-size: 14px;
+        color: #383F45;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold;
       }
-    img{
-        width:112px;
-        height: 32px;
-        margin-right:5.7px;
+
+      .colored {
+        color: #00469C
+      }
+    }
+    .tab-content-bg{
+      background: rgba(0,70,156,0.10);
+    }
+
+    .tab-content:nth-of-type(1) {
+      margin-left: 12px
+    }
+
+    img {
+      height: 16px;
+      // margin-right:5.7px;
+    }
+
+    .tab-content:nth-of-type(2) {
+      margin-left: 8px;
     }
-    span:nth-of-type(2){
-        margin:0 10px;
+    .tab-content:nth-of-type(3) {
+      margin-left: 8px;
+      margin-right: 4px;
     }
 }
 </style>

src/router/index.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-24 12:34:06
- * @LastEditTime: 2019-10-16 19:08:10
+ * @LastEditTime: 2019-10-17 11:02:08
  * @LastEditors: Please set LastEditors
  */
 import Vue from 'vue'