pet-front/otherPages/orderTakingManage/detail/index.vue

<template>
	<!-- <div>订单详情</div> -->
	<view class="box box-size">
		<view class="top box-size" :style="{ borderRadius: '16rpx' }">
			<view class="top_left box-size">
				<view>
					本单客户支付金额
					<view class="vertically_center text1">
						¥ {{ orderDetail.order?.h5OrderVO?.payAmount }}
					</view>
				</view>
				X
				<view>
					您的分成比例
					<view class="vertically_center text1">
						<!-- 20% -->
						{{ orderDetail.pet_payment_bcs[userInfo.userBcsRole - 1].paramValueText }}
					</view>
				</view>
				=
				<view>
					本单酬劳
					<view class="vertically_center text1">
						¥ {{ orderDetail.order.orderGive}}
						<!-- ¥ {{ orderDetail.pet_payment_bcs[userInfo.userBcsRole - 1].paramValueNo * orderDetail.order?.h5OrderVO?.payAmount }} -->
					</view>
				</view>
			</view>
			<view class="top_bottom">
				<!-- 订单为系统派发，请确认订单信息后再抢单 -->
				{{ typeInfo[orderDetail.order.type].content }}
			</view>
			<view class="top-button" :style="{ borderRadius: '27rpx' }">
				{{ typeInfo[orderDetail.order.type].title }}
			</view>
		</view>
		<view class="information box-size" :style="{ borderRadius: '16rpx' }">
			<view class="form-title">
				基本信息
			</view>
			<view class="line1">
			</view>
			<view class="time">
				<view>
					服务日期
				</view>
				<view v-if="orderDetail.order" class="time-content">
					{{ getTextList().join('，') }}
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="time">
				<view>
					服务地址
				</view>
				<view class="time-content">
					{{ orderDetail.order?.address }}
				</view>
			</view>
		</view>
		<view class="service box-size" :style="{ borderRadius: '8rpx' }">
			<view class="horizontal_distribution service_top">
				<view class="form-title">
					服务内容和酬劳
				</view>
				<view @click="petInfo" class="text2 flex">
					查看宠物信息
					<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
				</view>
			</view>
			<view class="line1">
			</view>
			<view v-for="pet in orderDetail.order.h5OrderVO.petVOList" 
			@click="toDetail(pet.id)"
			:key="pet.id" class="pet_information box-size">
				<view class="flex pet_item box-size">
					<view class="img" :style="{borderRadius:'100rpx'}">
						<image :src="pet.photo" mode=""></image>
					</view>
					<view >
						<view class="flex name">
							<view class="name_text">
								{{ pet.breed }}
							</view>
							<image src="" mode=""></image>
						</view>
						{{ pet.type }}{{ pet.bodyType }}
					</view>
				</view>
				<view class="pet-level" v-for="(it, i) in pet.productNameText">
					{{ it.time }}
					<text>{{ it.name }}</text>
					上门1次
				</view>
				<!-- <view class="pet-level">
					12-15
					<text>专业喂养</text>
					上门1次
				</view> -->
			</view>
			<view class="line1">
			</view>
			<view class="flex money_total">
				<view>
					合计
				</view>
				<view class="money_text">
					¥&nbsp;{{ orderDetail.order.price }}
				</view>
			</view>
		</view>
		<view class="other_information box-size">
			<view class="form-title">
				其他信息
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					订单编号：
				</view>
				<view>
					{{ orderDetail.order.orderSn }}
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					下单时间：
				</view>
				<view>
					{{ orderDetail.order?.createTime }}
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					支付时间：
				</view>
				<view>
					{{ orderDetail.order.payTime }}
				</view>
			</view>
		</view>
	</view>
	<view class="bottom">
		<view @click="rushToBuyAnOrder" class="bottom_button level" :style="{ borderRadius: '41rpx' }">
			立即抢单
		</view>
	</view>

	<up-popup :show="showConfirmOrder" mode="bottom" @close="close" @open="open" :round="10" :closeable="true"
		:safeAreaInsetBottom="false"
		:customStyle="{padding:'60rpx 20rpx 40rpx 20rpx;position:relative;height:auto;background:#F6F5F8;'}">
		<view>
			<view style="position:absolute;top: 20rpx;left:0;text-align: center;width: 100%;">
				订单信息
			</view>
			<view style="text-align: center;">
				请全部确认后接单
			</view>
			<view class="order-confirmation">
				<view class="confirmation-item">
					<view class="confirmation-base">
						<view class="title">
							服务日期
						</view>
						<view class="desc">
							共{{ getTextList().length }}天:{{ getTextList().join('，') }}
						</view>
					</view>
					<view class="ok">
						<view class="btn" @click="handleConfirm(0)" :class="{ 'btn-confirmed': confirmStatus[0] }">
							{{ confirmStatus[0] ? '已确认' : '点击确定' }}
						</view>
					</view>
				</view>

				<view class="confirmation-item">
					<view class="confirmation-base">
						<view class="title">
							服务地址
						</view>
						<view class="desc">
							{{ orderDetail.order.address }}
						</view>
					</view>
					<view class="ok">
						<view class="btn" @click="handleConfirm(1)" :class="{ 'btn-confirmed': confirmStatus[1] }">
							{{ confirmStatus[1] ? '已确认' : '点击确定' }}
						</view>
					</view>
				</view>

				<view class="confirmation-item">
					<view class="confirmation-base">
						<view class="title">
							服务宠物
						</view>
						<view class="desc">
							<view v-for="pet in orderDetail.order.h5OrderVO.petVOList" :key="pet.id">
								{{ pet.breed }}
							</view>
						</view>
					</view>
					<view class="ok">
						<view class="btn" @click="handleConfirm(2)" :class="{ 'btn-confirmed': confirmStatus[2] }">
							{{ confirmStatus[2] ? '已确认' : '点击确定' }}
						</view>
					</view>
				</view>
			</view>
			<view class="handbook">
				接单即接受
				<text class="text" @click="configPopupRef.open('pet_platform_introduction')">《伴宠师手册》</text>
			</view>
			<up-button @click="conform" color="#FFBF60" text="确定" shape="circle"></up-button>
		</view>
	</up-popup>

	<!-- 抢单成功 -->
	<up-popup :show="showOrderSuccess" mode="center" @close="orderSuccessClose" @open="orderSuccessOpen" :zIndex="999"
		:round="10" :safeAreaInsetBottom="false" :customStyle="{ width:'80%' , 'background-color': 'transparent' }">
		<view>
			<image style="width: 100%;" :src="configList?.order_success?.paramValueImage" mode="widthFix"></image>
		</view>
		<view style="margin-top: -100%;padding: 40rpx;20rpx">
			<view class="success-desc">
				{{ configList?.order_success?.paramValueText || '请立即添加服务顾问，并提供订单编码' }}
			</view>
			<view style="position: relative;z-index: 999;" class="qr-code">
				<image class="code-img" src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif"
					mode="aspectFill"></image>
			</view>
			<view class="input">
				<up-input placeholder="" border="none" v-model="value" disabled
					:customStyle="{height:'60rpx','text-indent': '20rem', 'background-color': '#F3F3F3', position : 'relative','z-index' : '999' }"></up-input>
			</view>
			<view class="button-group">
				<up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
				<up-button @click="toMyOrder" color="#FFBF60" text="到我的订单查看" shape="circle" style="margin-top: 20rpx;"></up-button>
			</view>
		</view>
	</up-popup>
	<configPopup ref="configPopupRef" />
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getByOrderId
	} from "@/api/receivingHall/index.js"
	import {
		onShow
	} from '@dcloudio/uni-app'
	import order from '../../../api/order/order'
	import {
		startByOrderId
	} from "@/api/receivingHall/index.js"
	import {
		useStore
	} from "vuex"
	
	import dayjs from "dayjs";
	import configPopup from '@/components/configPopup.vue'
	const configPopupRef = ref(null)

	onLoad((options) => {
		orderId.value = options.id || null;
	});

	onShow(() => {
		getDetail();
	})

	const store = useStore();
	const orderId = ref(null);
	const orderDetail = ref({});
	const showConfirmOrder = ref(false);
	const showOrderSuccess = ref(false);
	const value = ref("45619491656")
	const petList = ref([])
	const confirmStatus = ref([false, false, false]); // 添加确认状态数组，分别对应三个确认项
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const configList = computed(() => {
		return store.getters.configList;
	})
	// 抢单
	const rushToBuyAnOrder = () => {
		open()
	}
	
	const typeInfo = [
		{
			title : '系统派单',
			content : '订单为系统派发，请确认订单信息后再抢单',
		},
		{
			title : '个人订单',
			content : '订单为系统派发，请确认订单信息后再抢单',
		},
		{
			title : '流失订单',
			content : '订单为系统派发，请确认订单信息后再抢单',
		},
	]

	// 查看宠物信息
	const petInfo = () => {
		uni.navigateTo({
			url: "/otherPages/orderTakingManage/pet/index"
		})
	}

	const open = () => {
		showConfirmOrder.value = true;
	}

	const close = () => {
		showConfirmOrder.value = false;
	}

	const orderSuccessClose = () => {
		showOrderSuccess.value = false;
	};

	const orderSuccessOpen = () => {
		showOrderSuccess.value = true;
	};

	// 处理确认按钮点击事件
	const handleConfirm = (index) => {
		confirmStatus.value[index] = true;
	}
	
	const conform = async () => {
		close();
		// 重置确认状态
		confirmStatus.value = [false, false, false];
		let response = await startByOrderId({
			id: orderId.value,
			userId: userInfo.value.userId
		})
		if (response.code == 200 && response.data) {
			uni.showToast({
				title: '接单成功~',
				icon: "none"
			});
			orderSuccessOpen();
		}
	}

	const getDetail = async () => {
		let response = await getByOrderId({
			id: orderId.value,
			userId: userInfo.value.userId,
		});
		if (response.code == 200 && response.data) {
			orderDetail.value = response.data;
			orderDetail.value.order.h5OrderVO.petVOList.forEach(pet => {
				
				pet.productNameText = getProductNameText(pet.id, orderDetail.value.order.h5OrderVO.orderItemList, 
				orderDetail.value.order.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('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 => {
		// 	return {
		// 		time : dayjs(orderService.filter(service => service.id == product.orderServiceId)
		// 		.serviceDate).format('MM-DD'),
		// 		name : product.productName,
		// 	}
		// })
		
		return orderService.map(item => {
			
			let name = ''
			
			productList.forEach(product => {
				if(item.id == product.orderServiceId){
					name = product.productName
				}
			})
			
			return {
				time : dayjs(item.serviceDate).format('MM-DD'),
				name,
			}
		})
	}
	
	function getTextList(){
		return orderDetail.value.order?.h5OrderVO
			.orderServiceList.map(item => 
			dayjs(item.serviceDate).format('MM-DD'))
	}
	
	const toDetail = (id) => {
		uni.navigateTo({
			url: `/otherPages/orderTakingManage/pet/detail?id=${id}`
		})
	}
	
	// 复制订单编号
	const noneOrder = () => {
		uni.setClipboardData({
			data: orderDetail.value.order.orderSn,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});
	}
	
	// 跳转到我的订单页面
	const toMyOrder = () => {
		orderSuccessClose();
		uni.navigateTo({
			url: '/pages/myOrdersManage/list/index'
		});
	}
</script>

<style scoped lang="scss">
	@import "index";
	
	.line1 {
		position: relative;
		margin: 10rpx 0 20rpx 0;

		&::before {
			position: absolute;
			top: 10rpx;
			left: -10rpx;
			content: "";
			width: 690rpx;
			height: 0.5rpx;
			background-color: #EFEFEF;
			// background-color: red;
		}
	}
	
	.time-content {
		max-height: 120rpx;
		overflow-y: auto;
		word-break: break-word;
		line-height: 1.5;
		padding: 4rpx 0;
	}

	.order-confirmation {
		.confirmation-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: white;
			padding: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx 0rpx;

			.confirmation-base {
				width: 75%;

				.title {
					font-size: 34rpx;
				}

				.desc {
					color: #999999;
				}
			}

			.ok {
				display: flex;
				justify-content: center;
				width: 25%;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFBF60;
					color: white;
					width: 100%;
					height: 60rpx;
					border-radius: 30rpx;
				}
			}
		}
	}

	.handbook {
		color: #999999;
		margin: 10rpx 0rpx;

		.text {
			color: #FFBF60;
		}
	}

	.success-desc {
		text-align: center;
		color: #787878;
		font-size: 32rpx;
	}

	.qr-code {
		display: flex;
		justify-content: center;
		margin: 40rpx 0rpx;

		.code-img {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.input {
		margin-bottom: 40rpx;
	}
	
	.button-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.btn-confirmed {
		background: #CCCCCC !important; /* 灰色背景 */
	}
</style>