feat: 商品详情调整

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>
@@ -57,6 +61,4 @@ const props = defineProps({
 });
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+<style scoped lang="scss"></style>

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;
-  }
-}

src/components/ModuleTitle/styles/index.scss

@@ -6,7 +6,7 @@
 
 .module-title {
   font-size: 18px;
-  color: #000;
+  color: #171717;
   position: relative;
   z-index: 1;
 }

src/pages/goods/components/GoodFacility/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="mt-16">
+    <view
+      v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+        .commodityPurchaseInstructionModuleEntityList"
+      :key="index"
+    >
+      <view
+        class="flex flex-items-start flex-col pt-12 pb-12"
+        :class="{
+          'border-bottom':
+            index <
+            goodsData.commodityPurchaseInstruction
+              .commodityPurchaseInstructionModuleEntityList.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.moduleIcon]
+          }}</uni-icons>
+          <text class="font-size-12 color-171717 line-height-20">{{
+            moduleItem.moduleTitle
+          }}</text>
+        </view>
+        <text class="flex-full font-size-12 color-525866 line-height-20 mt-4">{{
+          moduleItem.moduleContent
+        }}</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"></style>

src/pages/goods/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="goods-container">
+  <view class="goods-container bg-gray">
     <TopNavBar title="商品详情" />
 
     <!-- 滚动区域 -->
@@ -29,6 +29,9 @@
           :nights="selectedDate.totalDays"
         />
 
+        <!-- 商品设施组件 -->
+        <GoodFacility :goodsData="goodsData" />
+
         <!-- 商品详情组件 -->
         <GoodDetail :goodsData="goodsData" />
       </view>
@@ -79,6 +82,7 @@ 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({});

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;
 }
@@ -71,10 +79,22 @@
   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;
 }