From 70061ce38217a68f6ea5ea419cf37b93b4b5dfca Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 20:30:08 +0800
Subject: [PATCH] refactor(home components): replace SCSS with Tailwind and
 clean up

Delete standalone SCSS style files for three home components, convert all component styling to Tailwind utility classes, remove redundant style import blocks, fix import order for Vue composables, and update navigation to use vue-router.
---
 .../QuickBookingComponent/index.vue           |  13 +-
 .../QuickBookingComponent/styles/index.scss   |   9 --
 .../QuickBookingContentList/index.vue         |  58 ++++----
 .../QuickBookingContentList/styles/index.scss | 137 ------------------
 .../RecommendPostsComponent/index.vue         |   8 +-
 .../RecommendPostsComponent/styles/index.scss |   5 -
 6 files changed, 40 insertions(+), 190 deletions(-)
 delete mode 100644 src/pages/home/components/QuickBookingComponent/styles/index.scss
 delete mode 100644 src/pages/home/components/QuickBookingContentList/styles/index.scss
 delete mode 100644 src/pages/home/components/RecommendPostsComponent/styles/index.scss

diff --git a/src/pages/home/components/QuickBookingComponent/index.vue b/src/pages/home/components/QuickBookingComponent/index.vue
index e186c47..f7e9771 100644
--- a/src/pages/home/components/QuickBookingComponent/index.vue
+++ b/src/pages/home/components/QuickBookingComponent/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <QuickBookingCalender class="calendar" @update:date="onDateSelected" />
+  <div class="w-full flex-1 mb-3">
+    <QuickBookingCalender class="w-full" @update:date="onDateSelected" />
     <div v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
       <QuickBookingContentList :commodityDTO="item" />
     </div>
@@ -8,9 +8,10 @@
 </template>
 
 <script setup>
+import { ref, nextTick } from "vue";
+import { emitter } from '@/utils/events.ts'
 import QuickBookingCalender from "../QuickBookingCalender/index.vue";
 import QuickBookingContentList from "../QuickBookingContentList/index.vue";
-import { ref, nextTick } from "vue";
 import { onMounted } from "vue";
 import { quickBookingComponent } from "@/api/home";
 import { SCROLL_TO_BOTTOM } from "@/constants/constant";
@@ -27,7 +28,7 @@ const loadQuickBookingComponent = async () => {
     commodityGroupDTOList.value = res.data.commodityGroupDTOList;
     nextTick(() => {
       setTimeout(() => {
-        uni.$emit(SCROLL_TO_BOTTOM, true);
+        emitter.emit(SCROLL_TO_BOTTOM, true);
       }, 300);
     });
   }
@@ -57,7 +58,3 @@ onMounted(() => {
   loadQuickBookingComponent();
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/QuickBookingComponent/styles/index.scss b/src/pages/home/components/QuickBookingComponent/styles/index.scss
deleted file mode 100644
index 34a5eee..0000000
--- a/src/pages/home/components/QuickBookingComponent/styles/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-
-  .calendar {
-    width: 100%;
-  }
-}
diff --git a/src/pages/home/components/QuickBookingContentList/index.vue b/src/pages/home/components/QuickBookingContentList/index.vue
index b5fa7e1..516ab34 100644
--- a/src/pages/home/components/QuickBookingContentList/index.vue
+++ b/src/pages/home/components/QuickBookingContentList/index.vue
@@ -1,29 +1,35 @@
 <template>
-  <div class="container">
+  <div>
     <ModuleTitle :title="commodityDTO.title" />
-    <div class="container-scroll">
+    <div class="flex flex-row overflow-x-auto overflow-y-hidden my-1">
       <div v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
-        <div class="mk-card-item" @click="placeOrderHandle(item)">
-          <!-- <div class="card-badge">超值推荐</div> -->
-          <img class="card-img" :src="item.commodityIcon" mode="aspectFill" />
-          <div class="card-content">
-            <div class="card-title-column">
-              <span class="card-title">{{ item.commodityName }}</span>
-              <div class="card-tags" v-for="tag in item.commodityTradeRuleList" :key="tag">
-                <span class="card-tag">{{ tag }}</span>
+        <div class="relative flex flex-col items-start w-[188px] bg-white rounded-[10px] mr-2 pb-3"
+          @click="placeOrderHandle(item)">
+          <img class="w-[188px] h-[114px] rounded-[10px] object-cover shrink-0" :src="item.commodityIcon" />
+          <div class="pt-[10px] px-3 pb-0 flex flex-col justify-between items-start w-full flex-1 overflow-hidden">
+            <div class="flex items-start flex-col w-full">
+              <span
+                class="text-base font-bold text-[#222] w-full line-clamp-2 overflow-hidden text-ellipsis leading-[1.4] max-h-[2.8em]">
+                {{ item.commodityName }}
+              </span>
+              <div class="flex flex-row items-start py-1.5 w-full" v-for="tag in item.commodityTradeRuleList"
+                :key="tag">
+                <span class="text-[#ff6600] text-[10px] rounded px-1.5 ml-[2px] border border-[#ff6600]">
+                  {{ tag }}
+                </span>
               </div>
             </div>
             <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
-              <div v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</div>
+              <div v-if="index < 3" class="text-[13px] text-[#888] mt-[2px]">· {{ serviceItem.serviceTitle }}</div>
             </template>
-            <div class="card-bottom-row">
-              <div class="card-price-row">
-                <span class="card-price-fu">￥</span>
-                <span class="card-price">{{ item.commodityPrice }}</span>
-                <span class="card-unit">/{{ item.stockUnitLabel }}</span>
+            <div class="flex items-center justify-between mt-2 w-full">
+              <div>
+                <span class="text-[#ff6600] text-[11px] font-normal">￥</span>
+                <span class="text-[#ff6600] text-base font-bold">{{ item.commodityPrice }}</span>
+                <span class="text-[11px] text-[#888] font-normal ml-[2px]">/{{ item.stockUnitLabel }}</span>
               </div>
 
-              <span class="card-btn">下单</span>
+              <span class="bg-[#ff6600] text-white text-[15px] rounded-[20px] px-[18px] h-8 leading-[32px]">下单</span>
             </div>
           </div>
         </div>
@@ -34,6 +40,7 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
 import { checkToken } from "@/hooks/useGoLogin";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 
@@ -44,16 +51,17 @@ const props = defineProps({
   },
 });
 
