优质产品头部查询

src/views/homepage/components/breadcrumb.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
 .showcase {
-  padding: 1px 15px 1px;
+  padding: 1px 0;
   font-size: 20px;
   font-family: Source Han Sans CN;
   font-weight: 400;

src/views/homepage/product/index.vue

@@ -10,7 +10,75 @@
       </div>
     </div>
     <div class="content-box">
-      <breadcrumb />
+      <div style="width: 88%;padding-left: 9%;">
+        <breadcrumb />
+        <div class="search-box">
+          <div class="search-tools">
+            <el-row :gutter="18">
+              <el-col :span="18">
+                <el-input v-model="query.keyword" placeholder="请输入关键字" />
+              </el-col>
+              <el-col :span="3">
+                <el-select v-model="query.productType" placeholder="全部产品">
+                  <el-option v-for="item in [{value:undefined,label:'全部产品'}, ...dict.product_type]" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-col>
+              <el-col :span="3">
+                <el-button icon="el-icon-search" class="btn">搜索</el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="search-keyword">
+            <span v-for="(item, index) in keywords" :key="index" class="label" @click="keywordClick(item, 'keyword')">{{ item }}</span>
+          </div>
+          <el-row style="padding-top: 16px">
+            <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 areaOpts" :key="'a_'+index" class="area_item touch" :class="query.area===item.value?'active':''" @click="query.area=item">{{ item.label }}</div>
+            </el-col>
+          </el-row>
+          <el-row style="padding-top: 10px">
+            <el-col :span="2">
+              <div class="search-item" :class="query.type===undefined?'active':''">
+                <span class="touch label" @click="setQuertType()">默认排序</span>
+                <span v-if="query.type===undefined">
+                  <i v-if="query.sort" class="el-icon-sort-up touch" />
+                  <i v-else class="el-icon-sort-down touch" />
+                </span>
+              </div>
+            </el-col>
+            <el-col :span="2">
+              <div class="search-item" :class="query.type==='hot'?'active':''">
+                <span class="touch label" @click="setQuertType('hot')">人气排序</span>
+                <span v-if="query.type==='hot'">
+                  <i v-if="query.sort" class="el-icon-sort-up touch" />
+                  <i v-else class="el-icon-sort-down touch" />
+                </span>
+              </div>
+            </el-col>
+            <el-col :span="2">
+              <div class="search-item" :class="query.type==='time'?'active':''">
+                <span class="touch label" @click="setQuertType('time')">上架时间</span>
+                <span v-if="query.type==='time'">
+                  <i v-if="query.sort" class="el-icon-sort-up touch" />
+                  <i v-else class="el-icon-sort-down touch" />
+                </span>
+              </div>
+            </el-col>
+            <el-col :span="18">
+              <div class="search-item">
+                <span>产品价格区间</span>
+                <div style="position: absolute;top: 15px;left: 35%;">
+                  <el-input v-model="query.minPrice" placeholder="请输入价格（元）" clearable style="width: 140px" />
+                  ~
+                  <el-input v-model="query.maxPrice" placeholder="请输入价格（元）" clearable style="width: 140px" />
+                  <div class="btn touch">确 定</div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
     </div>
     <div style="width:100vw;height: 100vh" />
     <home-footer ref="homeFooter" />
@@ -29,7 +97,13 @@ export default {
   data() {
     return {
       imgSrcStart: process.env.VUE_APP_BASE_API,
-      query: {},
+      query: {
+        area: undefined,
+        type: undefined,
+        sort: false
+      },
+      areaOpts: [],
+      keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
       currentProductTypeObj: null,
       throttle: null, // 节流器
       throttleTime: 300
@@ -37,11 +111,27 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-
+      this.areaOpts = [{ value: undefined, label: '全部' }]
+      for (let i = 0; i < 34; i++) {
+        this.areaOpts.push({ value: '123', label: '山东' })
+      }
     })
   },
   methods: {
-    onDictReady(dict) {},
+    onDictReady(dict) {
+      this.areaOpts = [{ value: undefined, label: '全部' }, ...dict.area_province]
+    },
+    keywordClick(item, type) {
+
+    },
+    setQuertType(type) {
+      if (type === this.query.type) {
+        this.query.sort = !this.query.sort
+      } else {
+        this.query.type = type
+        this.query.sort = false
+      }
+    },
     // 点击询价
     inquiry(item, type) {
       console.log(item, type)
@@ -91,12 +181,109 @@ export default {
   }
 }
 .content-box {
-  display: flex;
-  justify-content: center;
   margin-top: 94px;
   user-select: none;
-  .showcase {
-    width: 90%;
+}
+.search-box {
+  padding-top: 12px;
+  width: 100%;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #666666;
+  user-select: none;
+  .search-item {
+    width: 100%;
+    height: 38px;
+    display: inline-block;
+    padding: 8px 20px;
+    background: #F7F7F7;
+    border: 1px solid rgba(0,0,0,0.12);
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
+    .label:hover {
+      font-weight: 600;
+    }
+    .btn {
+      width: 74px;
+      padding: 3px;
+      margin-left: 12px;
+      display: inline-block;
+      background: #1961C5;
+      border-radius: 6px;
+      color: white;
+      text-align: center;
+      opacity: 0.7;
+    }
+    .btn:hover {
+      opacity: 1;
+    }
+  }
+  .area-title {
+    height: 62px;
+    background: #F7F7F7;
+    border: 1px solid rgba(0,0,0,0.12);
+    text-align: center;
+    line-height: 60px;
+  }
+  .area_item {
+    height: 30px;
+    padding: 6px 12px;
+    display: inline-block;
+  }
+  .area_item:hover {
+    font-weight: 600;
+  }
+  .active {
+    color: #1961C5;
+  }
+  .search-tools {
+    width: 100%;
+    .btn{
+      width: 76%;
+      height: 38px;
+      border: 2px solid #1961C5;
+      border-radius: 8px;
+      background: #1961C5;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 21px;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+    .btn:hover {
+      opacity: 1;
+    }
+    >>>.el-input__inner {
+      height: 38px;
+      border: 2px solid #1961C5;
+      border-radius: 8px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      color: #333333;
+      opacity: 0.7;
+    }
+    >>>.el-input__inner:hover {
+      opacity: 1;
+    }
+  }
+  .search-keyword {
+    padding: 5px 0;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    text-align: left;
+    .label {
+      padding: 1px 15px 1px;
+      color: #333333;
+      cursor:pointer;
+      user-select: none;
+    }
+    .label:hover {
+      color: #1961C5;
+    }
   }
 }
 </style>