yicangzongtai_app_240321/pages/research/homepage/search.vue

<template>
  <view class="search">
    <view class="top">
      <!-- @searchConfirm="searchConfirm" @searchBlur="searchBlur" -->
      <navbar ref="nav" :config="config" backColor="#666">
        <!--   <view slot="right" @click="goSearchConfirm" style="font-size: 28rpx; font-weight: 500; color: #FFFFFF;margin-right: 30rpx;" >
					搜索
				</view> -->
      </navbar>
    </view>
    <div class="search-box">
      <div class="search-wap">
        <text class="hxicon search-icon">&#xe65c;</text>
        <input type="text" focus class="sput" placeholder-style="color: #ddd;" confirm-type="search"
          v-model="inputValue" placeholder="请输入搜索内容" @confirm="searchConfirm" />
      </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>
  export default {
    data() {
      return {
        recordList: [],
        findList: [],
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "搜索",
          color: "#1A1A1A",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff "],

          // rightSlot: true,
          // search: {
          // 	value: "",
          // 	placeholder: "请输入搜索关键字",
          // 	disabled: false,
          // },
        },
        inputValue: ''
      };
    },
    onShow() {
      // this.recordList = uni.getStorageSync("history") ?
      // 	uni.getStorageSync("history") :
      // 	[];
      if (uni.getStorageSync("history")) {
        this.recordList = uni.getStorageSync("history").reverse();
      }
      this.$http.get("/keyword/search/list", {
        limit: 20
      }).then((res) => {
        if (res && res.code == 200) {
          this.findList = res.list;
        }
      });
    },
    methods: {
      onClickBtn(data) {
        //console.log(data);
      },
      //点击按钮
      goSearchConfirm() {
        // this.inputValue = this.$refs.nav.config.search.value;
        this.historyRecored()
        uni.navigateTo({
          url: "/pages/product/search/productList?keyword=" + this.inputValue
        });
      },
      historyRecored() {
        let word = this.inputValue
        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);
              }
              this.recordList = uni.getStorageSync("history").reverse();
            }

          }
        }

      },
      searchBlur(e) {
        this.inputValue = e.value
      },
      searchConfirm() {
        // if (e.value) {
        //   if (e.value.length > 50) {
        //     this.$mUtil.toast("搜索最多50个字符");
        //     return false;
        //   }
        this.historyRecored()
        uni.navigateTo({
          url: "/pages/product/search/productList?keyword=" + this.inputValue,
        });

        // }
      }, //搜索结果页
      goProductList(text) {
        uni.navigateTo({
          url: "/pages/product/search/productList?keyword=" + text,
        });
      },

    },
  };
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'hxicon';
    /* project id 2009392 */
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  }

  .hxicon {
    font-family: "hxicon" !important;
    font-size: 20px;
    font-style: normal;
    /* #ifndef APP-NVUE */
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    /* #endif */
  }

  /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;

      .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>