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>
|
||
|