feat: 提交订单页面搭建

src/pages-booking/components/ConactSection/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 选择数量 -->
+  <view
+    class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12"
+  >
+    <view class="flex-full">
+      <view class="font-size-16 font-500 color-000 line-height-24"
+        >选择数量</view
+      >
+      <view class="font-size-12 color-A3A3A3 line-height-16">
+        请选择套餐数量
+      </view>
+    </view>
+    <view class="right">
+      <Stepper v-model="quantity" />
+    </view>
+  </view>
+
+  <!-- 联系方式 -->
+  <view class="bg-white rounded-12 overflow-hidden">
+    <view
+      class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
+      >联系方式</view
+    >
+    <view class="flex flex-items-center border-box p-12">
+      <view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
+      <view class="right">
+        <input
+          class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+          placeholder="请输入联系手机"
+          maxlength="11"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+
+const quantity = ref(1);
+</script>
+
+<style></style>

src/pages-booking/components/UserSection/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="bg-white rounded-12 overflow-hidden mb-12">
+    <view class="flex flex-items-center border-box p-12 border-bottom">
+      <view class="font-size-16 font-500 color-000 line-height-24 flex-full"
+        >入住信息</view
+      >
+      <view class="right">
+        <Stepper v-model="quantity" unit="间" />
+      </view>
+    </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="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
+        <view class="right">
+          <input
+            class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+            placeholder="请输入姓名"
+            maxlength="11"
+          />
+        </view>
+      </view>
+
+      <view class="flex flex-items-center border-box pt-12 pb-12">
+        <view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
+        <view class="right">
+          <input
+            class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+            placeholder="请输入联系手机"
+            maxlength="11"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+
+const quantity = ref(1);
+</script>
+
+<style></style>

src/pages-booking/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="booking h-screen flex flex-col">
+    <TopNavBar
+      titleAlign="center"
+      backgroundColor="#D9EEFF"
+      backIconColor="#000"
+      :shadow="false"
+    >
+      <template #title>
+        {{ title }}
+      </template>
+    </TopNavBar>
+
+    <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
+        >
+
+        <view
+          class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
+          >温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
+        >
+
+        <view
+          class="border-box flex flex-items-center flex-justify-between pt-12"
+        >
+          <text class="font-size-12 color-43669A line-height-18"
+            >使用时间:周一至周日9:00-22:00</text
+          >
+          <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>
+      </view>
+
+      <!-- 非酒店类型 -->
+      <ContactSection v-if="false" />
+
+      <!-- 酒店类型 -->
+      <UserSection />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import ContactSection from "./components/ConactSection/index.vue";
+import UserSection from "./components/UserSection/index.vue";
+
+const title = ref("预约");
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

src/pages-booking/styles/index.scss

@@ -0,0 +1,4 @@
+.booking {
+  background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%) 0 86px / 100%
+    100px no-repeat;
+}