fangliaoxiaochengxv/subPages/myOrder/myActivityOrder.vue

<template>
  <view class="common-page">
    <u-sticky bgColor="#fff">
      <view class="tabs-box">
        <u-tabs class="coupon-tabs" :scrollable="false" :current="currentIndex" lineColor="#C29556 " :activeStyle="{
		    	        color: '#C29556 ',
		    	         marginTop: '4rpx',
		    	        fontSize: '14px',}"
                :inactiveStyle="{
                 marginTop: '4rpx',
                fontSize: '14px',}"
                lineWidth="48rpx"
                lineHeight="6rpx"
                :list="tabs" @click="handleTabs"/>
      </view>
    </u-sticky>
    <view class="list">
      <order-item @refresh="refreshData" v-for="(item, index) in orderList" :key="index" :data="item">
      </order-item>
    </view>
  </view>
</template>

<script>
import OrderItem from './activityOrderItem'
import {myActivities} from '../../common/api/activity'

export default {
  components: {OrderItem},
  data() {
    return {
      total: 0,
      currentIndex: 0,
      pageParams: {
        page: 1,
        pageSize: 5,
      },
      topData: {
        top: 0,
        height: 0
      },
      currentStatus: '',
      tabs: [
        {name: '全部', value: ''},
        {name: '已报名', value: '3'},
        {name: '已完成', value: '4'},
        {name: '已取消', value: '0'},
      ],
      orderList: []
    }
  },
  watch: {
    currentIndex(nv) {
      if (nv == 5) {
        // 获取售后列表
        this.getAfterList(true)
      } else {
        this.getOrderList(true)
      }
    }
  },
  onLoad() {
    this.currentIndex = uni.getStorageSync("orderIndex")
    if (this.tabs[this.currentIndex]) {
      this.currentStatus = this.tabs[this.currentIndex].value
    } else {
      this.currentIndex = 0
    }
    if (this.currentIndex == 0) {
      this.getOrderList(true)
    }
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
  },
  onReachBottom() {
    if (this.currentIndex == 5) {
      this.getAfterList()
    } else {
      this.getOrderList()
    }
  },
  methods: {
    leftClick() {
      uni.switchTab({
        url: '/pages/mine/index'
      })
    },
    toHome() {
      uni.switchTab({
        url: '/pages/home/index'
      })
    },
    getAfterList(initFlag) {
      if (!initFlag) {
        if (this.pageParams.page * this.pageParams.pageSize < this.total) {
          this.pageParams.page++
        } else {
          return
        }
      } else {
        this.pageParams.page = 1
        this.total = 0
        this.orderList = []
      }
      let sendData = {
        ...this.pageParams
      }
      this.$api.getAfterSalesList(sendData).then(res => {
        const {list, page} = res.data
        this.orderList = this.orderList.concat(list)
        this.total = page.total
      })
    },
    refreshData() {
      this.pageParams.page = 1
      console.log('refresh')
      if (this.currentIndex == 5) {
        // 获取售后列表
        this.getAfterList(true)
      } else {
        this.getOrderList(true)
      }
      this.getOrderList(true)
    },
    handleTabs(tabData) {
      this.currentStatus = tabData.value
      this.pageParams.page = 1
      this.currentIndex = tabData.index
    },
    getOrderList(initFlag) {
      if (!initFlag) {
        if (this.pageParams.page * this.pageParams.pageSize < this.total) {
          this.pageParams.page++
        } else {
          return
        }
      } else {
        this.pageParams.page = 1
        this.total = 0
        this.orderList = []
      }
      let sendData = {
        status: this.currentStatus,
        ...this.pageParams
      }
      myActivities(sendData).then(res => {
        const {list, page} = res.data
        this.orderList = this.orderList.concat(list)
        this.total = page.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.common-page {
  min-height: 100vh;
  // overflow-y: auto;
  box-sizing: border-box;

}

.tabs-box {
  background-color: #fff;
  // padding: ;
}

.list {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}
</style>