diff --git a/apps/miniapp/src/pages/index/index.vue b/apps/miniapp/src/pages/index/index.vue
index 395d096..1c885a3 100644
--- a/apps/miniapp/src/pages/index/index.vue
+++ b/apps/miniapp/src/pages/index/index.vue
@@ -1,29 +1,26 @@
 <template>
   <view class="page-index">
-    <!-- 搜索面板 - 使用毛玻璃效果 -->
+    <!-- 搜索面板 -->
     <view class="search-panel">
       <base-card class="search-card" variant="elevated" :shadow="false">
-        <!-- 位置 -->
+        <!-- 城市选择 -->
         <form-field
           type="select"
-          :display-value="selectedCity"
-          placeholder="选择城市"
+          :display-value="searchParams.city"
+          placeholder="选择目的地城市"
           right-icon="map"
           :show-select-arrow="false"
           @click="openCityPicker"
-        ></form-field>
+        />
 
-        <!-- 日期 -->
-        <form-field
-          type="custom"
-          @click="openDatePicker"
-        >
+        <!-- 入住离店日期 -->
+        <form-field type="custom" @click="openDatePicker">
           <view class="date-picker-content">
             <view class="date-section">
               <text class="date-label">{{ checkInDesc }}入住</text>
               <text class="date-value">{{ checkInLabel }}</text>
             </view>
-            <view class="nights-tag">共{{ nightCount }}晚</view>
+            <view class="nights-badge">{{ nightCount }}晚</view>
             <view class="date-section">
               <text class="date-label">{{ checkOutDesc }}离店</text>
               <text class="date-value">{{ checkOutLabel }}</text>
@@ -31,112 +28,128 @@
           </view>
         </form-field>
 
-        <!-- 关键词 -->
+        <!-- 搜索关键词 -->
         <form-field
           type="select"
-          :display-value="searchKeyword"
-          placeholder="输入关键词搜索酒店"
+          :display-value="searchParams.keyword"
+          placeholder="搜索酒店、民宿、位置"
           right-icon="search"
           @click="goLocationSearch"
-        ></form-field>
+        />
 
-        <!-- 价格筛选 -->
+        <!-- 价格区间 -->
         <form-field
           type="select"
-          :display-value="priceLabel !== '价格' ? priceLabel : ''"
-          placeholder="价格"
+          :display-value="priceRangeLabel"
+          placeholder="价格区间"
           @click="openPricePicker"
-        ></form-field>
+        />
 
-        <!-- 查询按钮 -->
-        <view class="button-wrapper">
+        <!-- 搜索按钮 -->
+        <view class="search-button-wrapper">
           <base-button
             type="primary"
             size="large"
-            text="查询"
+            text="搜索酒店"
             block
             @click="handleSearch"
-          ></base-button>
+          />
         </view>
       </base-card>
     </view>
 
-    <!-- 酒店推荐 -->
+    <!-- 推荐列表 -->
     <view class="recommend-section">
       <view class="section-header">
-        <text class="section-title">酒店推荐</text>
-        <view class="section-more" @tap="handleSearch">
-          <text class="more-text">更多</text>
-          <u-icon name="arrow-right" :size="16" color="#999"></u-icon>
+        <text class="section-title">为你推荐</text>
+        <view class="section-action" @tap="handleSearch">
+          <text class="action-text">查看全部</text>
+          <u-icon name="arrow-right" :size="16" color="#999" />
         </view>
       </view>
 
       <scroll-view
         scroll-y
         class="merchant-list"
-        @scrolltolower="loadMore"
+        @scrolltolower="handleLoadMore"
         refresher-enabled
-        :refresher-triggered="refreshing"
-        @refresherrefresh="onRefresh"
+        :refresher-triggered="isRefreshing"
+        @refresherrefresh="handleRefresh"
       >
-        <!-- 加载状态 -->
-        <loading-state v-if="loading && merchantList.length === 0" type="skeleton">
+        <!-- 骨架屏加载 -->
+        <loading-state v-if="isLoading && merchants.length === 0" type="skeleton">
           <template #skeleton>
-            <view class="skeleton-merchant" v-for="i in 3" :key="i">
-              <view class="skeleton-item skeleton-image"></view>
-              <view class="skeleton-content">
-                <view class="skeleton-item skeleton-title"></view>
-                <view class="skeleton-item skeleton-text"></view>
-                <view class="skeleton-item skeleton-text short"></view>
+            <view v-for="i in 3" :key="i" class="skeleton-card">
+              <view class="skeleton-image" />
+              <view class="skeleton-body">
+                <view class="skeleton-title" />
+                <view class="skeleton-text" />
+                <view class="skeleton-text short" />
               </view>
             </view>
           </template>
         </loading-state>
 
-        <!-- 商家列表 -->
-        <view v-else class="list-content">
+        <!-- 商家卡片列表 -->
+        <view v-else class="merchant-list-content">
           <merchant-card
-            v-for="merchant in merchantList"
+            v-for="merchant in displayMerchants"
             :key="merchant.id"
-            :merchant="formatMerchant(merchant)"
-            @click="goMerchant(merchant.id)"
-          ></merchant-card>
+            :merchant="merchant"
+            @click="handleMerchantClick(merchant.id)"
+          />
         </view>
 
-        <!-- 加载更多 -->
-        <loading-state v-if="loading && merchantList.length > 0" size="small"></loading-state>
+        <!-- 加载更多指示器 -->
+        <loading-state v-if="isLoading && merchants.length > 0" size="small" />
 
-        <!-- 没有更多 -->
-        <view v-if="!hasMore && merchantList.length > 0" class="no-more">
-          <text>没有更多了</text>
+        <!-- 加载完成提示 -->
+        <view v-if="!hasMoreData && merchants.length > 0" class="load-complete">
+          <text class="complete-text">已加载全部内容</text>
         </view>
 
         <!-- 空状态 -->
         <empty-state
-          v-if="merchantList.length === 0 && !loading"
+          v-if="merchants.length === 0 && !isLoading"
           type="search"
-          @action="onRefresh"
-        ></empty-state>
+          @action="handleRefresh"
+        />
       </scroll-view>
     </view>
 
-    <!-- 城市选择弹窗 -->
-    <CityPicker ref="citySelectorRef" :city="selectedCity" @change="onCityChange" />
-
-    <!-- 日期选择弹窗 -->
-    <DatePicker ref="datePickerRef" :check-in="checkInDate" :check-out="checkOutDate" @change="onDateChange" />
-
-    <!-- 房间人数弹窗 -->
-    <RoomGuestPicker ref="roomGuestRef" :room-count="roomCount" :adult-count="adultCount" :child-count="childCount" @change="onRoomGuestChange" />
-
-    <!-- 价格筛选弹窗 -->
-    <PricePicker ref="priceRef" :min="priceMin" :max="priceMax" @change="onPriceChange" />
+    <!-- 弹窗组件 -->
+    <CityPicker
+      ref="cityPickerRef"
+      :city="searchParams.city"
+      @change="handleCityChange"
+    />
+    <DatePicker
+      ref="datePickerRef"
+      :check-in="searchParams.checkIn"
+      :check-out="searchParams.checkOut"
+      @change="handleDateChange"
+    />
+    <RoomGuestPicker
+      ref="roomGuestPickerRef"
+      :room-count="searchParams.roomCount"
+      :adult-count="searchParams.adultCount"
+      :child-count="searchParams.childCount"
+      @change="handleRoomGuestChange"
+    />
+    <PricePicker
+      ref="pricePickerRef"
+      :min="searchParams.minPrice"
+      :max="searchParams.maxPrice"
+      @change="handlePriceChange"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onActivated } from 'vue';
+import { ref, computed, onMounted, onActivated, reactive } from 'vue';
 import { getMerchantList } from '@/api/user/merchant';
+import { getDefaultDates, formatDateShort, getDateDescription, calculateNights } from '@/utils/date';
+import type { Merchant, MerchantCardData, SearchParams } from '@/types/merchant';
 import CityPicker from '@/components/CityPicker.vue';
 import DatePicker from '@/components/DatePicker.vue';
 import RoomGuestPicker from '@/components/RoomGuestPicker.vue';
@@ -148,208 +161,79 @@ import MerchantCard from '@/components/business/MerchantCard.vue';
 import LoadingState from '@/components/base/LoadingState.vue';
 import EmptyState from '@/components/base/EmptyState.vue';
 
-// 默认日期：今天和明天
-const today = new Date();
-const tomorrow = new Date(today);
-tomorrow.setDate(tomorrow.getDate() + 1);
-const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+// 常量定义
+const DEFAULT_CITY = '上海';
+const PAGE_SIZE = 10;
+const DEFAULT_COVER = '/static/default-avatar.png';
 
-// Tab切换
-const tabList = [
-  { name: '国内酒店' },
-  { name: '时租房' },
-  { name: '公寓' }
-];
-const activeTab = ref(0);
+// 获取默认日期
+const { today, tomorrow } = getDefaultDates();
 
-// 快捷入口
-const quickEntries = [
-  { icon: 'checkmark-circle', text: '签到' },
-  { icon: 'coupon', text: '优惠券' },
-  { icon: 'list', text: '住过看过' },
-  { icon: 'shopping-cart', text: '华住商城' },
-];
+// 搜索参数
+const searchParams = reactive<SearchParams>({
+  city: DEFAULT_CITY,
+  keyword: '',
+  checkIn: today,
+  checkOut: tomorrow,
+  roomCount: 1,
+  adultCount: 1,
+  childCount: 0,
+  minPrice: undefined,
+  maxPrice: undefined,
+});
 
-// 城市
-const selectedCity = ref('上海');
-const citySelectorRef = ref();
+// 商家列表状态
+const merchants = ref<Merchant[]>([]);
+const currentPage = ref(1);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const hasMoreData = ref(true);
 
-// 搜索关键字
-const searchKeyword = ref('');
-
-// 日期
-const checkInDate = ref(fmt(today));
-const checkOutDate = ref(fmt(tomorrow));
+// 弹窗引用
+const cityPickerRef = ref();
 const datePickerRef = ref();
+const roomGuestPickerRef = ref();
+const pricePickerRef = ref();
 
