feat: add new features, update theme and build config

- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools - Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58 - Add sass 1.58.3 dependency and update vite config for modern scss compiler support - Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route - Add utility functions for URL parameter handling - Add static assets including custom znicons font, component images and icons - Fix scss syntax issues and deprecation warnings
2026-05-26 22:49:52 +08:00
parent 548df7020c
commit ac8f5b5f64
159 changed files with 12439 additions and 629 deletions
--- a/src/pages/goods/album/index.vue
+++ b/src/pages/goods/album/index.vue
@@ -2,26 +2,16 @@
  <div class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
    <TopNavBar title="房间相册" backgroundColor="transparent" />
    <div class="p-8">
-      <span class="ml-4 font-size-18 color-171717 font-500"
-        >全部({{ albumList.length }})</span
-      >
+      <span class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</span>
    </div>

    <scroll-div scroll-y class="scroll-container overflow-auto">
      <div class="pl-4 pr-4 pb-24">
        <div class="grid-container">
-          <div
-            class="album-item"
-            v-for="(item, index) in albumList"
-            :key="index"
-          >
+          <div class="album-item" v-for="(item, index) in albumList" :key="index">
            <div class="album-image-wrapper">
-              <img
-                class="album-image"
-                :src="item.photoUrl"
-                mode="aspectFill"
-                @click="handlePrediv(item.photoUrl)"
-              ></image>
+              <img class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePrediv(item.photoUrl)">
+              </image>
              <div class="album-title">{{ item.name }}</div>
            </div>
          </div>
@@ -34,16 +24,16 @@
 <script setup>
 import { ref } from "vue";
 import TopNavBar from "@/components/TopNavBar/index.vue";
-import { onLoad } from "@dcloudio/uni-app";
 import { usePictureStore } from "@/store";
 const pictureStore = usePictureStore();

 const albumList = ref([]);

