applet/pages/shop/goodsList.vue

<template>
  <view class="container">
    <uv-navbar title="商品列表" placeholder @leftClick="goBack"></uv-navbar>
    <uv-sticky :customNavHeight="tabTop">
      <view class="zdtopbox">
        <div class="search-box">
          <div class="search-wap">
            <!-- <text class="iconfont search-icon">&#xe7a6;</text> -->
            <text class="iconfont search-icon">&#xe618;</text>
            <input type="text" class="sput" placeholder-style="color: #ddd;" confirm-type="search" v-model="value" placeholder="请输入搜索关键字" @confirm="confirmSubmit" />
          </div>
          <div class="word" @click="search()">搜索</div>
        </div>
        <view class="tabs">
          <view class="screen" @click="screening(1)">
            <view :class="screeningIndex == 1 ? 'activeColors' : ''">综合</view>
          </view>
          <view class="screen" @click="screening(4)">
            <view :class="screeningIndex == 4 ? 'activeColors' : ''">销量</view>
          </view>
          <view class="screen sortScreen" @click="screening(3)">
            <view :class="screeningIndex == 3 ? 'activeColors' : ''">价格</view>
            <view class="linge-box">
              <view class="iconfont  linge" :class="screeningIndex == 3 && !price ? 'activeColors' : ''">&#xe648;
              </view>
              <view class="iconfont linge" :class="screeningIndex == 3 && price ? 'activeColors' : ''">&#xe645;
              </view>
            </view>
          </view>
          <view class="screen" @click="screening(2)">
            <view :class="screeningIndex == 2 ? 'activeColors' : ''">新品</view>
          </view>
        </view>
      </view>
    </uv-sticky>
    <view class="list">
      <view class="item" v-for="(v,i) in list" :key="i" @click="goDetails(v)">
        <view class="item_l">
          <image :src="v.coverImage" mode="" />
        </view>
        <view class="item_r">
          <view class="item_r_title">
            <!-- <view class="tipsStatus">自营</view> -->
            <text>{{v.title}}</text>
          </view>
          <view class="item_r_sold">已售 <text>{{v.showSales}}</text>件 </view>
          <view class="item_r_price">
            <text v-if="v.productPaymentMode==1" style="font-size:22rpx;">{{v.minPoints}}积分</text>
            <rich-text v-else :nodes="mUtil.priceBigSmall(v.salePrice||v.minSalePrice)"></rich-text>
            <text class="marketPrice">￥{{ v.marketPrice||v.minMarketPrice }}</text>
          </view>
          <view class="item_r_comments">
            <text>0</text>条评论 评分:
            <!-- <text>5.0</text> -->
            <text style="margin-left: 2rpx;">{{v.average}}</text>
          </view>
          <view class="item_r_shop">
            {{v.businessName}}
            <text class="iconfont" style="font-size: 20rpx;">&#xe6c7;</text>
          </view>
        </view>
      </view>
      <noData v-if="list.length<=0" :config="{ top: 20, content: '暂无商品~' }"></noData>
      <uv-load-more v-else :status="status" />
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { shopProductPage_Api } from "@/api/shop.js"
import ldLoading from '@/components/ld-Loading/ld-loading.vue'
import { ref, getCurrentInstance } from 'vue'
import { onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance();
const mUtil = proxy.$mUtil;
const screeningIndex = ref(1);
const status = ref('nomore');//loadmore - 加载前，loading - 加载中，nomore - 没有数据
const loading = ref(false);
const list = ref([]);
const params = ref({
  pageSize: 10,
  pageNum: 1,
  orderType: 1, //1是综合（按发布时间），2是新品，3价格，4销量
  order_mode: '', //asc 或 desc
  orderByColumn: undefined,
  isAsc: undefined,
  newStatus: undefined,//新品
})
const value = ref("");
const goodsList = ref([]);
const tabTop = ref(0);
const price=ref(false);
onLoad((options) => {
  uni.getSystemInfo({
    success: (res) => {
      tabTop.value = res.statusBarHeight + 44;
    },
  });
  let id = uni.getStorageSync('businessId');
  if (id) {
    params.value.businessId = id;
  }
  if (options.keyword) {
    params.value.title = options.keyword;
    value.value = options.keyword || '';
  }
  getList();
})
const search = () => {
  params.value.title = value.value;
  params.value.pageNum = 1;
  getList();
}
const goBack = () => {
  uni.navigateBack()
}
const goDetails = (item) => {
  uni.navigateTo({
    url: `/pages/shop/goodsDetails?id=${item.productId}`
  });
}
// 下拉刷新
onPullDownRefresh(() => {
  params.value.pageNum = 1
  getList()
})
// 上拉加载更多
onReachBottom(() => {
  if (status.value == 'loadmore') {
    params.value.pageNum++
    getList()
  }
})
const screening = (e) => {
 loading.value = true;
 params.value.orderType = e;
 screeningIndex.value = e;
 if (e == 3) {
  price.value = !price.value;
   if (price.value) {
     params.value.orderMode = 'asc';
   } else {
     params.value.orderMode = 'desc';
   }
 } else if (e == 4) {
   params.value.orderMode = 'desc';
 } else {
   params.value.orderMode = '';
 }
 params.value.pageNum=1
 getList();
}
const getList = () => {
  status.value = 'loading';
  loading.value = true;
  shopProductPage_Api(params.value).then(res => {
    if (params.value.pageNum == 1) {
      list.value = res.rows
      if (res.rows.length > 0) {
        reset(params.value.title)
      }
    } else {
      list.value = [...list.value, ...res.rows]
    }
    if (list.value.length < res.total) {
      status.value = 'loadmore'
    } else {
      status.value = 'noMore'
    }
    uni.stopPullDownRefresh();
    loading.value = false;
  }).catch(e => {
    uni.stopPullDownRefresh()
    status.value = 'loadmore';
    loading.value = false;
  })
}
const reset = (text) => {
  let recordList = uni.getStorageSync('history') ? uni.getStorageSync('history') : [];
  recordList.unshift(text);
  let arr = JSON.parse(JSON.stringify(recordList));
  let newArr = Array.from(new Set(arr));
  recordList = newArr;
  uni.setStorageSync('history', JSON.parse(JSON.stringify(recordList)));
}
</script>
<style lang='scss'>
page {
  background-color: #f5f5f5;
}
</style>
<style lang='scss' scoped>
::v-deep.hx-navbar__content__main_search_hxicon {
  span {
    font-size: 30rpx;
  }
}
.zdtopbox {
  background-color: #fff;
  padding: 8rpx 30rpx 10rpx;
  // position: fixed;
  // left: 0;
  width: 100%;
  z-index: 66;
  box-sizing: border-box;
}
.search-box {
  width: 100%;
  display: flex;
  .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;
      width: 100%;
    }
  }

  .word {
    font-size: 28rpx;
    margin-left: 24rpx;
    line-height: 60rpx;
  }
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30rpx 0 10rpx;
  .screen {
    > view {
      font-size: 28rpx;
    }
  }
  .sortScreen {
    display: flex;
    align-items: center;
    .linge {
      line-height: 14rpx;
      font-size: 15rpx;
    }
  }
  .activeColors {
    color: #fa6138;
    font-weight: bold;
  }
}
.list {
  padding: 0 30rpx 30rpx;
  .item {
    padding: 30rpx 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
    display: flex;
    margin-top: 20rpx;
    .item_l {
      image {
        width: 226rpx;
        height: 226rpx;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 20rpx;
      }
    }
    .item_r {
      .item_r_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        .tipsStatus {
          display: inline-block;
          padding: -0 10rpx;
          background: #ff0000;
          border-radius: 10rpx 0px 10rpx 0px;
          line-height: 40rpx;
          text-align: center;
          margin-right: 10rpx;
          color: #fff;
          font-size: 20rpx;
        }
        text {
          font-size: 28rpx;
          color: #181818;
        }
      }
      .item_r_sold {
        font-size: 20rpx;
        margin-top: 5rpx;
        text {
          color: #ff6600;
        }
      }
      .item_r_price {
        font-size: 32rpx;
        color: #ff6600;
        display: flex;
        align-items: center;
        .marketPrice {
          font-size: 22rpx;
          color: #999;
          margin-left: 20rpx;
          text-decoration: line-through;
        }
      }
      .item_r_comments {
        font-size: 10px;
        color: #999999;
        margin-top: 15px;
        text {
          color: #ff4e15;
        }
      }
      .item_r_shop {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        align-items: center;
        margin-top: 4rpx;
      }
    }
  }
}
</style>