|
|
@@ -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>
|