wanjiashangchao-user/pages/sy/searchPage/searchPage.vue

<template>
  <view class="page" :style="themeColor">
    <view class="flex flex-direction align-stretch justify-between benben-position-layout flex searchPage_flex_0"
      :style="{height:(110+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
      <view class='flex flex-wrap align-center justify-between searchPage_fd0_0'>
        <text class='fu-iconfont2  searchPage_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
          data-url="1">&#xE794;</text>
        <view class='flex flex-wrap align-center flex-sub searchPage_fd0_0_c1'>
          <image class='searchPage_fd0_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
          <input @confirm="handleSearch" class='flex-sub searchPage_fd0_0_c1_c1' type="text" focus="true" placeholder="请输入关键字" confirm-type="done"
            :maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="keyword" />
        </view>
        <text class='searchPage_fd0_0_c2' @tap.stop="handleSearch" data-type="navigateTo"
          :data-url="`/pages/sy/searchResult/searchResult`">搜索</text>
        <view :style="{width: capsuleWidth + 'px'}"></view>
      </view>

    </view>
    <view :style="{height: (110+StatusBarRpx)+'rpx'}"></view>
    <!---flex布局flex布局开始-->
    <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout searchPage_flex_1">
      <view class='flex flex-wrap align-center justify-between searchPage_fd1_0'>
        <view class='flex flex-wrap align-center'>
          <image class='searchPage_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"57.png"'></image>
          <text class='searchPage_fd1_0_c0_c1'>搜索历史</text>
        </view>
        <image class='searchPage_fd1_0_c1' :src='STATIC_URL+"58.png"' @tap.stop="handleDelete"></image>
      </view>
       <view class="flex align-center padding-lr" v-if="!historyList.length">暂无历史搜索</view>
      <view class='flex flex-wrap align-center'>
        <view class='flex flex-wrap align-center searchPage_fd1_1_c0' v-for="(item, index) in historyList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/sy/searchResult/searchResult?keyword=${item.title}`">
          <text class='searchPage_fd1_1_c0_c0'>{{item.title}}</text>
          <!-- <image class='searchPage_fd1_1_c0_c1' :src='STATIC_URL+"60.png"' @tap.stop="deleteSearchFunc()"></image> -->
        </view>
      </view>
      <view class='flex flex-wrap align-center justify-between searchPage_fd1_2'>
        <view class='flex flex-wrap align-center'>
          <image class='searchPage_fd1_2_c0_c0' mode="aspectFit" :src='STATIC_URL+"59.png"'></image>
          <text class='searchPage_fd1_2_c0_c1'>热门搜索</text>
        </view>
      </view>
      <view class="flex align-center padding-lr" v-if="!hotList.length">暂无热门搜索</view>
      <view class='flex flex-wrap align-center searchPage_fd1_3'>

        <view class='flex flex-wrap align-center searchPage_fd1_3_c0' v-for="(item, index) in hotList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/sy/searchResult/searchResult?keyword=${item.title}`">
          <text class='searchPage_fd1_3_c0_c0'>{{item.title}}</text>
          <!-- <image class='searchPage_fd1_3_c0_c1' :src='STATIC_URL+"60.png"' @tap.stop="deleteSearchFunc()"></image> -->
        </view>
      </view>
    </view>

    <!---flex布局flex布局结束-->
    <benben-popup v-model="popupShow1681282077687" :mask="true" mode='center'>
      <!---删除历史记录flex布局开始-->
      <view class="flex flex-direction flex-wrap align-center searchPage_flex_2">
        <text class='searchPage_fd2_0'>确定删除历史记录？</text>
        <view class='flex flex-wrap align-center searchPage_fd2_1'>
          <button class='searchPage_fd2_1_c0' @tap.stop="popupShow1681282077687=false">取消</button>
          <button class='searchPage_fd2_1_c1' @tap.stop="clearSearchFunc()">确定</button>
        </view>
      </view>

      <!---删除历史记录flex布局结束-->

    </benben-popup>


  </view>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        "popupShow1681282077687": false,
        "keyword": "",
        "length": "1",
        historyList: [],
        hotList: []
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      appSearchHistory() { // 搜索历史
        return this.$store.state.appSearchHistory
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getSearchHistory();
      this.getHotSearch();
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      handleSearch() {
        if (this.keyword.trim() == '') return this.$message.info('请输入搜索内容');
        uni.navigateTo({
          url: `/pages/sy/searchResult/searchResult?keyword=${this.keyword}`
        })
      },
      handleDelete() {
        if (!this.historyList.length) return this.$message.info('暂无历史搜索记录');
        this.$util.showModal({
          title:'提示',
          content: '确定删除历史记录?',
          success: res => {
            if (res.confirm) {
              this.$api.post(global.apiUrls.postDelSearch).then(res => {
                  let data = res.data;
                  this.$message.info(data.msg);
                  if (data.code == 1) {
                    this.getSearchHistory();
                  }
                })
                .catch(err => {
                  console.log('err: ' + JSON.stringify(err));
                });
            }
          }
        });
      },
      getHotSearch() {
        this.$api.post(global.apiUrls.getHotSearch).then(res => {
            if (res.data.code == 1) {
              this.hotList = res.data.data;
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      getSearchHistory() {
        this.$api.post(global.apiUrls.getSearchHistory).then(res => {
            if (res.data.code == 1) {
              this.historyList = res.data.data;
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      //删除搜索记录
      deleteSearchFunc(name) {
        this.$store.commit('appSearchHistoryDel', {
          "name": name
        })
      },
      //清空搜索记录
      clearSearchFunc() {
        this.$store.commit('appSearchHistoryClean', '')
        this.popupShow1681282077687 = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto !important;
  }

  .searchPage_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 110rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: #eee;
  }

  .searchPage_fd0_0_c2 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 0rpx 0rpx 32rpx;
    line-height: 32rpx;
  }

  .searchPage_fd0_0_c1_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: #333;
  }

  .searchPage_fd0_0_c1_c0 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .searchPage_fd0_0_c1 {
    background: rgba(246, 247, 249, 1);
    height: 64rpx;
    background-size: 100% auto !important;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    padding: 12rpx 24rpx 12rpx 24rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
  }

  .searchPage_fd0_0_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .searchPage_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 80rpx;
  }

  .searchPage_flex_1 {
    padding: 32rpx 32rpx 32rpx 32rpx;
  }

  .searchPage_fd1_3_c0_c1 {
    width: 16rpx;
    height: 16rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .searchPage_fd1_3_c0_c0 {
    line-height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .searchPage_fd1_3_c0 {
    background: rgba(246, 247, 249, 1);
    height: 56rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
    margin: 12rpx 12rpx 12rpx 12rpx;
  }

  .searchPage_fd1_3 {
    margin: 0rpx 0rpx rpx 0rpx;
  }

  .searchPage_fd1_2_c0_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 40rpx;
  }

  .searchPage_fd1_2_c0_c0 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .searchPage_fd1_2 {
    margin: 64rpx 0rpx 23rpx 0rpx;
  }

  .searchPage_fd1_1_c0_c1 {
    width: 16rpx;
    height: 16rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .searchPage_fd1_1_c0_c0 {
    line-height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .searchPage_fd1_1_c0 {
    background: rgba(246, 247, 249, 1);
    height: 56rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
    margin: 12rpx 12rpx 12rpx 12rpx;
  }

  .searchPage_fd1_0_c1 {
    width: 32rpx;
    height: 32rpx;
  }

  .searchPage_fd1_0_c0_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 40rpx;
  }

  .searchPage_fd1_0_c0_c0 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .searchPage_fd1_0 {
    margin: 0rpx 0rpx 23rpx 0rpx;
  }

  .searchPage_flex_2 {
    background: #fff;
    margin: 0rpx 105rpx 0rpx 105rpx;
    background-size: #eee;
    border-radius: 25rpx 25rpx 25rpx 25rpx;
  }

  .searchPage_fd2_1_c1 {
    background: transparent;
    line-height: 45rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(255, 147, 0, 1);
    padding: 24rpx 103rpx 24rpx 99rpx;
  }

  .searchPage_fd2_1_c0 {
    border-right: 1px solid #EEEEEE;
    background: transparent;
    line-height: 45rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    padding: 24rpx 103rpx 24rpx 103rpx;
  }

  .searchPage_fd2_1 {
    border-top: 1px solid #eee;
  }

  .searchPage_fd2_0 {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 52rpx;
    color: #333333;
    margin: 56rpx 0rpx 64rpx 0rpx;
  }
</style>