-const nightCount = computed(() => {
-  const diff = new Date(checkOutDate.value).getTime() - new Date(checkInDate.value).getTime();
-  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
+// 计算属性
+const nightCount = computed(() =>
+  calculateNights(searchParams.checkIn, searchParams.checkOut)
+);
+
+const checkInLabel = computed(() =>
+  formatDateShort(searchParams.checkIn)
+);
+
+const checkOutLabel = computed(() =>
+  formatDateShort(searchParams.checkOut)
+);
+
+const checkInDesc = computed(() =>
+  getDateDescription(searchParams.checkIn)
+);
+
+const checkOutDesc = computed(() =>
+  getDateDescription(searchParams.checkOut)
+);
+
+const priceRangeLabel = computed(() => {
+  const { minPrice, maxPrice } = searchParams;
+  if (minPrice === undefined && maxPrice === undefined) return '';
+  if (minPrice !== undefined && maxPrice !== undefined) return `¥${minPrice}-${maxPrice}`;
+  if (minPrice !== undefined) return `¥${minPrice}+`;
+  return `¥${maxPrice}以下`;
 });
 
-const checkInLabel = computed(() => {
-  const d = new Date(checkInDate.value);
-  return `${d.getMonth() + 1}月${d.getDate()}日`;
-});
+const displayMerchants = computed<MerchantCardData[]>(() =>
+  merchants.value.map(transformMerchantData)
+);
 
-const checkOutLabel = computed(() => {
-  const d = new Date(checkOutDate.value);
-  return `${d.getMonth() + 1}月${d.getDate()}日`;
-});
-
-const checkInDesc = computed(() => getDateDesc(checkInDate.value));
-const checkOutDesc = computed(() => getDateDesc(checkOutDate.value));
-
-// 房间人数
-const roomCount = ref(1);
-const adultCount = ref(1);
-const childCount = ref(0);
-const roomGuestRef = ref();
-
-// 价格
-const priceMin = ref<number | undefined>(undefined);
-const priceMax = ref<number | undefined>(undefined);
-const priceRef = ref();
-const priceLabel = computed(() => {
-  if (priceMin.value === undefined && priceMax.value === undefined) return '价格';
-  if (priceMin.value !== undefined && priceMax.value !== undefined) return `¥${priceMin.value}-${priceMax.value}`;
-  if (priceMin.value !== undefined) return `¥${priceMin.value}以上`;
-  return `¥${priceMax.value}以下`;
-});
-
-// 商家列表
-const merchantList = ref<any[]>([]);
-const page = ref(1);
-const loading = ref(false);
-const refreshing = ref(false);
-const hasMore = ref(true);
-
-function getDateDesc(dateStr: string): string {
-  const d = new Date(dateStr);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  d.setHours(0, 0, 0, 0);
-  const diffDays = Math.round((d.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-  if (diffDays === 0) return '今天';
-  if (diffDays === 1) return '明天';
-  if (diffDays === 2) return '后天';
-  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-  return weekDays[d.getDay()];
-}
-
-async function fetchMerchants(reset = false) {
-  if (loading.value) return;
-  if (!reset && !hasMore.value) return;
-
-  loading.value = true;
-  if (reset) {
-    page.value = 1;
-    hasMore.value = true;
-  }
-
-  try {
-    const res = await getMerchantList({
-      page: page.value,
-      pageSize: 10,
-    });
-    const list = res.data?.list || [];
-    merchantList.value = reset ? list : [...merchantList.value, ...list];
-    hasMore.value = list.length >= 10;
-    page.value++;
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
-    refreshing.value = false;
-  }
-}
-
-function onCityChange(city: string) {
-  selectedCity.value = city;
-}
-
-function onDateChange(checkIn: string, checkOut: string) {
-  checkInDate.value = checkIn;
-  checkOutDate.value = checkOut;
-}
-
-function openCityPicker() {
-  citySelectorRef.value?.open();
-}
-
-function openDatePicker() {
-  datePickerRef.value?.open();
-}
-
-function openRoomGuestPicker() {
-  roomGuestRef.value?.open();
-}
-
-function openPricePicker() {
-  priceRef.value?.open();
-}
-
-function onRoomGuestChange(rooms: number, adults: number, children: number) {
-  roomCount.value = rooms;
-  adultCount.value = adults;
-  childCount.value = children;
-}
-
-function onPriceChange(min: number | undefined, max: number | undefined) {
-  priceMin.value = min;
-  priceMax.value = max;
-}
-
-function goLocationSearch() {
-  uni.navigateTo({ url: '/pages/location-search/index' });
-}
-
-function handleSearch() {
-  const params = [
-    `city=${encodeURIComponent(selectedCity.value)}`,
-    searchKeyword.value ? `keyword=${encodeURIComponent(searchKeyword.value)}` : '',
-    `checkIn=${checkInDate.value}`,
-    `checkOut=${checkOutDate.value}`,
-    `roomCount=${roomCount.value}`,
-    `adultCount=${adultCount.value}`,
-    `childCount=${childCount.value}`,
-    priceMin.value != null ? `minPrice=${priceMin.value}` : '',
-    priceMax.value != null ? `maxPrice=${priceMax.value}` : '',
-  ].filter(Boolean).join('&');
-  uni.navigateTo({ url: `/pages/search/index?${params}` });
-}
-
-function setKeyword(keyword: string) {
-  searchKeyword.value = keyword;
-}
-
-function onRefresh() {
-  refreshing.value = true;
-  fetchMerchants(true);
-}
-
-function loadMore() {
-  fetchMerchants();
-}
-
-function goMerchant(id: number) {
-  const params = [
-    `id=${id}`,
-    `checkIn=${checkInDate.value}`,
-    `checkOut=${checkOutDate.value}`,
-    `roomCount=${roomCount.value}`,
-    `adultCount=${adultCount.value}`,
-    `childCount=${childCount.value}`,
-  ].join('&');
-  uni.navigateTo({ url: `/pages/merchant-detail/index?${params}` });
-}
-
-// 格式化商家数据以适配 MerchantCard 组件
-function formatMerchant(merchant: any) {
+// 数据转换
+function transformMerchantData(merchant: Merchant): MerchantCardData {
   return {
     id: merchant.id,
     name: merchant.shopName,
-    coverImage: merchant.logo || '/static/default-avatar.png',
+    coverImage: merchant.logo || DEFAULT_COVER,
     cityName: merchant.city,
     rating: merchant.rating,
     reviewCount: merchant.reviewCount,
@@ -360,27 +244,145 @@ function formatMerchant(merchant: any) {
     distance: merchant.distance,
     isRecommend: merchant.isRecommend,
     isHot: merchant.isHot,
-    isNew: merchant.isNew
+    isNew: merchant.isNew,
   };
 }
 
-onMounted(() => {
-  // 检查是否有位置搜索回传的关键字
-  const kw = (uni as any).__locationSearchKeyword;
-  if (kw) {
-    searchKeyword.value = kw;
-    (uni as any).__locationSearchKeyword = '';
+// 获取商家列表
+async function fetchMerchantList(shouldReset = false) {
+  if (isLoading.value) return;
+  if (!shouldReset && !hasMoreData.value) return;
+
+  isLoading.value = true;
+
+  if (shouldReset) {
+    currentPage.value = 1;
+    hasMoreData.value = true;
   }
-  fetchMerchants(true);
+
+  try {
+    const response = await getMerchantList({
+      page: currentPage.value,
+      pageSize: PAGE_SIZE,
+    });
+
+    const list = response.data?.list || [];
+    merchants.value = shouldReset ? list : [...merchants.value, ...list];
+    hasMoreData.value = list.length >= PAGE_SIZE;
+    currentPage.value++;
+  } catch (error) {
+    console.error('获取商家列表失败:', error);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+  } finally {
+    isLoading.value = false;
+    isRefreshing.value = false;
+  }
+}
+
+// 弹窗操作
+function openCityPicker() {
+  cityPickerRef.value?.open();
+}
+
+function openDatePicker() {
+  datePickerRef.value?.open();
+}
+
+function openPricePicker() {
+  pricePickerRef.value?.open();
+}
+
+// 弹窗回调
+function handleCityChange(city: string) {
+  searchParams.city = city;
+}
+
+function handleDateChange(checkIn: string, checkOut: string) {
+  searchParams.checkIn = checkIn;
+  searchParams.checkOut = checkOut;
+}
+
+function handleRoomGuestChange(rooms: number, adults: number, children: number) {
+  searchParams.roomCount = rooms;
+  searchParams.adultCount = adults;
+  searchParams.childCount = children;
+}
+
+function handlePriceChange(min: number | undefined, max: number | undefined) {
+  searchParams.minPrice = min;
+  searchParams.maxPrice = max;
+}
+
+// 导航操作
+function goLocationSearch() {
+  uni.navigateTo({ url: '/pages/location-search/index' });
+}
+
+function handleSearch() {
+  const queryParams = buildSearchQuery();
+  uni.navigateTo({ url: `/pages/search/index?${queryParams}` });
+}
+
+function handleMerchantClick(merchantId: number) {
+  const queryParams = buildMerchantQuery(merchantId);
+  uni.navigateTo({ url: `/pages/merchant-detail/index?${queryParams}` });
+}
+
+// 构建查询参数
+function buildSearchQuery(): string {
+  const params = [
+    `city=${encodeURIComponent(searchParams.city)}`,
+    searchParams.keyword ? `keyword=${encodeURIComponent(searchParams.keyword)}` : '',
+    `checkIn=${searchParams.checkIn}`,
+    `checkOut=${searchParams.checkOut}`,
+    `roomCount=${searchParams.roomCount}`,
+    `adultCount=${searchParams.adultCount}`,
+    `childCount=${searchParams.childCount}`,
+    searchParams.minPrice !== undefined ? `minPrice=${searchParams.minPrice}` : '',
+    searchParams.maxPrice !== undefined ? `maxPrice=${searchParams.maxPrice}` : '',
+  ];
+  return params.filter(Boolean).join('&');
+}
+
+function buildMerchantQuery(merchantId: number): string {
+  return [
+    `id=${merchantId}`,
+    `checkIn=${searchParams.checkIn}`,
+    `checkOut=${searchParams.checkOut}`,
+    `roomCount=${searchParams.roomCount}`,
+    `adultCount=${searchParams.adultCount}`,
+    `childCount=${searchParams.childCount}`,
+  ].join('&');
+}
+
+// 列表操作
+function handleRefresh() {
+  isRefreshing.value = true;
+  fetchMerchantList(true);
+}
+
+function handleLoadMore() {
+  fetchMerchantList(false);
+}
+
+// 处理位置搜索回传的关键词
+function checkLocationSearchKeyword() {
+  const globalUni = uni as any;
+  const keyword = globalUni.__locationSearchKeyword;
+  if (keyword) {
+    searchParams.keyword = keyword;
+    globalUni.__locationSearchKeyword = '';
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  checkLocationSearchKeyword();
+  fetchMerchantList(true);
 });
 
 onActivated(() => {
-  // 页面激活时也检查（tabBar 切换回来时）
-  const kw = (uni as any).__locationSearchKeyword;
-  if (kw) {
-    searchKeyword.value = kw;
-    (uni as any).__locationSearchKeyword = '';
-  }
+  checkLocationSearchKeyword();
 });
 </script>
 
@@ -398,52 +400,64 @@ onActivated(() => {
 /* ========== 搜索面板 ========== */
 .search-panel {
   padding: $spacing-xl;
+  background: linear-gradient(180deg, #f8f9fa 0%, $bg-page 100%);
 }
 
 .search-card {
   overflow: visible;
+  border-radius: $radius-lg;
 }
 
-/* 日期选择器内容 */
+/* 日期选择器 */
 .date-picker-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: $spacing-sm 0;
+  gap: $spacing-md;
 }
 
 .date-section {
   display: flex;
   flex-direction: column;
-  gap: 4rpx;
+  gap: 6rpx;
+  flex: 1;
+
+  &:last-child {
+    align-items: flex-end;
+  }
 }
 
 .date-label {
   font-size: $font-xs;
   color: $text-tertiary;
+  line-height: 1.4;
 }
 
 .date-value {
   font-size: $font-lg;
   font-weight: $font-semibold;
   color: $text-primary;
+  line-height: 1.3;
 }
 
-.nights-tag {
+.nights-badge {
+  flex-shrink: 0;
   font-size: $font-xs;
   color: $primary-color;
-  background: $primary-50;
-  padding: 6rpx $spacing-md;
-  border-radius: $radius-sm;
-  font-weight: $font-medium;
+  background: linear-gradient(135deg, $primary-50 0%, rgba($primary-color, 0.08) 100%);
+  padding: 8rpx $spacing-md;
+  border-radius: $radius-round;
+  font-weight: $font-semibold;
+  border: 1rpx solid rgba($primary-color, 0.15);
 }
 
-.button-wrapper {
-  margin-top: $spacing-md;
+.search-button-wrapper {
+  margin-top: $spacing-lg;
 }
 
-/* ========== 酒店推荐 ========== */
+/* ========== 推荐区域 ========== */
 .recommend-section {
   flex: 1;
   display: flex;
@@ -456,31 +470,34 @@ onActivated(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing-lg 0 $spacing-md;
+  padding: $spacing-xl 0 $spacing-md;
 }
 
 .section-title {
-  font-size: $font-lg;
-  font-weight: $font-semibold;
+  font-size: $font-xl;
+  font-weight: $font-bold;
   color: $text-primary;
+  letter-spacing: 0.5rpx;
 }
 
-.section-more {
+.section-action {
   display: flex;
   align-items: center;
-  gap: 4rpx;
-  font-size: $font-sm;
-  color: $text-secondary;
-  transition: $transition-color;
+  gap: 6rpx;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  transition: $transition-all;
 
   &:active {
-    color: $primary-color;
+    background: rgba($primary-color, 0.08);
+    transform: scale(0.98);
   }
 }
 
-.more-text {
+.action-text {
   font-size: $font-sm;
   color: $text-secondary;
+  font-weight: $font-medium;
 }
 
 /* ========== 商家列表 ========== */
@@ -489,52 +506,91 @@ onActivated(() => {
   height: 0;
 }
 
-.list-content {
-  padding-bottom: $spacing-xl;
+.merchant-list-content {
+  padding-bottom: $spacing-2xl;
 }
 
 /* 骨架屏 */
-.skeleton-merchant {
+.skeleton-card {
   display: flex;
   gap: $spacing-md;
-  padding: $spacing-xl;
+  padding: $spacing-lg;
   background: $bg-card;
-  border-radius: $radius-md;
+  border-radius: $radius-lg;
   margin-bottom: $spacing-md;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .skeleton-image {
   width: 200rpx;
   height: 200rpx;
   flex-shrink: 0;
+  border-radius: $radius-md;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
 }
 
-.skeleton-content {
+.skeleton-body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: $spacing-md;
+  justify-content: center;
+}
+
+.skeleton-title,
+.skeleton-text {
+  height: 32rpx;
+  border-radius: $radius-sm;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
 }
 
 .skeleton-title {
-  width: 60%;
+  width: 70%;
   height: 36rpx;
 }
 
 .skeleton-text {
   width: 100%;
-  height: 28rpx;
 
   &.short {
-    width: 80%;
+    width: 60%;
   }
 }
 
-/* 没有更多 */
-.no-more {
-  text-align: center;
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 加载完成提示 */
+.load-complete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: $spacing-2xl 0;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1rpx;
+    background: linear-gradient(to right, transparent, $border-light, transparent);
+  }
+}
+
+.complete-text {
+  padding: 0 $spacing-xl;
+  font-size: $font-xs;
   color: $text-placeholder;
-  font-size: $font-sm;
+  white-space: nowrap;
 }
 </style>
diff --git a/apps/miniapp/src/pages/merchant-detail/index.vue b/apps/miniapp/src/pages/merchant-detail/index.vue
index 7560373..743c693 100644
--- a/apps/miniapp/src/pages/merchant-detail/index.vue
+++ b/apps/miniapp/src/pages/merchant-detail/index.vue
@@ -1,272 +1,595 @@
 <template>
   <view class="page-merchant-detail">
-    <!-- 商家头部：轮播图 + 信息卡片 -->
-    <merchant-header
-      :name="merchant.shopName"
-      :images="merchant.images"
-      :logo="merchant.logo"
-      :rating="merchant.rating"
-      :review-count="merchant.reviewCount"
-      rating-comment="环境不错，环境整洁"
-      :address="fullAddress"
-      :description="merchant.description"
-      :tags="merchant.tags"
-      @address-tap="handleNavigation"
-    />
+    <!-- 顶部轮播图 -->
+    <view class="hero-section">
+      <swiper
+        class="hero-swiper"
+        :indicator-dots="true"
+        :autoplay="true"
+        :circular="true"
+        indicator-color="rgba(255, 255, 255, 0.5)"
+        indicator-active-color="#ffffff"
+      >
+        <swiper-item v-for="(image, index) in merchantImages" :key="index">
+          <image :src="image" class="hero-image" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
 
-    <!-- 筛选条件区域 -->
-    <view class="filter-section">
-      <!-- 日期选择 -->
-      <date-range-selector
-        :check-in="checkInDate"
-        :check-out="checkOutDate"
-        @click="openDatePicker"
-      />
-
-      <!-- 房间人数选择 -->
-      <guest-selector
-        :room-count="roomCount"
-        :adult-count="adultCount"
-        :child-count="childCount"
-        @click="openRoomGuestPicker"
-      />
-    </view>
-
-    <!-- 房源列表 -->
-    <view class="room-section">
-      <section-header
-        title="房源列表"
-        :subtitle="roomList.length > 0 ? `${roomList.length}间` : ''"
-        icon="home"
-      />
-
-      <loading-state v-if="loading" type="skeleton">
-        <template #skeleton>
-          <view class="skeleton-room" v-for="i in 3" :key="i">
-            <view class="skeleton-item skeleton-image"></view>
-            <view class="skeleton-content">
-              <view class="skeleton-item skeleton-title"></view>
-              <view class="skeleton-item skeleton-text"></view>
-            </view>
-          </view>
-        </template>
-      </loading-state>
-
-      <empty-state
-        v-else-if="roomList.length === 0"
-        type="room"
-      />
-
-      <view v-else class="room-list">
-        <RoomCard
-          v-for="room in roomList"
-          :key="room.id"
-          :room="room"
-          @tap="goRoomDetail(room.id)"
-          @book="goOrderCreate(room)"
-        />
+      <!-- 返回按钮 -->
+      <view class="back-button" @tap="handleBack">
+        <u-icon name="arrow-left" :size="20" color="#ffffff" />
       </view>
     </view>
 
-    <!-- 评价列表 -->
-    <view class="review-section" v-if="merchant.reviewCount > 0 || reviewList.length > 0">
-      <section-header
-        title="用户评价"
-        :subtitle="`${merchant.reviewCount || reviewList.length}条`"
-        icon="chat"
-      />
+    <!-- 商家信息卡片 -->
+    <view class="merchant-info-card">
+      <view class="merchant-header">
+        <image :src="merchantData.logo || DEFAULT_AVATAR" class="merchant-logo" mode="aspectFill" />
+        <view class="merchant-basic">
+          <text class="merchant-name">{{ merchantData.shopName }}</text>
+          <view class="merchant-rating">
+            <view class="rating-stars">
+              <u-icon
+                v-for="i in 5"
+                :key="i"
+                name="star-fill"
+                :size="16"
+                :color="i <= Math.floor(merchantData.rating || 0) ? '#FFB800' : '#E5E5E5'"
+              />
+            </view>
+            <text class="rating-score">{{ merchantData.rating?.toFixed(1) || '暂无' }}</text>
+            <text class="rating-count">({{ merchantData.reviewCount || 0 }}条评价)</text>
+          </view>
+        </view>
+      </view>
 
-      <review-card
-        v-for="review in reviewList"
-        :key="review.id"
-        :review="formatReview(review)"
-      />
+      <!-- 商家标签 -->
+      <view v-if="merchantData.tags && merchantData.tags.length > 0" class="merchant-tags">
+        <view v-for="tag in merchantData.tags" :key="tag" class="tag-item">
+          <text class="tag-text">{{ tag }}</text>
+        </view>
+      </view>
 
-      <empty-state v-if="reviewList.length === 0" type="review" size="small" />
+      <!-- 商家描述 -->
+      <view v-if="merchantData.description" class="merchant-description">
+        <text class="description-text">{{ merchantData.description }}</text>
+      </view>
+
+      <!-- 地址信息 -->
+      <view class="merchant-address" @tap="handleOpenMap">
+        <view class="address-icon">
+          <u-icon name="map-pin-fill" :size="18" color="#FF6B35" />
+        </view>
+        <text class="address-text">{{ fullAddress }}</text>
+        <view class="address-action">
+          <text class="action-label">导航</text>
+          <u-icon name="arrow-right" :size="14" color="#999" />
+        </view>
+      </view>
     </view>
 
-    <!-- 日期选择弹窗 -->
-    <DatePicker ref="datePickerRef" :check-in="checkInDate" :check-out="checkOutDate" @change="onDateChange" />
+    <!-- 预订筛选器 -->
+    <view class="booking-filter">
+      <view class="filter-title">
+        <u-icon name="calendar" :size="18" color="#FF6B35" />
+        <text class="title-text">选择入住信息</text>
+      </view>
 
-    <!-- 房间人数弹窗 -->
-    <RoomGuestPicker ref="roomGuestRef" :room-count="roomCount" :adult-count="adultCount" :child-count="childCount" @change="onRoomGuestChange" />
+      <view class="filter-items">
+        <!-- 日期选择 -->
+        <view class="filter-item" @tap="openDatePicker">
+          <view class="item-label">
+            <u-icon name="calendar" :size="16" color="#666" />
+            <text class="label-text">入住日期</text>
+          </view>
+          <view class="item-value">
+            <text class="value-text">{{ dateRangeText }}</text>
+            <u-icon name="arrow-right" :size="14" color="#999" />
+          </view>
+        </view>
+
+        <!-- 人数选择 -->
+        <view class="filter-item" @tap="openRoomGuestPicker">
+          <view class="item-label">
+            <u-icon name="account" :size="16" color="#666" />
+            <text class="label-text">入住人数</text>
+          </view>
+          <view class="item-value">
+            <text class="value-text">{{ guestText }}</text>
+            <u-icon name="arrow-right" :size="14" color="#999" />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 房源列表 -->
+    <view class="rooms-section">
+      <view class="section-title-bar">
+        <view class="title-left">
+          <view class="title-icon">
+            <u-icon name="home-fill" :size="20" color="#FF6B35" />
+          </view>
+          <text class="title-main">精选房源</text>
+        </view>
+        <view v-if="rooms.length > 0" class="title-right">
+          <text class="room-count">共{{ rooms.length }}间</text>
+        </view>
+      </view>
+
+      <!-- 骨架屏 -->
+      <view v-if="isLoadingRooms" class="skeleton-list">
+        <view v-for="i in 3" :key="i" class="skeleton-room">
+          <view class="skeleton-img" />
+          <view class="skeleton-info">
+            <view class="skeleton-line title" />
+            <view class="skeleton-line" />
+            <view class="skeleton-line short" />
+            <view class="skeleton-line price" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 房源卡片 -->
+      <view v-else-if="rooms.length > 0" class="rooms-grid">
+        <view
+          v-for="room in displayRooms"
+          :key="room.id"
+          class="room-card"
+          @tap="handleRoomClick(room.id)"
+        >
+          <!-- 左侧图片 -->
+          <view class="room-image-wrapper">
+            <image :src="room.coverImage" class="room-image" mode="aspectFill" />
+            <view v-if="!room.isAvailable" class="unavailable-badge">
+              <text class="badge-text">已满</text>
+            </view>
+          </view>
+
+          <!-- 右侧内容 -->
+          <view class="room-content">
+            <view class="room-header">
+              <text class="room-name">{{ room.name }}</text>
+              <view class="room-type-tag">
+                <text class="type-text">{{ room.type }}</text>
+              </view>
+            </view>
+
+            <view class="room-specs">
+              <view class="spec-item">
+                <u-icon name="grid" :size="12" color="#999" />
+                <text class="spec-text">{{ room.area }}㎡</text>
+              </view>
+              <view class="spec-divider" />
+              <view class="spec-item">
+                <u-icon name="bed" :size="12" color="#999" />
+                <text class="spec-text">{{ room.bedType }}</text>
+              </view>
+              <view class="spec-divider" />
+              <view class="spec-item">
+                <u-icon name="account" :size="12" color="#999" />
+                <text class="spec-text">{{ room.maxGuests }}人</text>
+              </view>
+            </view>
+
+            <view v-if="room.facilities && room.facilities.length > 0" class="room-tags">
+              <text
+                v-for="(facility, idx) in room.facilities.slice(0, 2)"
+                :key="idx"
+                class="facility-badge"
+              >
+                {{ facility }}
+              </text>
+            </view>
+
+            <view class="room-bottom">
+              <view class="room-price">
+                <text class="price-symbol">¥</text>
+                <text class="price-value">{{ room.currentPrice || room.price }}</text>
+                <text class="price-unit">/晚</text>
+              </view>
+              <view
+                class="book-btn"
+                :class="{ disabled: !room.isAvailable }"
+                @tap.stop="handleBookRoom(room)"
+              >
+                <text class="btn-text">{{ room.isAvailable ? '预订' : '满房' }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else class="empty-rooms">
+        <u-icon name="home" :size="60" color="#CCCCCC" />
+        <text class="empty-title">暂无可预订房源</text>
+        <text class="empty-desc">请尝试调整入住日期或人数</text>
+      </view>
+    </view>
+
+    <!-- 用户评价 -->
+    <view v-if="shouldShowReviews" class="reviews-section">
+      <view class="section-title-bar">
+        <view class="title-left">
+          <view class="title-icon">
+            <u-icon name="chat-fill" :size="20" color="#FF6B35" />
+          </view>
+          <text class="title-main">用户评价</text>
+        </view>
+        <view class="title-right">
+          <text class="review-count">{{ totalReviews }}条</text>
+          <view v-if="reviews.length > 0 && totalReviews > reviews.length" class="view-all" @tap="handleViewAllReviews">
+            <text class="view-all-text">查看全部</text>
+            <u-icon name="arrow-right" :size="14" color="#FF6B35" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 评价列表 -->
+      <view v-if="reviews.length > 0" class="reviews-list">
+        <view v-for="review in displayReviews" :key="review.id" class="review-item">
+          <view class="review-header">
+            <image :src="review.userAvatar" class="user-avatar" mode="aspectFill" />
+            <view class="user-info">
+              <text class="user-name">{{ review.userName }}</text>
+              <view class="review-rating">
+                <u-icon
+                  v-for="i in 5"
+                  :key="i"
+                  name="star-fill"
+                  :size="12"
+                  :color="i <= review.rating ? '#FFB800' : '#E5E5E5'"
+                />
+              </view>
+            </view>
+            <text class="review-date">{{ formatReviewDate(review.createdAt) }}</text>
+          </view>
+
+          <text v-if="review.content" class="review-content">{{ review.content }}</text>
+
+          <view v-if="review.images && review.images.length > 0" class="review-images">
+            <image
+              v-for="(img, idx) in review.images"
+              :key="idx"
+              :src="img"
+              class="review-image"
+              mode="aspectFill"
+              @tap="previewImage(review.images, idx)"
+            />
+          </view>
+
+          <view v-if="review.reply" class="merchant-reply">
+            <view class="reply-header">
+              <u-icon name="shop" :size="14" color="#FF6B35" />
+              <text class="reply-label">商家回复</text>
+            </view>
+            <text class="reply-content">{{ review.reply }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else class="empty-reviews">
+        <u-icon name="chat" :size="48" color="#CCCCCC" />
+        <text class="empty-text">暂无评价</text>
+      </view>
+    </view>
+
+    <!-- 弹窗 -->
+    <DatePicker
+      ref="datePickerRef"
+      :check-in="bookingParams.checkIn"
+      :check-out="bookingParams.checkOut"
+      @change="handleDateChange"
+    />
+    <RoomGuestPicker
+      ref="roomGuestPickerRef"
+      :room-count="bookingParams.roomCount"
+      :adult-count="bookingParams.adultCount"
+      :child-count="bookingParams.childCount"
+      @change="handleRoomGuestChange"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, reactive } from 'vue';
 import { getMerchantById } from '@/api/user/merchant';
 import { getRoomList } from '@/api/user/room';
 import { getReviewList } from '@/api/user/review';
-import RoomCard from '@/components/RoomCard.vue';
+import { getDefaultDates, formatDateShort, calculateNights } from '@/utils/date';
+import type { Merchant } from '@/types/merchant';
+import type { Room, Review, RoomCardData, ReviewCardData, BookingParams } from '@/types/room';
 import DatePicker from '@/components/DatePicker.vue';
 import RoomGuestPicker from '@/components/RoomGuestPicker.vue';
-import MerchantHeader from '@/components/business/MerchantHeader.vue';
-import DateRangeSelector from '@/components/business/DateRangeSelector.vue';
-import GuestSelector from '@/components/business/GuestSelector.vue';
-import SectionHeader from '@/components/business/SectionHeader.vue';
-import ReviewCard from '@/components/business/ReviewCard.vue';
-import EmptyState from '@/components/base/EmptyState.vue';
-import LoadingState from '@/components/base/LoadingState.vue';
 
-const merchant = ref<any>({});
-const roomList = ref<any[]>([]);
-const reviewList = ref<any[]>([]);
-const loading = ref(false);
+// 常量
+const DEFAULT_AVATAR = '/static/default-avatar.png';
+const MAX_REVIEW_DISPLAY = 5;
+const ROOM_PAGE_SIZE = 50;
+const REVIEW_PAGE_SIZE = 10;
+
+// 获取默认日期
+const { today, tomorrow } = getDefaultDates();
+
+// 商家数据
 const merchantId = ref(0);
+const merchantData = ref<Partial<Merchant>>({});
 
-// 筛选条件：从 URL 参数取值，没有则用 store 或默认值
-const checkInDate = ref('');
-const checkOutDate = ref('');
-const roomCount = ref(1);
-const adultCount = ref(1);
-const childCount = ref(0);
+// 预订参数
+const bookingParams = reactive<BookingParams>({
+  checkIn: today,
+  checkOut: tomorrow,
+  roomCount: 1,
+  adultCount: 1,
+  childCount: 0,
+});
 
+// 房源数据
+const rooms = ref<Room[]>([]);
+const isLoadingRooms = ref(false);
+
+// 评价数据
+const reviews = ref<Review[]>([]);
+const totalReviews = computed(() => merchantData.value.reviewCount || reviews.value.length);
+
+// 弹窗引用
 const datePickerRef = ref();
-const roomGuestRef = ref();
+const roomGuestPickerRef = ref();
+
+// 计算属性
+const merchantImages = computed(() => {
+  const images = merchantData.value.images || [];
+  return images.length > 0 ? images : [merchantData.value.logo || DEFAULT_AVATAR];
+});
 
 const fullAddress = computed(() => {
   const parts: string[] = [];
-  if (merchant.value.province) parts.push(merchant.value.province);
-  if (merchant.value.city) parts.push(merchant.value.city);
-  if (merchant.value.district) parts.push(merchant.value.district);
-  if (merchant.value.address) parts.push(merchant.value.address);
+  const m = merchantData.value;
+  if (m.province) parts.push(m.province);
+  if (m.city) parts.push(m.city);
+  if (m.district) parts.push(m.district);
+  if (m.address) parts.push(m.address);
   return parts.join(' ');
 });
 
-function initFromUrl() {
-  const pages = getCurrentPages();
-  const page = pages[pages.length - 1] as any;
-  const options = page.options || page.$page?.options || {};
-
-  merchantId.value = options.id;
-
-  const today = new Date();
-  const tomorrow = new Date(today);
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-
-  checkInDate.value = options.checkIn || fmt(today);
-  checkOutDate.value = options.checkOut || fmt(tomorrow);
-  roomCount.value = options.roomCount != null ? Number(options.roomCount) : 1;
-  adultCount.value = options.adultCount != null ? Number(options.adultCount) : 1;
-  childCount.value = options.childCount != null ? Number(options.childCount) : 0;
-}
-
-onMounted(() => {
-  initFromUrl();
-  if (merchantId.value) {
-    fetchMerchant();
-    fetchRooms();
-    fetchReviews();
-  }
+const dateRangeText = computed(() => {
+  const checkIn = formatDateShort(bookingParams.checkIn);
+  const checkOut = formatDateShort(bookingParams.checkOut);
+  const nights = calculateNights(bookingParams.checkIn, bookingParams.checkOut);
+  return `${checkIn} - ${checkOut} (${nights}晚)`;
 });
 
-async function fetchMerchant() {
-  try {
-    const res = await getMerchantById(merchantId.value);
-    merchant.value = res.data;
-  } catch (e) {
-    console.error(e);
-  }
+const guestText = computed(() => {
+  const parts: string[] = [];
+  if (bookingParams.roomCount > 0) parts.push(`${bookingParams.roomCount}间`);
+  if (bookingParams.adultCount > 0) parts.push(`${bookingParams.adultCount}成人`);
+  if (bookingParams.childCount > 0) parts.push(`${bookingParams.childCount}儿童`);
+  return parts.join(' · ');
+});
+
+const shouldShowReviews = computed(() => {
+  return totalReviews.value > 0 || reviews.value.length > 0;
+});
+
+const displayRooms = computed<RoomCardData[]>(() =>
+  rooms.value.map(transformRoomData)
+);
+
+const displayReviews = computed<ReviewCardData[]>(() =>
+  reviews.value.slice(0, MAX_REVIEW_DISPLAY).map(transformReviewData)
+);
+
+// 数据转换
+function transformRoomData(room: Room): RoomCardData {
+  return {
+    id: room.id,
+    name: room.name,
+    coverImage: room.coverImage,
+    type: room.type,
+    area: room.area,
+    bedType: room.bedType,
+    maxGuests: room.maxGuests,
+    price: room.price,
+    currentPrice: room.currentPrice,
+    facilities: room.facilities || [],
+    isAvailable: room.isAvailable !== false,
+    floor: room.floor,
+    roomNumber: room.roomNumber,
+  };
 }
 
-async function fetchReviews() {
-  try {
-    const res = await getReviewList({ merchantId: merchantId.value, pageSize: 10 });
-    reviewList.value = res.data?.list || [];
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-// 格式化评价数据以适配 ReviewCard 组件
-function formatReview(review: any) {
+function transformReviewData(review: Review): ReviewCardData {
   return {
     id: review.id,
-    userName: review.isAnonymous ? '匿名用户' : `用户${review.userId}`,
-    userAvatar: review.userAvatar || '/static/default-avatar.png',
+    userName: review.isAnonymous ? '匿名用户' : review.userName || `用户${review.userId}`,
+    userAvatar: review.userAvatar || DEFAULT_AVATAR,
     rating: review.rating,
     content: review.content || '',
     images: review.images || [],
     reply: review.merchantReply || '',
-    createdAt: review.createdAt
+    createdAt: review.createdAt,
   };
 }
 
-async function fetchRooms() {
-  loading.value = true;
+// 格式化评价日期
+function formatReviewDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffTime = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return '今天';
+  if (diffDays === 1) return '昨天';
+  if (diffDays < 7) return `${diffDays}天前`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`;
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)}个月前`;
+  return `${Math.floor(diffDays / 365)}年前`;
+}
+
+// 初始化URL参数
+function initializeFromUrl() {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1] as any;
+  const options = currentPage.options || currentPage.$page?.options || {};
+
+  merchantId.value = Number(options.id) || 0;
+
+  if (options.checkIn) bookingParams.checkIn = options.checkIn;
+  if (options.checkOut) bookingParams.checkOut = options.checkOut;
+  if (options.roomCount) bookingParams.roomCount = Number(options.roomCount);
+  if (options.adultCount) bookingParams.adultCount = Number(options.adultCount);
+  if (options.childCount) bookingParams.childCount = Number(options.childCount);
+}
+
+// 获取商家信息
+async function fetchMerchantData() {
+  if (!merchantId.value) return;
+
   try {
-    const res = await getRoomList({
-      merchantId: merchantId.value,
-      pageSize: 50,
-      checkIn: checkInDate.value,
-      checkOut: checkOutDate.value,
-      roomCount: roomCount.value,
-      adultCount: adultCount.value,
-    });
-    roomList.value = res.data?.list || [];
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
+    const response = await getMerchantById(merchantId.value);
+    merchantData.value = response.data || {};
+  } catch (error) {
+    console.error('获取商家信息失败:', error);
+    uni.showToast({ title: '加载商家信息失败', icon: 'none' });
   }
 }
 
-function onDateChange(checkIn: string, checkOut: string) {
-  checkInDate.value = checkIn;
-  checkOutDate.value = checkOut;
-  fetchRooms();
+// 获取房源列表
+async function fetchRoomList() {
+  if (!merchantId.value) return;
+
+  isLoadingRooms.value = true;
+
+  try {
+    const response = await getRoomList({
+      merchantId: merchantId.value,
+      pageSize: ROOM_PAGE_SIZE,
+      checkIn: bookingParams.checkIn,
+      checkOut: bookingParams.checkOut,
+      roomCount: bookingParams.roomCount,
+      adultCount: bookingParams.adultCount,
+    });
+    rooms.value = response.data?.list || [];
+  } catch (error) {
+    console.error('获取房源列表失败:', error);
+    uni.showToast({ title: '加载房源失败，请重试', icon: 'none' });
+  } finally {
+    isLoadingRooms.value = false;
+  }
 }
 
-function onRoomGuestChange(rooms: number, adults: number, children: number) {
-  roomCount.value = rooms;
-  adultCount.value = adults;
-  childCount.value = children;
-  fetchRooms();
+// 获取评价列表
+async function fetchReviewList() {
+  if (!merchantId.value) return;
+
+  try {
+    const response = await getReviewList({
+      merchantId: merchantId.value,
+      pageSize: REVIEW_PAGE_SIZE,
+    });
+    reviews.value = response.data?.list || [];
+  } catch (error) {
+    console.error('获取评价列表失败:', error);
+  }
 }
 
+// 弹窗操作
 function openDatePicker() {
   datePickerRef.value?.open();
 }
 
 function openRoomGuestPicker() {
-  roomGuestRef.value?.open();
+  roomGuestPickerRef.value?.open();
 }
 
-function handleNavigation(address: string) {
-  // 打开地图导航
+// 弹窗回调
+function handleDateChange(checkIn: string, checkOut: string) {
+  bookingParams.checkIn = checkIn;
+  bookingParams.checkOut = checkOut;
+  fetchRoomList();
+}
+
+function handleRoomGuestChange(rooms: number, adults: number, children: number) {
+  bookingParams.roomCount = rooms;
+  bookingParams.adultCount = adults;
+  bookingParams.childCount = children;
+  fetchRoomList();
+}
+
+// 导航操作
+function handleBack() {
+  uni.navigateBack();
+}
+
+function handleOpenMap() {
+  const { latitude, longitude, shopName } = merchantData.value;
+
+  if (!latitude || !longitude) {
+    uni.showToast({ title: '暂无位置信息', icon: 'none' });
+    return;
+  }
+
   uni.openLocation({
-    latitude: merchant.value.latitude || 0,
-    longitude: merchant.value.longitude || 0,
-    name: merchant.value.shopName,
-    address: address,
+    latitude,
+    longitude,
+    name: shopName || '商家位置',
+    address: fullAddress.value,
     success: () => {
       console.log('打开地图成功');
     },
     fail: () => {
       uni.showToast({ title: '打开地图失败', icon: 'none' });
-    }
+    },
   });
 }
 
-function goRoomDetail(roomId: number) {
+function handleRoomClick(roomId: number) {
   uni.navigateTo({ url: `/pages/room-detail/index?id=${roomId}` });
 }
 
-function goOrderCreate(room: any) {
-  if (room.isAvailable === false) {
-    uni.showToast({ title: '所选日期已满房', icon: 'none' });
+function handleBookRoom(room: RoomCardData) {
+  if (!room.isAvailable) {
+    uni.showToast({ title: '该房源暂不可预订', icon: 'none' });
     return;
   }
-  const params = [
+
+  const queryParams = [
     `roomId=${room.id}`,
     `merchantId=${merchantId.value}`,
-    `checkIn=${checkInDate.value}`,
-    `checkOut=${checkOutDate.value}`,
+    `checkIn=${bookingParams.checkIn}`,
+    `checkOut=${bookingParams.checkOut}`,
   ].join('&');
-  uni.navigateTo({ url: `/pages/order-create/index?${params}` });
+
+  uni.navigateTo({ url: `/pages/order-create/index?${queryParams}` });
 }
+
+function handleViewAllReviews() {
+  uni.showToast({ title: '功能开发中', icon: 'none' });
+}
+
+function previewImage(images: string[], current: number) {
+  uni.previewImage({
+    urls: images,
+    current: current,
+  });
+}
+
+// 生命周期
+onMounted(() => {
+  initializeFromUrl();
+
+  if (merchantId.value) {
+    fetchMerchantData();
+    fetchRoomList();
+    fetchReviewList();
+  } else {
+    uni.showToast({ title: '商家信息不存在', icon: 'none' });
+    setTimeout(() => {
+      uni.navigateBack();
+    }, 1500);
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -275,69 +598,700 @@ function goOrderCreate(room: any) {
 
 .page-merchant-detail {
   min-height: 100vh;
-  background: $bg-page;
-  padding-bottom: $spacing-3xl;
+  background: #F5F7FA;
 }
 
-/* ========== 筛选区域 ========== */
-.filter-section {
-  padding: 0 $spacing-xl;
-  margin-bottom: $spacing-xl;
-  @include flex-column;
-  gap: $spacing-md;
+/* ========== 顶部轮播图 ========== */
+.hero-section {
+  position: relative;
+  width: 100%;
+  height: 500rpx;
+}
+
+.hero-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.hero-image {
+  width: 100%;
+  height: 100%;
+}
+
+.back-button {
+  position: absolute;
+  top: 40rpx;
+  left: 24rpx;
+  z-index: 10;
+  width: 64rpx;
+  height: 64rpx;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(10rpx);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+
+  &:active {
+    background: rgba(0, 0, 0, 0.6);
+    transform: scale(0.95);
+  }
+}
+
+/* ========== 商家信息卡片 ========== */
+.merchant-info-card {
+  margin: -60rpx 24rpx 24rpx;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+}
+
+.merchant-header {
+  display: flex;
+  gap: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.merchant-logo {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 16rpx;
+  flex-shrink: 0;
+  border: 2rpx solid #F0F0F0;
+}
+
+.merchant-basic {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.merchant-name {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #1A1A1A;
+  line-height: 1.3;
+}
+
+.merchant-rating {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.rating-stars {
+  display: flex;
+  gap: 4rpx;
+}
+
+.rating-score {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #FFB800;
+}
+
+.rating-count {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.merchant-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-bottom: 20rpx;
+}
+
+.tag-item {
+  padding: 8rpx 16rpx;
+  background: linear-gradient(135deg, #FFF5E6 0%, #FFE8CC 100%);
+  border-radius: 8rpx;
+  border: 1rpx solid #FFD699;
+}
+
+.tag-text {
+  font-size: 22rpx;
+  color: #FF8C00;
+  font-weight: 500;
+}
+
+.merchant-description {
+  padding: 20rpx 0;
+  border-top: 1rpx solid #F0F0F0;
+  border-bottom: 1rpx solid #F0F0F0;
+  margin-bottom: 20rpx;
+}
+
+.description-text {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.merchant-address {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 20rpx;
+  background: #F8F9FA;
+  border-radius: 12rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #F0F2F5;
+    transform: scale(0.98);
+  }
+}
+
+.address-icon {
+  flex-shrink: 0;
+}
+
+.address-text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333;
+  line-height: 1.5;
+}
+
+.address-action {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  flex-shrink: 0;
+}
+
+.action-label {
+  font-size: 24rpx;
+  color: #FF6B35;
+  font-weight: 500;
+}
+
+/* ========== 预订筛选器 ========== */
+.booking-filter {
+  margin: 0 24rpx 24rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 28rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+}
+
+.filter-title {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 24rpx;
+}
+
+.title-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1A1A1A;
+}
+
+.filter-items {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.filter-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  background: #F8F9FA;
+  border-radius: 12rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #F0F2F5;
+    transform: scale(0.98);
+  }
+}
+
+.item-label {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.label-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.item-value {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.value-text {
+  font-size: 26rpx;
+  color: #666;
 }
 
 /* ========== 房源列表 ========== */
-.room-section {
-  padding: 0 $spacing-xl;
-  margin-bottom: $spacing-2xl;
+.rooms-section {
+  margin: 0 24rpx 32rpx;
 }
 
-.room-list {
-  @include flex-column;
-  gap: $spacing-xl;
+.section-title-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.title-icon {
+  width: 48rpx;
+  height: 48rpx;
+  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
+}
+
+.title-main {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A1A1A;
+}
+
+.title-right {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.room-count {
+  font-size: 24rpx;
+  color: #999;
+  padding: 6rpx 16rpx;
+  background: #F0F0F0;
+  border-radius: 20rpx;
+}
+
+.review-count {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.view-all {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: 8rpx 16rpx;
+  background: #FFF5F0;
+  border-radius: 20rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #FFE8DD;
+    transform: scale(0.95);
+  }
+}
+
+.view-all-text {
+  font-size: 24rpx;
+  color: #FF6B35;
+  font-weight: 500;
 }
 
 /* ========== 骨架屏 ========== */
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
 .skeleton-room {
-  @include flex-row(flex-start, flex-start);
-  gap: $spacing-md;
-  padding: $spacing-xl;
-  background: $bg-card;
-  border-radius: $radius-md;
-  margin-bottom: $spacing-md;
+  display: flex;
+  gap: 20rpx;
+  padding: 24rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
 }
 
-.skeleton-image {
+.skeleton-img {
   width: 200rpx;
-  height: 150rpx;
-  border-radius: $radius-base;
-  @include skeleton-loading;
+  height: 160rpx;
+  border-radius: 12rpx;
+  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
 }
 
-.skeleton-content {
+.skeleton-info {
   flex: 1;
-  @include flex-column;
-  gap: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
 }
 
-.skeleton-title {
-  width: 80%;
-  height: 40rpx;
-  border-radius: $radius-sm;
-  @include skeleton-loading;
+.skeleton-line {
+  height: 28rpx;
+  border-radius: 6rpx;
+  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+
+  &.title {
+    width: 70%;
+    height: 32rpx;
+  }
+
+  &.short {
+    width: 50%;
+  }
+
+  &.price {
+    width: 40%;
+    height: 36rpx;
+    margin-top: auto;
+  }
 }
 
-.skeleton-text {
-  width: 60%;
-  height: 32rpx;
-  border-radius: $radius-sm;
-  @include skeleton-loading;
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ========== 房源卡片 ========== */
+.rooms-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.room-card {
+  display: flex;
+  gap: 20rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.08);
+  }
+}
+
+.room-image-wrapper {
+  position: relative;
+  width: 200rpx;
+  height: 160rpx;
+  flex-shrink: 0;
+}
+
+.room-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 12rpx;
+}
+
+.unavailable-badge {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  padding: 4rpx 12rpx;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4rpx);
+  border-radius: 12rpx;
+}
+
+.badge-text {
+  font-size: 20rpx;
+  color: #FFFFFF;
+  font-weight: 500;
+}
+
+.room-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.room-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+}
+
+.room-name {
+  flex: 1;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1A1A1A;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.room-type-tag {
+  flex-shrink: 0;
+  padding: 4rpx 12rpx;
+  background: #F0F7FF;
+  border-radius: 8rpx;
+}
+
+.type-text {
+  font-size: 20rpx;
+  color: #4A90E2;
+  font-weight: 500;
+}
+
+.room-specs {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+}
+
+.spec-item {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+}
+
+.spec-text {
+  font-size: 22rpx;
+  color: #666;
+}
+
+.spec-divider {
+  width: 2rpx;
+  height: 20rpx;
+  background: #E0E0E0;
+}
+
+.room-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  margin-bottom: 12rpx;
+}
+
+.facility-badge {
+  padding: 4rpx 10rpx;
+  background: #FFF5E6;
+  border-radius: 6rpx;
+  font-size: 20rpx;
+  color: #FF8C00;
+  border: 1rpx solid #FFE8CC;
+}
+
+.room-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.room-price {
+  display: flex;
+  align-items: baseline;
+  gap: 2rpx;
+}
+
+.price-symbol {
+  font-size: 22rpx;
+  color: #FF6B35;
+  font-weight: 600;
+}
+
+.price-value {
+  font-size: 36rpx;
+  color: #FF6B35;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.price-unit {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.book-btn {
+  padding: 12rpx 28rpx;
+  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.25);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
+  }
+
+  &.disabled {
+    background: #E0E0E0;
+    box-shadow: none;
+  }
+}
+
+.btn-text {
+  font-size: 24rpx;
+  color: #FFFFFF;
+  font-weight: 600;
+}
+
+/* ========== 空状态 ========== */
+.empty-rooms,
+.empty-reviews {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+}
+
+.empty-title {
+  font-size: 28rpx;
+  color: #666;
+  margin-top: 24rpx;
+}
+
+.empty-desc {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 12rpx;
+}
+
+.empty-text {
+  font-size: 26rpx;
+  color: #999;
+  margin-top: 16rpx;
 }
 
 /* ========== 评价列表 ========== */
-.review-section {
-  padding: 0 $spacing-xl;
-  margin-top: $spacing-2xl;
+.reviews-section {
+  margin: 0 24rpx 32rpx;
+}
+
+.reviews-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.review-item {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+}
+
+.review-header {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-bottom: 16rpx;
+}
+
+.user-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.user-name {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.review-rating {
+  display: flex;
+  gap: 4rpx;
+}
+
+.review-date {
+  font-size: 22rpx;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.review-content {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 16rpx;
+  display: block;
+}
+
+.review-images {
+  display: flex;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+  flex-wrap: wrap;
+}
+
+.review-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 8rpx;
+}
+
+.merchant-reply {
+  padding: 20rpx;
+  background: #F8F9FA;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #FF6B35;
+}
+
+.reply-header {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 12rpx;
+}
+
+.reply-label {
+  font-size: 24rpx;
+  color: #FF6B35;
+  font-weight: 600;
+}
+
+.reply-content {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.6;
+  display: block;
 }
 </style>
diff --git a/apps/miniapp/src/pages/order-create/index.vue b/apps/miniapp/src/pages/order-create/index.vue
index 4082085..67feadf 100644
--- a/apps/miniapp/src/pages/order-create/index.vue
+++ b/apps/miniapp/src/pages/order-create/index.vue
@@ -1,88 +1,196 @@
 <template>
   <view class="page-order-create">
-    <!-- 房源信息 -->
+    <!-- 房源信息卡片 -->
     <view class="room-card" v-if="room">
-      <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
+      <view class="room-cover-wrapper">
+        <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
+        <view class="room-badge">精选</view>
+      </view>
       <view class="room-info">
         <text class="room-name">{{ room.name }}</text>
         <tag-list v-if="roomTags.length" :tags="roomTags" type="primary" size="small" />
-        <price-tag :price="room.price" size="medium" unit="/晚" />
+        <view class="room-price-row">
+          <price-tag :price="room.price" size="medium" unit="/晚" />
+          <text class="room-stock-tip" v-if="maxRoomCount <= 3">仅剩{{ maxRoomCount }}套</text>
+        </view>
       </view>
     </view>
 
     <!-- 入住信息 -->
     <view class="section">
-      <view class="section-title">入住信息</view>
-      <view class="date-row" @tap="openCalendarPicker">
-        <view class="date-item">
-          <text class="date-label">入住</text>
-          <text class="date-value">{{ checkInLabel }}</text>
+      <view class="section-header">
+        <view class="section-icon">📅</view>
+        <text class="section-title">入住信息</text>
+      </view>
+
+      <view class="date-selector" @tap="openCalendarPicker">
+        <view class="date-box">
+          <text class="date-label">入住日期</text>
+          <text class="date-value">{{ checkInLabel || '请选择' }}</text>
+          <text class="date-weekday">{{ checkInWeekday }}</text>
         </view>
-        <view class="date-item">
-          <text class="date-label">离店</text>
-          <text class="date-value">{{ checkOutLabel }}</text>
+        <view class="date-divider">
+          <view class="divider-line"></view>
+          <text class="divider-icon">→</text>
+          <view class="divider-line"></view>
+        </view>
+        <view class="date-box">
+          <text class="date-label">离店日期</text>
+          <text class="date-value">{{ checkOutLabel || '请选择' }}</text>
+          <text class="date-weekday">{{ checkOutWeekday }}</text>
         </view>
         <view class="night-badge">
-          <text class="night-text">共{{ nightCount }}晚</text>
+          <text class="night-text">{{ nightCount }}晚</text>
         </view>
       </view>
 
-      <!-- 房间套数选择 -->
-      <view class="count-row">
-        <view class="count-item">
-          <text class="count-label">房间套数</text>
+      <!-- 房间和人数选择 -->
+      <view class="count-section">
+        <view class="count-row">
+          <view class="count-left">
+            <text class="count-icon">🏠</text>
+            <view class="count-text-group">
+              <text class="count-label">房间套数</text>
+              <text class="count-sublabel">最多{{ maxRoomCount }}套可订</text>
+            </view>
+          </view>
           <view class="count-stepper">
-            <text class="stepper-btn" :class="{ disabled: roomCount <= 1 }" @tap="decreaseRoomCount">-</text>
+            <view class="stepper-btn" :class="{ disabled: roomCount <= 1 }" @tap="decreaseRoomCount">
+              <text class="stepper-icon">-</text>
+            </view>
             <text class="stepper-value">{{ roomCount }}</text>
-            <text class="stepper-btn" :class="{ disabled: roomCount >= maxRoomCount }" @tap="increaseRoomCount">+</text>
+            <view class="stepper-btn" :class="{ disabled: roomCount >= maxRoomCount }" @tap="increaseRoomCount">
+              <text class="stepper-icon">+</text>
+            </view>
           </view>
-          <text class="count-tip">最多{{ maxRoomCount }}套</text>
         </view>
-      </view>
 
-      <!-- 入住人数选择 -->
-      <view class="count-row">
-        <view class="count-item">
-          <text class="count-label">入住人数</text>
+        <view class="count-divider"></view>
+
+        <view class="count-row">
+          <view class="count-left">
+            <text class="count-icon">👥</text>
+            <view class="count-text-group">
+              <text class="count-label">入住人数</text>
+              <text class="count-sublabel">最多{{ maxGuestCount }}人</text>
+            </view>
+          </view>
           <view class="count-stepper">
-            <text class="stepper-btn" :class="{ disabled: guestCount <= 1 }" @tap="decreaseGuestCount">-</text>
+            <view class="stepper-btn" :class="{ disabled: guestCount <= 1 }" @tap="decreaseGuestCount">
+              <text class="stepper-icon">-</text>
+            </view>
             <text class="stepper-value">{{ guestCount }}</text>
-            <text class="stepper-btn" :class="{ disabled: guestCount >= maxGuestCount }" @tap="increaseGuestCount">+</text>
+            <view class="stepper-btn" :class="{ disabled: guestCount >= maxGuestCount }" @tap="increaseGuestCount">
+              <text class="stepper-icon">+</text>
+            </view>
           </view>
-          <text class="count-tip">最多{{ maxGuestCount }}人</text>
         </view>
       </view>
 
-      <view class="price-summary">
-        <text class="summary-label">房费合计</text>
-        <price-tag :price="totalPrice" size="large" type="primary" />
+      <!-- 价格明细 -->
+      <view class="price-detail">
+        <view class="price-row">
+          <text class="price-label">房费 (¥{{ room?.price }} × {{ nightCount }}晚 × {{ roomCount }}套)</text>
+          <text class="price-value">¥{{ totalPrice }}</text>
+        </view>
+        <view class="price-divider"></view>
+        <view class="price-row total">
+          <text class="price-label">合计</text>
+          <view class="price-total">
+            <text class="price-symbol">¥</text>
+            <text class="price-amount">{{ totalPrice }}</text>
+          </view>
+        </view>
       </view>
     </view>
 
     <!-- 联系人信息 -->
     <view class="section">
-      <view class="section-title">联系人信息</view>
-      <form-field label="姓名" required>
-        <input class="form-input" v-model="contactName" placeholder="请输入入住人姓名" />
-      </form-field>
-      <form-field label="手机号" required>
-        <input class="form-input" v-model="contactPhone" type="number" placeholder="请输入手机号" maxlength="11" />
-      </form-field>
-      <form-field label="身份证号">
-        <input class="form-input" v-model="contactIdCard" placeholder="请输入身份证号(选填)" maxlength="18" />
-      </form-field>
-      <form-field label="备注">
-        <textarea class="form-textarea" v-model="remark" placeholder="如有特殊需求请备注" />
-      </form-field>
+      <view class="section-header">
+        <view class="section-icon">👤</view>
+        <text class="section-title">联系人信息</text>
+      </view>
+
+      <view class="form-group">
+        <view class="form-item">
+          <view class="form-label-row">
+            <text class="form-label">入住人姓名</text>
+            <text class="form-required">*</text>
+          </view>
+          <input
+            class="form-input"
+            v-model="contactName"
+            placeholder="请输入真实姓名"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label-row">
+            <text class="form-label">手机号码</text>
+            <text class="form-required">*</text>
+          </view>
+          <input
+            class="form-input"
+            v-model="contactPhone"
+            type="number"
+            placeholder="用于接收订单通知"
+            maxlength="11"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label-row">
+            <text class="form-label">身份证号</text>
+            <text class="form-optional">选填</text>
+          </view>
+          <input
+            class="form-input"
+            v-model="contactIdCard"
+            placeholder="入住时需提供"
+            maxlength="18"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label-row">
+            <text class="form-label">特殊需求</text>
+            <text class="form-optional">选填</text>
+          </view>
+          <textarea
+            class="form-textarea"
+            v-model="remark"
+            placeholder="如需加床、禁烟房等，请在此备注"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+      </view>
     </view>
 
-    <!-- 提交按钮 -->
-    <view class="submit-bar">
-      <view class="total-row">
-        <text class="total-label">应付金额</text>
-        <price-tag :price="totalPrice" size="large" type="primary" />
+    <!-- 温馨提示 -->
+    <view class="tips-section">
+      <view class="tips-title">📌 温馨提示</view>
+      <view class="tips-content">
+        <text class="tips-item">• 请确保入住人信息真实有效</text>
+        <text class="tips-item">• 入住时需出示有效身份证件</text>
+        <text class="tips-item">• 如需取消订单，请提前联系商家</text>
+      </view>
+    </view>
+
+    <!-- 底部提交栏 -->
+    <view class="submit-bar">
+      <view class="submit-left">
+        <text class="submit-label">应付金额</text>
+        <view class="submit-price">
+          <text class="submit-symbol">¥</text>
+          <text class="submit-amount">{{ totalPrice }}</text>
+        </view>
+      </view>
+      <view class="submit-btn" @tap="handleSubmit">
+        <text class="submit-text">提交订单</text>
       </view>
-      <base-button type="primary" size="large" @click="handleSubmit">提交订单</base-button>
     </view>
 
     <!-- 日期选择弹窗 -->
@@ -101,10 +209,8 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { getRoomDetail, getRoomCalendar } from '@/api/user/room';
 import { createOrder } from '@/api/user/order';
 import RoomCalendarPicker from '@/components/RoomCalendarPicker.vue';
-import BaseButton from '@/components/base/BaseButton.vue';
 import PriceTag from '@/components/business/PriceTag.vue';
 import TagList from '@/components/business/TagList.vue';
-import FormField from '@/components/business/FormField.vue';
 
 const roomId = ref(0);
 const merchantId = ref(0);
@@ -130,6 +236,8 @@ const typeLabels: Record<string, string> = {
   hostel: '青旅',
 };
 
+const weekdayLabels = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+
 // 房源标签
 const roomTags = computed(() => {
   const tags = [];
@@ -160,6 +268,18 @@ const checkOutLabel = computed(() => {
   return `${d.getMonth() + 1}月${d.getDate()}日`;
 });
 
+const checkInWeekday = computed(() => {
+  if (!checkInDate.value) return '';
+  const d = new Date(checkInDate.value);
+  return weekdayLabels[d.getDay()];
+});
+
+const checkOutWeekday = computed(() => {
+  if (!checkOutDate.value) return '';
+  const d = new Date(checkOutDate.value);
+  return weekdayLabels[d.getDay()];
+});
+
 // 最大房间套数：取入住日期区间内每日最小剩余库存
 const maxRoomCount = computed(() => {
   if (!checkInDate.value || !checkOutDate.value || calendarStock.value.size === 0) return 1;
@@ -316,295 +436,514 @@ function onDateChange(checkIn: string, checkOut: string) {
 
 .page-order-create {
   min-height: 100vh;
-  background: $bg-page;
-  padding-bottom: 120rpx;
+  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
+  padding-bottom: 160rpx;
 }
 
+// 房源卡片
 .room-card {
   display: flex;
-  background: $bg-card;
-  margin: $spacing-xl;
-  border-radius: $radius-lg;
-  padding: $spacing-xl;
-  border: 1rpx solid $border-light;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  margin: 24rpx;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4rpx;
+    background: linear-gradient(90deg, $primary-color 0%, #ff6b9d 100%);
+  }
+}
+
+.room-cover-wrapper {
+  position: relative;
+  flex-shrink: 0;
 }
 
 .room-cover {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: $radius-base;
-  flex-shrink: 0;
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.room-badge {
+  position: absolute;
+  top: 8rpx;
+  left: 8rpx;
+  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
+  color: #ffffff;
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  font-weight: 600;
+  box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.3);
 }
 
 .room-info {
   flex: 1;
-  margin-left: $spacing-lg;
+  margin-left: 24rpx;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .room-name {
-  font-size: $font-md;
-  font-weight: $font-semibold;
+  font-size: 32rpx;
+  font-weight: 700;
   color: $text-primary;
+  line-height: 1.4;
+  margin-bottom: 12rpx;
 }
 
-.room-tags {
+.room-price-row {
   display: flex;
-  gap: $spacing-xs;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.tag {
-  font-size: $font-xs;
-  color: $primary-color;
-  background: $primary-bg;
-  padding: 4rpx $spacing-sm;
-  border-radius: $radius-xs;
-}
-
-.room-price {
-  display: flex;
-  align-items: baseline;
-}
-
-.price-symbol {
-  font-size: $font-sm;
-  color: $primary-color;
-}
-
-.price-value {
-  font-size: $font-xl;
-  font-weight: $font-bold;
-  color: $primary-color;
-}
-
-.price-unit {
-  font-size: $font-xs;
-  color: $text-secondary;
-  margin-left: 4rpx;
+.room-stock-tip {
+  font-size: 22rpx;
+  color: #ff4d4f;
+  background: #fff1f0;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  font-weight: 500;
 }
 
+// 通用区块
 .section {
-  background: $bg-card;
-  margin: $spacing-xl;
-  border-radius: $radius-lg;
-  padding: $spacing-xl;
-  border: 1rpx solid $border-light;
+  background: #ffffff;
+  margin: 24rpx;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32rpx;
+}
+
+.section-icon {
+  font-size: 40rpx;
+  margin-right: 12rpx;
 }
 
 .section-title {
-  font-size: $font-base;
-  font-weight: $font-semibold;
+  font-size: 32rpx;
+  font-weight: 700;
   color: $text-primary;
-  margin-bottom: $spacing-lg;
 }
 
-.date-row {
+// 日期选择器
+.date-selector {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 20rpx;
+  padding: 32rpx 24rpx;
   display: flex;
   align-items: center;
-  padding: $spacing-md 0;
-  border-bottom: 1rpx solid $border-light;
+  position: relative;
+  border: 2rpx solid #e8e8e8;
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
 }
 
-.date-item {
+.date-box {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: center;
+}
+
+.date-label {
+  font-size: 24rpx;
+  color: $text-secondary;
+  margin-bottom: 8rpx;
+}
+
+.date-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: $text-primary;
+  margin-bottom: 4rpx;
+}
+
+.date-weekday {
+  font-size: 22rpx;
+  color: $text-tertiary;
+}
+
+.date-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 16rpx;
+}
+
+.divider-line {
+  width: 1rpx;
+  height: 20rpx;
+  background: #e8e8e8;
+}
+
+.divider-icon {
+  font-size: 28rpx;
+  color: $primary-color;
+  margin: 4rpx 0;
+}
+
+.night-badge {
+  position: absolute;
+  top: -12rpx;
+  right: 24rpx;
+  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
+  padding: 8rpx 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
+}
+
+.night-text {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+// 数量选择
+.count-section {
+  margin-top: 24rpx;
+  background: #f8f9fa;
+  border-radius: 20rpx;
+  padding: 8rpx 0;
+}
+
+.count-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 24rpx;
+}
+
+.count-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.count-icon {
+  font-size: 40rpx;
+  margin-right: 16rpx;
+}
+
+.count-text-group {
+  display: flex;
+  flex-direction: column;
 }
 
-.date-label {
-  font-size: $font-sm;
-  color: $text-secondary;
-}
-
-.date-value {
-  font-size: $font-lg;
-  font-weight: $font-semibold;
-  color: $text-primary;
-  margin-top: 4rpx;
-}
-
-.night-badge {
-  background: $primary-bg;
-  padding: $spacing-xs $spacing-md;
-  border-radius: $radius-sm;
-}
-
-.night-text {
-  font-size: $font-sm;
-  color: $primary-color;
-}
-
-.count-row {
-  padding: $spacing-md 0;
-  border-bottom: 1rpx solid $border-light;
-}
-
-.count-item {
-  display: flex;
-  align-items: center;
-}
-
 .count-label {
-  font-size: $font-sm;
+  font-size: 28rpx;
+  font-weight: 600;
   color: $text-primary;
-  flex-shrink: 0;
-  width: 140rpx;
+  margin-bottom: 4rpx;
+}
+
+.count-sublabel {
+  font-size: 22rpx;
+  color: $text-tertiary;
+}
+
+.count-divider {
+  height: 1rpx;
+  background: #e8e8e8;
+  margin: 0 24rpx;
 }
 
 .count-stepper {
   display: flex;
   align-items: center;
-  margin-left: $spacing-md;
+  background: #ffffff;
+  border-radius: 16rpx;
+  padding: 4rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .stepper-btn {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: $radius-sm;
-  background: $bg-page;
-  border: 1rpx solid $border-base;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 12rpx;
+  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: $font-lg;
-  color: $text-primary;
   transition: all 0.2s ease;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  &.disabled {
+    background: #f0f0f0;
+    opacity: 0.5;
+  }
 }
 
-.stepper-btn:active {
-  background: $bg-hover;
-}
-
-.stepper-btn.disabled {
-  color: $text-disabled;
-  background: $bg-disabled;
-  border-color: $border-light;
+.stepper-icon {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ffffff;
 }
 
 .stepper-value {
-  min-width: 60rpx;
+  min-width: 80rpx;
   text-align: center;
-  font-size: $font-lg;
-  font-weight: $font-semibold;
+  font-size: 32rpx;
+  font-weight: 700;
   color: $text-primary;
 }
 
-.count-tip {
-  font-size: $font-xs;
-  color: $text-secondary;
-  margin-left: $spacing-md;
+// 价格明细
+.price-detail {
+  margin-top: 32rpx;
+  background: linear-gradient(135deg, #fff7e6 0%, #fff1f0 100%);
+  border-radius: 20rpx;
+  padding: 24rpx;
 }
 
-.price-summary {
+.price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: $spacing-md;
+  margin-bottom: 16rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.total {
+    margin-top: 16rpx;
+    padding-top: 16rpx;
+  }
 }
 
-.summary-label {
-  font-size: $font-sm;
+.price-label {
+  font-size: 26rpx;
   color: $text-secondary;
 }
 
-.summary-value {
-  font-size: $font-xl;
-  font-weight: $font-bold;
+.price-value {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.price-divider {
+  height: 1rpx;
+  background: rgba(0, 0, 0, 0.06);
+  margin: 16rpx 0;
+}
+
+.price-total {
+  display: flex;
+  align-items: baseline;
+}
+
+.price-symbol {
+  font-size: 28rpx;
+  font-weight: 700;
   color: $primary-color;
+  margin-right: 4rpx;
+}
+
+.price-amount {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: $primary-color;
+}
+
+// 表单
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
 }
 
 .form-item {
   display: flex;
   flex-direction: column;
-  margin-bottom: $spacing-lg;
+}
+
+.form-label-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
 }
 
 .form-label {
-  font-size: $font-sm;
+  font-size: 28rpx;
+  font-weight: 600;
   color: $text-primary;
-  margin-bottom: $spacing-xs;
+}
+
+.form-required {
+  font-size: 28rpx;
+  color: #ff4d4f;
+  margin-left: 4rpx;
+}
+
+.form-optional {
+  font-size: 22rpx;
+  color: $text-tertiary;
+  margin-left: 8rpx;
+  background: #f0f0f0;
+  padding: 2rpx 8rpx;
+  border-radius: 4rpx;
 }
 
 .form-input {
-  height: 80rpx;
-  background: $bg-card;
-  border: 1rpx solid $border-base;
-  border-radius: $radius-sm;
-  padding: 0 $spacing-md;
-  font-size: $font-base;
+  height: 88rpx;
+  background: #f8f9fa;
+  border: 2rpx solid #e8e8e8;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
   color: $text-primary;
-  transition: all 0.2s ease;
-}
+  transition: all 0.3s ease;
 
-.form-input:focus {
-  border-color: $primary-color;
+  &:focus {
+    background: #ffffff;
+    border-color: $primary-color;
+    box-shadow: 0 0 0 4rpx rgba(255, 107, 157, 0.1);
+  }
 }
 
 .form-textarea {
-  height: 120rpx;
-  background: $bg-card;
-  border: 1rpx solid $border-base;
-  border-radius: $radius-sm;
-  padding: $spacing-md;
-  font-size: $font-base;
+  min-height: 160rpx;
+  background: #f8f9fa;
+  border: 2rpx solid #e8e8e8;
+  border-radius: 16rpx;
+  padding: 20rpx 24rpx;
+  font-size: 28rpx;
   color: $text-primary;
-  transition: all 0.2s ease;
+  line-height: 1.6;
+  transition: all 0.3s ease;
+
+  &:focus {
+    background: #ffffff;
+    border-color: $primary-color;
+    box-shadow: 0 0 0 4rpx rgba(255, 107, 157, 0.1);
+  }
 }
 
-.form-textarea:focus {
-  border-color: $primary-color;
+.input-placeholder {
+  color: #bfbfbf;
 }
 
+// 温馨提示
+.tips-section {
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  margin: 24rpx;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  border-left: 6rpx solid #1890ff;
+}
+
+.tips-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 16rpx;
+}
+
+.tips-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.tips-item {
+  font-size: 24rpx;
+  color: #595959;
+  line-height: 1.6;
+}
+
+// 底部提交栏
 .submit-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  background: $bg-card;
-  padding: $spacing-xl;
-  border-top: 1rpx solid $border-light;
+  background: #ffffff;
+  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #f0f0f0;
   display: flex;
   align-items: center;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  z-index: 100;
 }
 
-.total-row {
+.submit-left {
   flex: 1;
   display: flex;
-  align-items: center;
+  flex-direction: column;
 }
 
-.total-label {
-  font-size: $font-sm;
+.submit-label {
+  font-size: 24rpx;
   color: $text-secondary;
+  margin-bottom: 4rpx;
 }
 
-.total-value {
-  font-size: $font-2xl;
-  font-weight: $font-bold;
+.submit-price {
+  display: flex;
+  align-items: baseline;
+}
+
+.submit-symbol {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: $primary-color;
+  margin-right: 4rpx;
+}
+
+.submit-amount {
+  font-size: 48rpx;
+  font-weight: 700;
   color: $primary-color;
-  margin-left: $spacing-xs;
 }
 
 .submit-btn {
-  background: $primary-color;
-  border-radius: $radius-base;
-  height: 88rpx;
-  width: 240rpx;
+  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
+  border-radius: 48rpx;
+  height: 96rpx;
+  width: 280rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
-}
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.4);
+  transition: all 0.3s ease;
 
-.submit-btn:active {
-  background: $primary-dark;
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
+  }
 }
 
 .submit-text {
-  font-size: $font-lg;
-  font-weight: $font-bold;
-  color: #FFFFFF;
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 2rpx;
 }
 </style>
\ No newline at end of file
diff --git a/apps/miniapp/src/pages/room-detail/index.vue b/apps/miniapp/src/pages/room-detail/index.vue
index f5b53e9..03be6de 100644
--- a/apps/miniapp/src/pages/room-detail/index.vue
+++ b/apps/miniapp/src/pages/room-detail/index.vue
@@ -1,122 +1,205 @@
 <template>
-  <view class="page-detail">
-    <!-- 轮播图 -->
-    <swiper class="banner" indicator-dots autoplay circular>
-      <swiper-item v-for="(img, i) in room.images || []" :key="i">
-        <image class="banner-img" :src="img" mode="aspectFill" />
-      </swiper-item>
-    </swiper>
+  <view class="page-room-detail">
+    <!-- 顶部图片画廊 -->
+    <view class="gallery-section">
+      <swiper
+        class="gallery-swiper"
+        :indicator-dots="false"
+        :autoplay="false"
+        :circular="true"
+        @change="handleSwiperChange"
+      >
+        <swiper-item v-for="(image, index) in roomImages" :key="index">
+          <image
+            :src="image"
+            class="gallery-image"
+            mode="aspectFill"
+            @tap="previewImages(index)"
+          />
+        </swiper-item>
+      </swiper>
 
-    <view class="detail-content">
-      <!-- 基本信息 -->
-      <view class="info-section">
-        <text class="room-name">{{ room.name }}</text>
-
-        <!-- 评分行 -->
-        <rating-stars
-          :score="room.rating || 4.8"
-          :count="room.reviewCount || 0"
-          size="medium"
-          :show-stars="true"
-        />
-
-        <!-- 标签 -->
-        <tag-list
-          :tags="roomTags"
-          type="primary"
-          size="small"
-        />
-
-        <!-- 地址 -->
-        <view class="address-row" v-if="room.address" @tap="copyAddress">
-          <text class="address-icon">📍</text>
-          <text class="address-text">{{ room.address }}</text>
+      <!-- 顶部操作栏 -->
+      <view class="top-bar">
+        <view class="top-btn back-btn" @tap="handleBack">
+          <u-icon name="arrow-left" :size="22" color="#1A1A1A" />
+        </view>
+        <view class="top-btn share-btn" @tap="handleShare">
+          <u-icon name="share" :size="20" color="#1A1A1A" />
         </view>
       </view>
 
-      <!-- 房源亮点 -->
-      <view class="section highlights-section" v-if="room.highlights?.length">
-        <text class="section-title">房源亮点</text>
-        <view class="highlight-list">
-          <view v-for="(h, i) in room.highlights" :key="i" class="highlight-item">
-            <text class="highlight-icon">{{ h.icon || '✓' }}</text>
-            <text class="highlight-text">{{ h.text }}</text>
+      <!-- 图片指示器 -->
+      <view class="image-indicator">
+        <text class="indicator-text">{{ currentImageIndex + 1 }} / {{ roomImages.length }}</text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="content-wrapper">
+      <!-- 房间标题卡片 -->
+      <view class="title-card">
+        <view class="title-row">
+          <text class="room-title">{{ roomData.name }}</text>
+          <view class="price-badge">
+            <text class="price-amount">¥{{ roomData.price }}</text>
+            <text class="price-label">/晚</text>
+          </view>
+        </view>
+
+        <view class="meta-row">
+          <view class="meta-tag primary">
+            <text class="tag-text">{{ roomTypeLabel }}</text>
+          </view>
+          <view class="meta-tag">
+            <text class="tag-text">{{ roomData.area }}㎡</text>
+          </view>
+          <view class="meta-tag">
+            <text class="tag-text">{{ roomData.bedType }}</text>
+          </view>
+          <view class="meta-tag">
+            <text class="tag-text">{{ roomData.maxGuests }}人</text>
+          </view>
+        </view>
+
+        <view v-if="availabilityText" class="availability-banner" :class="availabilityClass">
+          <u-icon name="info-circle-fill" :size="16" :color="availabilityIconColor" />
+          <text class="availability-text">{{ availabilityText }}</text>
+        </view>
+      </view>
+
+      <!-- 房间亮点 -->
+      <view v-if="roomHighlights.length > 0" class="highlights-card">
+        <text class="card-title">房间亮点</text>
+        <view class="highlights-grid">
+          <view
+            v-for="(highlight, index) in roomHighlights"
+            :key="index"
+            class="highlight-item"
+          >
+            <view class="highlight-icon-wrapper">
+              <text class="highlight-icon">{{ highlight.icon }}</text>
+            </view>
+            <text class="highlight-text">{{ highlight.text }}</text>
           </view>
         </view>
       </view>
 
       <!-- 设施服务 -->
-      <view class="section">
-        <text class="section-title">设施服务</text>
-        <tag-list
-          :tags="displayFacilityTags"
-          type="default"
-          size="medium"
-        />
-        <view class="more-facility" v-if="room.facilities?.length > 8" @tap="showAllFacilities = !showAllFacilities">
-          {{ showAllFacilities ? '收起' : `查看全部${room.facilities.length}项设施` }}
+      <view class="facilities-card">
+        <text class="card-title">设施与服务</text>
+        <view class="facilities-list">
+          <view
+            v-for="(facility, index) in displayFacilities"
+            :key="index"
+            class="facility-chip"
+          >
+            <text class="facility-icon">{{ getFacilityIcon(facility) }}</text>
+            <text class="facility-text">{{ facility }}</text>
+          </view>
         </view>
-      </view>
-
-      <!-- 房源描述 -->
-      <view class="section" v-if="room.description">
-        <text class="section-title">房源描述</text>
-        <text class="description" :class="{ expanded: descExpanded || room.description.length < 100 }">
-          {{ room.description }}
-        </text>
-        <text
-          class="expand-btn"
-          v-if="room.description.length >= 100"
-          @tap="descExpanded = !descExpanded"
+        <view
+          v-if="roomData.facilities && roomData.facilities.length > 6"
+          class="view-more-btn"
+          @tap="toggleFacilities"
         >
-          {{ descExpanded ? '收起' : '展开全部' }}
-        </text>
+          <text class="view-more-text">
+            {{ showAllFacilities ? '收起' : `查看全部 ${roomData.facilities.length} 项设施` }}
+          </text>
+          <u-icon
+            :name="showAllFacilities ? 'arrow-up' : 'arrow-down'"
+            :size="16"
+            color="#666"
+          />
+        </view>
       </view>
 
-      <!-- 入住须知 -->
-      <view class="section">
-        <text class="section-title">入住须知</text>
-        <view class="notice-list">
-          <view class="notice-item">
-            <text class="notice-label">入住时间</text>
-            <text class="notice-value">14:00后</text>
+      <!-- 房间描述 -->
+      <view v-if="roomData.description" class="description-card">
+        <text class="card-title">房间详情</text>
+        <text class="description-content" :class="{ expanded: isDescExpanded }">
+          {{ roomData.description }}
+        </text>
+        <view
+          v-if="roomData.description.length > 80"
+          class="read-more-btn"
+          @tap="toggleDescription"
+        >
+          <text class="read-more-text">{{ isDescExpanded ? '收起' : '阅读更多' }}</text>
+        </view>
+      </view>
+
+      <!-- 入住政策 -->
+      <view class="policy-card">
+        <text class="card-title">入住政策</text>
+        <view class="policy-list">
+          <view class="policy-item">
+            <view class="policy-icon-box checkin">
+              <u-icon name="clock-fill" :size="20" color="#4CAF50" />
+            </view>
+            <view class="policy-content">
+              <text class="policy-label">入住时间</text>
+              <text class="policy-value">14:00 后可办理入住</text>
+            </view>
           </view>
-          <view class="notice-item">
-            <text class="notice-label">退房时间</text>
-            <text class="notice-value">12:00前</text>
+
+          <view class="policy-item">
+            <view class="policy-icon-box checkout">
+              <u-icon name="clock-fill" :size="20" color="#FF9800" />
+            </view>
+            <view class="policy-content">
+              <text class="policy-label">退房时间</text>
+              <text class="policy-value">12:00 前需完成退房</text>
+            </view>
           </view>
-          <view class="notice-item">
-            <text class="notice-label">取消政策</text>
-            <text class="notice-value">入住前1天可免费取消</text>
+
+          <view class="policy-item">
+            <view class="policy-icon-box cancel">
+              <u-icon name="close-circle-fill" :size="20" color="#2196F3" />
+            </view>
+            <view class="policy-content">
+              <text class="policy-label">取消政策</text>
+              <text class="policy-value">入住前 24 小时可免费取消</text>
+            </view>
+          </view>
+
+          <view class="policy-item">
+            <view class="policy-icon-box notice">
+              <u-icon name="warning-fill" :size="20" color="#F44336" />
+            </view>
+            <view class="policy-content">
+              <text class="policy-label">入住须知</text>
+              <text class="policy-value">需携带有效身份证件办理入住</text>
+            </view>
           </view>
         </view>
       </view>
+
+      <!-- 底部占位 -->
+      <view class="bottom-placeholder" />
     </view>
 
-    <!-- 底部操作栏 -->
-    <view class="bottom-bar">
-      <price-tag
-        :price="room.price"
-        :original-price="room.originalPrice"
-        size="large"
-        unit="/晚"
-      />
-      <view class="action-btns">
-        <base-button
-          type="outline"
-          size="medium"
-          @click="contactMerchant"
+    <!-- 底部预订栏 -->
+    <view class="booking-bar">
+      <view class="booking-left">
+        <view class="booking-price">
+          <text class="booking-amount">¥{{ roomData.price }}</text>
+          <text class="booking-unit">/晚</text>
+        </view>
+        <text v-if="stockText" class="booking-stock">{{ stockText }}</text>
+      </view>
+
+      <view class="booking-actions">
+        <view class="action-btn secondary" @tap="handleContact">
+          <u-icon name="phone-fill" :size="20" color="#666" />
+        </view>
+        <view
+          class="action-btn primary"
+          :class="{ disabled: !isAvailable }"
+          @tap="handleBook"
         >
-          联系房东
-        </base-button>
-        <base-button
-          type="primary"
-          size="medium"
-          :disabled="!canBook"
-          @click="handleBook"
-        >
-          {{ canBook ? '立即预订' : '当天无房' }}
-        </base-button>
+          <text class="action-text">{{ isAvailable ? '立即预订' : '暂不可订' }}</text>
+        </view>
       </view>
     </view>
   </view>
@@ -125,26 +208,21 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import { getRoomDetail, getRoomCalendar } from '@/api/user/room';
-import RatingStars from '@/components/business/RatingStars.vue';
-import PriceTag from '@/components/business/PriceTag.vue';
-import TagList from '@/components/business/TagList.vue';
-import BaseButton from '@/components/base/BaseButton.vue';
+import type { Room } from '@/types/room';
 
-const typeLabels: Record<string, string> = {
-  hotel: '酒店',
+// 常量
+const DEFAULT_IMAGE = '/static/default-room.png';
+
+// 房型标签映射
+const ROOM_TYPE_LABELS: Record<string, string> = {
+  hotel: '酒店客房',
   homestay: '民宿',
   apartment: '公寓',
-  hostel: '青旅'
+  hostel: '青旅床位',
 };
 
-const room = ref<any>({});
-const roomId = ref(0);
-const descExpanded = ref(false);
-const showAllFacilities = ref(false);
-const todayStock = ref<number>(0);
-
 // 设施图标映射
-const facilityIcons: Record<string, string> = {
+const FACILITY_ICONS: Record<string, string> = {
   'WiFi': '📶',
   '空调': '❄️',
   '热水': '🚿',
@@ -157,406 +235,711 @@ const facilityIcons: Record<string, string> = {
   '阳台': '🌅',
   '泳池': '🏊',
   '健身房': '💪',
+  '暖气': '🔥',
+  '独立卫浴': '🚽',
+  '吹风机': '💨',
+  '衣柜': '👔',
+  '书桌': '📝',
 };
 
+// 房间数据
+const roomId = ref(0);
+const roomData = ref<Partial<Room>>({});
+const todayStock = ref(0);
+const currentImageIndex = ref(0);
+
+// UI状态
+const showAllFacilities = ref(false);
+const isDescExpanded = ref(false);
+
+// 计算属性
+const roomImages = computed(() => {
+  const images = roomData.value.images || [];
+  return images.length > 0 ? images : [roomData.value.coverImage || DEFAULT_IMAGE];
+});
+
+const roomTypeLabel = computed(() => {
+  return ROOM_TYPE_LABELS[roomData.value.type || ''] || '房间';
+});
+
 const displayFacilities = computed(() => {
-  const list = (room.value.facilities || []).map((f: string) => ({
-    name: f,
-    icon: facilityIcons[f] || '✓'
-  }));
-  return showAllFacilities.value ? list : list.slice(0, 8);
+  const facilities = roomData.value.facilities || [];
+  return showAllFacilities.value ? facilities : facilities.slice(0, 6);
 });
 
-// 房源标签
-const roomTags = computed(() => {
-  const tags = [];
-  if (room.value.type) {
-    tags.push(typeLabels[room.value.type] || '房源');
-  }
-  if (room.value.bedType) {
-    tags.push(room.value.bedType);
-  }
-  if (room.value.area) {
-    tags.push(`${room.value.area}m²`);
-  }
-  if (room.value.maxGuests) {
-    tags.push(`最多${room.value.maxGuests}人`);
-  }
-  return tags;
+const isAvailable = computed(() => {
+  return todayStock.value > 0 && roomData.value.status === 'available';
 });
 
-// 设施标签
-const displayFacilityTags = computed(() => {
-  const list = (room.value.facilities || []).map((f: string) => `${facilityIcons[f] || '✓'} ${f}`);
-  return showAllFacilities.value ? list : list.slice(0, 8);
+const availabilityText = computed(() => {
+  if (!isAvailable.value) return '当前不可预订';
+  if (todayStock.value <= 3) return `仅剩 ${todayStock.value} 间`;
+  return '房源充足';
 });
 
-const canBook = computed(() => {
-  return todayStock.value > 0;
+const availabilityClass = computed(() => {
+  if (!isAvailable.value) return 'unavailable';
+  if (todayStock.value <= 3) return 'limited';
+  return 'available';
 });
 
-onMounted(() => {
+const availabilityIconColor = computed(() => {
+  if (!isAvailable.value) return '#F44336';
+  if (todayStock.value <= 3) return '#FF9800';
+  return '#4CAF50';
+});
+
+const stockText = computed(() => {
+  if (!isAvailable.value) return '';
+  if (todayStock.value <= 3) return `仅剩${todayStock.value}间`;
+  return '';
+});
+
+const roomHighlights = computed(() => {
+  const highlights = [];
+
+  if (roomData.value.area && roomData.value.area >= 30) {
+    highlights.push({ icon: '📐', text: '宽敞空间' });
+  }
+
+  if (roomData.value.facilities?.includes('WiFi')) {
+    highlights.push({ icon: '📶', text: '高速WiFi' });
+  }
+
+  if (roomData.value.facilities?.includes('独立卫浴')) {
+    highlights.push({ icon: '🚿', text: '独立卫浴' });
+  }
+
+  if (roomData.value.facilities?.includes('阳台')) {
+    highlights.push({ icon: '🌅', text: '观景阳台' });
+  }
+
+  return highlights;
+});
+
+// 获取设施图标
+function getFacilityIcon(facility: string): string {
+  return FACILITY_ICONS[facility] || '✓';
+}
+
+// 初始化
+function initializeFromUrl() {
   const pages = getCurrentPages();
-  const page = pages[pages.length - 1] as any;
-  roomId.value = page.options?.id || page.$page?.options?.id;
-  if (roomId.value) {
-    fetchDetail();
-    fetchTodayStock();
-  }
-});
+  const currentPage = pages[pages.length - 1] as any;
+  const options = currentPage.options || currentPage.$page?.options || {};
+  roomId.value = Number(options.id) || 0;
+}
+
+// 获取房间详情
+async function fetchRoomDetail() {
+  if (!roomId.value) return;
 
-async function fetchDetail() {
   try {
-    const res = await getRoomDetail(roomId.value);
-    room.value = res.data;
-  } catch (e) {
-    console.error(e);
+    const response = await getRoomDetail(roomId.value);
+    roomData.value = response.data || {};
+  } catch (error) {
+    console.error('获取房间详情失败:', error);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
   }
 }
 
+// 获取今日库存
 async function fetchTodayStock() {
+  if (!roomId.value) return;
+
   try {
     const today = new Date();
     const dateStr = today.toISOString().split('T')[0];
-    const res = await getRoomCalendar(roomId.value, dateStr, dateStr);
-    if (res.data && res.data.length > 0) {
-      todayStock.value = res.data[0].stock || 0;
+    const response = await getRoomCalendar(roomId.value, dateStr, dateStr);
+
+    if (response.data && response.data.length > 0) {
+      todayStock.value = response.data[0].stock || 0;
     }
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error('获取库存失败:', error);
     todayStock.value = 0;
   }
 }
 
-function copyAddress() {
-  if (room.value.address) {
-    uni.setClipboardData({
-      data: room.value.address,
-      success: () => {
-        uni.showToast({ title: '地址已复制', icon: 'success' });
-      }
-    });
-  }
+// UI交互
+function handleSwiperChange(e: any) {
+  currentImageIndex.value = e.detail.current;
 }
 
-function contactMerchant() {
-  uni.showToast({ title: '功能开发中', icon: 'none' });
+function toggleFacilities() {
+  showAllFacilities.value = !showAllFacilities.value;
+}
+
+function toggleDescription() {
+  isDescExpanded.value = !isDescExpanded.value;
+}
+
+function handleBack() {
+  uni.navigateBack();
+}
+
+function handleShare() {
+  uni.showToast({ title: '分享功能开发中', icon: 'none' });
+}
+
+function previewImages(current: number) {
+  uni.previewImage({
+    urls: roomImages.value,
+    current: current,
+  });
+}
+
+function handleContact() {
+  uni.showModal({
+    title: '联系房东',
+    content: '是否拨打电话联系房东？',
+    confirmText: '拨打',
+    cancelText: '取消',
+    success: (res) => {
+      if (res.confirm) {
+        uni.showToast({ title: '功能开发中', icon: 'none' });
+      }
+    },
+  });
 }
 
 function handleBook() {
-  if (!canBook.value) {
-    uni.showToast({ title: '当天无房，请选择其他日期', icon: 'none' });
+  if (!isAvailable.value) {
+    uni.showToast({ title: '该房间暂不可预订', icon: 'none' });
     return;
   }
-  uni.navigateTo({ url: `/pages/order-create/index?roomId=${roomId.value}` });
+
+  uni.navigateTo({
+    url: `/pages/order-create/index?roomId=${roomId.value}`,
+  });
 }
+
+// 生命周期
+onMounted(() => {
+  initializeFromUrl();
+
+  if (roomId.value) {
+    fetchRoomDetail();
+    fetchTodayStock();
+  } else {
+    uni.showToast({ title: '房间信息不存在', icon: 'none' });
+    setTimeout(() => {
+      uni.navigateBack();
+    }, 1500);
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-@import '@/static/styles/common.scss';
+@import '@/static/styles/design-tokens.scss';
 
-.page-detail {
+.page-room-detail {
   min-height: 100vh;
-  background: $bg-page;
-  padding-bottom: 160rpx;
+  background: #FAFAFA;
 }
 
-.banner {
-  height: 480rpx;
-  background: $bg-page;
+/* ========== 图片画廊 ========== */
+.gallery-section {
+  position: relative;
+  width: 100%;
+  height: 600rpx;
+  background: #000;
 }
 
-.banner-img {
+.gallery-swiper {
   width: 100%;
   height: 100%;
 }
 
-.detail-content {
-  padding: $spacing-xl;
+.gallery-image {
+  width: 100%;
+  height: 100%;
 }
 
-.info-section {
-  background: $bg-card;
-  border-radius: $radius-lg;
-  padding: $spacing-xl;
-  margin-bottom: $spacing-md;
-  border: 1rpx solid $border-light;
+.top-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  padding: 48rpx 24rpx 24rpx;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
 }
 
-.room-name {
-  font-size: $font-xl;
-  font-weight: $font-semibold;
-  color: $text-primary;
-  display: block;
-  line-height: 1.4;
-  margin-bottom: $spacing-md;
-}
-
-.rating-row {
+.top-btn {
+  width: 72rpx;
+  height: 72rpx;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  padding: $spacing-md 0;
-  border-top: 1rpx solid $border-light;
-  border-bottom: 1rpx solid $border-light;
-  margin-bottom: $spacing-md;
-}
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
 
-.rating-stars {
-  display: flex;
-  gap: 4rpx;
-}
-
-.star {
-  font-size: $font-base;
-  color: #E5E5E5;
-
-  &.filled {
-    color: $star-color;
+  &:active {
+    transform: scale(0.9);
+    background: rgba(255, 255, 255, 1);
   }
 }
 
-.rating-score {
-  font-size: $font-lg;
-  font-weight: $font-semibold;
-  color: $star-color;
-  margin-left: $spacing-sm;
+.image-indicator {
+  position: absolute;
+  bottom: 32rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  padding: 12rpx 24rpx;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10rpx);
+  border-radius: 30rpx;
 }
 
-.rating-count {
-  font-size: $font-sm;
-  color: $text-secondary;
-  margin-left: $spacing-xs;
+.indicator-text {
+  font-size: 24rpx;
+  color: #FFFFFF;
+  font-weight: 500;
 }
 
-.room-tags {
+/* ========== 内容区域 ========== */
+.content-wrapper {
+  position: relative;
+  margin-top: -40rpx;
+  border-radius: 32rpx 32rpx 0 0;
+  background: #FAFAFA;
+  padding: 32rpx 20rpx 0;
+}
+
+/* ========== 标题卡片 ========== */
+.title-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.room-title {
+  flex: 1;
+  font-size: 38rpx;
+  font-weight: 700;
+  color: #1A1A1A;
+  line-height: 1.4;
+}
+
+.price-badge {
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 4rpx;
+  padding: 12rpx 20rpx;
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+}
+
+.price-amount {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  line-height: 1;
+}
+
+.price-label {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.meta-row {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-xs;
-  margin-bottom: $spacing-md;
+  gap: 12rpx;
+  margin-bottom: 20rpx;
 }
 
-.tag {
-  font-size: $font-xs;
-  color: $primary-color;
-  background: $primary-bg;
-  padding: 6rpx $spacing-sm;
-  border-radius: $radius-xs;
-  font-weight: $font-regular;
+.meta-tag {
+  padding: 10rpx 20rpx;
+  background: #F5F5F5;
+  border-radius: 12rpx;
+  border: 1rpx solid #E8E8E8;
+
+  &.primary {
+    background: linear-gradient(135deg, #FFF5E6 0%, #FFE8CC 100%);
+    border-color: #FFD699;
+
+    .tag-text {
+      color: #FF8C00;
+      font-weight: 600;
+    }
+  }
 }
 
-.address-row {
+.tag-text {
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+.availability-banner {
   display: flex;
   align-items: center;
-  padding-top: $spacing-md;
-  border-top: 1rpx solid $border-light;
+  gap: 12rpx;
+  padding: 16rpx 20rpx;
+  border-radius: 12rpx;
+  border: 1rpx solid;
+
+  &.available {
+    background: #E8F5E9;
+    border-color: #81C784;
+  }
+
+  &.limited {
+    background: #FFF3E0;
+    border-color: #FFB74D;
+  }
+
+  &.unavailable {
+    background: #FFEBEE;
+    border-color: #E57373;
+  }
 }
 
-.address-icon {
-  font-size: $font-base;
-  margin-right: $spacing-xs;
+.availability-text {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #333;
 }
 
-.address-text {
-  flex: 1;
-  font-size: $font-sm;
-  color: $text-secondary;
+/* ========== 亮点卡片 ========== */
+.highlights-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
 }
 
-.section {
-  background: $bg-card;
-  border-radius: $radius-lg;
-  padding: $spacing-xl;
-  margin-bottom: $spacing-md;
-  border: 1rpx solid $border-light;
-}
-
-.section-title {
-  font-size: $font-base;
-  font-weight: $font-semibold;
-  color: $text-primary;
+.card-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1A1A1A;
+  margin-bottom: 24rpx;
   display: block;
-  margin-bottom: $spacing-md;
 }
 
-.highlight-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $spacing-sm;
+.highlights-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
 }
 
 .highlight-item {
   display: flex;
   align-items: center;
-  background: $bg-page;
-  padding: $spacing-sm $spacing-md;
-  border-radius: $radius-sm;
+  gap: 16rpx;
+  padding: 20rpx;
+  background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #E8E8E8;
+}
+
+.highlight-icon-wrapper {
+  width: 64rpx;
+  height: 64rpx;
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .highlight-icon {
-  font-size: $font-base;
-  margin-right: $spacing-xs;
+  font-size: 32rpx;
 }
 
 .highlight-text {
-  font-size: $font-sm;
-  color: $text-primary;
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 500;
 }
 
-.facility-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: $spacing-xl;
+/* ========== 设施卡片 ========== */
+.facilities-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
 }
 
-.facility-item {
+.facilities-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+}
+
+.facility-chip {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: $spacing-xs;
+  gap: 8rpx;
+  padding: 12rpx 20rpx;
+  background: #F8F9FA;
+  border-radius: 30rpx;
+  border: 1rpx solid #E8E8E8;
 }
 
 .facility-icon {
-  font-size: 40rpx;
+  font-size: 28rpx;
 }
 
-.facility-name {
-  font-size: $font-xs;
-  color: $text-secondary;
-  text-align: center;
+.facility-text {
+  font-size: 24rpx;
+  color: #333;
+  font-weight: 500;
 }
 
-.more-facility {
-  text-align: center;
-  font-size: $font-sm;
-  color: $primary-color;
-  margin-top: $spacing-md;
+.view-more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 16rpx;
+  background: #F8F9FA;
+  border-radius: 12rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #F0F0F0;
+    transform: scale(0.98);
+  }
 }
 
-.description {
-  font-size: $font-sm;
-  color: $text-secondary;
-  line-height: 1.6;
+.view-more-text {
+  font-size: 26rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+/* ========== 描述卡片 ========== */
+.description-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.description-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.8;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
-  line-clamp: 3;
   overflow: hidden;
 
   &.expanded {
     display: block;
     -webkit-line-clamp: unset;
-    line-clamp: unset;
   }
 }
 
-.expand-btn {
-  display: block;
-  font-size: $font-sm;
-  color: $primary-color;
-  margin-top: $spacing-sm;
+.read-more-btn {
+  margin-top: 16rpx;
+  text-align: center;
+  padding: 12rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
 }
 
-.notice-list {
+.read-more-text {
+  font-size: 26rpx;
+  color: #667EEA;
+  font-weight: 600;
+}
+
+/* ========== 政策卡片 ========== */
+.policy-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.policy-list {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: 20rpx;
 }
 
-.notice-item {
+.policy-item {
+  display: flex;
+  gap: 20rpx;
+  padding: 24rpx;
+  background: #F8F9FA;
+  border-radius: 16rpx;
+}
+
+.policy-icon-box {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 16rpx;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &.checkin {
+    background: rgba(76, 175, 80, 0.1);
+  }
+
+  &.checkout {
+    background: rgba(255, 152, 0, 0.1);
+  }
+
+  &.cancel {
+    background: rgba(33, 150, 243, 0.1);
+  }
+
+  &.notice {
+    background: rgba(244, 67, 54, 0.1);
+  }
 }
 
-.notice-label {
-  font-size: $font-sm;
-  color: $text-secondary;
+.policy-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  justify-content: center;
 }
 
-.notice-value {
-  font-size: $font-sm;
-  color: $text-primary;
-  font-weight: $font-medium;
+.policy-label {
+  font-size: 26rpx;
+  color: #999;
 }
 
-.bottom-bar {
+.policy-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+/* ========== 底部占位 ========== */
+.bottom-placeholder {
+  height: 140rpx;
+}
+
+/* ========== 底部预订栏 ========== */
+.booking-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  background: $bg-card;
-  padding: $spacing-xl;
-  border-top: 1rpx solid $border-light;
+  z-index: 100;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
+  padding: 20rpx 24rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20rpx);
+  border-top: 1rpx solid #E8E8E8;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
 }
 
-.price-info {
+.booking-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.booking-price {
   display: flex;
   align-items: baseline;
   gap: 4rpx;
 }
 
-.price-symbol {
-  font-size: $font-base;
-  color: $primary-color;
-  font-weight: $font-medium;
+.booking-amount {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #667EEA;
+  line-height: 1;
 }
 
-.price-value {
-  font-size: $font-3xl;
-  color: $primary-color;
-  font-weight: $font-bold;
+.booking-unit {
+  font-size: 24rpx;
+  color: #999;
 }
 
-.price-unit {
-  font-size: $font-sm;
-  color: $text-secondary;
+.booking-stock {
+  font-size: 22rpx;
+  color: #FF9800;
+  font-weight: 600;
 }
 
-.action-btns {
+.booking-actions {
   display: flex;
-  gap: $spacing-sm;
+  gap: 16rpx;
 }
 
-.contact-btn {
-  background: transparent;
-  color: $primary-color;
-  border: 2rpx solid $primary-color;
-  border-radius: $radius-base;
-  font-size: $font-sm;
-  font-weight: $font-medium;
-  padding: 0 $spacing-xl;
-  height: 72rpx;
-  line-height: 72rpx;
-  transition: all 0.2s ease;
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  border-radius: 44rpx;
+  transition: all 0.3s ease;
 
-  &:active {
-    background: $primary-bg;
+  &.secondary {
+    width: 88rpx;
+    background: #F5F5F5;
+    border: 1rpx solid #E8E8E8;
+
+    &:active {
+      background: #EBEBEB;
+      transform: scale(0.95);
+    }
+  }
+
+  &.primary {
+    padding: 0 56rpx;
+    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
+
+    &:active {
+      transform: scale(0.95);
+      box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.5);
+    }
+
+    &.disabled {
+      background: #E0E0E0;
+      box-shadow: none;
+    }
   }
 }
 
-.book-btn {
-  background: $primary-color;
+.action-text {
+  font-size: 28rpx;
   color: #FFFFFF;
-  border-radius: $radius-base;
-  font-size: $font-sm;
-  font-weight: $font-medium;
-  padding: 0 $spacing-2xl;
-  height: 72rpx;
-  line-height: 72rpx;
-  border: none;
-  transition: all 0.2s ease;
-
-  &:active {
-    background: $primary-dark;
-  }
-
-  &.disabled {
-    background: $bg-disabled;
-    color: $text-disabled;
-  }
+  font-weight: 700;
 }
 </style>
diff --git a/apps/miniapp/src/types/merchant.ts b/apps/miniapp/src/types/merchant.ts
new file mode 100644
index 0000000..40459d2
--- /dev/null
+++ b/apps/miniapp/src/types/merchant.ts
@@ -0,0 +1,62 @@
+export interface Merchant {
+  id: number;
+  sellerId: number;
+  shopName: string;
+  logo: string;
+  description: string;
+  phone: string;
+  province: string;
+  city: string;
+  district: string;
+  address: string;
+  longitude: number;
+  latitude: number;
+  businessLicense: string;
+  licenseNo: string;
+  legalPerson: string;
+  status: 'pending' | 'approved' | 'rejected' | 'frozen';
+  rejectReason: string;
+  deposit: number;
+  rating: number;
+  reviewCount: number;
+  autoConfirm: boolean;
+  createdAt: string;
+  updatedAt: string;
+  // 扩展字段
+  minPrice?: number;
+  roomCount?: number;
+  distance?: number;
+  isRecommend?: boolean;
+  isHot?: boolean;
+  isNew?: boolean;
+  facilities?: string[];
+}
+
+export interface MerchantCardData {
+  id: number;
+  name: string;
+  coverImage: string;
+  cityName: string;
+  rating: number;
+  reviewCount: number;
+  description: string;
+  facilities: string[];
+  minPrice: number;
+  roomCount?: number;
+  distance?: number;
+  isRecommend?: boolean;
+  isHot?: boolean;
+  isNew?: boolean;
+}
+
+export interface SearchParams {
+  city: string;
+  keyword?: string;
+  checkIn: string;
+  checkOut: string;
+  roomCount: number;
+  adultCount: number;
+  childCount: number;
+  minPrice?: number;
+  maxPrice?: number;
+}
diff --git a/apps/miniapp/src/types/room.ts b/apps/miniapp/src/types/room.ts
new file mode 100644
index 0000000..b068b87
--- /dev/null
+++ b/apps/miniapp/src/types/room.ts
@@ -0,0 +1,77 @@
+export interface Room {
+  id: number;
+  merchantId: number;
+  name: string;
+  type: string;
+  coverImage: string;
+  images: string[];
+  description: string;
+  area: number;
+  bedType: string;
+  maxGuests: number;
+  price: number;
+  weekendPrice: number;
+  facilities: string[];
+  status: 'available' | 'unavailable' | 'maintenance';
+  floor: string;
+  roomNumber: string;
+  createdAt: string;
+  updatedAt: string;
+  // 扩展字段
+  isAvailable?: boolean;
+  currentPrice?: number;
+  nights?: number;
+}
+
+export interface RoomCardData {
+  id: number;
+  name: string;
+  coverImage: string;
+  type: string;
+  area: number;
+  bedType: string;
+  maxGuests: number;
+  price: number;
+  currentPrice?: number;
+  facilities: string[];
+  isAvailable: boolean;
+  floor?: string;
+  roomNumber?: string;
+}
+
+export interface Review {
+  id: number;
+  userId: number;
+  orderId: number;
+  merchantId: number;
+  roomId: number;
+  rating: number;
+  content: string;
+  images: string[];
+  isAnonymous: boolean;
+  merchantReply: string;
+  createdAt: string;
+  updatedAt: string;
+  // 扩展字段
+  userAvatar?: string;
+  userName?: string;
+}
+
+export interface ReviewCardData {
+  id: number;
+  userName: string;
+  userAvatar: string;
+  rating: number;
+  content: string;
+  images: string[];
+  reply: string;
+  createdAt: string;
+}
+
+export interface BookingParams {
+  checkIn: string;
+  checkOut: string;
+  roomCount: number;
+  adultCount: number;
+  childCount: number;
+}
diff --git a/apps/miniapp/src/utils/date.ts b/apps/miniapp/src/utils/date.ts
new file mode 100644
index 0000000..98e44ad
--- /dev/null
+++ b/apps/miniapp/src/utils/date.ts
@@ -0,0 +1,66 @@
+/**
+ * 日期工具函数
+ */
+
+/**
+ * 格式化日期为 YYYY-MM-DD
+ */
+export function formatDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * 格式化日期为 M月D日
+ */
+export function formatDateShort(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return `${d.getMonth() + 1}月${d.getDate()}日`;
+}
+
+/**
+ * 获取日期描述（今天、明天、后天、周X）
+ */
+export function getDateDescription(dateStr: string): string {
+  const targetDate = new Date(dateStr);
+  const today = new Date();
+
+  // 重置时间为 00:00:00 以便比较日期
+  today.setHours(0, 0, 0, 0);
+  targetDate.setHours(0, 0, 0, 0);
+
+  const diffDays = Math.round((targetDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return '今天';
+  if (diffDays === 1) return '明天';
+  if (diffDays === 2) return '后天';
+
+  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  return weekDays[targetDate.getDay()];
+}
+
+/**
+ * 计算两个日期之间的天数
+ */
+export function calculateNights(checkIn: string, checkOut: string): number {
+  const checkInDate = new Date(checkIn);
+  const checkOutDate = new Date(checkOut);
+  const diffTime = checkOutDate.getTime() - checkInDate.getTime();
+  return Math.max(1, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
+}
+
+/**
+ * 获取今天和明天的日期
+ */
+export function getDefaultDates(): { today: string; tomorrow: string } {
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+
+  return {
+    today: formatDate(today),
+    tomorrow: formatDate(tomorrow),
+  };
+}