education_mp/pages/score/index.vue

<template>
  <view>
    <view class="product_box">
      <view class="to_bottom" v-if="!productList.length"> -----还没有积分产品-----</view>
      <view class="product_list" >
        <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
        <view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item,index) in productList" :key="index" >
          <image class="product_image" :src="item.thumb" mode=""></image>
          <view class="product_name"><text>{{item.name}}</text></view>
          <view class="stock_price">
            <view class="product_price">
              <text>{{item.score}} 积分</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="search_fixed" >
      <view class="search_box">
        <input class="search_input" type="text" v-model="requestParam.name" @input="searchChange" placeholder="请输入产品名称搜索" />
        <button class="search_btn" @click.stop="searchOpen()"  data-eventsync="true"> 搜索</button>
      </view>
    </view>
    <view class="to_bottom" v-if="isLast"> -----到底了-----</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 产品列表
      productList:[],
      // 请求参数
      requestParam:{
        name:"",
        page:1,
      },
      // 是否最后一页
      isLast:false,
      // 是否请求中
      isReqing:false,
    }
  },
  onLoad() {

  },
  onShow() {
    // 没有数据的话，或者请求中，不允许刷新
    if( this.isReqing )		return ;
    // 请求参数
    this.requestParam.name	= "";
    // 请求参数
    this.requestParam.page	= 1;
    // 是否是最后一页
    this.isLast			 	= false;
    // 设置请求中
    this.isReqing			= true;
    // 请求
    this.$http.request('api/score_product/get_list',this.requestParam).then((re)=>{
      // 设置非请求中
      this.isReqing		= false;
      // 成功结果
      if( re.code == 'success' ){
        if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
        this.productList = re.data.data;
      }
    });
  },
  onPullDownRefresh() {
    // 如果请求中，不允许请求，
    if( this.isReqing )		return uni.stopPullDownRefresh();
    // 初始化页码为1
    this.requestParam.page	= 1;
    // 是否是最后一页
    this.isLast			 	= false;
    // 设置请求中
    this.isReqing			= true;
    // 请求列表
    this.$http.request('api/score_product/get_list',this.requestParam).then((re)=>{
      // 设置非请求中
      this.isReqing		= false;
      // 成功结果
      if( re.code == 'success' ){
        if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
        this.productList = re.data.data;
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 如果页码是0，避免第一页重复
    if( this.requestParam.page < 1 ) return;
    // 最后一页不再请求
    if( this.isLast ) 	return;
    // 请求中，不再请求
    if( this.isReqing ) return;
    // 增加一页
    this.requestParam.page = this.requestParam.page+1;
    // 设置请求中
    this.isReqing			= true;
    // 请求列表
    this.$http.request('api/score_product/get_list',this.requestParam).then((re)=>{
      // 设置非请求中
      this.isReqing		= false;
      // 成功结果
      if( re.code == 'success' ){
        // 最后一页
        if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
        // 追加数据
        this.productList.push(...re.data.data);
      }
    });
  },
  methods: {
    searchChange(e){
      // 如果没有搜索词
      if( !this.requestParam.name ){
        this.searchOpen();
      }
    },
    searchOpen(){
      // 请求中，不再请求
      if( this.isReqing ) 	return;
      // 是否是最后一页
      this.isLast			 	= false;
      // 初始化页码为1
      this.requestParam.page	= 1;
      // 设置请求中
      this.isReqing			= true;
      // 请求列表
      this.$http.request('api/score_product/get_list',this.requestParam).then((re)=>{
        // 设置非请求中
        this.isReqing		= false;
        // 成功结果
        if( re.code == 'success' ){
          this.productList = re.data.data;
          if( re.data.data.length && re.data.last_page >= this.requestParam.page ) this.isLast = true;
        }
      });
    },
    toDetail(item){
      uni.navigateTo({
        url:"/pages/score/product?id="+item.id,
      })
    }
  }
}
</script>

<style lang="less">
.search_fixed{
  top: var(--window-top);
  left: 0rpx;
  width: 750rpx;
  display: block;
  position: fixed;
  margin: 0rpx auto;
  padding: 20rpx 0rpx;
  background-color: #FFFFFF;
  .search_box{
    width: 750rpx;
    height: 60rpx;
    display: block;
    position: relative;
    .search_input{
      z-index: 0;
      width: 590rpx;
      height: 56rpx;
      display: block;
      font-size: 24rpx;
      position: relative;
      border-top-left-radius: 40rpx;
      border-bottom-left-radius: 40rpx;
      padding-left: 20rpx;
      margin-left: 35rpx;
      border: 2rpx solid #dddddd;
    }
    .search_btn{
      top: 0rpx;
      z-index: 9;
      left: 610rpx;
      color: #FFFFFF;
      position: absolute;
      display: block;
      width: 120rpx;
      height: 60rpx;
      font-size: 24rpx;
      margin: 0rpx 0rpx;
      padding: 0rpx 0rpx;
      line-height: 60rpx;
      border-radius: 40rpx;
      background-color: #E03519;
    }
  }
}
.product_box{
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  margin-top: 120rpx;
  padding: 0rpx 35rpx;
  .product_list{
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    .product_item{
      float: left;
      width: 320rpx;
      display: block;
      overflow: hidden;
      margin: 20rpx 0rpx;
      margin-right: 20rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      .product_image{
        width: 320rpx;
        height: 320rpx;
      }
      .product_name{
        height: 80rpx;
        font-size: 26rpx;
        line-height: 40rpx;
        overflow: hidden;
        padding: 10rpx 10rpx;
      }
      .product_spec{
        color: #999999;
        font-size: 22rpx;
        line-height: 30rpx;
        padding: 0rpx 10rpx;
      }
      .stock_price{
        color: #dddddd;
        font-size: 20rpx;
        overflow: hidden;
        line-height: 30rpx;
        padding: 0rpx 10rpx;
        .product_price{
          float: left;
          color: red;
          font-size: 30rpx;
          line-height: 60rpx;
          .product_market{
            font-size: 24rpx;
            color: #999999;
            line-height: 30rpx;
            vertical-align: top;
            text-decoration: line-through;
          }
        }
        .product_stock{
          float: right;
          font-size: 20rpx;
          line-height: 60rpx;
        }
      }
    }
    .product_item:nth-child(even){
      margin-right: 0rpx;
    }
  }
}
</style>