feat: 新增采购单位搜索中转页面

src/api/modules/search.js

@@ -38,3 +38,14 @@ export function getIpAddressArea () {
     noToast: true
   })
 }
+
+/**
+ * 根据输入词获取采购单位名称，用于模糊搜索
+ */
+export function ajaxGetBuyerAssociation(data) {
+  return request({
+    url: '/bigmember/search/buyer/association',
+    method: 'post',
+    data
+  })
+}

src/app.config.js

@@ -8,6 +8,8 @@ export default defineAppConfig({
     // 搜索功能
     "pages/search/result/bidding/index",
     "pages/search/content/bidding/index",
+    // 采购单位搜索功能
+    "pages/search/middle/unit/index",
     // 情报功能
     "pages/search/content/report/index",
     // 订单功能

src/components/search/AssociationList.vue

@@ -0,0 +1,89 @@
+<template>
+  <ul class="association-list">
+    <li
+      class="hover-css--slide jy-hairline--bottom"
+      v-for="(item, index) in getList"
+      :key="index"
+      v-html="item.html"
+      @click="$emit('click', item)"
+    ></li>
+  </ul>
+</template>
+
+<script>
+import { replaceKeyword } from '@/utils'
+export default {
+  name: 'AssociationList',
+  /**
+   * keys 需替换的关键词或关键词组
+   * list 数据集合
+   * item.html 替换后的字符
+   * item.label 替换前字符
+   */
+  props: {
+    keys: {
+      required: true,
+      type: [String, Array],
+      default() {
+        return ''
+      }
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    getList() {
+      return this.list.map((v) => {
+        return Object.assign(
+          {
+            html: replaceKeyword(v.label, this.keys)
+          },
+          v
+        )
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.association-list {
+
+  $association-list-color: #171826;
+
+  $association-list-padding: 16px;
+  $association-list-size: 14px;
+  $association-list-line-height: 48px;
+
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-weight: 500;
+  font-size: $association-list-size;
+  line-height: $association-list-line-height;
+  color: $association-list-color;
+  li {
+    position: relative;
+    outline: none;
+    border: none;
+    z-index: 1;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+    background: inherit;
+    padding: 0 $association-list-padding;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    float: unset;
+    &::after {
+      margin-left: $association-list-padding;
+    }
+  }
+}
+</style>

src/components/search/TopSearch.vue

@@ -103,7 +103,7 @@ export default {
 <style lang="scss">
 $search-color: #171826;
 $search-color--back: #5f5e64;
-$search-color--button: #2abed1;
+$search-color--button: $main;
 $search-color--placeholder: #c0c4cc;
 $search-color--input-group: #f5f6f7;
 

src/pages/search/middle/unit/index.config.js

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '搜索',
+  "navigationBarBackgroundColor": "#D7F6FB"
+})

src/pages/search/middle/unit/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="must-page-class-name page-search-bidding">
+    <div class="j-container bidding-search-middle-container">
+      <div class="j-header">
+        <top-search v-model="topSearch.input" @input="input" @submit="submit()"></top-search>
+      </div>
+      <div class="j-main bidding-search-middle-main">
+        <association-list
+          v-show="type === 'association'"
+          :keys="getKeys"
+          :list="list"
+          @click="goPage"
+        ></association-list>
+        <div class="bidding-search-middle-main-content" v-show="type === 'history'">
+          <history-list
+            class="content-module"
+            v-if="biddingSearchHistory.length"
+            :list="biddingSearchHistory"
+            @click="goPage"
+            @delete="deleteList"
+          ></history-list>
+          <HotKeyCard class="content-module" @clickTag="clickHotKeyItem" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { HistoryList } from '@/ui'
+import HotKeyCard from '@/components/search/middle/HotKeyCard.vue'
+import AssociationList from '@/components/search/AssociationList'
+import { mapState, mapActions, mapGetters } from 'vuex'
+import TopSearch from "../../../../components/search/TopSearch.vue";
+import Taro from "@tarojs/taro";
+import { ajaxGetBuyerAssociation } from '@/api/modules/search'
+import {debounce} from "lodash";
+
+export default {
+  name: 'SearchMiddleBidding',
+  components: {
+    TopSearch,
+    HotKeyCard,
+    AssociationList,
+    HistoryList
+  },
+  data() {
+    return {
+      topSearch: {
+        input: ''
+      },
+      cacheSearch: '',
+      type: 'history',
+      list: []
+    }
+  },
+  computed: {
+    ...mapState({
+      hotKeyList: (state) => state.search.hotKeyList
+    }),
+    ...mapGetters('search', ['biddingSearchHistory']),
+    getKeys() {
+      return this.topSearch.input.split(' ').filter((v) => v.trim())
+    }
+  },
+  async created() {
+    this.getQueryString()
+  },
+  methods: {
+    ...mapActions('search', ['removeHistory', 'setHistory']),
+    deleteList() {
+      this.removeHistory({
+        type: 'bidding'
+      })
+    },
+    getQueryString() {},
+    submit(e) {
+      const search = e || this.topSearch.input
+      // 历史记录新增
+      this.setHistory({
+        type: 'bidding',
+        item: {
+          label: search
+        }
+      })
+
+      Taro.navigateTo({
+        url: `/pages/search/result/bidding/index?search=${search}`,
+      })
+    },
+    clickHotKeyItem(item) {
+      this.goPage(item)
+    },
+    goPage(data) {
+      const keyword = data.label || ''
+      this.$nextTick(() => {
+        this.submit(keyword)
+      })
+    },
+    clear() {
+      this.type = 'history'
+      this.cacheSearch = ''
+      this.list = []
+    },
+    input() {
+      this.$nextTick(() => {
+        if (this.topSearch.input.trim() !== '') {
+          if (this.topSearch.input.trim() !== this.cacheSearch.trim()) {
+            this.loadList()
+          }
+        } else {
+          this.clear()
+        }
+      })
+    },
+    loadList: debounce(function () {
+      this.clear()
+      this.cacheSearch = '' + this.topSearch.input
+      ajaxGetBuyerAssociation({
+        name: this.topSearch.input,
+        typ: 'buyer'
+      }).then((res) => {
+        res = {
+          "error_code": 0,
+          "error_msg": "",
+          "data": {
+            "list": [
+              "查看完整信息信息",
+              "资产交易信息信息镇",
+              "资产交易信息信息申请",
+              "资产交易信息信息民村",
+              "资产交易信息信息单意",
+              "资产交易信息承租人信息",
+              "资产交易信息信息单意见",
+              "工业和信息化部信息中心",
+              "韶关市信息中心信息中心",
+              "南京信息工程大学信息科"
+            ]
+          }
+        }
+        const { error_code: code, data } = res
+        if (code === 0) {
+          const result = data?.list || []
+          if (Array.isArray(result) && result.length) {
+            this.type = 'association'
+            this.list = [].concat(result.map((v) => ({ label: v })))
+          } else {
+            this.type = 'history'
+          }
+        }
+      })
+    }, 200)
+  }
+}
+</script>
+
+<style lang="scss">
+.page-search-bidding {
+  .search-filter-history {
+    ::v-deep {
+      li:not(:last-of-type) {
+        .content-text {
+          border-bottom: 1px solid $border_color_3;
+        }
+      }
+      .content-text {
+        padding: 6px 0;
+      }
+    }
+  }
+  .bidding-search-middle-container {
+    background: $gradient_search_header;
+  }
+  .bidding-search-middle-main {
+    background: $white;
+    border-radius: 12px 12px 0 0;
+  }
+
+  .j-button-badge {
+    position: relative;
+    &::after {
+      content: attr(data-badge);
+      position: absolute;
+      right: -6px;
+      top: -10px;
+      padding: 2px 6px;
+      font-size: 10px;
+      line-height: 14px;
+      color: #fff;
+      background: linear-gradient(98deg, #ffa674 0%, #f01212 100%);
+      border-radius: 7px 7px 7px 0;
+      white-space: nowrap;
+    }
+  }
+
+  .search-type-tab-container {
+    padding: 10px 16px;
+    display: flex;
+
+    .search-type-item {
+      padding: 4px 12px;
+      font-size: 12px;
+      line-height: 22px;
+      color: #5f5e64;
+      border-radius: 4px;
+      background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0) 0%,
+          #ffffff 100%
+      );
+      box-shadow: 0px 2px 8px 0px #15abda33;
+      &:not(:last-of-type) {
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .bidding-search-middle-main-content {
+    background-color: #f7f9fa;
+  }
+
+  .content-module {
+    background: $white;
+    &:not(:last-of-type) {
+      margin-bottom: 12px;
+    }
+  }
+  .right-text {
+    font-size: 13px;
+    line-height: 20px;
+    color: $main;
+  }
+}
+
+</style>