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="">
					重庆市南岸区长嘉汇18栋9-2
				</view>
			</view>
		</view>
		<view class="service box-size" :style="{ borderRadius: '8rpx' }">
			<view class="horizontal_distribution service_top">
				<view class="form-title">
					服务内容和酬劳
				</view>
				<view class="text2 flex">
					查看宠物信息
					<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="pet_information box-size">
				<view class="flex pet_item box-size">
					<view class="img" :style="{borderRadius:'100rpx'}">
						<image
							src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
							mode=""></image>
					</view>
					<view class="">
						<view class="flex name">
							<view class="name_text">
								小咪
							</view>
							<image src="" mode=""></image>
						</view>
						银渐层短毛猫（小型猫）
					</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;455
				</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>
					2024-12-45 12:32:41
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="horizontal_distribution text3">
				<view>
					支付时间：
				</view>
				<view>
					2024-12-45 12:32:41
				</view>
			</view>
		</view>
	</view>
	<view class="bottom">
		<view class="bottom_button level" :style="{ borderRadius: '41rpx' }">
			立即抢单
		</view>
	</view>
	<!-- <view>
			<u-popup :show="show" mode="center" @close="close" @open="open">
				<view class="success">
					<view class="pop_top">
					</view>
					<u--text text="请立即添加服务顾问，并提供订单编码" size="12rpx" color="#707070" align="center"></u--text>
					<view class="pop_image">
						<u--image src="https://xxx.com/album/1.jpg" shape="square" width="100rpx"
							height="100rpx"></u--image>
					</view>
					<view class="code" :style="{ borderRadius: '6rpx' }">
					
					</view>
					<view class="copy" :style="{ borderRadius: '40rpx' }">
						<u--text text="复制订单编号" size="12rpx" color="#FFFFFF" align="center"
							line-height="50rpx"></u--text>
					</view>
					<view class="cancel" :style="{ borderRadius: '50rpx' }">
						<u-icon name="close-circle" color="#707070" size="40"></u-icon>
					</view>
				</view>
			</u-popup>
			<u-button @click="show = true">打开</u-button>
		</view> -->
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}

	// export default {
	// 	data() {
	// 		return {
	// 			value: ''
	// 		}
	// 	},
	// 	methods: {
	// 		change(e) {
	// 			console.log('change', e);
	// 		}
	// 	}
	// }
</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;
		}
	}
</style>