feat: 订单详情接口对接

pages/order/components/GoodsInfo/index.vue

@@ -2,13 +2,13 @@
   <view class="goods-info mb12">
     <view class="hotel-header">
       <image class="hotel-icon" src="./images/icon_house.png"></image>
-      <text class="hotel-name">天沐温泉酒店</text>
+      <text class="hotel-name">{{ orderData.commodityName }}</text>
     </view>
     <view class="goods-detail">
-      <image class="goods-image" :src="goodsImage"></image>
+      <image class="goods-image" :src="orderData.commodityCoverPhoto"></image>
       <view class="goods-description">
-        <text class="goods-title">温泉早鸟票</text>
-        <text class="goods-date">预定时间：5月1日</text>
+        <text class="goods-title">{{ orderData.commodityName }}</text>
+        <text class="goods-date">预定时间：{{ orderData.checkInData }}</text>
       </view>
     </view>
     <view class="included-services">
@@ -26,9 +26,24 @@
 </template>
 
 <script setup>
-const goodsImage = 'https://example.com/path/to/image.jpg'; // Replace with actual image URL
+import { defineProps } from "vue";
+
+defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
+      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+    }),
+  },
+});
 </script>
 
 <style scoped lang="scss">
-@import './styles/index.scss';
+@import "./styles/index.scss";
 </style>

pages/order/components/OrderCard/index.vue

@@ -35,6 +35,7 @@ import OrderCardContent from "./OrderCardContent.vue";
 import serviceIcon from "./images/service.png";
 import ticketIcon from "./images/ticket.png";
 import hotelIcon from "./images/hotel.png";
+import foodIcon from "./images/food.png";
 
 // Props
 const props = defineProps({
@@ -65,7 +66,7 @@ const emit = defineEmits(["click", "call"]);
 const ICON_MAP = {
   0: hotelIcon, // 酒店订单
   1: ticketIcon, // 门票订单
-  2: hotelIcon, // 其他订单
+  2: foodIcon, // 其他订单
 };
 
 // 获取状态图标
@@ -98,7 +99,7 @@ const getStatusText = (status) => {
     2: "待使用",
     3: "已取消",
     4: "退款中",
-    5: "已推荐",
+    5: "已退款",
     6: "已完成",
   };
   return orderStatusMap[status] || "未知状态";

pages/order/components/OrderInfo/index.vue

@@ -2,19 +2,19 @@
   <view class="order-info">
     <view class="order-item">
       <text class="label">订单号</text>
-      <text class="value">HUSUWF29387865</text>
+      <text class="value">{{ orderData.orderId }}</text>
     </view>
     <view class="order-item">
       <text class="label">流水号</text>
-      <text class="value">76487829387865</text>
+      <text class="value">{{ orderData.paySerialNumber }}</text>
     </view>
     <view class="order-item">
       <text class="label">支付方式</text>
-      <text class="value">微信</text>
+      <text class="value">{{ orderData.payWay }}</text>
     </view>
     <view class="order-item amount">
       <text class="label">实际支付金额</text>
-      <text class="value">¥31.8</text>
+      <text class="value">¥{{ orderData.payAmt }}</text>
     </view>
     <button class="reserve-button">再次预定</button>
     <text class="feedback">投诉反馈</text>
@@ -22,9 +22,24 @@
 </template>
 
 <script setup>
-// No dynamic data required for this static example
+import { defineProps } from "vue";
+
+defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
+      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+    }),
+  },
+});
 </script>
 
 <style scoped>
-@import './styles/index.scss';
+@import "./styles/index.scss";
 </style>

pages/order/components/OrderQrcode/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="order-qrcode">
+    <Qrcode
+      :size="size"
+      :unit="unit"
+      :val="val"
+      :loadMake="true"
+      :onval="true"
+    />
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import Qrcode from "@/components/Qrcode/index.vue";
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 132,
+  },
+  unit: {
+    type: String,
+    default: "px",
+  },
+  val: {
+    type: String,
+    default: "text",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

pages/order/components/OrderQrcode/styles/index.scss

@@ -0,0 +1,18 @@
+.order-qrcode {
+  background: #ffffff;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 18px;
+  margin-bottom: 12px;
+
+  text {
+    font-size: 12px;
+    color: #666666;
+    line-height: 17px;
+    margin-top: 4px;
+  }
+}

pages/order/components/UserInfo/index.vue

@@ -3,20 +3,34 @@
     <view class="user-info-title">游客信息</view>
     <view class="user-info-item">
       <text class="label">联系游客：</text>
-      <text class="value">{{ contactName }}</text>
+      <text class="value">{{ orderData.visitorName }}</text>
     </view>
     <view class="user-info-item">
       <text class="label">联系电话：</text>
-      <text class="value">{{ contactPhone }}</text>
+      <text class="value">{{ orderData.contactPhone }}</text>
     </view>
   </view>
 </template>
 
 <script setup>
-const contactName = '李元一';
-const contactPhone = '13172891829';
+import { defineProps } from "vue";
+
+defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
+      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+    }),
+  },
+});
 </script>
 
 <style scoped>
-@import './styles/index.scss';
+@import "./styles/index.scss";
 </style>

pages/order/detail.vue

@@ -1,22 +1,37 @@
 <template>
-    <view class="order-detail-wrapper">
-        <image class="icon-back" src="./images/back.png"  />
-        <OrderStatusInfo />
-        <GoodsInfo />
-        <UserInfo />
-        <NoticeInfo />
-        <OrderInfo />
-    </view>
+  <view class="order-detail-wrapper">
+    <image class="icon-back" src="./images/back.png" />
+
+    <OrderStatusInfo :orderData="orderData" />
+    <OrderQrcode size="132" unit="px" :val="orderData.orderId" />
+    <GoodsInfo :orderData="orderData" />
+    <UserInfo :orderData="orderData" />
+    <NoticeInfo :orderData="orderData" />
+    <OrderInfo :orderData="orderData" />
+  </view>
 </template>
 
 <script setup>
-import OrderStatusInfo from './components/OrderStatusInfo/index.vue'
-import GoodsInfo from './components/GoodsInfo/index.vue'
-import UserInfo from './components/UserInfo/index.vue'
-import NoticeInfo from './components/NoticeInfo/index.vue'
-import OrderInfo from './components/OrderInfo/index.vue'
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { userOrderDetail } from "@/request/api/OrderApi";
+import OrderQrcode from "./components/OrderQrcode/index.vue";
+import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
+import GoodsInfo from "./components/GoodsInfo/index.vue";
+import UserInfo from "./components/UserInfo/index.vue";
+import NoticeInfo from "./components/NoticeInfo/index.vue";
+import OrderInfo from "./components/OrderInfo/index.vue";
+
+const orderData = ref({});
+onLoad(async ({ orderId }) => {
+  console.log("onShow", orderId);
+  const res = await userOrderDetail({ orderId });
+
+  orderData.value = res.data;
+  console.log(res);
+});
 </script>
 
 <style lang="scss" scoped>
-@import './styles/detail.scss';
+@import "./styles/detail.scss";
 </style>

pages/order/list.vue

@@ -93,11 +93,10 @@ const handleTabChange = ({ index }) => {
 };
 
 // 处理订单点击
-const handleOrderClick = (orderData) => {
-  console.log("订单点击:", orderData);
+const handleOrderClick = ({ orderId }) => {
   // 这里可以添加订单详情跳转逻辑
   uni.navigateTo({
-    url: `/pages/order/detail?id=${orderData.id}`,
+    url: `/pages/order/detail?orderId=${orderId}`,
   });
 };
 </script>