leromro-mini/pages/classify.vue

<template>
  <view>
    <view class="classify-main">
      <up-tabs :list="column" :scrollable="false" @change="onChange" :activeStyle="{
        color: 'rgba(221, 94, 69, 1)',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }" lineColor="rgba(221, 94, 69, 1)" v-model:current="tabKey">
      </up-tabs>
  
      <view class="list">
        <List :data="data" v-if="data && data.length > 0" @refresh="getList" ref="listRef" :total="pages.total" />
        <view v-else>
          <NoneView value="您还没有相关订单" />
        </view>
      </view>
    </view>
    <custom-tab-bar page="order" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import List from '@/pages/common/orderList/index.vue'
import { provide,inject } from 'vue'
import { getVolunteerOrderList } from '@/api/volunteer.js'
import { onMounted } from 'vue'
import { useDict } from '@/utils/dict.js'
import { onShow } from '@dcloudio/uni-app'
import NoneView from '@/components/NoneView/index.vue'
import { userMainOrderList } from '@/api/userList.js'
import CustomTabBar from '@/components/CustomTabBar/index.vue'
import { getToken } from '@/utils/auth'

const userType = uni.getStorageSync('userType')|| 1; //读取本地存储
const tab = ref('')
const tabKey = ref(0)
const data = ref([]) //志愿者
const listRef = ref(null)
/**
 * 	0待支付 1已支付 2支付超时或取消 3进行中 4已完成 5申请退款中 6已退款 7部分退款 8 待确认
 */
const admin = [
  {
    name: '全部',
    value: '',
  },
  {
    name: '待服务',
    value: '1',
  },
  {
    name: '进行中',
    value: '3',
  },
  {
    name: '已完成',
    value: '4',
  },
  {
    name: '已取消',
    value: '2',
  },
]
const user = [
  {
    name: "全部",
    value: "",
  },
  {
    name: "待支付",
    value: "0",
  },
  {
    name: "待服务",
    value: "1",
  },
  {
    name: "进行中",
    value: "3",
  },
  {
    name: "已完成",
    value: "4",
  },
  {
    name: "售后",
    value: '2,5,6,7',
  }
]

const column = computed(() => {
  return userType === 1 ? user : admin
})

const pages = ref({
  current: 1,
  pageSize: 10,
  total: null,
})
async function getList(type) {
  console.log("TCL: getList -> type", type)
  try {

    console.log(data.value.length, pages.value.total);
    if (type === 'top') {
      data.value = [];
      pages.value.total = 0;
    }
    if (type === 'bottom') {
      if (data.value.length < pages.value.total) {
        listRef.value && listRef.value.handleBottom(true);
        pages.value.current++;
      } else {
        listRef.value && listRef.value.handleBottom(false)
        return;
      }
    } else {
      uni.showLoading({
        title: '数据加载中...',
      })
    }


    const listApi = userType === 1 ? userMainOrderList : getVolunteerOrderList
    const res = await listApi({
      orderStatus: tab.value,
      pageNum: pages.value.current,
      pageSize: pages.value.pageSize,
    })
    data.value = [...data.value, ...res.rows];
    pages.value.total = res.total;

    type === 'bottom' && listRef.value && listRef.value.handleBottom(false);


  } catch (error) {
    console.log('error', error)
    uni.showToast({
      title: error.msg,
      icon: 'error',
    })
  } finally {
    if (listRef.value && listRef.value.handleRefreshing && type === 'top') {
      listRef.value.handleRefreshing(false)
    }


    setTimeout(() => {
      if (data.value.length === pages.value.total && pages.value.total > 0) {
        listRef.value && listRef.value.handleBottom(false)
      }
    }, 500)

    type !== 'bottom' && uni.hideLoading()
  }
}

/**
 * 1: 查看
 * 2：沟通
 * 3：开始或结束服务
 */
function btnClick(row, type) {
  if (type === 1) {
    uni.navigateTo({
      url: `/pages_classify/pages/order/index?secondOrderId=${row.secondOrderId}`,
    })
    return
  }
  if (type === 3) {
    uni.navigateTo({
      url: `/pages_classify/pages/handle/index?secondOrderId=${row.secondOrderId}`,
    })
    return
  }

  //前往沟通
  uni.navigateTo({
    url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${row.mainOrderId}`
  });
}
provide('onClick', btnClick)
function onChange(tabItem) {
  tab.value = tabItem.value;
  pages.value.current = 1;
  data.value = [];
  getList()
}
onMounted(() => {


})

onShow(() => {

  const initIndex = userType === 1 ? 2 : 1;//默认选中待服务

  const params = getApp().globalData.switchTabParams || {}
  tabKey.value = params.tabKey || initIndex;
  onChange(column.value[tabKey.value])
  // 使用后建议清除参数，避免重复读取
  getApp().globalData.switchTabParams = null

  const token = getToken();
  if (token) {
    const {
      order_status,
    } = useDict('order_status', 'lrr_service_status')
    provide('order_status', order_status) //订单/服务状态
  }
})
</script>

<style lang="scss" scoped>
.classify-main {
  height: 100vh;

  .list {
    position: fixed;
    top: 50px;
    // bottom: 150rpx;
    bottom: 0;
    left: 0px;
    right: 0px;
    background: rgba(245, 245, 245, 1);
    padding-bottom: 150rpx;
  }
}
</style>