Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS

# Conflicts: # src/pages/index/components/module/MoreService/index.vue
2025-10-16 20:40:30 +08:00
parent 96fb41a9cf 11aa958077
commit e6615da586
14 changed files with 150 additions and 266 deletions
--- 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;
 }
--- 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,
    },
  ];
 });
--- 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);
-}
--- 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>
--- 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>
--- 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
--- 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;
  }
 }
--- 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 }) => {
  // 这里可以添加订单详情跳转逻辑
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -273,19 +273,7 @@ const handleReplyText = (text) => {
 // 是发送指令消息
 const handleReplyInstruct = async (item) => {
  await checkToken();
-  // 更多服务
-  if (item.type === "Command.more") {
-    uni.$emit("SHOW_MORE_POPUP");
-    return;
-  }

-  if (item.type === "Command.myOrder") {
-    // 订单
-    uni.navigateTo({
-      url: "/pages-order/order/list",
-    });
-    return;
-  }
  commonType = item.type;
  // 重置消息状态，准备接收新的AI回复
  resetMessageState();
--- a/src/pages/index/components/chat/ChatQuickAccess/index.vue
+++ b/src/pages/index/components/chat/ChatQuickAccess/index.vue
@@ -47,6 +47,11 @@ const itemList = ref([
 ]);

 const sendReply = (item) => {
+  // 更多服务
+  if (item.type === Command.more) {
+    uni.$emit("SHOW_MORE_POPUP");
+    return;
+  }
  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
 };
 </script>
--- a/src/pages/index/components/module/DetailCardCompontent/index.vue
+++ b/src/pages/index/components/module/DetailCardCompontent/index.vue
@@ -25,6 +25,4 @@ const props = defineProps({
 });
 </script>

-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+<style scoped lang="scss"></style>
--- 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>
@@ -51,6 +52,7 @@ const list = ref([
    content: "预定门票、房间、餐食",
    btnText: "去预定",
    type: Command.quickBooking,
+    path: "",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
@@ -58,6 +60,7 @@ const list = ref([
    content: "发现景点、活动、特色内容",
    btnText: "去探索",
    type: Command.discovery,
+    path: "",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
@@ -65,6 +68,7 @@ const list = ref([
    content: "查看门票、住宿、餐饮等订单",
    btnText: "去查看",
    type: Command.myOrder,
+    path: "/pages-order/order/list",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
@@ -72,6 +76,7 @@ const list = ref([
    content: "查看服务工单、进度与处理情况",
    btnText: "去查看",
    type: Command.myWorkOrder,
+    path: "/pages/myWorkOrder/index",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
@@ -79,6 +84,7 @@ const list = ref([
    content: "提交使用问题、建议与需求",
    btnText: "去反馈",
    type: Command.feedbackCard,
+    path: "",
  },
 ]);

@@ -86,15 +92,19 @@ const open = () => {
  popup.value && popup.value.open();
 };

-const handleClick = (item) => {
-  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
-  close();
-};
-
 const close = () => {
  popup.value && popup.value.close();
 };

+const handleClick = (item) => {
+  close();
+  if (item.path) {
+    uni.navigateTo({ url: item.path });
+    return;
+  }
+  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
+};
+
 // 接收更多服务
 uni.$on("SHOW_MORE_POPUP", () => {
  open();
--- 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;
 }
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -27,6 +27,14 @@
  padding-top: 8px;
 }

+.pl-8 {
+  padding-left: 8px;
+}
+
+.pr-8 {
+  padding-right: 8px;
+}
+
 .pb-8 {
  padding-bottom: 8px;
 }