rebatedine-mini/src/pages/order.vue

<template>
  <view class="order-main">
    <network-error />
    <u-sticky
      :enable="enable"
      offset-top="0"
      h5-nav-height="0"
    >
      <view class="order-tabs">
        <u-tabs
          :is-scroll="false"
          :list="tabList"
          :current="currentTab"
          height="72"
          font-size="28"
          active-color="#111111"
          inactive-color="#111111"
          :gutter="32"
          :bar-style="{
            bottom: '8rpx',
            marginLeft: '-8rpx',
            width: '56rpx',
            height: '10rpx',
            borderRadius: 0,
            backgroundColor: '#FD5B36',
            boxShadow: '0px 1px 1px 0px rgba(255, 102, 50, 0.3)'
          }"
          @change="changeTab"
        >
        </u-tabs>
      </view>
    </u-sticky>
    <view class="order-list">
      <block v-if="orderList.length !== 0">
        <view class="u-m-b-16" v-for="(item, index) in orderList" :key="index">
          <order-card
            :value="item"
            @click-card="toActivityDetail"
            @submit-result="toSubmitOrder"
            @cancel-sign-up="cancelSignUp"
          >
          </order-card>
        </view>
        <view class="touch-bottom u-font-22 line-32 u-text-center">{{isLoadMore ? '加载中...' : '到底了～'}}</view>
      </block>
      <block v-else>
        <view class="def-content">
          <def-content type="1"></def-content>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import defContent from '@/components/defContent'
import orderCard from '@/components/orderCard'
import { getOrderList, editJoinActivity } from '@/api/userApi'

export default {
  components: { defContent, orderCard },
  data () {
    return {
      enable: true,
      tabList: [
        {
          status: -1,
          name: '全部'
        }, {
          status: 1,
          name: '已报名'
        }, {
          status: 2,
          name: '已提交'
        }, {
          status: 3,
          name: '已完成'
        }, {
          status: 4,
          name: '已取消'
        }
      ],
      currentTab: 0,
      isLoadMore: false,
      searchForm: {
        page_no: 1,
        page_size: 10,
        status: -1
      },
      orderList: [],
      total: -1
    }
  },
  computed: {
    userId () {
      return this.$store.state.userInfo.id
    }
  },
  watch: {
    userId (e) {
      if (!e) {
        uni.navigateTo({
          url: '/pagesSub/other/login'
        })
      }
    }
  },
  onShow () {
    if (!this.userId) {
      uni.navigateTo({
        url: '/pagesSub/other/login'
      })
      return
    }
    this.enable = true
    this.searchForm.page_no = 1
    this.total = -1
    this.orderList = []
    this.getOrderData()
  },
  onHide () {
    this.enable = true
  },
  onPullDownRefresh () {
    this.searchForm.page_no = 1
    this.total = -1
    this.activityList = []
    this.getOrderData()
  },
  onReachBottom () {
    if (this.isLoadMore) {
      this.searchForm.page_no += 1
      this.getOrderData()
    }
  },
  methods: {
    // 获取订单列表
    async getOrderData () {
      const params = {
        page_no: this.searchForm.page_no,
        page_size: this.searchForm.page_size,
        status: this.searchForm.status
      }
      const { code, data } = await getOrderList(params)
      if (code === 200) {
        this.orderList = this.orderList.concat(data.rows)
        this.total = data.total_count
        this.isLoadMore = this.total !== this.orderList.length
      }
    },
    // 取消报名
    async joinActivity (id) {
      const params = {
        id: id,
        type: 2
      }
      const { code, msg } = await editJoinActivity(params)
      if (code === 200) {
        this.searchForm.page_no = 1
        this.total = -1
        this.orderList = []
        this.getOrderData()
        uni.showToast({
          title: '取消成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    },
    changeTab (index) {
      this.currentTab = index
      this.searchForm.status = this.tabList[index].status
      this.searchForm.page_no = 1
      this.total = -1
      this.orderList = []
      this.getOrderData()
    },
    cancelSignUp (e) {
      uni.showModal({
        title: '提示',
        content: '确定取消报名',
        confirmColor: '#1677FF',
        cancelColor: '#1677FF',
        success: (res) => {
          if (res.confirm) {
            this.joinActivity(e.id)
          }
        }
      })
    },
    toActivityDetail (e) {
      uni.navigateTo({
        url: `/pagesSub/activity/activityDetail?id=${e.activity_id}`
      })
    },
    toSubmitOrder (e) {
      uni.navigateTo({
        url: `/pagesSub/order/submitOrder?activityId=${e.activity_id}&userActivityId=${e.user_activity_id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-main {
  .order-tabs {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }
  .order-list {
    padding: 24px 16px 0 16px;
  }
  .def-content {
    padding-top: 252px;
  }
  .touch-bottom {
    padding: 16px 0;
    color: #BABBBC;
  }
}
</style>

<style >
  .order-tabs >>> .u-tab-item {
    z-index: 10;
  }
</style>