yicangzongtai_app_240321/pages/product/search/search.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>

    <view class="zdtopbox">
      <view class="" style="display: flex;">
        <text class="iconfont position-ab u-mt15 u-ml30 u-D1D9D4">&#xe7a6;</text>
        <input placeholder="请输入搜索关键字" @confirm="confirmSubmit" @input="getMsg" class="intoColor"
          placeholder-class="pc" />
        <text style="color: #FFFFFF;font-size: 36rpx; font-weight: 500;margin-left: 20rpx;align-items: center;"
          @click="SearchContent">搜索</text>
      </view>
    </view>
    <view class="u-plr30 u-mt30">
      <view v-if="recordList.length > 0">
        <view class="u-font32 u-1A1A1A u-bold u-flex-center-sb">
          <text>历史记录</text>
          <text class="iconfont u-font36 u-999" @click="delStory">&#xe64d;</text>
        </view>
        <view class="u-flex u-flex-warp">
          <view class="oval u-999 u-font24" v-for="(item, index) in recordList" @click="goProductList(item)"
            :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- <view class="u-mt40">
					<view class="u-font32 u-1A1A1A u-bold">热门搜索</view>
					<view class="u-flex u-flex-warp">
						<view class="oval u-999 u-font24" v-for="(item,index) in recommendList">{{item.name}}</view>
					</view>
				</view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '商品列表',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#FFFFFF'
        },
        recordList: [],
        recommendList: [{
            name: '厨房用具'
          },
          {
            name: '厨房用具'
          },
          {
            name: '厨房用具'
          }
        ],
        category_id: null,
        searchMsg: ''
      };
    },
    onLoad(options) {
      this.category_id = options.category_id;
      this.SearchContent();
    },
    onShow() {
      let history = uni.getStorageSync('history')
      if (history) {
        this.recordList = history
      }
    },
    methods: {
      confirmSubmit(e) {
        if (e.detail.value) {
          uni.navigateTo({
            url: './productList?keyword=' + e.detail.value + '&category_id=' + this.category_id
          });
        }
      },
      getMsg(e) {
        this.searchMsg = e.detail.value;
      },
      SearchContent() {
        uni.navigateTo({
          url: './productList?keyword=' + this.searchMsg + '&category_id=' + this.category_id
        });
      },

      //清空
      delStory() {
        uni.showModal({
          title: '提示',
          content: '确定清空历史记录？',
          success: res => {
            if (res.confirm) {
              this.recordList = [];
              uni.removeStorageSync('history');
            }
          }
        });
      },
      //搜索结果页
      goProductList(text) {
        uni.navigateTo({
          url: './productList?keyword=' + text
        });
      }
    }
  };
</script>

<style lang="scss">
  .position-ab {
    position: absolute;
    color: #fff;
  }

  .zdtopbox {
    background-color: #FA6138;
    padding: 8rpx 30rpx 30rpx;

    input {
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 50rpx;
      color: #fff;
      background-color: #FA6138;
      border: 1rpx solid rgba(255, 255, 255, 0.42);
      // background-color: rgba($color: #abc5b5, $alpha: 0.4);
      padding-left: 78rpx;
      box-sizing: border-box;
    }

    .pc {
      font-size: 22rpx;
      color: #fff;
    }
  }

  .oval {
    background-color: #f5f5f5;
    padding: 18rpx 38rpx;
    border-radius: 50rpx;
    margin-top: 30rpx;
    margin-right: 22rpx;
  }
</style>