chelvc-custom/src/pagesHome/homeSearch/index.vue

<template>
  <view class="search">
    <page-navbar bgColor="#fff" title="门店搜索"></page-navbar>

    <view class="search-item">
      <u-search
        v-model="search_text"
        :clearabled="true"
        @custom="handlerSearchBtn"
        @search="handlerSearchBtn"
        :actionStyle="{ color: '#215EBE' }"
      />
    </view>

    <!-- 搜索历史 -->
    <view class="history" v-show="search_list.length != 0">
      <view class="history-top">
        <view class="title">搜索历史</view>
        <view class="history-right" @click="handlerAllSearchRecord">
          <u-icon name="trash" />
        </view>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) of search_list"
          :key="index"
          :text="item.name"
          plain
          closable
          borderColor="#F5F6F8"
          :show="close2"
          color="#0C1223"
          bgColor="#F5F6F8"
          :closable="false"
          @close="handlerCloseSearchItem(item, index)"
          @click="handlerSelctHistItem(item)"
        />
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="history">
      <view class="history-top">
        <view class="title">热门搜索</view>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) in popular_search_list"
          :text="item.name"
          :key="index"
          borderColor="#F5F6F8"
          :show="close2"
          :color="
            index == 0
              ? '#EB1010'
              : index == 1
              ? '#FF5219'
              : index == 2
              ? '#FDA50C'
              : '#0C1223'
          "
          bgColor="#F5F6F8"
          :closable="false"
          class="label-item"
          v-if="index < 8"
          @click="$u.route(`/pagesHome/marketer/index?id=${item.id}`)"
        />
      </view>
    </view>

    <view class="u-p-l-100 u-p-r-100">
      <u-divider text="猜你喜欢"></u-divider>
    </view>

    <!-- 列表 -->
    <view style="padding: 0 32rpx">
      <base-list
        :list="favorite_list"
        :boxShadow="boxShadow"
        @click="handleFavorite"
      ></base-list>
    </view>
  </view>
</template>

<script>
import { listHotMerchant, likeMerchant } from '@/api/client/home.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      close2: true,
      boxShadow: '0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.12)',
      search_text: '', // 搜索text
      search_list: [], // 搜索列表
      popular_search_list: [], //热门搜索列表
      favorite_list: [], // 猜你喜欢列表
    };
  },
  computed: {
    ...mapGetters(['location']),
  },
  watch: {
    // 搜索历史 > 8 删除最后一项
    search_list(newValue) {
      if (newValue.length > 8) {
        this.search_list.splice(newValue.length - 1, 1);
        uni.setStorageSync('searchItem', this.search_list);
      }
    },
  },
  onShow() {
    this.search_text = '';
    if (uni.getStorageSync('searchItem')) {
      this.search_list = uni.getStorageSync('searchItem');
    }
  },
  mounted() {
    this.handlerInitList();
  },
  methods: {
    // 初始化热门搜索 猜你喜欢列表
    handlerInitList() {
      listHotMerchant({ ...this.location }).then(res => {
        this.popular_search_list = res.data;
      });

      // 猜你喜欢列表
      likeMerchant({ ...this.location }).then(res => {
        this.favorite_list = res.data;
      });
    },

    // 点击搜索按钮
    handlerSearchBtn() {
      let params = {
        name: this.search_text,
      };
      this.search_list.unshift(params);
      uni.setStorageSync('searchItem', this.search_list);
      uni.navigateTo({
        url: `/pagesHome/storeList/index?keyword=${this.search_text}`,
      });
    },

    // 删除搜索记录按钮
    handlerCloseSearchItem(item, index) {
      this.search_list.splice(index, 1);
      uni.setStorageSync('searchItem', this.search_list);
    },

    // 点击搜索历史按钮
    handlerSelctHistItem(item) {
      this.search_text = item.name;
      uni.navigateTo({
        url: `/pagesHome/storeList/index?keyword=${this.search_text}`,
      });
    },

    // 删除所有搜索记录按钮
    handlerAllSearchRecord() {
      uni.removeStorageSync('searchItem');
      this.search_list = [];
    },

    handleFavorite(item) {
      uni.$u.route(`/pagesHome/marketer/index?id=${item.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  min-height: 100vh;
  background-color: #fff;
}

/* 搜索样式 */
.search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  margin-bottom: 10rpx;

  .search-btn {
    width: 160rpx;
    height: 70rpx;
    font-size: 28rpx;
    line-height: 70rpx;
  }
}

/* 搜索历史样式 */
.history {
  padding: 20rpx 30rpx;

  .history-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .title {
      color: #0c1223;
      font-size: 30rpx;
      font-weight: bold;
    }
    .history-right {
      margin-top: 15rpx;
      display: flex;
      font-size: 12px;
    }
  }
}

.label {
  display: flex;
  flex-wrap: wrap;
}

.label-item {
  margin-bottom: 20rpx;
}

::v-deep view.data-v-1481d46d,
scroll-view.data-v-1481d46d,
swiper-item.data-v-1481d46d {
  margin: 0 4rpx;
}

::v-deep view.data-v-39e33bf2,
scroll-view.data-v-39e33bf2,
swiper-item.data-v-39e33bf2 {
  margin-bottom: 10rpx !important;
}
</style>