leromro-mini/pages/classify.vue

<template>
	<!-- 志愿者 -->
	<view class="classify-main" v-if="userType == '2'">
		<up-tabs :list="column" :scrollable="false" @change="onChange" :activeStyle="{
			color: 'rgba(255, 87, 4, 1)',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
		}" lineColor="rgba(255, 87, 4, 1)" :current="tabKey">
		</up-tabs>
		<view class="list">
			<List :data="data" v-if="data.length > 0" />
			<view v-else class="empty-null">
				<img src="/static/empty/订单为空.png" alt="">
			</view>
		</view>
	</view>
	<!-- 用户 -->
	<OrderList :dataList="dataList" @fetchData="getListData"/>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import List from './order/list/index.vue';
	import {
		provide
	} from 'vue';
	import {
		getVolunteerOrderList
	} from '@/api/volunteer.js'
	import {
		onMounted
	} from 'vue';
	import {
		useDict
	} from '@/utils/dict.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import OrderList from '@/components/pages/classify/orderlist.vue'
	import {
		userMainOrderList
	} from "@/api/userList.js"

	const {
		order_status
	} = useDict('order_status');

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

	const userType = uni.getStorageSync('userType') //读取本地存储

	// 用户/志愿者 识别标识
	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储

	const tab = ref('');
	const tabKey = ref(0);
	const dataList = ref([]) //用户
	const data = ref([]); //志愿者

	/**
	 * 	0待支付 1已支付 2支付超时或取消 3进行中 4已完成 5申请退款中 6已退款 7部分退款 8 待确认
	 */
	const column = [{
			name: "全部",
			value: "",
		},
		{
			name: "待服务",
			value: "1",
		},
		{
			name: "进行中",
			value: "3",
		},
		{
			name: "已完成",
			value: "4",
		},
		{
			name: "已取消",
			value: "2",
		}
	]

	const column2 = [{
			name: "全部",
			value: "",
		},
		{
			name: "待支付",
			value: "1",
		},
		{
			name: "待服务",
			value: "2",
		},
		{
			name: "进行中",
			value: "3",
		},
		{
			name: "已完成",
			value: "4",
		},
		{
			name: "已取消",
			value: "5",
		}
	]


	async function getList() {
		console.log(userType, '>>>>>>userType');
		try {
			uni.hideLoading();
			uni.showLoading({
				title: '数据加载中...'
			});

			// 判断 userType 来决定调用哪个接口
			let res;
			if (userType === 1) {
				// 如果 userType 是 1，调用 userMainOrderList 接口
				res = await getListData();
			} 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 {
			uni.hideLoading();
		}
	}
	const getListData = async (orderStatus = tab.value) => {
		const res = await userMainOrderList({
			orderStatus: orderStatus
		});
		dataList.value = res.data
	}
	/**
	 * 1: 查看
	 * 2：沟通
	 * 3：上传照片
	 */
	function btnClick(row, type) {
		console.log('btnClick', type, row);
		if (type === 1) {
			uni.navigateTo({
				url: `/pages/order/order?orderId=${row.secondOrderId}`
			});
			return
		}
		uni.navigateTo({
			url: `/pages/order/handle?orderId=${row.secondOrderId}`
		});

	}
	provide('onClick', btnClick);


	function onChange(tabItem) {
		console.log('onChange called with tabItem:', tabItem); // 确认是否进入 onChange
		tab.value = tabItem.value;
		getList();
		console.log('change', tabItem, tab.value);
	}



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


	onShow(() => {
		const params = getApp().globalData.switchTabParams || {};
		if (!params.tabKey) return;
		tabKey.value = params.tabKey;
		console.log(params); // { id: 123, type: "test" }
		onChange(column[tabKey.value])
		// 使用后建议清除参数，避免重复读取 
		getApp().globalData.switchTabParams = null;

	})
</script>

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

		.list {
			position: fixed;
			top: 50px;
			bottom: 0px;
			left: 0px;
			right: 0px;
		}
	}
</style>