sociology_app/pages/bookShop/commoditySearch.vue

<template>
   
  <view>
    <z-nav-bar>
      <u-search
        :clearabled="true"
        bgColor="#fff"
        borderColor="#54a966"
        focus
        v-model="bookScreen.bookName"
        @custom="souBook"
        @clear="clear"
      ></u-search>
    </z-nav-bar>
    <view class="sear_ch" v-if="this.show == 0">
      <view class="sear_ch_tit"> 历史搜索 </view>
      <view class="sear_ch_tag">
        <text v-for="item in historyList" @click="serkeyWord(item)">{{
          item
        }}</text>
      </view>
    </view>
    <view class="sear_class" v-if="this.show == 1">
      <view class="sc_xuan">
        <view
          class="sc_con"
          v-for="(item, index) in classFen"
          @click="FenBook(item)"
          :class="bookScreen.type == item.id ? 'sc_con sc_con_style' : 'sc_con'"
          >{{ item.sort }}</view
        >
      </view>
      <view class="sc_xuan">
        <view
          class="sc_con"
          v-for="(item, index) in classMian"
          @click="MianBook(item)"
          :class="
            bookScreen.is_charge == item.id ? 'sc_con sc_con_style' : 'sc_con'
          "
          >{{ item.sort }}</view
        >
      </view>
    </view>
    <view class="sear_list" v-if="this.show == 1">
      <view
        class="bl_tioa"
        v-for="(item, index) in bookList"
        @click="onBookJump(item)"
      >
      </view>
      <view style="height: 1px"></view>
      <view>
        <view v-if="status == 0" style="text-align: center">
          <u-loading-icon style="display: inline-block"></u-loading-icon>
          <font
            style="
              vertical-align: super;
              margin-left: 10px;
              font-size: 26rpx;
              color: #909399;
            "
            >努力加载中</font
          >
        </view>
        <view v-if="status == 1">
          <u-divider text="全部加载完成"></u-divider>
        </view>
      </view>
      <view v-if="this.show == 1 && this.bookList == ''">
        <u-divider text="暂无数据"></u-divider>
      </view>
      <view style="padding-bottom: 20rpx">
        <u-back-top :scroll-top="scrollTop"></u-back-top>
      </view>
    </view>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
export default {
  data() {
    return {
      playData: {},
      scrollTop: 0,
      totalPage: 0,
      status: 3,
      show: 0,
      bookList: [],
      historyList: [],
      bookScreen: {
        authorName: "", //作者
        publisherName: "", //出版社
        type: "", //电子书类型
        bookName: "", //关键词
        is_charge: 1, //是否收费（0收费1免费）
        state: 1,
        page: 1, //当前页码数
        limit: 10, //单页数据数量
      },
      classFen: [
        {
          sort: "全部",
          id: "",
        },
        {
          sort: "医学",
          id: 1,
        },
        {
          sort: "国学",
          id: 2,
        },
        {
          sort: "文学",
          id: 3,
        },
        {
          sort: "古籍",
          id: 4,
        },
      ],
      classMian: [
        {
          sort: "免费",
          id: 1,
        },
        {
          sort: "VIP",
          id: 0,
        },
      ],
    };
  },

  // 返回顶部
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },

  // 下拉刷新
  onReachBottom() {
    this.status = 0;
    if (this.bookScreen.page < this.totalPage) {
      this.bookScreen.page = this.bookScreen.page + 1;
      setTimeout(() => {
        this.$http.post("book/book/list", this.bookScreen).then((res) => {
          this.totalPage = res.page.totalPage;
          for (let i in res.page.list) {
            this.bookList.push(res.page.list[i]);
          }
        });
      }, 1000);
    } else {
      this.status = 1;
    }
  },

  //第一次加载
  onLoad(e) {},
  //页面显示
  onShow() {
    this.getHistory();
  },
  components: {
    musicPlay,
  },
  //方法
  methods: {
    // 获取缓存
    getHistory() {
      this.historyList = uni.getStorageSync("hisRecords");
      if (this.historyList.length > 10) {
        this.historyList.splice(10, this.historyList.length);
        uni.setStorageSync("hisRecords", this.historyList);
      }
    },

    // 获取列表数据
    getData() {
      this.$http.post("book/book/list", this.bookScreen).then((res) => {
        this.bookList = res.page.list;
        this.totalPage = res.page.totalPage;
        this.status = 3;
        this.show = 1;
      });
    },

    // 清空
    clear() {
      this.show = 0;
      this.getHistory();
    },

    // 搜索
    souBook() {
      if (this.bookScreen.bookName == "") {
        uni.showToast({
          icon: "none",
          title: "请输入关键字",
        });
        return;
      }
      this.getData();

      let ArryList = [];
      if (uni.getStorageSync("hisRecords") == "") {
        ArryList.push(this.bookScreen.bookName);
        uni.setStorageSync("hisRecords", ArryList);
      } else {
        let value = uni.getStorageSync("hisRecords");
        value.unshift(this.bookScreen.bookName);
        uni.setStorageSync("hisRecords", value);
      }
    },

    // 点击历史搜索
    serkeyWord(e) {
      this.bookScreen.bookName = e;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";

.sear_ch {
  margin: 50rpx 40rpx 0 40rpx;

  .sear_ch_tit {
    font-weight: bold;
    font-size: 30rpx;
    margin: 40rpx 0 0 0;
  }

  .sear_ch_tag {
    margin: 20rpx 0 0 0;

    text {
      background-color: #eee;
      font-size: 24rpx;
      border-radius: 50rpx;
      display: inline-block;
      margin: 0 30rpx 20rpx 0;
      padding: 10rpx 25rpx;
    }
  }
}

.sear_class {
  margin: 20rpx 30rpx 60rpx 30rpx;

  .sc_xuan {
    margin-bottom: 10rpx;

    .sc_con {
      display: inline-block;
      font-size: 28rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;
      padding: 6rpx 12rpx;
    }

    .sc_con_style {
      color: #27b386;
      background-color: #2ab58833;
    }
  }
}

.sear_list {
  margin: 50rpx 30rpx 0 30rpx;

  .bl_tioa {
    box-shadow: 0 0px 10px 1px #d3d1d133;
    background-color: #fff;
    position: relative;
    padding: 0 25upx 10upx 220upx;
    margin: 0 0 60rpx 0;
    border-radius: 15rpx;
    min-height: 250rpx;

    view {
      text {
        color: #9b9b9b;
        font-size: 24rpx;
        line-height: 36rpx;
      }

      .bok_name {
        font-weight: bold;
        color: #333;
        font-size: 28rpx;
      }
    }

    image {
      position: absolute;
      left: 30upx;
      top: -20upx;
      width: 160upx;
      height: 240upx;
    }
  }
}
</style>