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"/>
        <view v-else>
          <NoneView value="您还没有相关订单" />
        </view>
      </view>
    </view>
    <custom-tab-bar :page="2" />
  </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 { wxMakePhoneCall } from '@/utils/wxRequest.js'
const {
  order_status,
} = useDict('order_status', 'lrr_service_status')

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

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

async function getList() {
  try {
    uni.showLoading({
      title: '数据加载中...',
    })

    const listApi = userType === 1 ? userMainOrderList : getVolunteerOrderList
    const res = await listApi({
      orderStatus: tab.value,
    })
    data.value =res.rows ||  res.data

    // 判断 userType 来决定调用哪个接口
    // let res
    // if (userType === 1) {
    //   // 如果 userType 是 1，调用 userMainOrderList 接口
    //   // res = await getListData()
    //    res = await userMainOrderList({
    //     orderStatus:  tab.value
    //   })
    // } else if (userType === 2) {
    //   // 如果 userType 是 2，调用 getVolunteerOrderList 接口
    //   res = await getVolunteerOrderList({
    //     orderStatus: tab.value,
    //   })
    // }
    // data.value = res.data
  } catch (error) {
    console.log('error', error)
    uni.showToast({
      title: error.msg,
      icon: 'error',
    })
  } finally {
    if(listRef.value && listRef.value.handleRefreshing){
      listRef.value.handleRefreshing(false)
    }
    uni.hideLoading()
  }
}

/**
 * 1: 查看
 * 2：沟通
 * 3：上传照片
 */
function btnClick(row, type) {
  if (type === 1 && row.orderStatus === '2') {
    uni.navigateTo({
      url: `/pages_classify/pages/order/index?orderId=${row.secondOrderId}`,
    })
    return
  }
  if (type === 1) {
    uni.navigateTo({
      url: `/pages_classify/pages/handle/index?orderId=${row.secondOrderId}`,
    })
    return
  }

  //前往沟通
  // wxMakePhoneCall(phone)
  // uni.navigateTo({
  // 	url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${row.secondOrderId}`
  // });
}
provide('onClick', btnClick)

function onChange(tabItem) {
  tab.value = tabItem.value
  getList()
}

onMounted(() => {
  getList()
})

onShow(() => {
  const params = getApp().globalData.switchTabParams || {}
  tabKey.value = params.tabKey || 0
  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;
    left: 0px;
    right: 0px;
    background: rgba(245, 245, 245, 1);
  }
}
</style>