From 11aa958077e3f70e61c3284dd0429f4f18889a19 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 16 Oct 2025 20:29:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/components/TopNavBar/index.vue            |  39 ++++---
 src/components/TopNavBar/styles/index.scss    | 109 ++++--------------
 .../order/components/OrderCard/InfoRow.vue    |  27 +----
 .../components/OrderCard/OrderCardContent.vue |  23 +++-
 .../order/components/OrderCard/index.vue      |  50 ++++----
 .../components/OrderCard/styles/index.scss    |  52 +--------
 src/pages-order/order/list.vue                |  43 +------
 .../components/module/MoreService/index.vue   |  16 ++-
 src/static/scss/margin.scss                   |  20 ++++
 src/static/scss/padding.scss                  |   8 ++
 11 files changed, 143 insertions(+), 246 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a24b9b1..1f40c70 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@ page,
 body,
 #app {
   font-family: PingFang SC, PingFang SC;
-  background-color: #e9f3f7;
+  background-color: #f5f7fa;
   height: 100vh;
   width: 100vw;
 }
diff --git a/src/components/TopNavBar/index.vue b/src/components/TopNavBar/index.vue
index a6dc28d..a050825 100644
--- a/src/components/TopNavBar/index.vue
+++ b/src/components/TopNavBar/index.vue
@@ -7,18 +7,33 @@
     ></view>
 
     <!-- 导航栏内容 -->
-    <view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
+    <view
+      class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
+      :style="{ height: navBarHeight + 'px' }"
+    >
       <!-- 左侧返回按钮 -->
-      <view class="nav-bar-left" @click="handleBack" v-if="showBack">
+      <view
+        class="nav-bar-left flex flex-items-center flex-justify-center"
+        v-if="showBack"
+        @click="handleBack"
+      >
         <uni-icons type="left" size="20" :color="backIconColor" />
       </view>
 
       <!-- 中间标题区域 -->
-      <view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
+      <view
+        :class="[
+          'nav-bar-center flex flex-items-center flex-justify-center',
+          `nav-bar-center--${titleAlign}`,
+        ]"
+      >
         <slot name="title">
-          <text class="nav-bar-title" :style="{ color: titleColor }">{{
-            title
-          }}</text>
+          <text
+            class="font-size-17 font-500 color-000"
+            :style="{ color: titleColor }"
+          >
+            {{ title }}
+          </text>
         </slot>
       </view>
 