-onLoad(() => {
-  albumList.value = pictureStore.predivImageData;
-  pictureStore.setPredivImageData([]);
-});
+// TODO
+// onLoad(() => {
+//   albumList.value = pictureStore.predivImageData;
+//   pictureStore.setPredivImageData([]);
+// });

 // 处理图片预览
 const handlePrediv = (photoUrl) => {
@@ -87,11 +77,9 @@ const handlePrediv = (photoUrl) => {
  left: 0;
  right: 0;
  padding: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
--- a/src/pages/goods/components/DateSelector/styles/index.scss
+++ b/src/pages/goods/components/DateSelector/styles/index.scss
@@ -17,14 +17,14 @@
  left: 24rpx;
  font-size: 20rpx;
  color: $uni-text-color-grey;
-  background-color: $uni-bg-color;
+  background-color: #fff;
  padding: 0 8rpx;
  z-index: 1;
 }

 .date-box {
  padding: 20rpx 24rpx;
-  background-color: $uni-bg-color;
+  background-color: #fff;
  border-radius: 16rpx;
  border: 2rpx solid #f0f0f0;
  display: flex;
--- a/src/pages/goods/components/GoodConfirm/styles/index.scss
+++ b/src/pages/goods/components/GoodConfirm/styles/index.scss
@@ -185,7 +185,7 @@
  .confirm-btn {
    width: 160px;
    height: 48px;
-    background: linear-gradient(179deg, $theme-color-500 0%, $theme-color-700 100%);
+    background: linear-gradient(179deg, #0ccd58 0%, $theme-color-700 100%);
    color: #fff;
    border: none;
    border-radius: 24px;
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -1,16 +1,9 @@
 <template>
  <div class="border-box border-top-8">
-    <div
-      class="border-box pt-12 pl-12 pr-12"
-      v-for="(moduleItem, index) in goodsData.commodityEquipment"
-      :key="index"
-    >
-      <div
-        class="flex flex-items-start flex-col"
-        :class="{
-          'border-bottom': index < goodsData.commodityEquipment.length - 1,
-        }"
-      >
+    <div class="border-box pt-12 pl-12 pr-12" v-for="(moduleItem, index) in goodsData.commodityEquipment" :key="index">
+      <div class="flex flex-items-start flex-col" :class="{
+        'border-bottom': index < goodsData.commodityEquipment.length - 1,
+      }">
        <div class="flex flex-items-center flex-row flex-shrink-0">
          <uni-icons fontFamily="znicons" size="20" color="#171717">
            {{ zniconsMap[moduleItem.icon] }}
@@ -20,11 +13,8 @@
          </span>
        </div>
        <div class="border-box flex flex-items-center flex-row mt-4 pb-12">
-          <span
-            class="font-size-12 color-525866 line-height-20 mr-4"
-            v-for="(span, index) in moduleItem.desc"
-            :key="index"
-          >
+          <span class="font-size-12 color-525866 line-height-20 mr-4" v-for="(span, index) in moduleItem.desc"
+            :key="index">
            {{ span }}
          </span>
        </div>
@@ -34,7 +24,7 @@
 </template>

 <script setup>
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import { zniconsMap } from "@/assets/fonts/znicons";
 import { defineProps } from "vue";

 // Props定义
@@ -49,6 +39,6 @@ const props = defineProps({
 <style scoped lang="scss">
@font-face {
  font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
+  src: url("@/assets/fonts/znicons.ttf");
 }
 </style>
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,20 +1,12 @@
 <template>
  <div class="goods-container bg-gray">
-    <TopNavBar
-      :title="navOpacity < 0.5 ? '' : '商品详情'"
-      :background="`rgba(217, 238, 255, ${navOpacity})`"
+    <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-    />
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />

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

      <div class="goods-content">
        <!-- 商品信息组件 -->
@@ -24,34 +16,21 @@
        <LocationCard :orderData="goodsData" />

        <!-- 日期选择区域 -->
-        <DateSelector
-          v-if="goodsData.orderType == 0"
-          @showCalendar="showCalendar"
-          :checkInDate="selectedDate.startDate"
-          :checkOutDate="selectedDate.endDate"
-          :checkInDay="''"
-          :checkOutDay="''"
-          :nights="selectedDate.totalDays"
-        />
+        <DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />

        <!-- 商品套餐组件 -->
-        <GoodPackage
-          v-if="
-            goodsData.orderType != 0 &&
-            goodsData.commodityPackageConfig &&
-            goodsData.commodityPackageConfig.length > 0
-          "
-          :goodsData="goodsData"
-        />
+        <GoodPackage v-if="
+          goodsData.orderType != 0 &&
+          goodsData.commodityPackageConfig &&
+          goodsData.commodityPackageConfig.length > 0
+        " :goodsData="goodsData" />

        <!-- 商品设施组件 -->
-        <GoodFacility
-          v-if="
-            goodsData.commodityEquipment &&
-            goodsData.commodityEquipment.length > 0
-          "
-          :goodsData="goodsData"
-        />
+        <GoodFacility v-if="
+          goodsData.commodityEquipment &&
+          goodsData.commodityEquipment.length > 0
+        " :goodsData="goodsData" />

        <!-- 商品详情组件 -->
        <GoodDetail :goodsData="goodsData" />
@@ -60,39 +39,24 @@

    <!-- 立即抢购 -->
    <div class="footer border-top">
-      <div
-        class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >
+      <div class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
        {{ calculatedTotalPrice }}
      </div>

-      <div
-        class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
-        @click="navigateToPay(goodsData)"
-      >
-        <img
-          class="icon"
-          src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
-        />
+      <div class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
+        <img class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
        <span class="font-size-16 font-500 color-white">立即预定</span>
      </div>
    </div>

    <!-- 日历组件 -->
-    <Calender
-      :visible="calendarVisible"
-      mode="range"
-      :range-require-price="true"
-      :price-data="priceData"
-      @close="handleCalendarClose"
-      @range-select="handleDateSelect"
-    />
+    <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
+      @close="handleCalendarClose" @range-select="handleDateSelect" />
  </div>
 </template>

 <script setup>
 import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
 import { goodsDetail, commodityDailyPriceList } from "@/request/api/GoodsApi";
 import { DateUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
@@ -176,13 +140,14 @@ const getGoodsDailyPrice = async (params) => {
  priceData.value = res.data;
 };

-const selectedDateStore = useSelectedDateStore();
-onLoad(({ commodityId = "1950766939442774018" }) => {
-  // 从store中获取选中的日期
-  selectedDate.value = selectedDateStore.selectedDate;
+// TODO
+// const selectedDateStore = useSelectedDateStore();
+// onLoad(({ commodityId = "1950766939442774018" }) => {
+//   // 从store中获取选中的日期
+//   selectedDate.value = selectedDateStore.selectedDate;

-  goodsInfo({ commodityId });
-});
+//   goodsInfo({ commodityId });
+// });

 // 显示日历弹窗
 const showCalendar = () => (calendarVisible.value = true);