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>
	<!-- 用户 -->
</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';

	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 data = ref([]); //志愿者
	const dataList = 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() {
		try {
			uni.hideLoading();
			uni.showLoading({
				title: '数据加载中...'
			});
			const 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();
		}
	}
	/**
	 * 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) {
		tab.value = tabItem.value;
		getList();
		console.log('change', tabItem, tab.value);
	}



	onMounted(getList)


	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>