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

<template>
	<!-- <div>订单详情</div> -->
	<view class="box">
		<view class="top" :style="{ borderRadius: '8px' }">
			<view class="money" :style="{ borderRadius: '8px' }">
				<view class="top_left">
					<view class="">
						<u--text text="客户实际支付" size="10px"></u--text>
						<u--text text="¥ 45" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
					</view>
					<u-line color="#FFBF60" direction="col" length="30px"></u-line>
					<view class="">
						<u--text text="分成比例" size="10px"></u--text>
						<u--text text="20%" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
					</view>
					<u-line color="#FFBF60" direction="col" length="30px"></u-line>
					<view class="">
						<u--text text="本单酬劳" size="10px"></u--text>
						<u--text text="¥ 9" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
					</view>
				</view>
			</view>
			<view class="top_bottom">
				<u--text text="订单为系统派发，请确认订单信息后再抢单" size="10px" color="#707070"></u--text>
			</view>
			<view class="top-button" :style="{ borderRadius: '27px' }">
				<u--text text=" 系统派单" size="10px" color="#FFBF60" align="center" line-height="28px"></u--text>
			</view>
		</view>
		<view class="information" :style="{ borderRadius: '8px' }">
			<view class="text1">
				<u-line color="#FFBF60" direction="col" length="15px" bold></u-line>
				<u--text text="基本信息" size="15px" color="#000000"></u--text>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="time">
				<u--text text="服务日期" size="13px" color="#000000"></u--text>
				<u--text text="12-0，12-08" size="13px" color="#000000"></u--text>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="time">
				<u--text text="服务地址" size="13px" color="#000000"></u--text>
				<u--text text="湖南省长沙市雨花区人民东路" size="13px" color="#000000"></u--text>
			</view>
		</view>
		<view class="service" :style="{ borderRadius: '8px' }">
			<view class="horizontal_distribution">
				<view class="text1">
					<u-line color="#FFBF60" direction="col" length="15px"></u-line>
					<u--text text="服务内容和酬劳" size="15px" color="#000000"></u--text>
				</view>
				<view class="text2">
					<u--text text="查看宠物信息" size="10px" color="#F5F5F5"></u--text>
					<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
				</view>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="pet_information">
				<u--image
					src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
					shape="circle" width="50px" height="50px"></u--image>
				<view class="">
					<view class="flex">
						<u--text text="小咪" size="14px" color="#000000"></u--text>
						<u-icon name="woman" color="#F77293" size="10"></u-icon>
					</view>
					<u--text text="中华田园犬（小型犬）" size="14px" color="#707070"></u--text>
				</view>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="flex">
				<u--text text="12-14" size="14px" color="#707070"></u--text>
				<u--text text="专业喂养" size="14px" color="#000000"></u--text>
				<u--text text="上门1次" size="14px" color="#707070"></u--text>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="horizontal_distribution money_total">
				<view>
					<u--text text="合计" size="14px" color="#707070"></u--text>
				</view>
				<view>
					<u--text text="¥ 45" size="14px" color="#FE4E41"></u--text>
				</view>
			</view>
		</view>
		<view class="other_information">
			<view class="text1">
				<u-line color="#FFBF60" direction="col" length="15px"></u-line>
				<u--text text="其他信息" size="15px" color="#000000"></u--text>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="horizontal_distribution">
				<view>
					<u--text text="订单编号：" size="14px" color="#000000"></u--text>
				</view>
				<view>
					<u--text text="fe34521532513256" size="14px" color="#000000"></u--text>
				</view>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="horizontal_distribution">
				<view>
					<u--text text="下单时间：" size="14px" color="#000000"></u--text>
				</view>
				<view>
					<u--text text="2024-12-45 12:32:41" size="14px" color="#000000"></u--text>
				</view>
			</view>
			<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
			<view class="horizontal_distribution">
				<view>
					<u--text text="支付时间：" size="14px" color="#000000"></u--text>
				</view>
				<view>
					<u--text text="2024-12-45 12:32:41" size="14px" color="#000000"></u--text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_button" :style="{ borderRadius: '41px' }">
				<u--text text="立即抢单" size="15px" color="#FFFFFF" align="center" line-height="60px"></u--text>
			</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="12px" color="#707070" align="center"></u--text>
					<view class="pop_image">
						<u--image src="https://xxx.com/album/1.jpg" shape="square" width="100px"
							height="100px"></u--image>
					</view>
					<view class="code" :style="{ borderRadius: '6px' }">
						<!-- <u--input type="number" border="surround" v-model="value" @change="change"></u--input> -->
					</view>
					<view class="copy" :style="{ borderRadius: '40px' }">
						<u--text text="复制订单编号" size="12px" color="#FFFFFF" align="center" line-height="50px"></u--text>
					</view>
					<view class="cancel" :style="{ borderRadius: '50px' }">
						<u-icon name="close-circle" color="#707070" size="40"></u-icon>
					</view>
				</view>
			</u-popup>
			<u-button @click="show = true">打开</u-button>
		</view>
	</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 lang="scss">
	.box {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.top {
		width: 350px;
		height: 100px;
		background-color: #FFFFFF;
		margin: 14px 20px 0 20px;
	}

	.money {
		width: 250px;
		height: 80px;
	}

	.top_left {
		width: 220px;
		height: 26px;
		display: flex;
		padding: 25px 0 0 20px;
		justify-content: space-between;
	}

	.top_bottom {
		width: 200px;
		height: 26px;
		// background-color: aqua;
		margin-left: 20px;
	}

	.top-button {
		width: 66px;
		height: 28px;
		border: 1px solid #FFBF60;
		position: absolute;
		top: 30px;
		right: 30px;
	}

	.information {
		width: 350px;
		height: 130px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding: 25px;
	}

	.text1 {
		width: 120px;
		height: 20px;
		display: flex;
	}

	.time {
		width: 300px;
		height: 30px;
		// background-color: gray;	
		display: flex;
		justify-content: space-between;
	}

	.service {
		width: 350px;
		height: 190px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding: 27px;
	}

	.horizontal_distribution {
		display: flex;
		justify-content: space-between;
	}

	.flex {
		display: flex;
	}

	.text2 {
		width: 100px;
		height: 20px;
		display: flex;
	}

	.pet_information {
		width: 300px;
		height: 50px;
		// background-color: red;
		display: flex;
	}

	.money_total {
		width: 300px;
	}

	.other_information {
		width: 350px;
		height: 190px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding: 27px 0 0 27px;
	}

	.bottom {
		width: 100%;
		height: 60px;
		background-color: #FFFFFF;
		margin-top: 20px;
		padding: 20px 50px;
	}

	.bottom_button {
		width: 300px;
		height: 60px;
		background-color: #FFBF60;
	}

	.success {
		width: 310px;
		height: 370px;
		background-color: #FFFFFF;
	}

	.pop_top {
		width: 310px;
		height: 100px;
		background-image: linear-gradient(to bottom, #FFBF60, #FFD494)
	}

	.code {
		width: 250px;
		height: 50px;
		background-color: #F3F3F3;
		margin: 30px 0 0 30px;
	}

	.pop_image {
		display: grid;
		place-items: center;
		margin-top: 20px;
	}

	.copy {
		width: 260px;
		height: 50px;
		background-color: #FFBF60;
		margin: 30px 0 0 25px;
	}

	.cancel {
		width: 40px;
		height: 40px;
		background-color: #FFFFFF;
		position: absolute;
		top: -20px;
		right: -17px;
	}
</style>