Explorar el Código

```
feat(attractions): 新增景点预订页面组件

新增景点预订功能的核心页面组件,为用户提供景点预约服务。
```

zouzexu hace 11 horas
padre
commit
9b94929552

+ 138 - 0
src/subPack-attractions/attractionsReservation/attractionsReservation.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+definePage({
+  name: 'attractions-reservation-info',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '预定信息',
+  },
+})
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
+const value = ref('选项1')
+
+function handleConfirm({ value }) {
+  value.value = value
+}
+</script>
+
+<template>
+  <view class="reservation-info-page">
+    <view class="px-24rpx">
+      <view class="h-20rpx" />
+      <view class="rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-32rpx font-bold">
+          日场门票+观光车+飞越黄果树观影票+吉祥物+冰箱贴 经典必打卡
+        </view>
+        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
+        <view class="mt-24rpx flex items-center gap-10rpx text-28rpx">
+          <wd-icon name="calendar" size="22px" />
+          <text>选定日期:2026年3月22日</text>
+        </view>
+      </view>
+      <view class="mt-20rpx flex items-center justify-between rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx">
+          选择数量
+        </view>
+        <view class="flex items-center gap-24rpx">
+          <view class="h-36rpx w-36rpx rounded-50% bg-#F0F0F0 text-center text-28rpx text-#AAAAAA font-600 line-height-[36rpx]">
+            -
+          </view>
+          <view class="text-24rpx font-400">
+            10
+          </view>
+          <view class="h-36rpx w-36rpx rounded-50% bg-#E8FFA7 text-center text-28rpx text-#9ED605 font-600 line-height-[36rpx]">
+            +
+          </view>
+        </view>
+      </view>
+      <!-- 单游客start -->
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx font-bold">
+          联系人
+        </view>
+        <view>
+          <wd-input placeholder="请输入联系人姓名" label="联系人姓名" required />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-picker v-model="value" required :columns="columns" label="证件类型" @confirm="handleConfirm" />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-input placeholder="请输入证件号码" label="证件号码" required />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-input placeholder="请输入手机号码" label="手机号码" required />
+        </view>
+      </view>
+      <!-- 单游客end -->
+      <!-- 多游客start -->
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx font-bold">
+          联系人
+        </view>
+        <view>
+          <wd-input placeholder="请输入联系人姓名" label="联系人姓名" required />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-input placeholder="请输入手机号码" label="手机号码" required />
+        </view>
+      </view>
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx font-bold">
+          游客信息
+        </view>
+        <view>
+          <wd-input placeholder="请输入游客姓名" label="游客姓名1" required />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-picker v-model="value" required :columns="columns" label="证件类型" @confirm="handleConfirm" />
+        </view>
+        <view class="h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-input placeholder="请输入证件号码" label="证件号码" required />
+        </view>
+      </view>
+      <!-- 多游客end -->
+      <view class="mt-20rpx rounded-16rpx bg-#FFF">
+        <wd-input placeholder="如有特殊需要,请留言" label="订单备注" />
+      </view>
+      <view class="mt-20rpx flex items-center justify-between rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx">
+          当前可用积分
+        </view>
+        <view class="text-32rpx font-bold">
+          1000积分
+        </view>
+      </view>
+    </view>
+    <view class="fixed bottom-0 left-0 z-100 box-border h-174rpx w-full flex items-center justify-between bg-#FFF px-24rpx">
+      <view class="flex items-center">
+        <view class="text-24rpx">
+          合计
+        </view>
+        <view class="text-32rpx text-#FF4A39 font-bold">
+          <text class="text-26rpx">
+            ¥
+          </text>
+          290
+        </view>
+      </view>
+      <view class="flex items-center gap-20rpx">
+        <view class="flex items-center">
+          <text class="text-24rpx">
+            明细
+          </text>
+          <wd-icon name="arrow-up" size="18px" />
+        </view>
+        <view class="h-80rpx w-180rpx rounded-40rpx bg-#9ED605 text-center text-28rpx text-#FFF font-bold line-height-[80rpx]">
+          提交
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>