feat: 新增采购单位信息流组件

src/components/search/result/list-item/index.vue

@@ -1,41 +1,45 @@
 <template>
-  <div class="search-list-item-container">
-    <ProjectCell
-      v-if="cellType === 'bidding'"
-      :keys="searchKey"
-      card-type="detailed"
-      v-bind="item"
-      @click="onBiddingCellClick(item, searchKey)"
-    >
-      <template #buyerText="{ item }">
-        <span class="buyer-item link-clickable">
-          {{ item.text }}
-        </span>
-      </template>
-      <template #winnerText="{ item }">
-        <span
-          v-for="(winner, index) in item.children"
-          :key="index"
-          class="winner-item highlight-text link-clickable j-splitter"
-          data-j-splitter="、"
-        >
-          {{ winner.text }}
-        </span>
-      </template>
-    </ProjectCell>
-    <template v-if="cellType === 'ent'">ent</template>
-    <template v-if="cellType === 'buyer'">buyer</template>
-  </div>
+  <BuyerCell
+    v-if="cellType === 'buyer'"
+    class="list-project-cell"
+    v-bind="item"
+    @click="onBuyerCellClick(item)"
+  />
+  <ProjectCell
+    v-else
+    :keys="searchKey"
+    card-type="detailed"
+    class="list-project-cell"
+    v-bind="item"
+    @click="onBiddingCellClick(item, searchKey)"
+  >
+    <template #buyerText="{ item }">
+      <span class="buyer-item link-clickable">
+        {{ item.text }}
+      </span>
+    </template>
+    <template #winnerText="{ item }">
+      <span
+        v-for="(winner, index) in item.children"
+        :key="index"
+        class="winner-item highlight-text link-clickable j-splitter"
+        data-j-splitter="、"
+      >
+        {{ winner.text }}
+      </span>
+    </template>
+  </ProjectCell>
 </template>
 
 <script>
-import { ProjectCell } from '@/ui'
+import { ProjectCell, BuyerCell } from '@/ui'
 import Taro from '@tarojs/taro'
 
 export default {
   name: 'SearchFiltersContainer',
   components: {
     [ProjectCell.name]: ProjectCell,
+    [BuyerCell.name]: BuyerCell
   },
   props: {
     cellType: {
@@ -62,6 +66,11 @@ export default {
     return {}
   },
   methods: {
+    onBuyerCellClick(item) {
+      Taro.navigateTo({
+        url: `/pages/search/content/buyer/index?id=${encodeURIComponent(item.id)}`,
+      })
+    },
     onBiddingCellClick(item, searchKey) {
       Taro.navigateTo({
         url: `/pages/search/content/bidding/index?id=${encodeURIComponent(item.id)}&matchKey=${encodeURIComponent(searchKey)}`,

src/components/search/result/list/index.vue

@@ -488,7 +488,7 @@ export default {
     display: none;
   }
 
-  .project-cell {
+  .list-project-cell {
     background-color: #fff;
     margin: 8px;
     border-radius: 8px;

src/ui/buyer-cell/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <section
+    class="buyer-cell cell-clickable"
+    :class="{
+      visited: visited
+    }"
+    v-on="$listeners"
+  >
+    <div class="buyer-cell-hd">
+      <div class="buyer-cell-title-container">
+        <span class="iconfont icon-mine_company"></span>
+        <span class="buyer-cell-title visited-hd" v-html="getTitle"></span>
+      </div>
+    </div>
+    <div class="buyer-cell-bd">
+      <div class="cor-item-info cor-item-info-line-1 visited-ft">
+        <div class="cor-info-item cor-info-item-project">项目数量：{{ projectCount || '-' }}</div>
+        <div class="cor-info-item cor-info-item-amount">项目总金额：{{ budget || '-' }}</div>
+      </div>
+      <div class="cor-item-info cor-item-info-line-2 visited-ft">
+        <div class="cor-info-item cor-info-item-location">
+          <span>所在地：</span>
+          <span class="highlight-text">{{ location || '-' }}</span>
+        </div>
+        <div class="cor-info-item cor-info-item-time">更新时间：{{ updateTime || '-' }}</div>
+      </div>
+    </div>
+    <div class="buyer-cell-ft">
+      <div class="cor-item-right">
+        <slot name="ft-actions">
+          <span class="more-action">
+            <span>监控</span>
+          </span>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { replaceKeyword } from '../../utils/index'
+
+export default {
+  name: 'BuyerCell',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    visited: {
+      type: Boolean,
+      default: false
+    },
+    keys: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    projectCount: {
+      type: String,
+      default: ''
+    },
+    budget: {
+      type: [String, Number],
+      default: ''
+    },
+    location: {
+      type: String,
+      default: ''
+    },
+    updateTime: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    tagList() {
+      return this.tags.map((tag) => {
+        if (!tag || typeof tag === 'string') {
+          return {
+            name: tag,
+            className: 'grey'
+          }
+        } else {
+          return tag
+        }
+      })
+    },
+    getTitle() {
+      return replaceKeyword(this.title, this.keys)
+    },
+    getTime() {
+      if (this.timeFmt) {
+        return dateFormatter(this.time, this.timeFmt)
+      } else {
+        return dateFromNow(this.time)
+      }
+    },
+    setKeyLength() {
+      const key = this.keys[0]
+      if (key) {
+        if (key.length > 3) {
+          return key.substring(0, 3) + '...'
+        } else {
+          return key
+        }
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+.buyer-cell {
+  position: relative;
+  padding: 12px 16px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #171826;
+  background-color: $white;
+  .buyer-cell-title-container {
+    display: flex;
+    .buyer-cell-title {
+      margin-left: 4px;
+      flex: 1;
+    }
+  }
+  .buyer-cell-bd {
+    margin-top: 4px;
+    padding-left: 20px;
+  }
+
+  .icon-mine_company {
+    color: $main;
+    font-size: 26px;
+  }
+  .buyer-cell-ft {
+    margin-top: 14px;
+  }
+  .cor-item-info {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+  }
+  .cor-info-item {
+    margin: 0 8px;
+    flex: 1;
+  }
+  .cor-item-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .cor-item-info-line-1 {
+    color: #5f5e64;
+  }
+  .cor-item-info-line-2 {
+    color: #9B9CA3;
+  }
+
+  &.visited {
+    .visited-hd {
+      color: #C0C4CC!important;
+    }
+    .visited-ft {
+      color: #9B9CA3!important;
+    }
+    .visited-ft.visited-tag {
+      background-color: #F7F9F9;
+    }
+  }
+}
+</style>

src/ui/index.js

@@ -2,6 +2,7 @@ import HistoryList from '@/ui/history-list'
 import DropFilter from "./drop-filter/index.vue";
 import AppEmpty from './empty/index.vue'
 import ProjectCell from "./project-cell/index.vue";
+import BuyerCell from "./buyer-cell/index.vue";
 import JCell from "./j-cell/index.vue";
 import JStepper from "./j-stepper/index.vue";
 import SideBar from './sidebar-selector/index.vue'
@@ -15,6 +16,7 @@ export {
   DropFilter,
   AppEmpty,
   ProjectCell,
+  BuyerCell,
   JCell,
   JStepper,
   SideBar