leromro-mini/pages/classify.vue

<template>
	<view class="classify-main">
		<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)">
		</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 './order/list/index.vue';
import { provide } from 'vue';
import { getVolunteerOrderList } from '@/api/volunteer.js'
import { onMounted } from 'vue';
import {useDict} from '@/utils/dict.js';

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

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


const tab = 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",
	}
]

async function getList(parmas) {
	console.log('getList', parmas);
	try {
		uni.hideLoading();
		uni.showLoading({
			title: '数据加载中...'
		});
		const res = await getVolunteerOrderList({ orderStatus: tab.value.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;
	getList();
	console.log('change', tabItem, tab.value);
}


async function init(){
	getList();
}

onMounted(init)
</script>

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

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