work-order/work-order-uniapp/pages/task/index.vue

<template>
  <view class="app-container">
    <HeaderBar v-if="mode == 'user'" title="历史任务" enable-back text-align="center"/>
    <HeaderBar v-else title="我的订单" enable-back text-align="center"/>

    <!-- 状态切换 -->
    <view class="tab-bar">
      <view
        v-for="(item, idx) in statusTabs"
        :key="item.value"
        :class="['tab-item', queryParams.status === item.value ? 'active' : '']"
        @click="onTabChange(item.value)"
      >
        {{ item.label }}
      </view>
    </view>
    <view class="task-list">
      <!-- 列表 -->
      <TaskCard
        v-for="item in orderList"
        :key="item.id"
        :task="item"
        :mode="mode"
        @detail="handleDetail"
        @refresh="getList"
      />
    </view>
    <uni-load-more :status="loadStatus(loading, orderList.length, total)" />

    <FooterTabBar :active="'/pages/task/index'" mode="mch" v-if="mode === 'mch'" />
  </view>
</template>

<script>
import { appGetTaskList } from '@/api/app/task';
import { mchListTask } from '@/api/mch/task';
import { $loadList } from '@/utils/mixins';
import HeaderBar from '@/components/HeaderBar.vue';
import { TaskType, TaskStatus } from '@/utils/enums';
import FooterTabBar from '@/components/FooterTabBar.vue';
import TaskCard from './components/TaskCard.vue';
import { mapGetters } from 'vuex';

export default {
  mixins: [$loadList],
  components: { HeaderBar, FooterTabBar, TaskCard },
  data() {
    return {
      mode: "user",
      TaskType,
      TaskStatus,
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        orderByColumn: "createTime",
        isAsc: "desc",
        status: null
      },
      total: null,
      loading: false,
    }
  },
  computed: {
    ...mapGetters([
      'mchId'
    ]),
    statusTabs() {
      if (this.mode == "user") {
        return [
          { label: '全部', value: null },
          { label: '已下单', value: TaskStatus.WAIT_RECEIVE },
          { label: '进行中', value: TaskStatus.RECEIVED },
          { label: '已完成', value: TaskStatus.FINISHED },
          { label: '已取消', value: TaskStatus.CANCEL },
          { label: '售后', value: TaskStatus.AFTER_SALE },
        ];
      } else {
        return [
          { label: '全部', value: null },
          { label: '已接单', value: TaskStatus.RECEIVED },
          { label: '已完成', value: TaskStatus.FINISHED },
          { label: '已取消', value: TaskStatus.CANCEL },
          { label: '售后', value: TaskStatus.AFTER_SALE },
        ];
      }
    }
  },
  onLoad(options) {
    if (options.status) {
      this.queryParams.status = options.status;
    }
    if (options.mode) {
      this.mode = options.mode;
      this.queryParams.mchId = this.mchId;
    }
    this.getList();
  },
  onShow() {
    this.getList();
  },
  onReachBottom() {
    this.loadList();
  },
  methods: {
    handleDetail(id) {
      uni.navigateTo({
        url: `/pages/task/detail?id=${id}&mode=${this.mode}`
      })
    },
    onTabChange(status) {
      this.queryParams.status = status;
      this.getList();
    },
    getList() {
      this.queryParams.pageNum = 0;
      this.total = null;
      this.orderList = [];
      this.loadList();
    },
    loadList() {
      this.loadMore(() => {
        this.loading = true;
        this.queryParams.pageNum++;
        if (this.mode == "user") {
          appGetTaskList(this.queryParams).then(res => {
            this.orderList.push(...res.rows);
            this.total = res.total;
          }).finally(() => {
            this.loading = false;
          })
        } else if (this.mode == "mch") {
          mchListTask(this.queryParams).then(res => {
            this.orderList.push(...res.rows);
            this.total = res.total;
          }).finally(() => {
            this.loading = false;
          })
        }
      }, this.loadStatus(this.loading, this.orderList.length, this.total))
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  display: flex;
  border-radius: 16rpx;
  margin: 24rpx 24rpx 0 24rpx;
  overflow: hidden;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 12rpx 0;
  font-size: 30rpx;
  color: #666;
  &.active {
    color: #007aff;
    font-weight: bold;
  }
}
.task-list {
  padding: 0 24rpx 64rpx;
}
</style>