paper-shopkeeper-app/pages/search/index.vue

<template>
  <view class="page">
    <qn-header>
      <view class="nav-search">
        <image class="search-icon" src="/static/imgs/client/search-icon.png" />
        <view class="search-text">
          <uni-easyinput
            v-model="enterpriseName"
            :inputBorder="false"
            :clearSize="18"
            :placeholderStyle="'font-size:25rpx;'"
            placeholder="输入客户名称试试"
            confirmType="search"
            type="text"
            @input="search"
            @confirm="addHistory"
          />
        </view>
      </view>
    </qn-header>
    <view class="content">
      <view class="history-area" v-show="(!packingList || packingList.length == 0) && enterpriseName == ''">
        <view class="operation" v-show="historyList.length > 0">
          <text class="title">搜索历史</text>
          <uni-icons type="trash" size="16" @click="clearHistory"></uni-icons>
        </view>
        <view class="history-list">
          <view class="history-item" v-for="item in historyList" :key="item">
            <text class="name" @click="clickTag(item)">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="flex-col-center-start" v-show="packingList.length == 0 && enterpriseName != ''">
        <image style="width: 500rpx; height: 280rpx; margin-top: 240rpx" src="/static/imgs/client/search-empty.png"></image>
        <text style="font-size: 30rpx; color: #333333; margin-top: 50rpx">搜索无内容，换个关键词在试一次吧</text>
      </view>
      <view class="packing-area" v-show="packingList.length > 0">
        <scroll-view scroll-y="true" class="scroll-area">
          <view class="search-item" v-for="item in packingList" :key="item.enterpriseId" @click="go2('client-detail', { id: item.enterpriseId })">
            <image class="item_image" :src="item.enterpriseLogo || '/static/imgs/client/client-default.png'"></image>
            <view class="item">
              <view class="name" v-html="transformTitle(item.enterpriseName)"></view>
              <text class="business">{{ transformBusiness(item.business) }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getCompanyList } from '@/apis/searchApi.js'
import qnHeader from '@/components/qn-header/qn-header.vue'
export default {
  components: {
    qnHeader
  },
  data() {
    return {
      statusBarHeight: 20,
      enterpriseName: '',
      searchTimer: null,
      packingList: []
    }
  },
  mounted() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0
  },
  methods: {
    back,
    go2,
    search(enterpriseName) {
      if (enterpriseName.trim()) {
        this.searchTimer && clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          getCompanyList({ enterpriseName }).then((res) => {
            if (res) {
              this.packingList = res.records
            }
          })
        }, 300)
      } else {
        this.packingList = []
        this.searchTimer && clearTimeout(this.searchTimer)
      }
    },
    clickTag(value) {
      this.enterpriseName = value
      this.search(value)
    },
    transformTitle(title) {
      return title.replace(this.enterpriseName, `<text style="color: #007aff;">${this.enterpriseName}</text>`)
    },
    transformBusiness(business) {
      let text = business?.trim() || ''
      if (text.length > 17) {
        text = text.substr(0, 17) + '...'
      }
      return '主营：' + text
    },
    addHistory(value) {
      if (value.trim()) {
        this.$store.dispatch('addSearchHistory', value)
      }
    },
    clearHistory() {
      this.$store.commit('clearSearchHistory')
    }
  },
  computed: {
    historyList() {
      return this.$store.state.searchHistory || []
    }
  }
}
</script>

<style lang="scss">
.page {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  .header {
    padding: 0 32rpx 10rpx 20rpx;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 2rpx solid #d8d8d8;
    .nav-search {
      margin-left: 20rpx;
      width: 630rpx;
      height: 64rpx;
      background: #f5f6f7;
      border-radius: 16rpx;
      padding: 0 14rpx 0 24rpx;
      display: flex;
      align-items: center;
      flex-direction: row;
      .search-icon {
        width: 28rpx;
        height: 28rpx;
        flex-grow: 0;
        margin-right: 8rpx;
      }
      .search-text {
        flex-grow: 1;
        width: 500rpx;
        color: rgba(34, 34, 34, 0.75);
        font-weight: 400;
      }
    }
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f7f8fa;
    .history-area {
      width: 750rpx;
      .operation {
        width: 750rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        padding: 0 32rpx;
        .title {
          font-size: 28rpx;
          color: #888888;
          font-weight: 500;
        }
      }
      .history-list {
        width: 750rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 32rpx;
        .history-item {
          background-color: #fff;
          border-radius: 4rpx;
          margin: 10rpx 20rpx 10rpx 0;
          padding: 10rpx 40rpx;
          .name {
            font-size: 32rpx;
            color: #333333;
            font-weight: 400;
          }
        }
      }
    }
    .packing-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      .scroll-area {
        width: 750rpx;
        height: 600rpx;
        overflow: hidden;
        flex-grow: 1;
        background-color: #f7f8fa;
        // flex-basis: 0;
        .search-item {
          width: 750rpx;
          height: 148rpx;
          padding: 24rpx 32rpx;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          border-bottom: 2rpx solid #d8d8d8;
          .item_image {
            flex-grow: 0;
            flex-basis: auto;
            width: 100rpx;
            height: 100rpx;
            margin-right: 20rpx;
          }
          .item {
            .name {
              font-size: 30rpx;
              margin-bottom: 26rpx;
              color: #333333;
            }
            .business {
              font-size: 26rpx;
              color: #888888;
            }
          }
        }
      }
    }
  }
}
</style>