chelvc-custom/src/pages/client/clientPackage/search.vue

<template>
  <view class="search">
    <view class="search-item">
      <u-search v-model="search_text" :clearabled="true" @custom="handlerSearchBtn" />
      <!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
    </view>
    <!-- 搜索历史 -->
    <view class="history">
      <view class="history-top">
        <hotCom>搜索历史</hotCom>
        <view class="history-right" @click="handlerAllSearchRecord">
          <u-icon name="trash" />
          <text>删除记录</text>
        </view>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) of search_list"
          :key="index"
          :text="item.name"
          plain
          closable
          :show="close2"
          @close="handlerCloseSearchItem(item, index)"
        />
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="history">
      <view class="history-top">
        <text class="hotCom">热门搜索</text>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) in favourite_list"
          :text="item.name"
          :key="index"
          class="label-item"
          @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
        />
      </view>
    </view>

    <u-divider text="猜你喜欢"></u-divider>

    <!-- 列表 -->
    <view class="popular-box">
      <view
        class="hot"
        v-for="(item, index) of popular_search_list"
        :key="index"
        @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
      >
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
        <view>
          <view class="item-text">{{ item.name }}</view>
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" :value="item.score" readonly />
              <text class="line">|</text>
            </view>
            <view>{{ item.goodReview }}单</view>
          </view>
          <view class="address-flex">
            <view>{{ item.address }}</view>
            <view>2.7km</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listHotMerchant, likeMerchant } from '@/api/client/home.js';
export default {
  data() {
    return {
      count: 5,
      value: 4,
      close2: true,
      radios: [
        {
          checked: true,
        },
      ],
      checkboxs: [
        {
          checked: true,
        },
      ],
      search_text: '', // 搜索text
      search_list: [], // 搜索列表

      popular_search_list: [], //热门搜索列表
      favourite_list: [], // 猜你喜欢列表
    };
  },
  onShow() {
    if (uni.getStorageSync('searchItem')) {
      this.search_list = uni.getStorageSync('searchItem');
    }
  },
  mounted() {
    this.handlerInitList();
  },
  methods: {
    // 初始化热门搜索 猜你喜欢列表
    handlerInitList() {
      listHotMerchant().then(res => {
        this.popular_search_list = res.data;
      });

      // 猜你喜欢列表
      likeMerchant().then(res => {
        this.favourite_list = res.data;
      });
    },
    // 点击搜索按钮
    handlerSearchBtn() {
      if (!this.search_text) {
        uni.showToast({
          title: '请输入您要搜索的关键字',
          icon: 'none',
        });
        return;
      } else {
        let params = {
          name: this.search_text,
        };
        this.search_list.push(params);
        uni.setStorageSync('searchItem', this.search_list);
        this.search_text = '';
      }
    },
    // 删除搜索记录按钮
    handlerCloseSearchItem(item, index) {
      this.search_list.splice(index, 1);
      uni.setStorageSync('searchItem', this.search_list);
    },
    // 删除所有搜索记录按钮
    handlerAllSearchRecord() {
      uni.removeStorageSync('searchItem');
      this.search_list = [];
    },
  },
};
</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: 30rpx;
  margin-bottom: 10rpx;

  .history-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .history-right {
      margin-top: 15rpx;
      display: flex;
      font-size: 12px;
    }

    hotCom {
      font-size: 15px;
      font-weight: bold;
      color: #404045;
    }
  }
}

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

// 列表
.hot {
  height: 220rpx;
  background-color: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  display: flex;

  Image {
    width: 120px;
    height: calc(100% - 20rpx);
    margin: 10rpx 20rpx 10rpx 0;
  }

  .item-text {
    font-weight: bold;
    margin: 10rpx 0 10rpx;
    color: #333;
  }

  .item-flex {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 0 20rpx 30rpx 0;
    color: #0d0d0d66;

    .star {
      display: flex;

      .line {
        margin-left: 18rpx;
        margin-top: 5rpx;
        font-size: 24rpx;
      }
    }
  }

  .address-flex {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-right: 20rpx;
  }
}

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