feat: 订单详情功能完善

2025-08-01 21:37:07 +08:00
parent afae470f85
commit 7ff542e57a
8 changed files with 317 additions and 198 deletions
--- a/manifest.json
+++ b/manifest.json
@@ -1,89 +1,94 @@
 {
-    "name" : "YGTianmuCS",
-    "appid" : "__UNI__BB03E8A",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        "safearea" : {
-            "bottom" : {
-                "offset" : "auto" // 自动适配安全区域
-            }
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {
-                "oauth" : {}
-            }
-        }
+  "name": "YGTianmuCS",
+  "appid": "__UNI__BB03E8A",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  /* 5+App特有相关 */
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
    },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "wx5e79df5996572539",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true,
-        "permission" : {}
+    "safearea": {
+      "bottom": {
+        "offset": "auto" // 自动适配安全区域
+      }
    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics" : {
-        "enable" : false
-    },
-    "vueVersion" : "3",
-    "h5" : {
-        "router" : {
-            "base" : "./",
-            "mode" : "hash"
-        },
-        "devServer" : {
-            "https" : false
-        }
+    /* 模块配置 */
+    "modules": {},
+    /* 应用发布信息 */
+    "distribute": {
+      /* android打包配置 */
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      /* ios打包配置 */
+      "ios": {},
+      /* SDK配置 */
+      "sdkConfigs": {
+        "oauth": {}
+      }
    }
+  },
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "wx5e79df5996572539",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true,
+    "requiredPrivateInfos": ["getLocation"],
+    "permission": {
+      "scope.userLocation": {
+        "desc": "用于获取当前所在城市信息"
+      }
+    }
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3",
+  "h5": {
+    "router": {
+      "base": "./",
+      "mode": "hash"
+    },
+    "devServer": {
+      "https": false
+    }
+  }
 }
--- a/pages/order/components/GoodsInfo/images/food.png
+++ b/pages/order/components/GoodsInfo/images/food.png
--- a/pages/order/components/GoodsInfo/images/ticket.png
+++ b/pages/order/components/GoodsInfo/images/ticket.png
--- a/pages/order/components/GoodsInfo/index.vue
+++ b/pages/order/components/GoodsInfo/index.vue
@@ -1,8 +1,8 @@
 <template>
  <view class="goods-info mb12">
    <view class="hotel-header">
-      <image class="hotel-icon" src="./images/icon_house.png"></image>
-      <text class="hotel-name">{{ orderData.commodityAddress }}</text>
+      <image class="hotel-icon" :src="orderTypeIcon"></image>
+      <text class="hotel-name">{{ orderData.storeName }}</text>
    </view>
    <view class="goods-detail">
      <image
@@ -13,9 +13,21 @@
      ></image>
      <view class="goods-description">
        <text class="goods-title">{{ commodityName }}</text>
-        <text class="goods-date" v-if="checkInData"
-          >预定时间：{{ checkInData }}</text
-        >
+        <!-- 门店地址 -->
+        <view class="store-address" @click="openMap">
+          <uni-icons type="location" size="18" color="#999" />
+          <text>{{ orderData.commodityAddress }}</text>
+          <uni-icons type="right" size="14" color="#999" />
+        </view>
+        <!-- 酒店类型 -->
+        <template v-if="orderData.orderType === '0'">
+          <view class="in-date" v-if="checkInData">
+            入住时间：{{ checkInData }}
+          </view>
+          <view class="out-date" v-if="checkOutData">
+            离店时间：{{ checkOutData }}
+          </view>
+        </template>
      </view>
    </view>
    <view class="included-services" v-if="hasServices">
@@ -36,6 +48,9 @@

 <script setup>
 import { defineProps, computed } from "vue";
+import iconHouse from "./images/icon_house.png";
+import iconFood from "./images/food.png";
+import iconTicket from "./images/ticket.png";

 const props = defineProps({
  orderData: {
@@ -45,7 +60,7 @@ const props = defineProps({
      id: "",
      commodityServiceList: [],
      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
-      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
    }),
  },
 });
