new-greemall-wxapp/packageGoods/pages/list.vue

<template>
  <view class="app-container">
    <view class="top-container">
      <view
        class="item"
        :class="screenType === 0 ? 'current' : ''"
        @tap="changeScreen(0)"
        >综合</view
      >
      <view
        class="item"
        :class="screenType === 1 ? 'current' : ''"
        @tap="changeScreen(1)"
        >销量</view
      >
      <view
        class="item"
        :class="screenType === 2 || screenType === 3 ? 'current' : ''"
        @tap="changeScreen(2)"
        >价格
        <image src="@/static/icon/price_1.png" v-if="screenType === 2"></image>
        <image src="@/static/icon/price_2.png" v-if="screenType === 3"></image>
        <image
          src="@/static/icon/price_0.png"
          v-if="screenType != 2 && screenType != 3"
        ></image>
      </view>
      <view
        class="item"
        :class="screenType === 4 ? 'current' : ''"
        @tap="changeScreen(4)"
        >上新</view
      >
    </view>
    <view class="list-container">
      <block v-for="(item, index) in goodsList" :key="index">
        <view class="item" @tap="toGoodsDetail(item.goodsId)">
          <view class="image">
            <image :src="item.imgUrl" mode="aspectFill" class="img"></image>
            <image
              :src="item.logo"
              mode="aspectFill"
              class="water"
              v-if="item.isShowWater"
            ></image>
          </view>
          <view class="content">
            <view class="title ellipsis-2">{{ item.goodsName }}</view>
            <view class="bottom">
              <view class="price">
                <view class="price-1">¥{{ item.goodsPrice | numToFixed }}</view>
                <view class="price-2"
                  >¥{{ item.orgGoodsPrice | numToFixed }}</view
                >
              </view>
              <view class="btn"
                ><image src="@/static/icon/cart.png" mode="aspectFill"></image
              ></view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <no-data v-if="!goodsList.length" :showText="'暂无商品'"></no-data>
    <loading-text
      v-if="goodsList.length"
      :loading="loading"
      :noMore="noMore"
    ></loading-text>

    <!-- <drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button> -->
  </view>
</template>

<script>
// import dragButton from '@/components/drag-button.vue';

export default {
  // components:{
  // 	dragButton
  // },
  data() {
    return {
      cid: '',
      screenType: '',
      goodsList: [],
      pageNum: 1,
      pageSize: 8,
      noMore: false,
      loading: false,
    };
  },

  onShow() {
    // this.$refs.dragButton.init();
  },

  onLoad({ cid, cname }) {
    uni.setNavigationBarTitle({
      title: cname,
    });
    this.cid = cid;
    this.getGoodsList();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getGoodsList();
  },

  // 上拉加载
  onReachBottom() {
    this.getGoodsList(1);
  },

  methods: {
    // 切换筛选类型
    changeScreen(type) {
      if (type != 2) {
        if (this.screenType !== type) {
          this.screenType = type;
        } else {
          this.screenType = '';
        }
      } else {
        if (this.screenType != 2 && this.screenType != 3) {
          this.screenType = 2;
        } else if (this.screenType == 2) {
          this.screenType = 3;
        } else {
          this.screenType = '';
        }
      }
      this.pageNum = 1;
      this.getGoodsList();
    },

    // 获取商品列表
    getGoodsList(loadMore) {
      if (this.noMore && loadMore) return;
      this.noMore = false;
      if (!loadMore) {
        this.pageNum = 1;
      } else {
        this.loading = true;
      }
      this.$axios({
        url: '/goods/list/sort/page',
        method: 'get',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          categoryId: this.cid,
          sort: this.screenType,
        },
        isLoading: !loadMore,
      }).then((res) => {
        res.data.records.forEach((item) => {
          if (item.logo && item.logoStartTime) {
            item.isShowWater = this.$compareTime(
              item.logoStartTime,
              item.logoEndTime
            );
          } else {
            item.isShowWater = false;
          }
        });
        let _list = res.data.records;
        let pageTotal = res.data.pages;
        if (this.pageNum >= pageTotal) {
          this.noMore = true;
        }
        if (_list.length) {
          this.pageNum += 1;
        }
        if (loadMore) {
          this.goodsList = this.goodsList.concat(_list);
          this.loading = false;
        } else {
          this.goodsList = _list;
        }

        uni.stopPullDownRefresh();
      });
    },

    toGoodsDetail(id) {
      uni.navigateTo({
        url: '/packageGoods/pages/detail?id=' + id,
      });
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background: #f4f2f2;
  padding-top: 88rpx;
  box-sizing: border-box;
}
.top-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  display: flex;
  .item {
    width: 25%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #666666;
    &.current {
      color: #ff3f42;
    }
    image {
      width: 20rpx;
      height: 30rpx;
      display: block;
      margin-left: 10rpx;
    }
  }
}
.list-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  .item {
    width: 348rpx;
    background: #ffffff;
    margin-right: 14rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .image {
      width: 348rpx;
      height: 348rpx;
      flex-shrink: 0;
      position: relative;
      .img {
        width: 348rpx;
        height: 348rpx;
        display: block;
      }
      .water {
        width: 348rpx;
        height: 348rpx;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
    }
    .content {
      padding: 15rpx 20rpx;
      .title {
        font-size: 30rpx;
        color: #333333;
        line-height: 36rpx;
        font-weight: 600;
        height: 72rpx;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;
        .price {
          display: flex;
          flex-direction: column;
        }
        .price-1 {
          font-size: 32rpx;
          color: #ff3f42;
          line-height: 36rpx;
        }
        .price-2 {
          font-size: 26rpx;
          color: #666666;
          line-height: 30rpx;
          text-decoration: line-through;
        }
        .btn {
          width: 60rpx;
          height: 60rpx;
          background: #fe781f;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 41rpx;
            height: 36rpx;
            display: block;
          }
        }
      }
    }
  }
}
</style>