feat: 快速预定页面调整

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>

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>

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