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

feat: 商品详情的滚动的调整
feat: 图片浏览器的样式调整
2025-10-23 17:46:20 +08:00 · 2025-10-22 20:08:05 +08:00 · 2025-10-22 19:29:27 +08:00 · 2025-10-22 18:37:50 +08:00 · 2025-10-21 21:52:26 +08:00 · 2025-10-21 21:52:17 +08:00
26 changed files with 397 additions and 455 deletions
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -1,87 +1,89 @@
 <template>
  <view class="create-service-order">
-    <view class="create-service-wrapper">
-      <view class="order-header">
-        <text>创建服务工单</text>
+    <view
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
+    >
+      <view
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
+      >
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
      </view>
-      <view class="order-content">
-        <view class="order-item">
-          <image src="./images/icon_service.png" class="order-icon"></image>
-          <uni-data-select
-            v-if="!isCallSuccess && workOrderTypeList.length > 0"
-            class="order-select"
-            placeholder="请选择服务工单"
-            v-model="workOrderTypeName"
-            :localdata="workOrderTypeListSelectData"
-            @change="changeWorkOrderType"
-          ></uni-data-select>
-          <text v-else class="order-description">{{ workOrderTypeName }}</text>
-        </view>
-        <view class="order-line"></view>
-        <view class="order-details">
-          <view class="detail-item">
-            <text class="detail-label">房间号：</text>
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写房间号"
-              v-model="roomId"
-            />
-            <text v-else class="detail-value">{{ roomId }}</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">服务时间：</text>
-            <text class="detail-value">2025-08-11 14:00</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">联系房客：</text>
-            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写联系人"
-              v-model="contactName"
-            />
-            <text v-else class="detail-value">{{ contactName }}</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">联系电话：</text>
-            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写联系电话"
-              v-model="contactPhone"
-            />
-            <text v-else class="detail-value">{{ contactPhone }}</text>
-          </view>
+
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
+        <view
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <text class="font-500 line-height-22 mr-20">房间号</text>
+          <input placeholder="请填写房间号" v-model="roomId" />
        </view>

-        <!-- 呼叫前显示立即呼叫按钮 -->
-        <button v-if="!isCallSuccess" class="order-button" @click="handleCall">
-          立即呼叫
-        </button>
+        <view
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <text class="font-500 line-height-22 mr-20">联系电话</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
+        </view>

-        <!-- 呼叫成功后显示两个按钮 -->
-        <view v-else class="order-buttons">
-          <button class="order-button-secondary" @click="viewWorkOrder">
-            查看工单
-          </button>
-          <button
-            v-if="!isMarkCompleted"
-            class="order-button-primary"
-            @click="markCompleted"
+        <view
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <view class="font-500 line-height-22 mb-12">需求信息描述</view>
+          <textarea
+            class="h-80"
+            placeholder="请输入需求信息描述"
+            placeholder-class="font-size-14 font-400"
+            maxlength="100"
+            v-model="contactText"
+          />
+        </view>
+
+        <view
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <view class="font-500 line-height-22 mb-12">照片上传</view>
+          <view
+            class="bg-white p-24 rounded-5 inline-block"
+            @click="handleChooseImage"
          >
-            已完成
-          </button>
+            <uni-icons fontFamily="znicons" size="24" color="#6A717F">
+              {{ zniconsMap["zn-camera"] }}
+            </uni-icons>
+          </view>
        </view>
      </view>
-    </view>