@@ -63,6 +78,9 @@ const commodityCoverPhoto = computed(() => {
 // 计算属性：入住时间
 const checkInData = computed(() => props.orderData.checkInData || "");

+// 计算属性：离店时间
+const checkOutData = computed(() => props.orderData.checkOutData || "");
+
 // 计算属性：服务列表
 const serviceList = computed(() => props.orderData.commodityServiceList || []);

@@ -84,11 +102,50 @@ const shouldShowImage = computed(() => {
  return !!commodityCoverPhoto.value;
 });

+// 计算属性：根据订单类型动态显示图标
+const orderTypeIcon = computed(() => {
+  const orderType = props.orderData.orderType;
+
+  switch (orderType) {
+    case "0":
+      return iconHouse; // 酒店订单
+    case "1":
+      return iconTicket; // 门票订单
+    case "2":
+      return iconFood; // 餐饮订单
+    default:
+      return iconHouse; // 默认显示酒店图标
+  }
+});
+
 // 格式化服务数量
 const formatServiceAmount = (amount) => {
  if (!amount) return "";
  return typeof amount === "number" ? `×${amount}` : amount;
 };
+
+// 打开地图
+const openMap = () => {
+  const address = props.orderData.commodityAddress;
+  const latitude = Number(props.orderData.commodityLatitude);
+  const longitude = Number(props.orderData.commodityLongitude);
+
+  uni.getLocation({
+    type: "gcj02", //返回可以用于uni.openLocation的经纬度
+    success: (res) => {
+      console.log("当前经纬度", latitude, longitude);
+
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
+        success: () => {
+          console.log("success");
+        },
+      });
+    },
+  });
+};
 </script>

 <style scoped lang="scss">
--- a/pages/order/components/GoodsInfo/styles/index.scss
+++ b/pages/order/components/GoodsInfo/styles/index.scss
@@ -1,77 +1,154 @@
-.goods-info {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 12px 16px 20px;
-}
+// ===== SASS变量定义 =====
+// 颜色系统
+$color-white: #fff;
+$color-primary: #333;
+$color-secondary: #666;
+$color-placeholder: pink;

