school_uni/package1/order/orderDetail.vue

<template>
	<!-- 订单详情 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" style="display: flex;">
				<view class="status-img">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6cf6fff020614ebebb34f7c371e11331.png" alt="" />
					<!-- 
						待支付  https://jewel-shop.oss-cn-beijing.aliyuncs.com/6cf6fff020614ebebb34f7c371e11331.png
						订单取消  https://jewel-shop.oss-cn-beijing.aliyuncs.com/03d7e8d5914e4b9ca04728113900d1fe.png
						等待商家接单、等待配送员接单、等待商家同意  https://jewel-shop.oss-cn-beijing.aliyuncs.com/35ff6276eb3a4e58b8baa724ca44d5dc.png
						配送中、配送员已接单、配送员已到店、等待配送员接单  https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ab87a35cbca473997c679a023337df6.png
						订单完成  https://jewel-shop.oss-cn-beijing.aliyuncs.com/dbfa6dc934e2414c912c67430d5f802c.png
					 -->
				</view>
				<view class="status-text">
					<view class="status-zhu">
						<text>待支付，剩余9:51</text>
						<!-- <text>订单已取消</text>
						<text>等待商家接单</text>
						<text>等待配送员接单</text>
						<text>配送员已接单</text>
						<text>配送员已到店</text>
						<text>配送中</text>
						<text>订单已送达</text>
						<text>请等待商家同意</text>
						<text>订单已取消</text> -->
					</view>
					<view class="status-fu">
						<view class="">预计<text>10:51</text>送达</view>
						<!-- <view class="">超过15分钟未支付，订单自动取消</view>
						<view class="">您申请了取消订单，请等待商家同意</view>
						<view class="">商家已同意取消订单，订单金额将原路返回</view>
						<view class="">商家已拒绝取消订单，将会继续为您配送</view> -->
					</view>
					<view class="status-address">
						送至 <text>北校区1号宿舍楼6楼612</text>
					</view>
					<view class="status-btn">
						取消订单
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn">
					￥5 去支付
				</view>
				<!-- <view class="">
					再来一单
				</view>
				<view class="">
					增加配送佣金
				</view>
				<view class="">
					取消申请
				</view> -->
			</view>
			<view class="box1">
				<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
					竹仔园牛仔农庄(第六分店)
				</view>
				<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px;">
					<view class="goods-img">
						<img src="/static/images/img/shangpintu.png" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							牛仔农庄(医专店)
						</view>
						<view class="goods-content-center">
							<view class="goods-deal1">
								打分；不要啦
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 50%;">
								X1
							</view>
							<view class="pintuan-left-price">
								￥90.00
							</view>
						</view>
					</view>
				</view>
				<view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							打包费
						</view>
						<view style="color: #000;font-weight:700;">
							￥1
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							配送费
						</view>
						<view style="color: #000;font-weight:700;">
							￥5
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							优惠券
						</view>
						<view style="color: #000;font-weight:700;">
							-￥1 <uni-icons type="right" size="12"></uni-icons>
						</view>
					</view>
				</view>
				<view style="display: flex;height: 40px;line-height: 50px;border-top: 1px solid #eee;font-size: 16px;font-weight: 700;">
					<view style="flex: 1;">
						实付
					</view>
					<view class="">
						￥90.00
					</view>
				</view>
			</view>
			<view class="box1">
				<view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							收件地址
						</view>
						<view style="color: #000;font-weight: 700;">
							北校区1号宿舍楼5楼512(0702)
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							配送员
						</view>
						<view style="color: #000;font-weight: 700;">
							不指定
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							订单号
						</view>
						<view style="color: #000;font-weight: 700;">
							3847283739782938
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							送达时间
						</view>
						<view style="color: #000;font-weight: 700;">
							尽快送达
						</view>
					</view>
					<view style="height: 40px;line-height: 40px;display: flex;">
						<view style="flex: 1;color: #777;font-weight: 700;">
							下单时间
						</view>
						<view style="color: #000;font-weight: 700;">
							2026-02-01 23:00:00
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {}
			}
		},
		components: {
	
		},
		onLoad() {
	
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	
	.content{
		position: absolute;
		top: 100px;
		width: 95%;
		margin-left: 2.5%;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.box1{
		width: 95%;
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 10px;
		    padding: 10px;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;
	
		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}
	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}
	
	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}
	
	.goods-content-center {
		display: flex;
		    margin: 16rpx 0;
		    color: #777;
	}
	.goods-deal1 {
		width: 60%;
	}
	.goods-content-bottom {
		    display: flex;
		    line-height: 28px;
		    color: #777;
	}
	.pintuan-left-price {
		    width: 50%;
		    text-align: right;
		    font-weight: 700;
		    color: #000;
	}
	.status-img{
		    width: 42px;
		    height: 42px;
			img{
				    width: 42px;
				    height: 42px;
				    background-size: 100%;
			}
	}
	.status-text{
		flex: 1;
		    position: relative;
		    padding-left: 10px;
	}
	.status-zhu{
		    font-size: 16px;
		    font-weight: 700;
	}
	.status-fu{
		    height: 25px;
		    line-height: 25px;
	}
	.status-address{
		    font-weight: 700;
	}
	.status-btn{
		position: absolute;
		    top: 10px;
		    right: 0;
		    background: #eee;
		    width: 65px;
		    height: 25px;
		    text-align: center;
		    line-height: 25px;
		    border-radius: 8px;
		    color: #777;
		    border: 1px solid #777;
		    font-size: 10px;
	}
	.btn-box{
		height: 60px;
	}
	.btn{
		width: 90%;
		height: 50px;
		line-height: 50px;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		font-size: 16px;
		border-radius: 60px;
		text-align: center;
		margin: 0 auto;
		font-weight: 700;
	}
	
</style>