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">
						¥ 45
					</view>
				</view>
				X
				<view>
					您的分成比例
					<view class="vertically_center text1">
						20%
					</view>
				</view>
				=
				<view>
					本单酬劳
					<view class="vertically_center text1">
						¥ 9
					</view>
				</view>
			</view>
			<view class="top_bottom">
				订单为系统派发，请确认订单信息后再抢单
			</view>
			<view class="top-button" :style="{ borderRadius: '27rpx' }">
				系统派单
			</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 class="">
					12-0，12-08
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="time">
				<view>
					服务地址
				</view>
				<view class="">
					{{ orderDetail.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.appletPetList" :key="pet.id" class="pet_information box-size">
				<view class="flex pet_item box-size">
					<view class="img" :style="{borderRadius:'100rpx'}">
						<image :src="pet.headImage" mode=""></image>
					</view>
					<view class="">
						<view class="flex name">
							<view class="name_text">
								{{ pet.nickName }}
							</view>
							<image src="" mode=""></image>
						</view>
						{{ pet.type }}
					</view>
				</view>
				<view class="pet- level">
					12-14
					<text>专业喂养</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.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>
					fe34521532513256
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					下单时间：
				</view>
				<view>
					{{ orderDetail.createTime }}
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					支付时间：
				</view>
				<view>
					{{ orderDetail.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">
							共两天:12-09,01-09
						</view>
					</view>
					<view class="ok">
						<view class="btn">
							点击确定
						</view>
					</view>
				</view>

				<view class="confirmation-item">
					<view class="confirmation-base">
						<view class="title">
							服务地址
						</view>
						<view class="desc">
							xxx省xx市
						</view>
					</view>
					<view class="ok">
						<view class="btn">
							点击确定
						</view>
					</view>
				</view>

				<view class="confirmation-item">
					<view class="confirmation-base">
						<view class="title">
							服务宠物
						</view>
						<view class="desc">
							<view class="">
								中华田园犬
							</view>
							<view class="">
								中华田园犬2
							</view>
						</view>
					</view>
					<view class="ok">
						<view class="btn">
							点击确定
						</view>
					</view>
				</view>
			</view>
			<view class="handbook">
				接单即接受
				<text class="text">《伴宠师手册》</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="{padding:'40rpx 20rpx',width:'80%'}">
		<view>
			<view class="success-desc">
				请立即添加服务顾问，并提供订单编码
			</view>
			<view 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'}"></up-input>
			</view>
			<up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
		</view>
	</up-popup>
</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"

	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 userInfo = computed(() => {
		return store.getters.userInfo
	})

	// 抢单
	const rushToBuyAnOrder = () => {
		open()
	}

	// 查看宠物信息
	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 conform = async () => {
		close();
		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
		});
		if (response.code == 200 && response.data) {
			orderDetail.value = response.data;
		}
	}
</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;
		}
	}

	.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;
	}
</style>