-.hotel-header {
+// 字体大小
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+
+// 字体粗细
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+
+// 间距系统
+$spacing-xs: 8px;
+$spacing-sm: 10px;
+$spacing-md: 12px;
+$spacing-lg: 15px;
+$spacing-xl: 16px;
+$spacing-xxl: 20px;
+
+// 圆角
+$border-radius-sm: 8px;
+$border-radius-md: 10px;
+
+// 尺寸
+$icon-size-sm: 24px;
+$image-size-md: 65px;
+
+// ===== SASS混合器 =====
+@mixin flex-center {
  display: flex;
  align-items: center;
-  margin-bottom: 10px;
 }

-.hotel-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-}
-
-.hotel-name {
-  color: #333;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.goods-detail {
-  display: flex;
-  margin-bottom: 20px;
-}
-
-.goods-image {
-  background-color: pink;
-  width: 65px;
-  height: 65px;
-  border-radius: 8px;
-  margin-right: 15px;
-}
-
-.goods-description {
-  flex: 1;
-}
-
-.goods-title {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.goods-date {
-  font-size: 12px;
-  color: #666;
-}
-
-.included-services {
-  margin-top: 10px;
-}
-
-.services-title {
-  display: block;
-  font-size: 12px;
-  margin-bottom: 12px;
-}
-
-.service-item {
+@mixin flex-between {
  display: flex;
  justify-content: space-between;
-  margin-bottom: 10px;
 }

-.service-name {
-  font-size: 14px;
+@mixin text-style($size, $color: $color-primary, $weight: $font-weight-normal) {
+  font-size: $size;
+  color: $color;
+  font-weight: $weight;
 }

-.service-quantity {
-  font-size: 12px;
-  color: #666;
+@mixin card-container {
+  background-color: $color-white;
+  border-radius: $border-radius-md;
+  padding: $spacing-md $spacing-xl $spacing-xxl;
+}
+
+// ===== 主要样式 =====
+.goods-info {
+  @include card-container;
+
+  // 酒店头部信息
+  .hotel-header {
+    @include flex-center;
+    margin-bottom: $spacing-sm;
+
+    .hotel-icon {
+      width: $icon-size-sm;
+      height: $icon-size-sm;
+      margin-right: $spacing-xs;
+    }
+
+    .hotel-name {
+      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
+    }
+  }
+
+  // 商品详情区域
+  .goods-detail {
+    display: flex;
+    margin-bottom: $spacing-xxl;
+
+    .goods-image {
+      background-color: $color-placeholder;
+      width: $image-size-md;
+      height: $image-size-md;
+      border-radius: $border-radius-sm;
+      margin-right: $spacing-lg;
+      flex-shrink: 0;
+    }
+
+    .goods-description {
+      flex: 1;
+      min-width: 0; // 防止flex子项溢出
+
+      .goods-title {
+        display: block;
+        @include text-style($font-size-sm, $color-primary, $font-weight-medium);
+        margin-bottom: $spacing-xs;
+        line-height: 1.4;
+      }
+
+      .store-address {
+        @include flex-center;
+        @include text-style($font-size-xs, $color-primary);
+
+        text {
+          flex: 1;
+          padding: 0 6px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .in-date,
+      .out-date {
+        @include text-style($font-size-xs, $color-secondary);
+        margin-top: 8px;
+      }
+    }
+  }
+
+  // 包含服务区域
+  .included-services {
+    margin-top: $spacing-sm;
+
+    .services-title {
+      display: block;
+      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
+      margin-bottom: $spacing-md;
+    }
+
+    .service-item {
+      @include flex-between;
+      align-items: center;
+      margin-bottom: $spacing-sm;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .service-name {
+        @include text-style($font-size-sm, $color-primary);
+        flex: 1;
+      }
+
+      .service-quantity {
+        @include text-style($font-size-xs, $color-secondary);
+        flex-shrink: 0;
+        margin-left: $spacing-xs;
+      }
+    }
+  }
 }
--- a/pages/order/components/OrderCard/OrderCardContent.vue
+++ b/pages/order/components/OrderCard/OrderCardContent.vue
@@ -75,7 +75,19 @@ const displayItems = computed(() => {
    case ORDER_TYPES.HOTEL:
      return [
        { label: LABELS.ORDER_ID, value: orderData.orderId },
-        { label: LABELS.CHECK_IN_TIME, value: orderData.checkInTime },
+        {
+          label: LABELS.CHECK_IN_TIME,
+          value:
+            orderData.checkInData?.replace(
+              /(\d{4})-(\d{1,2})-(\d{1,2})/,
+              "$2月$3日"
+            ) +
+            "-" +
+            orderData.checkOutData?.replace(
+              /(\d{4})-(\d{1,2})-(\d{1,2})/,
+              "$2月$3日"
+            ),
+        },
        { label: LABELS.VISITOR_NAME, value: orderData.visitorName },
        { label: LABELS.CONTACT_PHONE, value: orderData.contactPhone },
      ];
--- a/pages/order/components/OrderInfo/index.vue
+++ b/pages/order/components/OrderInfo/index.vue
@@ -13,7 +13,7 @@
      <text class="value">{{ payWayText }}</text>
    </view>
    <!-- 在已退款状态显示 -->
-    <view class="order-item">
+    <view v-if="orderData.orderStatus === '4'" class="order-item">
      <text class="label">退款单号</text>
      <text class="value">{{ orderData.refundOrderNo }}</text>
    </view>
@@ -26,7 +26,9 @@
    <button v-if="shouldShowButton" :class="buttonClass">
      {{ buttonText }}
    </button>
-    <text class="feedback">投诉反馈</text>
+    <view class="feedback">
+      <text @click="openFeedback">投诉反馈</text>
+    </view>
  </view>
 </template>

@@ -96,6 +98,12 @@ const buttonClass = computed(() => {
    return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
  }
 });
+
+// 投诉电话
+const openFeedback = () => {
+  const phoneNumber = props.orderData.complaintHotline;
+  uni.makePhoneCall({ phoneNumber });
+};
 </script>

 <style scoped lang="scss">
--- a/pages/order/components/OrderInfo/styles/index.scss
+++ b/pages/order/components/OrderInfo/styles/index.scss
@@ -147,7 +147,6 @@ $breakpoint-mobile: 480px;
    margin-top: $spacing-large;
    position: relative;
    overflow: hidden;
-    box-shadow: 0 2px 8px rgba($button-color, 0.3);
    transition: all $transition-normal;
    letter-spacing: 0.5px;

@@ -219,49 +218,10 @@ $breakpoint-mobile: 480px;
  }

  .feedback {
-    display: block;
    text-align: center;
    font-size: $font-size-medium;
    color: $text-color-primary;
    font-weight: $font-weight-normal;
    margin-top: $spacing-medium;
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    transition: all $transition-fast;
-    padding: $spacing-small;
-    border-radius: 4px;
-
-    // 下划线动画效果
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 4px;
-      left: 50%;
-      width: 0;
-      height: 1px;
-      background-color: $text-color-accent;
-      transition: all $transition-normal;
-      transform: translateX(-50%);
-    }
-
-    &:hover {
-      color: $text-color-accent;
-      background-color: rgba($text-color-accent, 0.05);
-
-      &::after {
-        width: 60%;
-      }
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    // 移动端适配
-    @media (max-width: $breakpoint-mobile) {
-      font-size: $font-size-medium - 1px;
-      padding: $spacing-medium $spacing-small;
-    }
  }
 }