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 } 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') //读取本地存储
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(() => {
  const token  = getToken();
  if(token){
    const {
      order_status,
    } = useDict('order_status', 'lrr_service_status')

    provide('order_status', order_status) //订单/服务状态
  }

})

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
})
</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>