pet-front/pages/myOrdersManage/index.vue

<template>
	<view>
		<view class="header-buts flex flex-center">
			<view class="flex buts-box">
				<view class="buts" :class="{'buts-active':activeIndex===1}" @click="activeIndex=1">总订单</view>
				<view class="buts" :class="{'buts-active':activeIndex===2}" @click="activeIndex=2">日订单</view>
			</view>
		</view>

		<up-sticky bgColor="#fff" v-if="activeIndex == 1">
			<view class="container-tabs">
				<up-tabs @click="classIfyClickTab" :list="tabList1" lineWidth="68rpx" :activeStyle="{
					color: '#FFFFFF',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#FFFFFF',
					transform: 'scale(1)'
				}" :itemStyle="{height:'88rpx',width : '33%'}" lineColor="#FFFFFF"></up-tabs>
			</view>
		</up-sticky>

		<up-sticky bgColor="#fff" v-else>
			<view class="container-tabs">
				<up-tabs :list="tabList2" lineWidth="68rpx" :activeStyle="{
					color: '#FFFFFF',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#FFFFFF',
					transform: 'scale(1)'
				}" :itemStyle="{height:'88rpx',padding:'0 52rpx', width : '400rpx'}" lineColor="#FFFFFF"></up-tabs>
			</view>
		</up-sticky>

		<view class="container">
			<systemOrder :list="list" :current="current" v-if="activeIndex == 1" />
			
            <view v-else>
                <timelineService 
                v-for="(item,index) in 10"
                :key="index"
                />
            </view>

			<!-- <orderListByData :list="list" v-else /> -->
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from "vue";
	import systemOrder from "./components/systemOrder.vue";
	import orderListByData from "./components/orderListByData.vue";
	import timelineService from "./components/timelineService.vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getLoginStatus
	} from "@/utils/useMixin.js"
	// import personOrder from "./components/personOrder.vue";
	// import lossOrder from "./components/lossOrder.vue";
	import {
		myList
	} from "@/api/receivingHall/index.js"
	import {
		useStore
	} from "vuex"
import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'

	onShow(() => {
		if (!getLoginStatus()) return;
		getList();
	})

	const current = ref(0)
	const activeIndex = ref(1)
	const list = ref([])
	const store = useStore();

	const userInfo = computed(() => {
		return store.getters.userInfo;
	})

	const tabList1 = reactive([{
			name: '待服务',
			badge: {
				value: 0,
			}
		},
		{
			name: '进行中',
			badge: {
				value: 0,
			}
		},
		{
			name: '已完成',
			badge: {
				value: 0,
			}
		},
	])

	const tabList2 = reactive([{
			name: '待上门',
			badge: {
				value: 0,
			}
		},
		{
			name: '已完成',
			badge: {
				value: 0,
			}
		},
	])

	function getList() {
		myList({
				orderStatus: current.value,
				userId: userInfo.value.userId
			})
			.then(res => {
				if (res.code == 200) {
					list.value = res.data.rows
					
					if(activeIndex.value == 0){
						tabList2[current.value].badge.value = res.data.total
					}else{
						tabList1[current.value].badge.value = res.data.total
					}
					
					list.value.forEach(item => {
						item.h5OrderVO.petVOList.forEach(pet => {
							pet.orderServiceText = getOrderServiceText(pet.id, item.h5OrderVO.orderServiceList)
							pet.productNameText = getProductNameText(pet.id, item.h5OrderVO.orderItemList, item.h5OrderVO.orderServiceList)
						})
					})
				}
			})
	}

	const classIfyClickTab = (item) => {
		current.value = item.index;
		getList();
	}
</script>

<style scoped lang="scss">
	@import "index.scss";
</style>