@@ -45,11 +60,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  // 是否添加阴影
-  shadow: {
-    type: Boolean,
-    default: true,
-  },
   // 是否显示返回按钮
   showBack: {
     type: Boolean,
@@ -58,17 +68,17 @@ const props = defineProps({
   // 背景颜色
   backgroundColor: {
     type: String,
-    default: "#ffffff",
+    default: "#d9eeff",
   },
   // 标题颜色
   titleColor: {
     type: String,
-    default: "#333333",
+    default: "#000",
   },
   // 返回按钮图标颜色
   backIconColor: {
     type: String,
-    default: "#333333",
+    default: "#000",
   },
   // 是否隐藏状态栏占位
   hideStatusBar: {
@@ -114,7 +124,6 @@ const navBarClass = computed(() => {
     "top-nav-bar",
     {
       "top-nav-bar--fixed": props.fixed,
-      "has-shadow": props.shadow,
     },
   ];
 });
diff --git a/src/components/TopNavBar/styles/index.scss b/src/components/TopNavBar/styles/index.scss
index 7a7bd7e..12402c2 100644
--- a/src/components/TopNavBar/styles/index.scss
+++ b/src/components/TopNavBar/styles/index.scss
@@ -1,11 +1,7 @@
 // TopNavBar 组件样式
 .top-nav-bar {
   width: 100%;
-  background-color: $uni-bg-color;
-
-  &.has-shadow {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
-  }
+  background-color: #d9eeff;
 
   &--fixed {
     position: fixed;
@@ -14,86 +10,35 @@
     right: 0;
     z-index: 999;
   }
+}
 
-  .nav-bar-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    position: relative;
+.nav-bar-left,
+.nav-bar-right {
+  width: 30px;
+  height: 30px;
+}
 
-    .nav-bar-left {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 30px;
-      height: 30px;
-      position: absolute;
-      left: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 2;
-      cursor: pointer;
-      transition: opacity 0.2s ease;
+.nav-bar-center {
+  flex: 1;
+  height: 30px;
+  padding: 0 20px; // 为左右按钮留出空间
 
-      &:hover {
-        opacity: 0.7;
-      }
+  // 居中对齐（默认）
+  &--center {
+    justify-content: center;
 
-      &:active {
-        opacity: 0.5;
-      }
+    .nav-bar-title {
+      text-align: center;
     }
+  }
 
-    .nav-bar-center {
-      flex: 1;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 20px; // 为左右按钮留出空间
+  // 左对齐
+  &--left {
+    justify-content: flex-start;
+    padding-left: 20px; // 为返回按钮留出更多空间
 
-      // 居中对齐（默认）
-      &--center {
-        justify-content: center;
-
-        .nav-bar-title {
-          text-align: center;
-        }
-      }
-
-      // 左对齐
-      &--left {
-        justify-content: flex-start;
-        padding-left: 20px; // 为返回按钮留出更多空间
-
-        .nav-bar-title {
-          text-align: left;
-        }
-      }
-
-      .nav-bar-title {
-        font-size: 18px;
-        font-weight: 500;
-        color: $uni-text-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.4;
-      }
-    }
-
-    .nav-bar-right {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 30px;
-      height: 30px;
-      position: absolute;
-      right: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 2;
+    .nav-bar-title {
+      text-align: left;
     }
   }
 }
@@ -102,11 +47,3 @@
 .page-with-fixed-navbar {
   padding-top: calc(var(--status-bar-height, 44px) + 44px);
 }
-
-// 安全区域适配
-.top-nav-bar {
-  padding-left: constant(safe-area-inset-left);
-  padding-left: env(safe-area-inset-left);
-  padding-right: constant(safe-area-inset-right);
-  padding-right: env(safe-area-inset-right);
-}
diff --git a/src/pages-order/order/components/OrderCard/InfoRow.vue b/src/pages-order/order/components/OrderCard/InfoRow.vue
index 2f650e8..831a918 100644
--- a/src/pages-order/order/components/OrderCard/InfoRow.vue
+++ b/src/pages-order/order/components/OrderCard/InfoRow.vue
@@ -1,7 +1,7 @@
 <template>
-  <view class="info-row">
-    <text class="label">{{ label }}：</text>
-    <text class="value">{{ value }}</text>
+  <view class="info-row flex items-center mt-8">
+    <text class="label font-size-12 color-99A0AE">{{ label }}：</text>
+    <text class="value flex-full font-size-12 color-99A0AE">{{ value }}</text>
   </view>
 </template>
 
@@ -23,23 +23,4 @@ const props = defineProps({
 });
 </script>
 
-<style scoped lang="scss">
-.info-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.label {
-  font-size: $uni-font-size-sm;
-  color: #666666;
-  flex-shrink: 0;
-  margin-right: 8px;
-}
-
-.value {
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  flex: 1;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/pages-order/order/components/OrderCard/OrderCardContent.vue b/src/pages-order/order/components/OrderCard/OrderCardContent.vue
index 7c8dfd7..52c7df6 100644
--- a/src/pages-order/order/components/OrderCard/OrderCardContent.vue
+++ b/src/pages-order/order/components/OrderCard/OrderCardContent.vue
@@ -1,5 +1,15 @@
 <template>
-  <view class="card-content">
+  <view class="card-content border-box pt-12">
+    <view class="flex items-center justify-between">
+      <view
+        class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
+      >
+        {{ orderData.commodityName }}
+      </view>
+      <view class="right font-size-18 font-bold line-height-20 color-525866">
+        {{ orderData.orderAmt }}
+      </view>
+    </view>
     <!-- 动态渲染信息行 -->
     <InfoRow
       v-for="item in displayItems"
@@ -23,7 +33,6 @@ const ORDER_TYPES = {
 
 // 标签常量
 const LABELS = {
-  ORDER_ID: "订单编号",
   CHECK_IN_TIME: "入住时间",
   VISITOR_NAME: "游客姓名",
   CONTACT_PHONE: "联系电话",
@@ -74,7 +83,6 @@ const displayItems = computed(() => {
   switch (orderType) {
     case ORDER_TYPES.HOTEL:
       return [
-        { label: LABELS.ORDER_ID, value: orderData.orderId },
         {
           label: LABELS.CHECK_IN_TIME,
           value:
@@ -95,7 +103,6 @@ const displayItems = computed(() => {
     case ORDER_TYPES.TICKET:
     case ORDER_TYPES.OTHER:
       return [
-        { label: LABELS.ORDER_ID, value: orderData.orderId },
         {
           label: LABELS.QUANTITY,
           value: formatQuantity(orderData.commodityAmount),
@@ -110,7 +117,11 @@ const displayItems = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.card-content {
-  padding: 16px;
+.right {
+  &::before {
+    content: "￥";
+    font-weight: 500;
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/src/pages-order/order/components/OrderCard/index.vue b/src/pages-order/order/components/OrderCard/index.vue
index 22ad4f4..1c21494 100644
--- a/src/pages-order/order/components/OrderCard/index.vue
+++ b/src/pages-order/order/components/OrderCard/index.vue
@@ -1,25 +1,20 @@
 <template>
-  <view class="order-card" @click="handleCardClick">
+  <view
+    class="order-card bg-white border-box p-12 rounded-12 m-12"
+    @click="handleCardClick"
+  >
     <!-- 卡片头部 -->
-    <view class="card-header">
-      <view class="status-info">
-        <image class="status-icon" :src="getStatusIcon()"></image>
-        <view class="order-title">
-          {{ orderData.workOrderTypeName || orderData.commodityName }}
+    <view class="card-header flex items-center">
+      <view class="status-info flex items-center flex-full">
+        <image class="status-icon mr-4" :src="getStatusIcon()" />
+        <view class="order-title font-size-14 line-height-20 color-525866">
+          {{ getOrderTypeName() }}
         </view>
-
-        <uni-icons
-          class="arrow-icon"
-          v-if="props.orderData.orderType !== undefined"
-          type="right"
-          color="#999"
-          size="16"
-        />
       </view>
       <view
         v-if="orderData.status !== 'pending'"
         :class="[
-          'status-tag',
+          'status-tag font-size-12',
           `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
         ]"
       >
@@ -27,9 +22,6 @@
       </view>
     </view>
 
-    <!-- 分割线 -->
-    <Divider />
-
     <!-- 卡片内容 -->
     <OrderCardContent :order-data="orderData" />
   </view>
@@ -37,12 +29,8 @@
 
 <script setup>
 import { defineProps } from "vue";
-import Divider from "@/components/Divider/index.vue";
 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({
@@ -71,9 +59,16 @@ const emit = defineEmits(["click", "call"]);
 
 // 图标映射
 const ICON_MAP = {
-  0: hotelIcon, // 酒店订单
-  1: ticketIcon, // 门票订单
-  2: foodIcon, // 其他订单
+  0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
+  1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
+  2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
+};
+
+// 订单类型映射
+const ORDER_NAME_MAP = {
+  0: "房间",
+  1: "门票",
+  2: "餐饮",
 };
 
 // 获取状态图标
@@ -86,6 +81,11 @@ const getStatusIcon = () => {
   return ICON_MAP[props.orderData.orderType] || serviceIcon;
 };
 
+// 获取订单类型名称
+const getOrderTypeName = () => {
+  return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
+};
+
 // 获取状态文本
 const getStatusText = (status) => {
   // 工单情况：orderType 为 undefined
diff --git a/src/pages-order/order/components/OrderCard/styles/index.scss b/src/pages-order/order/components/OrderCard/styles/index.scss
index f340330..0ef603d 100644
--- a/src/pages-order/order/components/OrderCard/styles/index.scss
+++ b/src/pages-order/order/components/OrderCard/styles/index.scss
@@ -1,91 +1,43 @@
 .order-card {
-  background-color: #fff;
-  border-radius: 6px 6px 12px 12px;
-  box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
-  margin: 12px;
   transition: all 0.3s ease;
-  mask: radial-gradient(circle at 0 54px, #0000 6px, red 0),
-    radial-gradient(circle at right 54px, #0000 6px, red 0);
-  mask-size: 50%;
-  mask-position: 0, 100%;
-  mask-repeat: no-repeat;
 
   &:active {
     transform: scale(0.98);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   }
-
-  &.expired {
-    filter: grayscale(100%);
-  }
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 14px 12px 16px;
-}
-
-.status-info {
-  display: flex;
-  align-items: center;
-  flex: 1;
 }
 
 .status-icon {
   width: 20px;
   height: 20px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.order-title {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  color: $uni-text-color;
-  line-height: 1.4;
 }
 
 .status-tag {
-  box-sizing: border-box;
-  padding: 6px 16px;
-  border-radius: 20px;
-  font-size: $uni-font-size-sm;
-  font-weight: 500;
-
   &.tag-0 {
-    color: #00a6ff;
-    border: 1px solid #00a6ff;
+    color: #ff3d60;
   }
 
   &.tag-1 {
     color: #f00044;
-    border: 1px solid #f00044;
   }
 
   &.tag-2 {
     color: #40ae36;
-    border: 1px solid #40ae36;
   }
 
   &.tag-3 {
     color: #808389;
-    border: 1px solid #808389;
   }
 
   &.tag-4 {
-    color: #0256ff;
-    border: 1px solid #0256ff;
+    color: #2d91ff;
   }
 
   &.tag-5 {
     color: #808389;
-    border: 1px solid #808389;
   }
 
   &.tag-6 {
     color: #fd8702;
-    border: 1px solid #fd8702;
   }
 }
diff --git a/src/pages-order/order/list.vue b/src/pages-order/order/list.vue
index 4ccbd58..0ea9420 100644
--- a/src/pages-order/order/list.vue
+++ b/src/pages-order/order/list.vue
@@ -1,5 +1,6 @@
 <template>
   <z-paging
+    bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat"
     ref="paging"
     v-model="dataList"
     use-virtual-list
@@ -9,15 +10,7 @@
     @query="queryList"
   >
     <template #top>
-      <TopNavBar titleAlign="left">
-        <template #title>
-          <Tabs
-            :tabs="tabList"
-            :defaultActive="currentTabIndex"
-            @change="handleTabChange"
-          />
-        </template>
-      </TopNavBar>
+      <TopNavBar title="全部订单" />
     </template>
 
     <template #empty>
@@ -36,35 +29,16 @@
 <script setup>
 import { ref } from "vue";
 import TopNavBar from "@/components/TopNavBar/index.vue";
-import Tabs from "./components/Tabs/index.vue";
 import OrderCard from "./components/OrderCard/index.vue";
 import CustomEmpty from "./components/CustomEmpty/index.vue";
-import { userOrderList, userWorkOrderList } from "@/request/api/OrderApi";
+import { userOrderList } from "@/request/api/OrderApi";
 
-// Tab配置
-const tabList = ref([
-  { label: "全部订单", value: "all" },
-  { label: "服务工单", value: "service" },
-]);
-
-// 当前状态
-const currentTabIndex = ref(0);
 const dataList = ref([]);
 const paging = ref(null);
 
 const queryList = async (pageNum, pageSize) => {
   try {
-    let apiCall;
-    // 根据当前Tab选择不同的API
-    if (currentTabIndex.value === 0) {
-      // 全部订单
-      apiCall = userOrderList({ pageNum, pageSize });
-    } else {
-      // 服务工单
-      apiCall = userWorkOrderList({ pageNum, pageSize });
-    }
-
-    const res = await apiCall;
+    const res = await userOrderList({ pageNum, pageSize });
     console.log("API响应:", res);
 
     if (res && res.data && res.data.records) {
@@ -83,15 +57,6 @@ const queryList = async (pageNum, pageSize) => {
   }
 };
 
-// Tab切换处理
-const handleTabChange = ({ index }) => {
-  console.log("Tab切换到:", index);
-  currentTabIndex.value = index;
-  // 清空当前数据并重新加载
-  dataList.value = [];
-  paging.value.reload();
-};
-
 // 处理订单点击
 const handleOrderClick = ({ orderId }) => {
   // 这里可以添加订单详情跳转逻辑
diff --git a/src/pages/index/components/module/MoreService/index.vue b/src/pages/index/components/module/MoreService/index.vue
index 3e7502a..445dde4 100644
--- a/src/pages/index/components/module/MoreService/index.vue
+++ b/src/pages/index/components/module/MoreService/index.vue
@@ -5,7 +5,7 @@
         <view class="title flex-full font-size-17 color-000 font-500"
           >更多服务</view
         >
-        <uni-icons type="close" size="20" color="#CACFD8" @click="close" />
+        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
       </view>
 
       <view class="list bg-white border-box pl-20 pr-20">
@@ -27,6 +27,7 @@
             </view>
             <view
               class="right border-box font-size-12 color-white line-height-16"
+              @click="handleClick(item)"
             >
               {{ item.btnText }}
             </view>
@@ -49,6 +50,7 @@ const list = ref([
     content: "预定门票、房间、餐食",
     btnText: "去预定",
     type: "quickBooking",
+    path: "/pages/quickBooking/index",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
@@ -56,6 +58,7 @@ const list = ref([
     content: "发现景点、活动、特色内容",
     btnText: "去探索",
     type: "discovery",
+    path: "/pages/discovery/index",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
@@ -63,6 +66,7 @@ const list = ref([
     content: "查看门票、住宿、餐饮等订单",
     btnText: "去查看",
     type: "myOrder",
+    path: "/pages-order/order/list",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
@@ -70,6 +74,7 @@ const list = ref([
     content: "查看服务工单、进度与处理情况",
     btnText: "去查看",
     type: "myWorkOrder",
+    path: "/pages/myWorkOrder/index",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
@@ -77,6 +82,7 @@ const list = ref([
     content: "提交使用问题、建议与需求",
     btnText: "去反馈",
     type: "feedback",
+    path: "/pages/feedback/index",
   },
 ]);
 
@@ -88,6 +94,14 @@ const close = () => {
   popup.value && popup.value.close();
 };
 
+const handleClick = (item) => {
+  if (item.path) {
+    uni.navigateTo({ url: item.path });
+  }
+
+  close();
+};
+
 // 接收更多服务
 uni.$on("SHOW_MORE_POPUP", () => {
   open();
diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss
index 681ff5d..7ecbf70 100644
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -3,6 +3,18 @@
   margin: 4px;
 }
 
+.mr-4 {
+  margin-right: 4px;
+}
+
+.m-8 {
+  margin: 8px;
+}
+
+.mt-8 {
+  margin-top: 8px;
+}
+
 .mr-8 {
   margin-right: 8px;
 }
@@ -11,10 +23,18 @@
   margin-bottom: 8px;
 }
 
+.mt-10 {
+  margin-top: 10px;
+}
+
 .mb-10 {
   margin-bottom: 10px;
 }
 
+.m-12 {
+  margin: 12px;
+}
+
 .mb-12 {
   margin-bottom: 12px;
 }
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index 779af74..938727f 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -7,6 +7,14 @@
   padding-top: 8px;
 }
 
+.pl-8 {
+  padding-left: 8px;
+}
+
+.pr-8 {
+  padding-right: 8px;
+}
+
 .pb-8 {
   padding-bottom: 8px;
 }