208 lines
4.6 KiB
Vue
208 lines
4.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 0 -->
|
|
<view class="container1">
|
|
<view class="box" v-if="orderItem">
|
|
<view class="numberState">
|
|
<view class="number">#{{ orderItem.id }}</view>
|
|
<view class="state">实付：{{ orderItem.totalPrice }}</view>
|
|
</view>
|
|
|
|
<view class="message">
|
|
<view class="name">{{ orderItem.userName }}</view>
|
|
<view class="phone">手机尾号{{ orderItem.phone.slice(-4)}}</view>
|
|
</view>
|
|
<uni-list>
|
|
<uni-list :border="true">
|
|
<!-- 遍历 orderDetailsVOList 数组 -->
|
|
<uni-list-chat
|
|
v-for="item in orderItem.orderDetailsVOList"
|
|
:key="item.id"
|
|
:title="item.dishesVO.dishesName"
|
|
:avatar="item.dishesVO.dishesImage"
|
|
:note="item.dishesVO.dishesPrice"
|
|
:badge-text="item.quantity"
|
|
clickable="true"
|
|
></uni-list-chat>
|
|
</uni-list>
|
|
</uni-list>
|
|
<view class="km" @click="copyText">订单号码：{{ orderItem.pickupCode }}</view>
|
|
<view class="km">备注：{{ orderItem.notes }}</view>
|
|
<view class="km">支付方式: {{ orderItem.pickupMethod === 0 ? '线上支付' : '线下支付' }}</view>
|
|
<view class="time">下单时间：{{ orderItem.updateTime}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import {apiImageUrl} from '../../API/api'
|
|
const orderItem = ref(null);
|
|
const getOrder=()=>{
|
|
let orderId=uni.getStorageSync("orderId")
|
|
uni.request({
|
|
url:apiImageUrl+'/api/orders/get/my',
|
|
method:'GET',
|
|
data:{
|
|
id:orderId
|
|
},
|
|
header: {
|
|
'Content-Type': 'application/json', // 确保设置正确的 Content-Type
|
|
'cookie': uni.getStorageSync("cookie") || ''
|
|
},
|
|
success(res) {
|
|
console.log("成功");
|
|
console.log(res.data.data);
|
|
if (res.data && res.data.data) {
|
|
// 更新响应式变量
|
|
orderItem.value = res.data.data;
|
|
}
|
|
},
|
|
fail() {
|
|
console.log("失败");
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
onMounted(getOrder())
|
|
|
|
const copyText = async () => {
|
|
try {
|
|
// 设置剪贴板的内容
|
|
await uni.setClipboardData({
|
|
data: orderItem.value,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '复制失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('复制失败:', error);
|
|
uni.showToast({
|
|
title: '复制失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
|
|
const historyList = ref([
|
|
{
|
|
imgUrl: 'https://img95.699pic.com/photo/50093/6813.jpg_wh860.jpg',
|
|
title: '鸡腿饭',
|
|
unread:'1',
|
|
time:'单价25元',
|
|
message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
|
}
|
|
])
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.tab-menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 10px 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.tab-item {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.tab-item.active {
|
|
color: #4095e5;
|
|
font-weight: bold;
|
|
}
|
|
.container {
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
}
|
|
.container1 {
|
|
width: 80%;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
}
|
|
.numberState {
|
|
height: 80rpx;
|
|
margin-top: 20px;
|
|
}
|
|
.number {
|
|
font-weight: 700;
|
|
font-size: 60rpx;
|
|
float: left;
|
|
}
|
|
.state {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
float: right;
|
|
margin-top: 15rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.time {
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
.message {
|
|
padding-top: 25rpx;
|
|
height: 70rpx;
|
|
border-top: 1px dotted #787878;
|
|
}
|
|
.name {
|
|
font-size: 45rpx;
|
|
font-weight: 700;
|
|
float: left;
|
|
}
|
|
.phone {
|
|
float: left;
|
|
font-size: 30rpx;
|
|
line-height: 70rpx;
|
|
padding-left: 10rpx;
|
|
color: #787878;
|
|
}
|
|
.km {
|
|
font-size: 30rpx;
|
|
padding-top: 5px;
|
|
color: #787878;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.box {
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px dotted #787878;
|
|
}
|
|
.chat-custom-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.chat-custom-text {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
|