-    <view class="footer-help">
-      <image src="./images/icon_volume.png" class="help-icon"></image>
-      <text class="help-text">没解决问题？给我打电话吧！</text>
-      <text class="help-phone" @click="makePhoneCall">15185111210</text>
+      <view v-else class="border-box card-content flex flex-items-center p-12">
+        <view class="border-box left flex-full pr-20">
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >房间号：{{ roomId }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >联系方式: {{ contactPhone }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+            >需求描述: {{ contactText }}</view
+          >
+        </view>
+
+        <image
+          class="right rounded-6"
+          src="https://picsum.photos/300/300"
+          mode="aspectFill"
+        />
+      </view>
+
+      <view
+        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+        @click="handleCall"
+      >
+        {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
+      </view>
    </view>
  </view>
 </template>
@@ -89,49 +91,51 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
 import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { createWorkOrder } from "@/request/api/OrderApi";
+import { updateImageFile } from "@/request/api/UpdateFile";
+import { zniconsMap } from "@/static/fonts/znicons.js";

-import {
-  createWorkOrder,
-  workOrderTypeListForBiz,
-} from "@/request/api/OrderApi";
 const workOrderTypeId = ref("");
-const workOrderTypeName = ref("");
 const roomId = ref("");
-const contactName = ref("");
 const contactPhone = ref("");
+const contactText = ref("");
+const contentImgUrl = ref("");
 const isCallSuccess = ref(false); // 呼叫成功状态
 const workOrderId = ref(0); // 工单ID
-const workOrderTypeList = ref([]);
-const workOrderTypeListSelectData = ref([]);
-const isMarkCompleted = ref(false);

-const changeWorkOrderType = (index) => {
-  if (index < 0 || index >= workOrderTypeListSelectData.value.length) {
+// 处理图片上传
+const handleChooseImage = () => {
+  console.log("选择图片");
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      const file = res.tempFilePaths[0];
+      updateImagehandle(file);
+    },
+    fail: (err) => {
+      console.error("选择图片失败:", err);
+      uni.showToast({
+        title: "选择图片失败",
+        icon: "none",
+        duration: 2000,
+      });
+    },
+  });
+};
+
+const updateImagehandle = (file) => {
+  if (!file) {
    return;
  }
-  const item = workOrderTypeList.value[index];
-  console.log("item:", item);
-  workOrderTypeId.value = item.id;
-  workOrderTypeName.value = item.workOrderTypeName;
+  updateImageFile(file).then((res) => {
+    contentImgUrl.value = res.data?.url || "";
+  });
 };

 const handleCall = async () => {
-  // 验证输入
-  if (!roomId.value.trim()) {
-    uni.showToast({
-      title: "请填写房间号",
-      icon: "none",
-      duration: 2000,
-    });
-    return;
-  }
-
-  if (!contactName.value.trim()) {
-    uni.showToast({
-      title: "请填写联系人",
-      icon: "none",
-      duration: 2000,
-    });
+  if (isCallSuccess.value) {
+    // 查看工单
+    viewWorkOrder();
    return;
  }

@@ -144,6 +148,15 @@ const handleCall = async () => {
    return;
  }

+  if (!contactText.value.trim()) {
+    uni.showToast({
+      title: "请填写需求信息描述内容",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
  sendCreateWorkOrder();
 };

@@ -151,33 +164,34 @@ const handleCall = async () => {
 const sendCreateWorkOrder = async () => {
  try {
    const res = await createWorkOrder({
-      contactName: contactName.value,
-      contactPhone: contactPhone.value,
      workOrderTypeId: workOrderTypeId.value,
      roomId: roomId.value,
+      contactPhone: contactPhone.value,
+      content: contactText.value,
+      contentImgUrl: contentImgUrl.value,
    });

    if (res.code === 0) {
      // 保存工单ID
      workOrderId.value = res.data?.id || "";

-      // 设置呼叫成功状态
+      // 设置成功状态
      isCallSuccess.value = true;

      uni.showToast({
-        title: "工单创建成功",
+        title: "呼叫成功",
        icon: "success",
        duration: 2000,
      });
    } else {
      uni.showToast({
-        title: res.message || "创建工单失败",
+        title: res.message || "呼叫失败",
        icon: "none",
        duration: 2000,
      });
    }
  } catch (error) {
-    console.error("创建工单失败:", error);
+    console.error("呼叫失败:", error);
    uni.showToast({
      title: "网络错误，请重试",
      icon: "none",
@@ -186,25 +200,6 @@ const sendCreateWorkOrder = async () => {
  }
 };

-/// 获取工单类型
-const getWorkOrderType = async () => {
-  const res = await workOrderTypeListForBiz();
-  if (res.code === 0) {
-    workOrderTypeList.value = res.data;
-    workOrderTypeList.value.forEach((item, index) => {
-      workOrderTypeListSelectData.value.push({
-        value: index,
-        text: item.workOrderTypeName,
-      });
-    });
-
-    if (workOrderTypeList.value.length > 0) {
-      workOrderTypeId.value = workOrderTypeList.value[0].id;
-      workOrderTypeName.value = workOrderTypeList.value[0].workOrderTypeName;
-    }
-  }
-};
-
 // 查看工单
 const viewWorkOrder = () => {
  console.log("查看工单:", workOrderId.value);
@@ -214,35 +209,7 @@ const viewWorkOrder = () => {
  });
 };

-// 标记已完成
-const markCompleted = () => {
-  console.log("标记工单已完成:", workOrderId.value);
-  uni.showModal({
-    title: "确认完成",
-    content: "确认标记此工单为已完成吗？",
-    success: (res) => {
-      if (res.confirm) {
-        isMarkCompleted.value = true;
-        // 这里可以调用API标记工单完成
-        uni.showToast({
-          title: "工单已完成",
-          icon: "success",
-          duration: 2000,
-        });
-      }
-    },
-  });
-};
-
-const makePhoneCall = () => {
-  // 使用 uniapp 的 API 拨打电话
-  uni.makePhoneCall({
-    phoneNumber: "15185111210",
-  });
-};
-
 onMounted(() => {
-  getWorkOrderType();
  nextTick(() => {
    setTimeout(() => {
      uni.$emit(SCROLL_TO_BOTTOM, true);
--- a/src/components/CreateServiceOrder/styles/index.scss
+++ b/src/components/CreateServiceOrder/styles/index.scss
@@ -1,179 +1,25 @@
-.create-service-wrapper {
-  padding: 12px 0;
-}
-
 .order-header {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: $uni-text-color;
+  height: 48px;
 }

+.header-icon {
+  width: 98px;
+  height: 48px;
+}
 .order-content {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.order-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.order-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  border-radius: $uni-border-radius-circle;
-  background-color: #ffa500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.order-description {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  color: $uni-text-color;
-}
-
-.order-line {
-  position: relative;
-  border: 1px dashed #eeeeee;
-  margin-left: -12px;
-  margin-right: -12px;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: -8px;
-    width: 16px;
-    height: 16px;
-    border-radius: $uni-border-radius-50px;
-    background-color: #eff6fa;
-  }
-
-  &::before {
-    left: -8px;
-  }
-
-  &::after {
-    right: -8px;
-  }
-}
-
-.order-details {
-  margin-top: 12px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.detail-label {
-  width: 70px;
-  margin-right: 10px;
-}
-
-.detail-value {
-  color: $uni-text-color;
-}
-
-.detail-input {
-  border: none;
-  outline: none;
-  width: calc(100% - 80px);
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  border-bottom: 1px solid #ddd;
-}
-
-.order-select {
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.order-button {
-  width: 300px;
-  height: 42px;
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border-radius: 20px;
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 呼叫成功后的按钮容器
-.order-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-  gap: 12px;
-}
-
-// 查看工单按钮（次要按钮）
-.order-button-secondary {
-  flex: 1;
-  height: 42px;
-  background: linear-gradient(90deg, #0256ff, #00a6ff);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border: none;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 已完成按钮（主要按钮）
-.order-button-primary {
-  flex: 1;
-  height: 42px;
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.footer-help {
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  font-size: $uni-font-size-base;
-  color: #ed6a0c;
+  width: 335px;
 }

 .help-icon {
  width: 16px;
-  height: 14px;
-  margin-right: 5px;
+  height: 16px;
 }

-.help-text {
-  margin-right: 5px;
+.btn {
+  height: 44px;
 }

-.help-phone {
-  cursor: pointer;
+.right {
+  height: 88px;
+  width: 88px;
 }
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -3,38 +3,39 @@
    <view
      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
    >
-      <image
-        class="order-header w-full"
-        src="https://oss.nianxx.cn/mp/static/version_101/home/feedback_1.png"
-        mode="aspectFill"
-      />
-      <view class="order-content border-box p-12">
+      <view
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
+      >
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
+      </view>
+
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
        <view
          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
        >
          <text class="font-500 line-height-22 mr-20">联系电话</text>
-          <input
-            v-if="!isCallSuccess"
-            placeholder="请填写联系电话"
-            v-model="contactPhone"
-          />
-          <text v-else class="detail-value">{{ contactPhone }}</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
        </view>
        <view
          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
        >
          <view class="font-500 line-height-22 mb-12">意见内容</view>
          <textarea
-            v-if="!isCallSuccess"
+            class="h-80"
            placeholder="请输入反馈意见"
+            placeholder-class="font-size-14 font-400"
            maxlength="100"
            v-model="contactText"
          />
-          <text v-else class="detail-value">{{ contactText }}</text>
        </view>

        <view
-          v-if="!isCallSuccess"
          class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
          @click="handleCall"
        >
@@ -42,9 +43,16 @@
        </view>
      </view>

-      <view
-        class="footer-help flex flex-items-center flex-justify-center mb-12"
-      >
+      <view v-else class="border-box left flex-full p-12">
+        <view class="font-size-12 color-525866 line-height-20 mb-4"
+          >联系方式: {{ contactPhone }}</view
+        >
+        <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+          >意见内容: {{ contactText }}</view
+        >
+      </view>
+
+      <view class="footer-help flex flex-items-center pl-12 mb-12">
        <image class="help-icon mr-4" src="./images/icon_volume.png" />
        <text class="font-size-12 font-500 color-FA7319">
          {{ appName }}收到您的意见将第一时间为您处理!
--- a/src/components/Feedback/styles/index.scss
+++ b/src/components/Feedback/styles/index.scss
@@ -2,6 +2,11 @@
  height: 48px;
 }

+.header-icon {
+  width: 98px;
+  height: 48px;
+}
+
 .order-content {
  width: 335px;
 }
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -1,18 +1,17 @@
 <template>
-  <view>
-    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
+  <view class="mt-16">
+    <view v-if="goodsData.commodityPurchaseInstruction">
      <ModuleTitle
        v-if="showTitle"
        :title="goodsData.commodityPurchaseInstruction.templateTitle"
      />
      <view
-        class="use-notice-content"
        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
          .commodityPurchaseInstructionModuleEntityList"
        :key="index"
      >
        <view
-          class="module-item"
+          class="flex flex-items-start flex-col pt-12 pb-12"
          :class="{
            'border-bottom':
              index <
@@ -21,13 +20,18 @@
                1,
          }"
        >
-          <view class="module-icon">
+          <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
            <uni-icons fontFamily="znicons" size="20" color="#333">{{
              zniconsMap[moduleItem.moduleIcon]
            }}</uni-icons>
-            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+            <text class="font-size-14 color-171717 line-height-20">{{
+              moduleItem.moduleTitle
+            }}</text>
          </view>
-          <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+          <text
+            class="flex-full font-size-12 color-525866 line-height-20 mt-4"
+            >{{ moduleItem.moduleContent }}</text
+          >
        </view>
      </view>
    </view>
@@ -58,5 +62,8 @@ const props = defineProps({
 </script>

 <style scoped lang="scss">
-@import "./styles/index.scss";
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
 </style>
--- a/src/components/GoodDetail/styles/index.scss
+++ b/src/components/GoodDetail/styles/index.scss
@@ -1,40 +0,0 @@
-// 使用须知样式
-.use-notice {
-  margin: 16px 0;
-}
-
-.use-notice-content {
-  .module-item {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 12px 0;
-
-    .module-icon {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 8px;
-      flex-shrink: 0;
-
-      .module-title {
-        font-size: $uni-font-size-base;
-        color: $uni-text-color;
-        text-align: center;
-        word-wrap: break-word;
-        margin-left: 4px;
-      }
-    }
-
-    .module-desc {
-      flex: 1;
-      font-size: $uni-font-size-sm;
-      color: #666;
-      line-height: 1.5;
-      margin-top: 4px;
-    }
-  }
-  .border-bottom {
-    border-bottom: 1px solid #f0f0f0;
-  }
-}
--- a/src/components/ImageSwiper/index.vue
+++ b/src/components/ImageSwiper/index.vue
@@ -22,10 +22,6 @@
      </swiper-item>
    </swiper>

-    <view class="custom-indicator">
-      图片{{ active + 1 }}/{{ thumbnails.length }}
-    </view>
-
    <!-- 缩略图部分 -->
    <view
      v-if="showThumbnails"
@@ -52,16 +48,26 @@
              :src="thumb.photoUrl"
              mode="aspectFill"
            ></image>
-            <text>{{ thumb.photoName }}</text>
          </view>
        </view>
      </scroll-view>
+
+      <view class="custom-indicator">
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-camera"]
+        }}</uni-icons>
+        <text class="custom-indicator-text">{{ thumbnails.length }}</text>
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-nav-arrow-right"]
+        }}</uni-icons>
+      </view>
    </view>
  </view>
 </template>

 <script setup>
 import { ref, computed, nextTick } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";

 // Props定义
 const props = defineProps({
--- a/src/components/ImageSwiper/styles/index.scss
+++ b/src/components/ImageSwiper/styles/index.scss
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
 .image-swiper {
  position: relative;
  width: 100%;
@@ -13,27 +18,32 @@
  height: 100%;
 }

-.custom-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: $uni-border-radius-50px;
-  padding: 3px 8px;
-  font-size: 8px;
-  color: #fff;
-}
-
 .thumbnail-box {
  position: absolute;
  left: 12px;
  right: 12px;
-  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+}
+
+.custom-indicator {
+  margin-left: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: $uni-border-radius-50px;
+  padding: 0 6px 4px 8px;
+}
+
+.custom-indicator-text {
+  margin: 0 4px;
+  font-size: 10px;
+  text-align: center;
+  align-items: center;
+  color: #fff;
 }

 .thumbnail-scroll {
-  width: 100%;
+  flex: 1;
  height: 100%;
  white-space: nowrap;
 }
@@ -42,7 +52,6 @@
  display: flex;
  align-items: center;
  gap: 10px;
-  padding: 0 5px;
 }

 .thumbnail-item {
@@ -52,29 +61,17 @@

  &.active {
    .thumbnail-image {
-      border: 1px solid #fff;
+      border: 2px solid #fff;
    }
  }
 }

 .thumbnail-item .thumbnail-image {
-  width: 48px;
-  height: 38px;
-  border-radius: 4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
  box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
  transition: all 0.3s ease;
  display: block;
 }
-
-.thumbnail-item text {
-  color: #fff;
-  font-size: 8px;
-  display: block;
-  margin-top: 4px;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 48px;
-}
--- a/src/components/ModuleTitle/styles/index.scss
+++ b/src/components/ModuleTitle/styles/index.scss
@@ -6,7 +6,7 @@

 .module-title {
  font-size: 18px;
-  color: #000;
+  color: #171717;
  position: relative;
  z-index: 1;
 }
--- a/src/model/ChatModel.js
+++ b/src/model/ChatModel.js
@@ -19,7 +19,7 @@ export const CompName = {
  // 快速预定卡片
  quickBookingCard: "quickBookingCard",
  // 服务工单卡片
-  createWorkOrderCard: "createWorkOrderCard",
+  callServiceCard: "callServiceCard",
  // 意见反馈卡片
  feedbackCard: "feedbackCard",
  // 探索发现卡片
@@ -37,7 +37,7 @@ export const Command = {
  // 探索发现
  discovery: "Command.discovery",
  // 呼叫服务
-  createWorkOrderCard: "Command.createWorkOrderCard",
+  callServiceCard: "Command.callServiceCard",
  // 更多
  more: "Command.more",
  // 我的订单
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="mt-16">
+    <view
+      v-for="(moduleItem, index) in goodsData.commodityEquipment"
+      :key="index"
+    >
+      <view
+        class="flex flex-items-start flex-col pt-12 pb-12"
+        :class="{
+          'border-bottom': index < goodsData.commodityEquipment.length - 1,
+        }"
+      >
+        <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
+          <uni-icons fontFamily="znicons" size="20" color="#171717">{{
+            zniconsMap[moduleItem.icon]
+          }}</uni-icons>
+          <text class="font-size-12 color-171717 line-height-20">{{
+            moduleItem.title
+          }}</text>
+        </view>
+        <text class="flex-full font-size-12 color-525866 line-height-20 mt-4">{{
+          moduleItem.desc
+        }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+</style>
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,14 +1,19 @@
 <template>
-  <view class="goods-container">
-    <TopNavBar title="商品详情" />
+  <view class="goods-container bg-gray">
+    <TopNavBar
+      title="商品详情"
+      :backgroundColor="`rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+    />

    <!-- 滚动区域 -->
-    <scroll-view class="content-wrapper" scroll-y>
+    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
      <ImageSwiper
        :border-radius="0"
        :height="300"
        :images="goodsData.commodityPhotoList"
-        thumbnailBottom="36px"
+        thumbnailBottom="42px"
      />

      <view class="goods-content">
@@ -29,6 +34,9 @@
          :nights="selectedDate.totalDays"
        />

+        <!-- 商品设施组件 -->
+        <GoodFacility :goodsData="goodsData" />
+
        <!-- 商品详情组件 -->
        <GoodDetail :goodsData="goodsData" />
      </view>
@@ -73,17 +81,30 @@ import {
 import { ThrottleUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
+
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
 import GoodInfo from "./components/GoodInfo/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
 import LocationCard from "@/components/LocationCard/index.vue";
 import DateSelector from "./components/DateSelector/index.vue";
 import GoodDetail from "@/components/GoodDetail/index.vue";
+import GoodFacility from "./components/GoodFacility/index.vue";

 const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);

+// 处理滚动事件
+const handleScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  // 设置一个阈值，当滚动超过200px时，导航栏完全不透明
+  const threshold = 200;
+  // 计算透明度，范围从0到1
+  navOpacity.value = Math.min(scrollTop / threshold, 1);
+};
+
 // 格式化日期为 yyyy-mm-dd 格式
 const formatDate = (date) => {
  const year = date.getFullYear();
--- a/src/pages/goods/styles/index.scss
+++ b/src/pages/goods/styles/index.scss
@@ -8,10 +8,13 @@ $button-color: #00a6ff;

  // 顶部导航栏固定样式
  :deep(.top-nav-bar) {
-    position: sticky;
+    position: fixed;
    top: 0;
+    left: 0;
+    right: 0;
    z-index: 100;
    flex-shrink: 0;
+    transition: background-color 0.3s ease;
  }

  // 使用须知样式
@@ -63,7 +66,7 @@ $button-color: #00a6ff;
  }

  .goods-content {
-    border-radius: 12px 12px 0 0;
+    border-radius: 28px 28px 0 0;
    background-color: #fff;
    padding: 12px;
    position: relative;
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -41,7 +41,7 @@
              />
              <CreateServiceOrder
                v-else-if="
-                  item.toolCall.componentName === CompName.createWorkOrderCard
+                  item.toolCall.componentName === CompName.callServiceCard
                "
              />
              <Feedback
--- a/src/pages/index/components/chat/ChatMoreTips/index.vue
+++ b/src/pages/index/components/chat/ChatMoreTips/index.vue
@@ -18,27 +18,18 @@
 </template>

 <script setup>
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
 import { defineProps } from "vue";

-const emits = defineEmits(["replySent"]);
-
 defineProps({
  guideWords: {
    type: Array,
-    default: [
-      "定温泉票",
-      "定酒店",
-      "优惠套餐",
-      "亲子玩法",
-      "了解交通",
-      "看看酒店",
-      "看看美食",
-    ],
+    default: [],
  },
 });

-const sendReply = (text) => {
-  emits("replySent", text);
+const sendReply = (item) => {
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 </script>

--- a/src/pages/index/components/chat/ChatQuickAccess/index.vue
+++ b/src/pages/index/components/chat/ChatQuickAccess/index.vue
@@ -37,7 +37,7 @@ const itemList = ref([
  {
    icon: "",
    title: "呼叫服务",
-    type: Command.createWorkOrderCard,
+    type: Command.callServiceCard,
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
--- a/src/pages/index/components/chat/ChatTopWelcome/index.vue
+++ b/src/pages/index/components/chat/ChatTopWelcome/index.vue
@@ -6,7 +6,7 @@
      >
        <image
          class="ip relative"
-          :src="initPageImages.logoImageUrl"
+          :src="initPageImages?.logoImageUrl"
          mode="aspectFit"
        />
        <view
@@ -16,7 +16,7 @@
        </view>
      </view>

-      <ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
+      <ChatMoreTips :guideWords="guideWords" />
    </view>
  </view>
 </template>
--- a/src/pages/index/components/module/MoreService/index.vue
+++ b/src/pages/index/components/module/MoreService/index.vue
@@ -2,7 +2,8 @@
  <uni-popup ref="popup" type="bottom" :safe-area="false">
    <view class="popup-content border-box pt-12 pl-12 pr-12">
      <view class="header flex flex-items-center pb-12">
-        <view class="title flex-full font-size-17 color-000 font-500"
+        <view
+          class="title flex-full text-center font-size-17 color-000 font-500 ml-24"
          >更多服务</view
        >
        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
@@ -13,7 +14,6 @@
          class="item border-box border-bottom pt-20 pb-20"
          v-for="(item, index) in list"
          :key="index"
-          @click="handleClick(item)"
        >
          <view class="flex flex-items-center flex-justify-center">
            <image v-if="item.icon" class="left" :src="item.icon" />
--- a/src/request/api/UpdateFile.js
+++ b/src/request/api/UpdateFile.js
@@ -0,0 +1,32 @@
+import { BASE_URL } from "@/request/base/baseUrl";
+import { getCurrentConfig } from "@/constant/base";
+
+export const updateImageFile = (file) => {
+  const url = BASE_URL + "/common/upload";
+  const token = uni.getStorageSync("token");
+  const clientId = getCurrentConfig().clientId;
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url,
+      filePath: file,
+      name: "file",
+      header: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+        clientId: clientId,
+      },
+      formData: {
+        file: "file",
+      },
+      success: (uploadFileRes) => {
+        console.log(uploadFileRes.data);
+        resolve(uploadFileRes.data);
+      },
+      fail: (err) => {
+        console.error("上传图片失败:", err);
+        reject(err);
+      },
+    });
+  });
+};
--- a/src/static/fonts/znicons.ttf
+++ b/src/static/fonts/znicons.ttf
--- a/src/static/scss/background.scss
+++ b/src/static/scss/background.scss
@@ -19,6 +19,10 @@
  background-color: #f5f7fa;
 }

+.bg-EEF8FF {
+  background-color: #eef8ff;
+}
+
 .bg-liner {
  background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
    linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
--- a/src/static/scss/height.scss
+++ b/src/static/scss/height.scss
@@ -1,3 +1,7 @@
 .h-screen {
  height: 100vh;
 }
+
+.h-80 {
+  height: 80px;
+}
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -7,10 +7,18 @@
  margin: 4px;
 }

+.ml-4 {
+  margin-left: 4px;
+}
+
 .mr-4 {
  margin-right: 4px;
 }

+.mt-4 {
+  margin-top: 4px;
+}
+
 .mb-4 {
  margin-bottom: 4px;
 }
@@ -55,6 +63,10 @@
  margin: 12px;
 }

+.mt-12 {
+  margin-top: 12px;
+}
+
 .mb-12 {
  margin-bottom: 12px;
 }
@@ -63,10 +75,26 @@
  margin-left: 12px;
 }

+.mr-12 {
+  margin-right: 12px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
 .ml-16 {
  margin-left: 16px;
 }

+.mr-16 {
+  margin-right: 16px;
+}
+
 .ml-20 {
  margin-left: 20px;
 }
@@ -74,3 +102,7 @@
 .mr-20 {
  margin-right: 20px;
 }
+
+.ml-24 {
+  margin-left: 24px;
+}
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -99,6 +99,10 @@
  padding-bottom: 20px;
 }

+.p-24 {
+  padding: 24px;
+}
+
 .pb-safe-area {
  padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }
--- a/src/static/scss/rounded.scss
+++ b/src/static/scss/rounded.scss
@@ -3,6 +3,10 @@
  border-radius: 4px;
 }

+.rounded-5 {
+  border-radius: 5px;
+}
+
 .rounded-6 {
  border-radius: 6px;
 }
--- a/src/static/scss/width.scss
+++ b/src/static/scss/width.scss
@@ -2,6 +2,10 @@
  width: 100%;
 }

+.w-vw {
+  width: 100vw;
+}
+
 .w-50 {
  width: 50%;
 }
Author	SHA1	Message	Date
duanshuwen	697785f30c	Merge branch 'main' of https://git.nianxx.cn/zoujing/YGChatCS into fix-109	2025-10-23 17:46:20 +08:00
zoujing	f272a57aa3	feat: 商品详情的滚动的调整	2025-10-22 20:08:05 +08:00
zoujing	6eadcb46cd	feat: 图片浏览器的样式调整	2025-10-22 19:29:27 +08:00
zoujing	df5e9e92a1	feat: 设置的搭建	2025-10-22 18:37:50 +08:00
zoujing	2682b933f1	Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS	2025-10-21 21:52:26 +08:00
zoujing	bd953e9e10	feat: 商品详情调整	2025-10-21 21:52:17 +08:00
zoujing	2f05a40918	feat: 呼叫服务命令	2025-10-21 20:00:51 +08:00
zoujing	91b2f4094c	feat: 欢迎提示的交互调整	2025-10-21 19:40:00 +08:00
zoujing	bb7b6d5c35	feat: 更多服务样式调整	2025-10-21 19:19:04 +08:00
zoujing	4d12c76589	feat: 上传图片的图标替换	2025-10-21 19:08:56 +08:00
zoujing	fbaa732388	Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS	2025-10-21 19:00:02 +08:00
zoujing	a3aabc2752	feat: 上传图片的逻辑处理	2025-10-21 18:59:53 +08:00
zoujing	5e981b6de3	feat: 意见反馈调整	2025-10-20 20:36:33 +08:00