new-88live/pages/user/footprint.vue

<template>
  <view class="collect-container">
    <view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
      <view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
        <view class="navigater flex align-center justify-between">
          <view class="back" :style="{ height: headHeight + 'px', lineHeight: headHeight + 'px' }" @tap="handleBack">
            <text class="wlIcon-fanhui1"></text>
          </view>
          <scroll-view scroll-x class="nav text-center">
            <view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub"
              :class="[currentItemId === item.type ? 'text-orange cur' : '', index === 1 ? 'hidden-nav-item' : '']"
              @tap="handleSelect(item.type, index)">
              <text class="text-30">{{ item.type_text }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- 主体 -->
    <swiper class="collect-container__main" :current-item-id="currentItemId" :style="{ height: windowHeight + 'px' }"
      @change="changeCurrent" @animationfinish="animationFinish">
      <swiper-item v-for="(data, keys) in navList" :key="keys" :item-id="data.type"
        :class="data.type === 'groups' ? 'hidden-swiper-item' : ''">
        <wanl-empty src="find_default3x" :text="$t('footprint.empty')" v-if="data.arrData.length === 0 && data.loaded" />
        <scroll-view class="content" scroll-y @scrolltolower="loadData">
          <view v-for="(item, footprint) in data.arrData" :key="footprint">
            <view class="wanl-gray text-sm margin-sm">
              {{ footprint }}
            </view>
            <view class="box">
              <view class="item" v-for="(goods, index) in item" :key="index">
                <image :src="$appKit.oss(goods.goods.image, 136, 126)" @tap="handleGoods(goods.goods_id)"></image>
                <view class="text-price margin-sm text-orange">{{ goods.goods.price }}</view>
              </view>
            </view>
          </view>
          <uni-load-more :status="data.loadingType" :content-text="contentText" />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { pullFootprintList } from '@/features/mall/mall-gateway'
export default {
  data() {
    return {
      headHeight: 0,
      windowHeight: 0,
      headTop: 0,
      currentId: 0,
      currentItemId: 'goods',
      navList: [],
      contentText: {
        contentdown: ' ',
        contentrefresh: '',
        contentnomore: ''
      }
    }
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync()
    const statusBarHeight = sysInfo.statusBarHeight || 0
    this.headTop = statusBarHeight
    this.headHeight = statusBarHeight + uni.upx2px(90)
    this.windowHeight = sysInfo.windowHeight - uni.upx2px(90)
    this.navList = [{
      type: 'goods',
      type_text: this.$t('footprint.my'),
      dataList: [],
      arrData: [],
      loadingType: 'more',
      current_page: 1
    }, {
      type: 'groups',
      type_text: this.$t('footprint.groups'),
      dataList: [],
      arrData: [],
      loadingType: 'more',
      current_page: 1
    }]
    this.contentText.contentrefresh = this.$t('footprint.loading')
    this.loadData()
  },
  methods: {
    async loadData(source) {
      let navItem = this.navList[this.currentId]
      if (!navItem) return
      if (navItem.loadingType == 'noMore') return
      if (source === 'tabChange' && navItem.loaded === true) return
      if (navItem.loadingType === 'loading') return
      navItem.loadingType = 'loading'
      try {
        const res = await pullFootprintList({
          type: navItem.type,
          page: navItem.current_page
        })
        navItem.current_page = res.current_page
        if (res.last_page === res.current_page) {
          navItem.loadingType = 'noMore'
        } else {
          navItem.loadingType = 'more'
          navItem.current_page++
        }
        res.data.forEach(item => {
          navItem.dataList.push(item)
        })
        navItem.arrData = this.formatData(navItem.dataList)
        this.$set(navItem, 'loaded', true)
      } catch (e) {
        navItem.loadingType = 'more'
        console.error('[footprint] load failed:', e)
      }
    },
    handleSelect(id, index) {
      this.currentItemId = id
      this.currentId = index
    },
    handleGoods(id) {
      if (this.currentItemId === 'goods') {
        uni.navigateTo({ url: `/pages/product/goods?id=${id}` })
      } else if (this.currentItemId === 'groups') {
        uni.navigateTo({ url: `/pages/apps/groups/goods?id=${id}` })
      }
    },
    changeCurrent(e) {
      this.currentItemId = e.detail.currentItemId
      this.currentId = e.detail.current
      this.loadData('tabChange')
    },
    handleBack() {
      uni.navigateBack({ delta: 1 })
    },
    animationFinish(e) {
      this.changeCurrent(e)
    },
    formatData(data) {
      var groups = {}
      data.forEach(res => {
        var cate = this.getLocalTime(res.createtime)
        if (!groups[cate]) {
          groups[cate] = []
        }
        groups[cate].push(res)
      })
      return groups
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000).toLocaleDateString().replace(/\//g, '-')
    }
  }
}
</script>

<style lang="scss">
.collect-container {
  &__head {
    .navigater {
      position: relative;

      .back {
        position: absolute;
        left: 25rpx;
        z-index: 9999;

        text {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }
  }

  &__main {
    position: relative;
    z-index: 99;

    .content {
      height: 100%;

      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &:after {
          content: "";
          width: 33%;
        }

        .item {
          width: 33%;
          background-color: #ffffff;
          margin-bottom: 5rpx;

          image {
            height: 230rpx;
          }
        }
      }
    }
  }
}

.hidden-nav-item {
  display: none !important;
}

.hidden-swiper-item {
  display: none !important;
}
</style>