school_uni/package1/order/orderDetail.vue

<template>
	<!-- 订单详情 -->
	<view class="page1">
		<view style="height:100%" v-if="pintuan">
			<view class="title1">
				<view class="title-sreach1">
					<view class="back-btn1" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
						<uni-icons type="left" size="28"></uni-icons>
					</view>
				</view>
			</view>
			<view class="box11">
				<view class="ziqu-xuanfu1">
					外卖配送
				</view>
				<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
					竹仔园牛仔农庄(第六分店)
				</view>
				<view style="display: flex;padding: 10px 0;background: #eee;border-radius: 10px;">
					<view class="goods-img1">
						<img src="/static/images/img/shangpintu.png" alt="">
					</view>
					<view class="goods-content1">
						<view class="goods-name1">
							牛仔农庄(医专店)
						</view>
						<view class="goods-content-center1">
							<view>
								打分；不要啦
							</view>
						</view>
						<view class="goods-content-bottom1">
							<view style="width: 45%;">
								X1
							</view>
							<view class="pintuan-left-price1">
								￥90.00
								<view
									style="background: rgba(255, 57, 57, 0.2);padding: 0px 6px;border-radius: 10px;margin-left: 10px;">
									<text>拼团</text>
									<text style="color: red;">￥59.9</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box11" style="position: absolute;top: 400px;left: 2.5%;">
				<view class="kaituan11">
					<view class="kaituan1-title1">
						差1人即可成团
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/21b403bd13414ce79ad73cf1c8e3de98.png" alt="" style="width: 60px;height: 11px;position: absolute;bottom: 0;right: 15px;" />
					</view>
					<view class="kaituan1-title11">
						快呼唤小伙伴参加吧！
					</view>
				</view>
				<view class="kaituan21">
					<view class="kaituan221">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" style="width: 45px;height: 45px;border-radius: 45px;margin: 0 auto;display: block;" />
					</view>
					<view class="kaituan221">
						<view class="weipincheng1">
							+
						</view>
					</view>
					<view class="kaituan221">
						<view class="weipincheng1">
							+
						</view>
					</view>
				</view>
				<view class="kaituan31">
					剩余<text style="font-size: 16px;font-weight: 700;padding: 0 10px;color: red;">23:59:23</text>结束
				</view>
				<view class="kaituan41">
					分享至微信 <uni-icons type="weixin" size="15"></uni-icons>
				</view>
				<view class="kaituan51">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1f1b45c98fa4db1a1e5f98b3a0573c2.png" alt="" style="width: 260px;height: 75px;margin: 0 auto;display: block;" />
				</view>
			</view>
		</view>
		<view class="" v-else>
			<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 class="status-btn">
							去评价
						</view> -->
					</view>
				</view>
				<view class="btn-box">
					<view class="btn" @tap="openCode">
						核销取餐码
					</view>
					<!-- <view class="btn">
						再来一单
					</view>
					<view class="btn">
						￥5 去支付
					</view>
					<view class="btn">
						增加配送佣金
					</view>
					<view class="btn">
						取消申请
					</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>
		<!-- 核销二维码弹出层 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="img-popup-content" @tap="$refs.imgPopup.close()">
				<img :src="codeImg" alt="" style="width: 330rpx;height: 330rpx;margin: 282rpx 0 0 136rpx;border: 20rpx solid rgba(222, 255, 248, 1);border-radius: 20rpx;">
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pintuan:true,
				menuButtonInfo: {},
				codeImg:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3a4e68eb14d7417cbb4f15fa85907c64.jpg'
			}
		},
		components: {
	
		},
		onLoad() {
	
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			openCode(){
				this.$refs.imgPopup.open()
			},
			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;
	}
	.img-popup-content {
		width: 600rpx;
		height: 800rpx;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/73e684e3319c468d9252461ba3c9e95b.png') no-repeat;
		background-size: 100%;
	}
	
	.title1 {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/69c894452e924bedbb5a24bf978f47c7.png') no-repeat;
		width: 100%;
		height: 30%;
		background-size: 100%;
	}
	
	.title-sreach1 {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn1 {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.box11 {
		width: 95%;
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		position: absolute;top: 225px;left: 2.5%;
	}
	
	.goods-img1 {
		width: 160rpx;
		height: 160rpx;
		position: relative;
	
		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}
	
	.goods-content1 {
		flex: 1;
		padding-left: 20rpx;
	}
	
	.goods-name1 {
		font-size: 32rpx;
		font-weight: 900;
	}
	
	.goods-content-center1 {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}
	
	.pintuan-left-price1 {
		width: 55%;
		text-align: right;
		font-weight: 700;
		color: #000;
		display: flex;
	}
	
	.goods-content-bottom {
		display: flex;
		line-height: 28px;
		color: #777;
	}
	
	.ziqu-xuanfu1 {
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		font-weight: 700;
		font-size: 10px;
		height: 28px;
		width: 60px;
		text-align: center;
		line-height: 28px;
	}
	
	.weipincheng1 {
		width: 45px;
		height: 45px;
		background: #a6ffea;
		border-radius: 45px;
		text-align: center;
		font-size: 60rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
		color: #02fbdd;
		border: 1px solid #a6ffea;
		line-height: 40px;
		    margin: 0 auto;
	}
	.kaituan11{
		display: flex;
		    height: 35px;
		    font-size: 22px;
		    font-weight: 700;
		    margin-top: 10px;
	}
	.kaituan1-title1{
		position: relative;
		    margin-left: 10px;
	}
	.kaituan1-title11{
		    font-size: 12px;
		    background: rgba(224, 255, 222, 0.65);
		    border: 1px solid rgba(166, 255, 234, 1);
		    border-radius: 10px;
		    height: 22px;
		    line-height: 19px;
		    width: 140px;
		    text-align: center;
		    margin: 5px 0 0 10px;
	}
	.kaituan21{
		display: flex;
		    width: 90%;
		    margin: 20px auto;
	}
	.kaituan221{
		    flex: 1;
	}
	.kaituan31{
		height: 40px;
		    line-height: 40px;
		    text-align: center;
		    color: #777;
	}
	.kaituan41{
		    width: 95%;
		    height: 50px;
		    background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		    border-radius: 50px;
		    text-align: center;
		    line-height: 50px;
		    font-size: 15px;
		    font-weight: 700;
		    margin: 10px auto;
	}
	.kaituan51{
		margin: 40px 0 20px;
	}
</style>