xiaokuaisong-xiaochengxu/uniapp04/pages/testfour/testfour.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>