-/// 去下单
+const router = useRouter()
+
+// 去下单
 const placeOrderHandle = (item) => {
   checkToken().then(() => {
-    uni.navigateTo({
-      url: `/pages/goods/index?commodityId=${item.commodityId}`,
-    });
+    router.push({
+      name: 'goods',
+      query: {
+        commodityId: item.commodityId,
+      }
+    })
   });
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/QuickBookingContentList/styles/index.scss b/src/pages/home/components/QuickBookingContentList/styles/index.scss
deleted file mode 100644
index a616717..0000000
--- a/src/pages/home/components/QuickBookingContentList/styles/index.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-.container {
-  .container-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    overflow-y: hidden;
-    margin: 4px 0;
-
-    .mk-card-item {
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      width: 188px;
-      //   height: 244px;
-      background-color: #fff;
-      border-radius: 10px;
-      margin-right: 8px;
-      padding-bottom: 12px;
-
-      .card-badge {
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        background: #ffe7b2;
-        color: #b97a00;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 4px;
-        z-index: 2;
-      }
-
-      .card-img {
-        width: 188px;
-        height: 114px;
-        border-radius: 10px;
-        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
-        flex-shrink: 0; /* 防止图片被压缩 */
-      }
-
-      .card-content {
-        box-sizing: border-box;
-        padding: 10px 12px 0 12px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: start;
-        width: 100%;
-        flex: 1; /* 让内容区域占据剩余空间 */
-        overflow: hidden; /* 防止内容溢出 */
-      }
-
-      .card-title-column {
-        display: flex;
-        align-items: start;
-        flex-direction: column;
-        width: 100%;
-      }
-
-      .card-title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #222;
-        width: 100%;
-        /* 限制标题最多显示两行 */
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 1.4;
-        max-height: 2.8em; /* 2行的高度 */
-      }
-
-      .card-tags {
-        display: flex;
-        flex-direction: row;
-        align-items: start;
-        padding: 6px 0;
-      }
-
-      .card-tag {
-        color: #ff6600;
-        font-size: 10px;
-        border-radius: 4px;
-        padding: 0 6px;
-        margin-left: 2px;
-        border: 1px solid #ff6600;
-      }
-
-      .card-desc {
-        font-size: 13px;
-        color: #888;
-        margin-top: 2px;
-      }
-
-      .card-bottom-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: 8px;
-        width: 100%;
-      }
-
-      .card-price-row {
-        .card-price-fu {
-          color: #ff6600;
-          font-size: 11px;
-          font-weight: normal;
-        }
-
-        .card-price {
-          color: #ff6600;
-          font-size: 16px;
-          font-weight: bold;
-        }
-        .card-unit {
-          font-size: 11px;
-          color: #888;
-          font-weight: normal;
-          margin-left: 2px;
-        }
-      }
-
-      .card-btn {
-        background: #ff6600;
-        color: #fff;
-        font-size: 15px;
-        border-radius: 20px;
-        padding: 0 18px;
-        height: 32px;
-        line-height: 32px;
-      }
-    }
-  }
-}
diff --git a/src/pages/home/components/RecommendPostsComponent/index.vue b/src/pages/home/components/RecommendPostsComponent/index.vue
index a2c4378..1e27e80 100644
--- a/src/pages/home/components/RecommendPostsComponent/index.vue
+++ b/src/pages/home/components/RecommendPostsComponent/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="w-full flex-1 mb-[12px]">
     <div v-for="item in recommendThemeList" :key="item.themeName">
       <RecommendPostsList v-if="item.recommendPostsList.length > 0" :recommendTheme="item" />
     </div>
@@ -7,9 +7,9 @@
 </template>
 
 <script setup>
+import { defineProps } from "vue";
 import RecommendPostsList from "../RecommendPostsList/index.vue";
 
-import { defineProps } from "vue";
 const props = defineProps({
   recommendThemeList: {
     type: Array,
@@ -17,7 +17,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/RecommendPostsComponent/styles/index.scss b/src/pages/home/components/RecommendPostsComponent/styles/index.scss
deleted file mode 100644
index 9da07fd..0000000
--- a/src/pages/home/components/RecommendPostsComponent/styles/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}