xiaokuaisong-xiaochengxu/uniapp04/pages/testFive/testFive.vue

<template>
	<view class="header">
			<view class="order" v-for="(item,index) in orderItem" :key="index">
				<view class="order-number-container">
				  <view class="order-number">取餐号</view>
				  <view class="order-number-value">#{{item?.id}}</view>
				</view>
				<uni-steps :options="list1" :active="active" class="step-item"/>
			</view>
			
		</view>
		<!-- <view class="header">
				<view class="order">
					<view class="order-number-container"  v-if="[0, 1].includes(orderItem.pickupMethod)">
					  <view class="order-number">取餐号</view>
					  <view class="order-number-value">#{{ orderItem.id }}</view>
					</view>
					
					 <view class="order-number-container" v-else-if="orderItem.pickupMethod === 2 && orderItem.imageAddress">
					      <view class="Lookbackground">
					        <image :src="'http://'+orderItem.imageAddress" mode="aspectFit" style="width: 100%; height: 100%;"></image>
					      </view>
					</view>
					<uni-steps :options="list1" :active="active" class="step-item"/>
				</view>
				<text @click="LookImage" v-if="orderItem.pickupMethod === 2 && orderItem.imageAddress">点击查看图片</text>
			</view> -->
</template>


<script setup>
	import { onMounted, reactive,ref } from 'vue';
	import {apiImageUrl} from '../../API/api'
	import { onLoad, onUnload } from '@dcloudio/uni-app'; 
	onUnload(() => {
	  uni.reLaunch({
	    url: '/pages/index/index'
	  });
	});
	// const LookImage = () => {
	//   if (orderItem.value?.imageAddress) {
	//     uni.previewImage({
	//       urls: ['http://'+orderItem.value.imageAddress],
	//       current: 0
	//     });
	//   }
	// };
	const active = ref(1)
const list1 = reactive([])
const orderItem = ref('');
	const getOrderStatus=()=>{
		uni.request({
			url:apiImageUrl+'/api/orders/list/status',
			method:'POST',
			header: {
			  'Content-Type': 'application/json', // 确保设置正确的 Content-Type
			  'cookie': uni.getStorageSync("cookie") || ''
			},
			success(res) {
				console.log(res.data.data);
				orderItem.value=res.data.data
						        // 根据取餐方式设置步骤
						        if ([0, 1].includes(orderItem.value.pickupMethod)) {
						          list1.splice(0, list1.length, 
						            { title: '备餐中' },
						            { title: '已出餐' },
						            { title: '已完成' }
						          )
						        } else if (orderItem.value.pickupMethod === 2) {
						          list1.splice(0, list1.length,
						            { title: '备餐中' },
						            { title: '已出餐' },
						            { title: '送餐中' },
						            { title: '已完成' }
						          )
						        }

			},
			fail(err) {
				console.log(err);
			}
			
		})
	}
	
	onMounted(()=>{
		getOrderStatus()
	})
</script>

<style scoped>
.order-details {
  padding: 10px;
  background-color: #ece8ea;
}
.order-details-center {
	padding: 10px;
	background-color: #fff;
	border-radius: 2%;
}

.image-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}

.Lookbackground {
	width: 250px;
	height: 150px;
	background: #f5f5f5;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
}

.preview-text {
	color: #4095e5;
	font-size: 14px;
	text-decoration: underline;
}

/* 原有样式保持不变 */
.order {
	padding: 20px;
	background-color: #e5e51b;
	width: 85%;
	border-radius: 15px;
	margin: 20px auto;
}

.order-number-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}

.order-number {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.order-number-value {
	font-size: 48px;
	font-weight: bold;
	color: #4095e5;
}


.status-bar {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}



.restaurant-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
}

.restaurant-name {
  font-size: 18px;
  font-weight: bold;
}

.restaurant-address {
  font-size: 14px;
  color: #666;
}

.contact {
  display: flex;
  align-items: center;
}

.contact-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.order-items {
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 18px;
  font-weight: bold;
}

.item-description {
  font-size: 14px;
  color: #666;
}

.item-price {
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.order-summary {
  padding: 20px 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.order-info {
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
}

.order-label {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 10px;
}

.order-detail {
  display: flex;
  flex-direction: column;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.image-box {
  width: 250rpx;
  height: 250rpx;
  display: block; 
  margin: 40px auto 0; 
}
</style>