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

<template>
  <view
    class="app-container"
    :style="
      'background:' + (pageConfig[2] && hasData ? pageConfig[2] : '#F5F5F5')
    "
  >
    <view class="banner-container" v-if="pageConfig[1]">
      <image :src="pageConfig[1]" mode="widthFix"></image>
    </view>

    <view class="top-container">
      <view class="tab">
        <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="icon">
        <image
          src="@/static/icon/show_1.png"
          v-if="showType == 1"
          @tap="showType = 2"
        ></image>
        <image
          src="@/static/icon/show_2.png"
          v-if="showType == 2"
          @tap="showType = 1"
        ></image>
      </view>
    </view>

    <view class="goods-waterfall-list" v-show="showType == 1">
      <view class="left">
        <block v-for="(item, index) in goodsList" :key="index">
          <view
            class="item"
            v-if="index % 2 == 0"
            @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="tags" v-if="item.tags1 && item.tags1.length > 0">
                <view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{
                  it
                }}</view>
              </view>
              <view class="price">
                <view class="price-1">¥{{ item.goodsPrice | numToFixed }}</view>
                <view class="price-2"
                  >¥{{ item.orgGoodsPrice | numToFixed }}</view
                >
              </view>
              <view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
                <view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{
                  it
                }}</view>
              </view>
              <view class="text">销量：{{ item.soldNum }}</view>
            </view>
          </view>
        </block>
      </view>
      <view class="right">
        <block v-for="(item, index) in goodsList" :key="index">
          <view
            class="item"
            v-if="index % 2 == 1"
            @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="tags" v-if="item.tags1 && item.tags1.length > 0">
                <view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{
                  it
                }}</view>
              </view>
              <view class="price">
                <view class="price-1">¥{{ item.goodsPrice | numToFixed }}</view>
                <view class="price-2"
                  >¥{{ item.orgGoodsPrice | numToFixed }}</view
                >
              </view>
              <view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
                <view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{
                  it
                }}</view>
              </view>
              <view class="text">销量：{{ item.soldNum }}</view>
            </view>
          </view>
        </block>
      </view>
    </view>

    <view class="goods-row-list" v-show="showType == 2">
      <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="right">
            <view>
              <view class="title ellipsis-2">{{ item.goodsName }}</view>
              <view class="tags" v-if="item.tags1 && item.tags1.length > 0">
                <view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{
                  it
                }}</view>
              </view>
            </view>
            <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="text">销量：{{ item.soldNum }}</view>
              </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>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      screenType: '',
      goodsList: [],
      pageNum: 1,
      pageSize: 8,
      noMore: false,
      loading: false,
      showType: 1,
      hasData: false,
    };
  },

  computed: {
    pageConfig() {
      const templateInfo = uni.getStorageSync('templateInfo');
      const MAP = {
        2: [
          '首页弹窗',
          templateInfo.popupHeadImage,
          templateInfo.popupBackgroundColor,
        ],
        3: [
          '活动专区1',
          templateInfo.active1HeadImage,
          templateInfo.active1BackgroundColor,
        ],
        4: [
          '活动专区2左侧',
          templateInfo.active2LeftHeadImage,
          templateInfo.active2LeftBackgroundColor,
        ],
        5: [
          '活动专区2右侧',
          templateInfo.active2RightHeadImage,
          templateInfo.active2RightBackgroundColor,
        ],
        6: [
          '专场专区1',
          templateInfo.only1HeadImage,
          templateInfo.only1BackgroundColor,
        ],
        7: [
          '专场专区2',
          templateInfo.only2HeadImage,
          templateInfo.only2BackgroundColor,
        ],
        8: [
          '专场专区3',
          templateInfo.only3HeadImage,
          templateInfo.only3BackgroundColor,
        ],
        9: [
          '专场专区4',
          templateInfo.only4HeadImage,
          templateInfo.only4BackgroundColor,
        ],
        10: [
          '专题精选1',
          templateInfo.topics1HeadImage,
          templateInfo.topics1BackgroundColor,
        ],
        11: [
          '专题精选2',
          templateInfo.topics2HeadImage,
          templateInfo.topics2BackgroundColor,
        ],
        12: [
          '专题精选3',
          templateInfo.topics3HeadImage,
          templateInfo.topics3BackgroundColor,
        ],
        13: [
          '底部广告图',
          templateInfo.bottomBannerHeadImage,
          templateInfo.bottomBannerBackgroundColor,
        ],
      };
      console.log(this.type ? MAP[this.type] : ['', '', '']);
      return this.type ? MAP[this.type] : ['', '', ''];
    },
    cuStyle() {
      return `height:${this.CustomBar - this.StatusBar}px; padding-top:${
        this.StatusBar
      }px;`;
    },
  },

  onShow() {
    uni.$on('hanbleShare', () => {});
  },

  onHide() {
    uni.$off('hanbleShare');
  },

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

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

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

  methods: {
    // 获取商品列表
    getGoodsList(loadMore) {
      if (this.noMore && loadMore) return;
      this.noMore = false;
      if (!loadMore) {
        this.pageNum = 1;
      } else {
        this.loading = true;
      }
      this.$axios({
        url: '/renovation/goods/list',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize,
          type: this.type,
          objId: uni.getStorageSync('templateInfo').companyWechatTemplateId,
          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;
        }
        if (this.goodsList.length > 0) {
          this.hasData = true;
        } else {
          this.hasData = false;
        }

        uni.stopPullDownRefresh();
      });
    },

    // 切换筛选类型
    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();
    },

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

<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  &.noBg {
    background: #f4f2f2 !important;
  }
}
.banner-container {
  image {
    width: 100%;
    display: block;
  }
}
.top-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #ffffff;
  display: flex;
  padding: 0 20rpx;
  align-items: center;
  box-sizing: border-box;
  .tab {
    flex: 1;
    display: flex;
    padding: 0 80rpx 0 30rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .item {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #666666;
      &.current {
        color: #ff3f42;
      }
      image {
        width: 18rpx;
        height: 30rpx;
        display: block;
        margin-left: 10rpx;
      }
    }
  }
  .icon {
    padding-right: 10rpx;
    image {
      width: 36rpx;
      height: 36rpx;
      display: block;
    }
  }
}
</style>