153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
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> |