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

<script setup lang="ts">
	/* 订单号页面 */
import { computed, ref, onMounted  } from 'vue'
const orderNo = ref('');
onMounted(() => {
  onLoad();
});
function onLoad() {
  
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];

  if (currentPage && currentPage.options && currentPage.options.orderNo) {
    orderNo.value = decodeURIComponent(currentPage.options.orderNo);
    console.log(`Received Order No.: ${orderNo.value}`);
  } else {
    console.error('Order No. was not provided or could not be decoded.');
  }
}

</script>
<template>
	订单号{{orderNo}}
	<scroll-view scroll-y class="viewport">
		<view class="viewportCenter">
			<image src="../../static/small/foodCode.png" class="image"></image>
			<view class="merchantState">商家备餐中...</view>
			<view class="userPhone">
				用户尾号2411
			</view>
			<view class="sequence">
				您前面还有3位顾客，请耐心等待
			</view>
			
			
			<!-- 商品信息 -->
			   <view class="goods">
			     <navigator
			       v-for="item in 1"
			       :key="item"
			       :url="`/pages/goods/goods?id=1`"
			       class="item"
			       hover-class="none"
			     >
			       <image
			         class="picture"
			         src="https://ts1.cn.mm.bing.net/th/id/R-C.0777a57ea66515c61ed3c535abc33e9e?rik=xrMfSXlP9XCHOQ&riu=http%3a%2f%2fi2.chuimg.com%2f67029d88893611e6b87c0242ac110003_4288w_2848h.jpg%3fimageView2%2f2%2fw%2f660%2finterlace%2f1%2fq%2f90&ehk=he85sDgN2hvkqJHLtVUTVv%2f0Hr9SGP9PM8VsWa451iI%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
			       />
			       <view class="meta">
			         <view class="name"> 金汤小鸡蘑菇面 </view>
			         <view class="attrs">金汤、小鸡、蘑菇</view>
									  <view class="attrs">月售：32</view>
			         <view class="prices">
			           <view class="money">￥15.80</view>
			         </view>
			       </view>
			     </navigator>
			   </view>
			
		</view>
    </scroll-view>
	

</template>
<style>
	.viewport {
	height: 100vh; 
	width: 100%; 
	background-image: linear-gradient(to bottom, #4095e5 25%, #ffffff 25%);
	}
	.viewportCenter {
		height: 100vh; 
		width: 90%;
		margin: 15% auto;
		background-image: linear-gradient(to bottom, #f5f5f5 30%, #fff 30%);
		border-radius: 15px;
	}
	.image {
		width: 100px;
		height: 100px;
		margin-top: 15px;
		margin-left: 15px;
	}
	.merchantState {
		float: right;
		margin-top: 50px;
		margin-right: 100px;
		font-weight: 700;
		font-size: 35rpx;
	}
	.userPhone,.sequence {
		font-size: 30rpx;
		padding-top: 15px;
		margin-left: 10px;
	}

	.goods {
	  margin: 20rpx;
	  padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  border: 1px solid #9f9f9f;
	  }
	
	  .item {
	    display: flex;
	    padding: 30rpx 0;
	    border-top: 1rpx solid #eee;
		}
	
	    &:first-child {
	      border-top: none;
	    }
	
	    .picture {
	      width: 250rpx;
	      height: 170rpx;
	      border-radius: 15rpx;
	      margin-right: 20rpx;
	    }
	
	    .meta {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      position: relative;
	    }
	
	    .name {
	      height: 20px;
	      font-size: 30rpx;
		  font-weight: 700;
	      color: #444;
	    }
	
	    .attrs {
	      line-height: 1.8;
	      padding: 0 15rpx;
	      margin-top: 6rpx;
	      font-size: 24rpx;
	      align-self: flex-start;
	      border-radius: 4rpx;
	      color: #888;
	      background-color: #f7f7f8;
	    }
	
	    .money {
			font-size: 30rpx;
			font-weight: 700;
			margin-left: 20px;
		}
</style>