feat: 快速预定页面调整

2025-10-25 14:05:34 +08:00
parent ea36177f05
commit b9c1f45b29
24 changed files with 458 additions and 1301 deletions
--- a/src/pages-booking/components/DateRangeSection/index.vue
+++ b/src/pages-booking/components/DateRangeSection/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <view class="border-box flex flex-items-center flex-justify-between mb-12">
+    <view class="left flex flex-items-center">
+      <text class="font-size-12 color-99A0AE mr-4">入住</text>
+      <text class="font-size-12 color-171717 mr-16">
+        {{ selectedDate.startDate }}
+      </text>
+      <text
+        class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
+        >1晚</text
+      >
+      <text class="font-size-12 color-99A0AE ml-16">离店</text>
+      <text class="font-size-12 color-171717 ml-4">
+        {{ selectedDate.endDate }}
+      </text>
+    </view>
+    <view class="flex flex-items-center">
+      <text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
+      <uni-icons type="right" size="15" color="#99A0AE" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+// Props
+const props = defineProps({
+  selectedDate: {
+    type: Object,
+    default: () => {
+      return {
+        startDate: "",
+        endDate: "",
+      };
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.total {
+  border: 1px solid #43669a;
+  padding: 3px 6px;
+
+  &::after,
+  &::before {
+    content: "";
+    width: 8px;
+    height: 1px;
+    position: absolute;
+  }
+
+  &::before {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 1),
+      rgba(67, 102, 154, 0)
+    );
+    left: -9px;
+  }
+
+  &::after {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 0),
+      rgba(67, 102, 154, 1)
+    );
+    right: -9px;
+  }
+}
+</style>
--- a/src/pages-booking/components/FooterSection/index.vue
+++ b/src/pages-booking/components/FooterSection/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view
+    class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
+  >
+    <text class="font-size-14 font-500 color-525866 mr-4"> 在线付 </text>
+    <text
+      class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
+      >88</text
+    >
+    <!-- <view class="flex flex-items-center" @click="emit('detailClick')">
+      <text class="font-size-12 color-A3A3A3 mr-4">明细</text>
+      <uni-icons type="up" size="16" color="#A3A3A3" />
+    </view> -->
+    <view
+      class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
+      @click="handleBooking"
+    >
+      <image
+        class="icon"
+        src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
+      />
+      <text class="font-size-16 font-500 color-white">立即预定</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["detailClick"]);
+</script>
+
+<style scoped lang="scss">
+.booking-footer {
+  border-radius: 15px 15px 0 0;
+  padding: 12px 12px 42px;
+}
+
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.btn {
+  width: 120px;
+  height: 48px;
+  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
+}
+
+.icon {
+  height: 48px;
+  width: 34px;
+}
+</style>
--- a/src/pages-booking/components/UserSection/index.vue
+++ b/src/pages-booking/components/UserSection/index.vue
@@ -10,7 +10,11 @@
    </view>

    <view class="border-box pl-12 pr-12">
-      <view class="border-box border-bottom pt-12 pb-12 flex flex-items-center">
+      <view
+        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
+        v-for="item in quantity"
+        :key="item"
+      >
        <view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
        <view class="right">
          <input
--- a/src/pages-booking/index.vue
+++ b/src/pages-booking/index.vue
@@ -14,14 +14,37 @@
    <view class="booking-content flex-full border-box p-12">
      <!-- 预约内容 -->
      <view class="border-box bg-white p-12 rounded-12 mb-12">
-        <view class="font-size-16 font-500 color-000 line-height-24"
-          >【温泉季】戏水单人票 +单人简餐</view
-        >
+        <!-- 酒店类型入住离店日期部分 -->
+        <DateRangeSection
+          v-if="orderData.commodityTypeCode === '0'"
+          :selectedDate="selectedDate"
+        />

-        <view
-          class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
-          >温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
-        >
+        <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1"
+          >宽敞大床房/奶油ins风/交通便捷/投影电影/近地铁站/氛围灯/舒适温暖/出行必备/独享整套房源
+        </view>
+
+        <view class="border-box border-bottom">
+          <view class="font-size-12 color-99A0AE line-height-16 pb-12"
+            >温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
+          >
+
+          <!-- 权益部分 -->
+          <view class="flex flex-items-center mb-8">
+            <text
+              class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+              >自助早餐券*2</text
+            >
+            <text
+              class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+              >自助早餐券*2</text
+            >
+            <text
+              class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+              >自助早餐券*2</text
+            >
+          </view>
+        </view>

        <view
          class="border-box flex flex-items-center flex-justify-between pt-12"
@@ -30,7 +53,9 @@
            >使用时间:周一至周日9:00-22:00</text
          >
          <view class="flex flex-items-center">
-            <text class="font-size-12 color-2D91FF line-height-16"
+            <text
+              class="font-size-12 color-2D91FF line-height-16"
+              @click="refundVisible = true"
              >取消政策</text
            >
            <uni-icons type="right" size="15" color="#99A0AE" />
@@ -44,16 +69,56 @@
      <!-- 酒店类型 -->
      <UserSection />
    </view>
+
+    <!-- 底部 -->
+    <FooterSection @detailClick="detailVisible = true" />
+
+    <!-- 取消政策弹窗 -->
+    <RefundPopup v-model="refundVisible" :orderData="orderData" />
+
+    <!-- 明细弹窗 -->
+    <DetailPopup v-model="detailVisible" :orderData="orderData" />
  </view>
 </template>

 <script setup>
 import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
 import TopNavBar from "@/components/TopNavBar/index.vue";
+import DateRangeSection from "./components/DateRangeSection/index.vue";
 import ContactSection from "./components/ConactSection/index.vue";
 import UserSection from "./components/UserSection/index.vue";
+import RefundPopup from "@/components/RefundPopup/index.vue";
+import DetailPopup from "@/components/DetailPopup/index.vue";
+import FooterSection from "./components/FooterSection/index.vue";
+import { goodsDetail } from "@/request/api/GoodsApi";

 const title = ref("预约");
+const refundVisible = ref(false);
+const detailVisible = ref(false);
+const orderData = ref({});
+const selectedDate = ref({
+  startDate: "",
+  endDate: "",
+  totalDays: 1,
+});
+
+onLoad((options) => {
+  const { commodityId, startDate, endDate, totalDays } = options;
+  selectedDate.value.startDate = startDate;
+  selectedDate.value.endDate = endDate;
+  selectedDate.value.totalDays = totalDays;
+
+  getGoodsDetail(commodityId);
+});
+
+const getGoodsDetail = async (commodityId) => {
+  const res = await goodsDetail({ commodityId });
+
+  if (res.code === 200) {
+    orderData.value = res.data;
+  }
+};
 </script>

 <style scoped lang="scss">