FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/pages/home/components/recentlySearch/index.vue

<template>
  <view>
    <view class="search-header">
      <view class="search-title">最近在搜</view>
      <view class="search-actions">
        <transition>
          <van-icon v-show="!isDelete" name="delete-o" class="icon-delete" @click="handleCompleteStatus(true)"/>
        </transition>
        <transition>
          <view v-show="isDelete" class="delete-controls">
            <span class="clear-text" @click="handleHistoryEmpty">清空</span>
            <van-button type="primary" size="small" @click="handleCompleteStatus(false)">完成</van-button>
          </view>
        </transition>
      </view>
    </view>
    <view class="search-suggestions">
      <view
          v-for="item in searchSuggestion"
          :key="item.uuid"
          class="suggestion-item"
          @touchstart.passive="startLongPress"
          @touchend="endLongPress"
      >
        <van-icon name="clock-o"/>
        <span class="item-text" @click='handleSearch(item)'>{{ item.searchCriteria }}</span>
        <transition>
          <van-icon name="close" @click="toggleDelete(item.uuid)" v-show="isDelete"/>
        </transition>
      </view>
    </view>
  </view>
</template>

<script>
import {deleteSearchRecord, getSearchRecordList, searchCommitment} from "@/api/commitment";

export default {
  name: 'SearchComponent',
  data() {
    return {
      isDelete: false,
      searchSuggestion: [],
      longPressTimer: null,
    }
  },
  mounted() {
    this.handleSearchSuggestion()
  },
  methods: {
    startLongPress() {
      this.longPressTimer = setTimeout(() => {
        this.isDelete = true
      }, 1000)
    },
    endLongPress() {
      clearTimeout(this.longPressTimer)
    },
    toggleDelete(uuid) {
      deleteSearchRecord({uuid})
      this.handleSearchSuggestion()
    },
    handleHistoryEmpty() {
      deleteSearchRecord({
        createUser: '2'
      })
      this.handleSearchSuggestion()
    },
    handleCompleteStatus(flag) {
      this.isDelete = flag
    },
    async handleSearch(item) {
      this.$emit('search', item.searchCriteria)
    },
    async handleSearchSuggestion() {
      try {
        const res = await getSearchRecordList({
          userId: '2'
        })
        this.searchSuggestion = res.data.slice(0, 6)
      } catch (e) {
        console.log(e)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.search-header {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid #ccc;
}

.search-title {
  display: flex;
  align-items: center;
}

.search-actions {
  display: flex;
  align-items: center;
}

.icon-delete {
  margin-right: 0.25rem;
}

.delete-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-text {
  font-size: 12px;
  color: #007aff;
  margin-right: 0.5rem;
}

.search-suggestions {
  margin: 0.375rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
}

.suggestion-item {
  flex-basis: 50%;
  margin-bottom: 0.625rem;
}

.item-text {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
}
</style>