pet-front/pages/orderTakingManage/index.vue

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

		<view class="container">
			<List :orderList="orderlist" :current="current" @update="updateList"></List>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from "vue";
	import List from "./components/list.vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import { getLoginStatus } from "@/utils/useMixin.js"
	import {
		orderList
	} from "@/api/receivingHall/index.js"
	import submitBut from "@/components/submitBut/index.vue"
	import {
		useStore
	} from "vuex"
import dayjs from "dayjs";

	const current = ref(0)
	const list = reactive([{
			name: '系统派单',
			badge: {
				value: 0,
			}
		},
		{
			name: '个人订单',
			badge: {
				value: 0,
			}
		},
		{
			name: '流失订单',
			badge: {
				value: 0,
			}
		},
	])
	const store = useStore();
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const orderlist = ref([]);

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

	// 获取接单大厅列表
	const getOrderList = async () => {
		let response = await orderList({
			type: current.value,
			userIdJson: userInfo.value.userId
		});
		if (response.code == 200 && response.data) {
			orderlist.value = response.data.rows;
			
			orderlist.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)
				})
			})
		}
	}
	
	function getOrderServiceText(petId, orderServiceList){
		
		let YYYY = undefined
		
		return orderServiceList
		.filter(service => service.petId == petId)//过滤
		.map(service => dayjs(service.serviceDate))//转成时间
		.sort((a, b) => a.valueOf() - b.valueOf())//排序
		.map((service, i) => {
			if(YYYY && YYYY.format('YYYY-MM') == service.format('YYYY-MM')){
				return service.format('DD')
			}
			if(YYYY && YYYY.format('YYYY') == service.format('YYYY')){
				return service.format('MM-DD')
			}
			YYYY = service
			return service.format('YYYY-MM-DD')
		})
	}
	function getProductNameText(petId, productList, orderServiceList){
		
		let orderService = orderServiceList.filter(service => service.petId == petId)
		
		return productList
		.filter(product => orderService.filter(service => service.id == product.orderServiceId).length > 0)
		.map(product => product.productName)
	}

	const clickEvent = (item) => {
		current.value = item.index;
		getOrderList();
	}
	
	const updateList = () => {
		getOrderList();
	}
</script>

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