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',width : '33%'}" lineColor="#FFFFFF" @click="handleClickEvent"></up-tabs>
			</view>
		</up-sticky>

		<view class="container">
			<!-- 未登录提示 -->
			<view v-if="!isLogin" class="login-tip-container">
				<view class="login-tip-content">
					<up-image class="login-image" width="120rpx" height="120rpx" 
						src="https://image.hhlm1688.com/img/work/log/headImage.png" shape="circle"></up-image>
					<view class="login-tip">请先登录查看接单数据</view>
					<up-button @click="goToLogin" type="primary" text="立即登录" 
						shape="circle" color="#FFBF60" class="login-btn"></up-button>
				</view>
			</view>
			
			<!-- 已登录状态 -->
			<List v-else :orderList="orderlist" :current="current" @update="updateList"></List>
		</view>

		<!-- 客服组件 -->
		<CustomerService />
	</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 {
		getIsLogin,
		getToken
	} from "@/utils/auth";
	import {
		orderList
	} from "@/api/receivingHall/index.js"
	import submitBut from "@/components/submitBut/index.vue"
	import {
		useStore
	} from "vuex"
import dayjs from "dayjs";
import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'

	const current = ref(0)
	const isLogin = ref(false) // 添加登录状态
	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(() => {
		checkLoginStatus();
		if (isLogin.value) {
			getOrderList();
		}
	})

	// 检查登录状态
	const checkLoginStatus = () => {
		if (getIsLogin() && getToken()) {
			isLogin.value = true
		} else {
			isLogin.value = false
		}
	}

	// 跳转登录页面
	const goToLogin = () => {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}

	// 检查登录状态，未登录则跳转登录
	const checkLoginAndRedirect = () => {
		if (!isLogin.value) {
			goToLogin()
			return false
		}
		return true
	}

	// 获取接单大厅列表
	const getOrderList = async () => {
		if (!isLogin.value) return;
		
		let response = await orderList({
			type: current.value,
			userIdJson: userInfo.value.userId,
			userId:userInfo.value.userId,
		});
		if (response.code == 200 && response.data) {
			orderlist.value = response.data.rows;
			
			list[current.value].badge.value = response.data.total
			
			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)
				})
			})
		}
	}

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

<style scoped lang="scss">
	@import "index.scss";
	
	.login-tip-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		
		.login-tip-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60rpx;
			border-radius: 20rpx;
			
			.login-image {
				margin-bottom: 30rpx;
			}
			
			.login-tip {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 30rpx;
			}
			
			.login-btn {
				width: 240rpx;
			}
		}
	}
</style>