school_uni/package2/shop/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 class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					订单详情
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" style="display: flex;font-size: 14px;font-weight: 700;">
				<text>#0001</text>
				<text style="margin: 0 10px;">期望送达</text>
				<text>明天 06:30</text>
				<text style="flex: 1;text-align: right;color: red;">待消费</text>
			</view>
			<view class="box1" style="display: flex;height: 50px;line-height: 50px;padding: 0 10px;">
				<view style="border: 1px solid #48D1CC;height: 25px;line-height: 25px;padding: 0 10px;border-radius: 10px;margin-top: auto;margin-bottom: auto;color: #48D1CC;font-weight: 700;">
					配送订单
					<!-- 自取订单 -->
				</view>
				<view style="display: flex;flex: 1;padding-left: 10px;">
					<text style="flex: 1;">配送员：张三</text>
					<view class="">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;margin-top: 10px;" />
					</view>
				</view>
			</view>
			<view class="box1" style="display: flex;">
				<view class="">
					<view style="font-weight: 700;height: 25px;">
						收货人：田（先生）
					</view>
					<view style="color: #777;height: 35px;">
						河北省沧州市东川建设集团优先公司5楼右转右手边第一个门
					</view>
				</view>
				<view class="">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;margin-top: 14px;" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {
			this.shopId = option.id
		},
		methods: {
			getList(){
				let that = this
				that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	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: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		margin: -140rpx auto;
	}
	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>