首页产品二级分类

src/api/common.js

@@ -461,7 +461,7 @@ export const HttpReq = {
     // 产品-硬件查询列表
     productGetHardwareList: function(params) {
       return request({
-        url: '/api/bsw/bigScreen/highQualityProducts/productList?' + qs.stringify(params, { indices: false }),
+        url: '/api/bsw/bigScreen/highQualityProducts?' + qs.stringify(params, { indices: false }),
         method: 'get'
       })
     },

src/router/routers.js

@@ -62,7 +62,8 @@ export const constantRouterMap = [
     hidden: true
   },
   {
-    path: '/product/hardware/:type',
+    path: '/product/hardware',
+    name: 'hardware',
     meta: { title: '硬件产品', noCache: true },
     component: (resolve) => {
       return require(['@/views/homepage/product/hardware'], resolve)

src/views/backstage/contentMgt/productTabulate/index.vue

@@ -2,9 +2,9 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-<!--      <el-select v-model="query.productType" clearable placeholder="请选择产品类型" style="width: 150px">-->
-<!--        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />-->
-<!--      </el-select>-->
+      <!--      <el-select v-model="query.productType" clearable placeholder="请选择产品类型" style="width: 150px">-->
+      <!--        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />-->
+      <!--      </el-select>-->
       <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
         <el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
@@ -17,7 +17,7 @@
     <div class="content">
       <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh">
         <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
-        <el-table-column prop="productType" label="产品类型名称"/>
+        <el-table-column prop="productType" label="产品类型名称" />
         <el-table-column label="状态" width="100">
           <template slot-scope="scope">
             <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>

src/views/homepage/index.vue

@@ -16,7 +16,21 @@
       <div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/buyInfo/all')">我要采购</div>
     </div>
     <div class="line-btn" style="padding-top: 30px">
-      <div v-for="(item,index) in dict.product_type" :key="index" class="btn-b" :class="currentProductTypeObj===item?'active':''" @mouseenter="changeProductPush(item)">{{ item.label }}</div>
+      <div v-for="(item,index) in dict.product_type" :key="index" @mouseenter="changeProductPush(item)">
+        <div v-if="index<4">
+          <el-dropdown placement="bottom">
+            <div class="btn-b" :class="currentProductTypeObj===item?'active':''">{{ item.label }}</div>
+            <el-dropdown-menu slot="dropdown" style="width: 170px;text-align: center;">
+              <router-link v-for="(t,i) in subTypeOpts" :key="'st_'+i" :to="{'name':'hardware',params:{'type':currentProductTypeObj.value,'subType':t.value}}">
+                <el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
+                  {{ t.label }}
+                </el-dropdown-item>
+              </router-link>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <div v-else class="btn-b" :class="currentProductTypeObj===item?'active':''">{{ item.label }}</div>
+      </div>
     </div>
     <div class="content-box">
       <div class="showcase">
@@ -172,7 +186,7 @@ import { HttpReq } from '@/api/common'
 
 export default {
   components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },
-  dicts: ['product_type', 'area_province'],
+  dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7', 'area_province'],
   data() {
     return {
       color: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
@@ -181,96 +195,8 @@ export default {
       imgSrcStart: process.env.VUE_APP_BASE_API,
       query: {},
       currentProductTypeObj: null,
-      showcaseProducts: [
-        {
-          isGood: true,
-          isHot: false,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: true,
-          isHot: true,
-          isStore: true,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: false,
-          isHot: true,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: false,
-          isHot: false,
-          isStore: true,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: false,
-          isHot: true,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: false,
-          isHot: false,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: true,
-          isHot: false,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        },
-        {
-          isGood: false,
-          isHot: false,
-          isStore: false,
-          title: 'wiwo1002热能工程压力变送器',
-          subTitle: '乐清市柳市艾普乐传感器厂',
-          area: '北京',
-          date: '2023-06-12',
-          imgSrc: '',
-          imgSrcList: []
-        }
-      ],
+      subTypeOpts: [],
+      showcaseProducts: [],
       showcaseSuppliers: [],
       topAreas: [],
       topSuppliers: [],
@@ -317,6 +243,7 @@ export default {
   methods: {
     onDictReady(dict) {
       this.currentProductTypeObj = dict.product_type[0]
+      this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
       HttpReq.webClientApi.homePageGetProduct({
         preview: false,
         productType: this.currentProductTypeObj.value
@@ -331,13 +258,14 @@ export default {
         if (this.currentProductTypeObj === item) {
           return
         }
+        this.currentProductTypeObj = item
+        this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
         HttpReq.webClientApi.homePageGetProduct({
           preview: false,
           productType: this.currentProductTypeObj.value
         }).then((res) => {
           this.showcaseProducts = res.data.showcaseProducts
         })
-        this.currentProductTypeObj = item
       }, this.throttleTime)
     },
     // 点击询价
@@ -382,7 +310,13 @@ export default {
             this.$router.push({ path: `/course` })
             break
           default:
-            this.$router.push({ path: `/product/hardware/${this.currentProductTypeObj.value}` })
+            this.$router.push({
+              name: 'hardware',
+              params: {
+                type: this.currentProductTypeObj.value,
+                subType: ''
+              }
+            })
         }
       }
     },

src/views/homepage/product/hardware.vue

@@ -21,7 +21,13 @@
         <!--查询面板-->
         <div class="search-box">
           <el-row style="padding-top: 16px">
-            <el-col :span="2"><div class="area-title">地区选择</div></el-col>
+            <el-col :span="2"><div class="area-title">分类</div></el-col>
+            <el-col :span="22" style="border: 1px solid rgba(0,0,0,0.12);">
+              <div v-for="(item,index) in subTypeOpts" :key="'st_'+index" class="area_item touch" :class="query.subType===item.value?'active':''" @click="query.subType=item.value">{{ item.label }}</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="2"><div class="area-title" style="height: 62px;line-height: 60px;">地区选择</div></el-col>
             <el-col :span="22" style="border: 1px solid rgba(0,0,0,0.12);">
               <div v-for="(item,index) in areaOpts" :key="'a_'+index" class="area_item touch" :class="query.area===item.value?'active':''" @click="query.area=item.value">{{ item.label }}</div>
             </el-col>
@@ -140,7 +146,7 @@ import floatBtn from '../components/floatBtn'
 
 export default {
   components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView, floatBtn },
-  dicts: ['product_type', 'area_province'],
+  dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7', 'area_province'],
   data() {
     return {
       defaultImgProduct: default_product,
@@ -153,9 +159,11 @@ export default {
         keyword: '',
         area: '',
         type: '',
+        subType: '',
         sort: false
       },
       areaOpts: [],
+      subTypeOpts: [],
       keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
       hardwareList: [
         {
@@ -286,13 +294,14 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-
+      this.query = Object.assign(this.query, this.$route.params)
     })
   },
   methods: {
     onDictReady(dict) {
       this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province]
       this.title = dict.product_type[this.$route.params.type - 1].label
+      this.subTypeOpts = [{ value: '', label: '全部' }, ...dict['product_type_' + this.query.type]]
     },
     keywordClick(item, type) {
       this.query.keyword = item
@@ -579,11 +588,11 @@ export default {
     }
   }
   .area-title {
-    height: 62px;
     background: #F7F7F7;
     border: 1px solid rgba(0,0,0,0.12);
     text-align: center;
-    line-height: 60px;
+    height: 32px;
+    line-height: 32px;
   }
   .area_item {
     height: 30px;