applet/pages/shop/goodSearch.vue

<template>
  <view class="search">
    <uv-navbar title="搜索" placeholder @leftClick="goBack"></uv-navbar>
    <div class="search-box">
      <div class="search-wap">
        <text class="iconfont search-icon">&#xe618;</text>
        <input type="text" focus class="sput" placeholder-style="color: #999999;" confirm-type="search" v-model="inputValue" placeholder="请输入搜索内容" @confirm="goSearchConfirm" />
      </div>
      <div class="word" @click="goSearchConfirm">搜索</div>
    </div>
    <view class="record" v-if="recordList.length>0">
      <view class="record-top"> 历史记录 </view>
      <view class="record-flex">
        <view class="record-item" v-for="(item,index) in recordList" :key="index" @click="goProductList(item)">
          {{ item }}
        </view>
      </view>
    </view>
    <!-- <view class="find">
      <view class="find-top"> 搜索发现 </view>
      <view class="find-flex">
        <view class="find-item" v-for="(item,index) in findList" :key="index" @click="goProductList(item.key_word)">
          {{ item.key_word }}
        </view>
      </view>
    </view> -->
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const recordList = ref([]);
const inputValue = ref('');
const goBack = () => {
  uni.navigateBack()
}
const historyRecored = () => {
  let word = inputValue.value;
  if (word != '') {
    let history = uni.getStorageSync("history");
    if (!history) {
      uni.setStorageSync("history", [word]);
    } else {
      let arr = uni.getStorageSync("history");
      let isHad = false;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == word) {
          isHad = true;
          break;
        }

      }
      if (!isHad) {
        if (arr.length > 10) {
          arr.splice(9, 1);
          let pp = arr.concat([word]);
          uni.setStorageSync("history", pp);
        } else {
          history = history.concat([word]);
          uni.setStorageSync("history", history);
        }
        recordList.value = uni.getStorageSync("history").reverse();
      }

    }
  }
}
const goProductList = (text) => {
  // historyRecored()
  uni.navigateTo({
    url: "/pages/shop/goodsList?keyword=" + text,
  });
}
const goSearchConfirm = () => {
  uni.navigateTo({
    url: "/pages/shop/goodsList?keyword=" + inputValue.value,
  });
}

onShow(() => {
  if (uni.getStorageSync("history")) {
    recordList.value = uni.getStorageSync("history").reverse();
  }
})
</script>

<style lang='scss' scoped>
::v-deep.hx-navbar__content__main_search_hxicon {
  span {
    font-size: 30rpx;
  }
}
.search-box {
  height: 85rpx;
  padding: 0 30rpx;
  // width: 100%;
  background-color: #fff;
  display: flex;

  // align-items: center;
  .search-wap {
    width: 600rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.42);
    border-radius: 30rpx;
    position: relative;

    ::v-deep .uni-input-input {
      color: #333333 !important;
      font-size: 26rpx;
    }

    .search-icon {
      font-size: 18px;
      margin-left: 30rpx;
    }

    .sput {
      margin-left: 25rpx;
      font-size: 22rpx;
      // color: #ffffff;
      width: 100%;
    }
  }

  .word {
    font-size: 28rpx;
    margin-left: 24rpx;
    line-height: 60rpx;
  }
}

.find {
  margin: 10rpx 30rpx 0 30rpx;

  .find-top {
    color: #1a1a1a;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 28rpx;
  }

  .find-flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;

    .find-item {
      color: #999999;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 24rpx;
      padding: 18rpx 30rpx;
      background-color: #f5f5f5;
      border-radius: 36rpx;
      margin: 0 22rpx 32rpx 0;
    }
  }
}

.record {
  margin: 30rpx;

  .record-top {
    font-size: 32rpx;
    font-weight: 700;
    color: #1a1a1a;
  }

  .record-flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;

    .record-item {
      margin: 0 22rpx 30rpx 0;
      padding: 20rpx 30rpx;
      color: #999999;
      font-size: 24rpx;
      font-weight: 400;
      background-color: #f5f5f5;
      line-height: 24rpx;
      border-radius: 36rpx;
    }
  }
}
</style>