leromro-mini/pages/classify.vue

<template>
	<view>
		<!-- 志愿者 -->
		<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)" v-model: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" v-else />
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import List from '@/pages_classify/components/orderList/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,
	lrr_service_status
} = useDict('order_status', 'lrr_service_status');

provide('order_status', order_status); //订单/服务状态
provide('lrr_service_status', lrr_service_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: "0",
},
{
	name: "进行中",
	value: "1",
},
{
	name: "已完成",
	value: "2",
},
{
	name: "已取消",
	value: "3",
}
]

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, row.orderStatus);
	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
	}

	//前往沟通
	uni.navigateTo({
		url: `/pages_orderuser/pages/talk/pages/index/index?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 || {};
	tabKey.value = params.tabKey || 0;
	console.log('cc', params, tabKey.value);
	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>