优化搜索操作

package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.0.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "dayjs": "^1.8.36",

src/components/fontAwesome/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
+// import { faFontAwesome, faUps } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faSort)
+library.add(faSortUp)
+library.add(faSortDown)
+
+// library.add(faFontAwesome)
+Vue.component('font-awesome-icon', FontAwesomeIcon)

src/main.js

@@ -14,6 +14,8 @@ import './permission'
 
 // import vant
 import '@/components/Vant'
+// import fontAwesome
+import '@/components/fontAwesome'
 // register common components globally
 import '@/components/common'
 import filters from '@/filter'

src/views/search/list.vue

@@ -43,11 +43,12 @@ export default {
     return {
       value: '',
       list: [],
-      pageSize: 8,
+      pageSize: 10,
       pageNum: 1,
       keyword: '',
       isNew: false,
       isHot: false,
+      isPrice: false,
       loading: false,
       finished: false,
       isSkeletonShow: true
@@ -76,7 +77,8 @@ export default {
         pageNum: this.pageNum,
         keyword: this.keyword,
         isNew: this.isNew,
-        isHot: this.isHot
+        isHot: this.isHot,
+        isPrice: this.isPrice
       }).then((res) => {
         const data = res.map.goods
         this.list = [...this.list, ...data]
@@ -100,16 +102,24 @@ export default {
       this.reset()
       if (val['search'] === 'isNew') {
         this.isNew = true
-      }
-      if (val['search'] === 'isHot') {
+      } else if (val['search'] === 'isHot') {
         this.isHot = true
+      } else if (val['search'] === 'price') {
+        this.isPrice = true
+        this.orderBy = val['orderBy']
+      } else if (val['search'] === 'cancelPrice') {
+        this.isPrice = false
+        this.orderBy = ''
       }
+
       getSearchList({
         pageSize: this.pageSize,
         pageNum: this.pageNum,
         keyword: this.keyword,
         isNew: this.isNew,
-        isHot: this.isHot
+        isHot: this.isHot,
+        isPrice: this.isPrice,
+        orderBy: this.orderBy
       }).then((res) => {
         const data = res.map.goods
         this.list = [...data]
@@ -121,7 +131,7 @@ export default {
       })
     },
     reset() {
-      this.pageSize = 8
+      this.pageSize = 10
       this.pageNum = 1
       this.isNew = false
       this.isHot = false

src/views/search/modules/FilterBar.vue

@@ -2,9 +2,16 @@
   <div class="search-filter">
     <van-dropdown-menu style="flex:1">
       <van-dropdown-item v-model="value1" :options="option1" @change="change1" />
-      <van-dropdown-item v-model="value2" :options="option2" />
-      <van-dropdown-item v-model="value3" :options="option3" />
+      <!-- <van-dropdown-item v-model="value2" :options="option2" />
+      <van-dropdown-item v-model="value3" :options="option3" /> -->
     </van-dropdown-menu>
+    <div class="filter">
+      <span style="font-size:15px;margin-right:2px">销量</span>
+    </div>
+    <div class="filter" @click="changeFaIcon">
+      <span style="font-size:15px;margin-right:2px">价格</span>
+      <font-awesome-icon :icon="faDefault" size="3x" />
+    </div>
     <div class="filter">
       <span style="font-size:15px;margin-right:2px">筛选</span>
       <van-icon size="12" name="filter-o" />
@@ -17,25 +24,39 @@ export default {
   data() {
     return {
       value1: '',
-      value2: '',
-      value3: '',
       option1: [
         { text: '综合', value: '' },
         { text: '新品上架', value: 'isNew' },
         { text: '人气推荐', value: 'isHot' }
       ],
-      option2: [
-        { text: '销量', value: '' }
-      ],
-      option3: [
-        { text: '价格', value: '' }
-      ]
+      faDefault: ['fas', 'sort'],
+      faSort: ['fas', 'sort'],
+      faSortUp: ['fas', 'sort-up'],
+      faSortDown: ['fas', 'sort-down'],
+      faCount: 0
     }
   },
   methods: {
     change1(value) {
       this.$emit('changeGoods', { search: value })
+    },
+    changeFaIcon() {
+      this.faCount++
+      if (this.faCount === 3) {
+        this.faCount = 0
+      }
+      if (this.faCount === 0) {
+        this.$emit('changeGoods', { search: 'cancelPrice' })
+        this.faDefault = this.faSort
+      } else if (this.faCount === 1) {
+        this.$emit('changeGoods', { search: 'price', orderBy: 'asc' })
+        this.faDefault = this.faSortUp
+      } else if (this.faCount === 2) {
+        this.faDefault = this.faSortDown
+        this.$emit('changeGoods', { search: 'price', orderBy: 'desc' })
+      }
     }
+
   }
 }
 </script>