|
|
@@ -0,0 +1,230 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import DatePicker from '../components/DatePicker.vue'
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+const { statusBarHeight, opcity } = storeToRefs(useSysStore())
|
|
|
+
|
|
|
+// 轮播图数据
|
|
|
+const swiperList = ref([
|
|
|
+ 'https://picsum.photos/400/300?random=1',
|
|
|
+ 'https://picsum.photos/400/300?random=2',
|
|
|
+ 'https://picsum.photos/400/300?random=3',
|
|
|
+])
|
|
|
+const currentSwiper = ref(0)
|
|
|
+
|
|
|
+// 选中的日期
|
|
|
+const selectedDate = ref(new Date(2026, 2, 21)) // 默认选中2026年3月21日
|
|
|
+
|
|
|
+// 日历数据(按月份存储,key为 'YYYY-MM')
|
|
|
+const calendarDataMap = ref<Record<string, Array<{ day: number, status?: string, price?: number, selected?: boolean }>>>({
|
|
|
+ '2026-03': [
|
|
|
+ { day: 21, status: '充足', price: 290 },
|
|
|
+ { day: 27, status: '售罄', price: 290 },
|
|
|
+ ],
|
|
|
+ '2026-04': [
|
|
|
+ { day: 1, status: '充足', price: 280 },
|
|
|
+ { day: 5, status: '紧张', price: 300 },
|
|
|
+ { day: 10, status: '售罄', price: 280 },
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+// 当前显示的月份
|
|
|
+const currentYearMonth = ref({ year: 2026, month: 3 })
|
|
|
+
|
|
|
+// 获取当前月份的日期数据
|
|
|
+const currentMonthDays = computed(() => {
|
|
|
+ const key = `${currentYearMonth.value.year}-${String(currentYearMonth.value.month).padStart(2, '0')}`
|
|
|
+ return calendarDataMap.value[key] || []
|
|
|
+})
|
|
|
+
|
|
|
+// 景区信息
|
|
|
+const attractionInfo = ref({
|
|
|
+ name: '贵州黄果树风景名胜区',
|
|
|
+ address: '镇宁布依族苗族自治县-黄果树镇贵黄公路',
|
|
|
+ price: 290,
|
|
|
+ title: '日场门票+观光车+飞越黄果树观影票+吉祥物+冰箱贴 经典必打卡',
|
|
|
+})
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'attractions-detail',
|
|
|
+ islogin: false,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '',
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ opcity.value = 0
|
|
|
+})
|
|
|
+
|
|
|
+onPageScroll((e) => {
|
|
|
+ const calculatedOpacity = e.scrollTop / 100
|
|
|
+ opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
|
|
|
+})
|
|
|
+
|
|
|
+function handleNav() {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: 25.9913,
|
|
|
+ longitude: 105.6687,
|
|
|
+ name: attractionInfo.value.name,
|
|
|
+ address: attractionInfo.value.address,
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handleService() {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: '400-123-4567',
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handleOrder() {
|
|
|
+ router.push({ name: 'attractions-order' })
|
|
|
+}
|
|
|
+
|
|
|
+function handleBook() {
|
|
|
+ useGlobalToast().show('立即预定')
|
|
|
+}
|
|
|
+
|
|
|
+// 处理日期选择
|
|
|
+function handleDateSelect(e: { date: Date, day: number, item?: any }) {
|
|
|
+ selectedDate.value = e.date
|
|
|
+ console.log('选中日期:', e.date, '日期数据:', e.item)
|
|
|
+}
|
|
|
+
|
|
|
+// 处理月份变化
|
|
|
+function handleMonthChange(e: { year: number, month: number }) {
|
|
|
+ currentYearMonth.value = { year: e.year, month: e.month }
|
|
|
+ console.log('切换月份:', e.year, '年', e.month, '月')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="min-h-screen bg-#F5F5F5">
|
|
|
+ <wd-navbar
|
|
|
+ title="景区门票"
|
|
|
+ :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`"
|
|
|
+ :bordered="false"
|
|
|
+ :z-index="9999"
|
|
|
+ safe-area-inset-top
|
|
|
+ left-arrow
|
|
|
+ fixed
|
|
|
+ @click-left="router.back()"
|
|
|
+ />
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <wd-swiper
|
|
|
+ v-model:current="currentSwiper"
|
|
|
+ :list="swiperList"
|
|
|
+ :indicator="false"
|
|
|
+ :height="300"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 价格标题区域 -->
|
|
|
+ <view class="relative z-10 rounded-t-32rpx bg-white px24rpx pt30rpx -mt-30rpx">
|
|
|
+ <view class="flex items-baseline text-#FF4D3A">
|
|
|
+ <text class="text-24rpx">
|
|
|
+ ¥
|
|
|
+ </text>
|
|
|
+ <text class="mx4rpx text-48rpx font-bold">
|
|
|
+ {{ attractionInfo.price }}
|
|
|
+ </text>
|
|
|
+ <text class="text-24rpx text-gray">
|
|
|
+ 起
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-32rpx font-semibold line-height-[1.4]">
|
|
|
+ {{ attractionInfo.title }}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 地址导航卡片 -->
|
|
|
+ <view
|
|
|
+ class="mt24rpx h160rpx flex items-center justify-between bg-cover bg-center px24rpx"
|
|
|
+ :style="{ backgroundImage: `url(${StaticUrl}/djk-shop-nav-bg.png)` }"
|
|
|
+ >
|
|
|
+ <view class="w450rpx">
|
|
|
+ <view class="line-clamp-1 text-32rpx font-semibold">
|
|
|
+ {{ attractionInfo.name }}
|
|
|
+ </view>
|
|
|
+ <view class="line-clamp-1 mt12rpx flex items-center text-24rpx text-gray">
|
|
|
+ {{ attractionInfo.address }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center justify-center" @click="handleNav">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/djk-shop-dh.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt8rpx text-24rpx">
|
|
|
+ 导航
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 选择日期 -->
|
|
|
+ <DatePicker
|
|
|
+ v-model="selectedDate"
|
|
|
+ title="选择日期"
|
|
|
+ :day-data="currentMonthDays"
|
|
|
+ class="mt24rpx"
|
|
|
+ @select="handleDateSelect"
|
|
|
+ @month-change="handleMonthChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 预定须知 -->
|
|
|
+ <view class="mt24rpx pb40rpx">
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
+ 预定须知
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-28rpx font-semibold">
|
|
|
+ 退款说明
|
|
|
+ </view>
|
|
|
+ <view class="mt12rpx text-26rpx text-gray line-height-[1.6]">
|
|
|
+ <view>使用日期当天23:59(含)之前申请取消,不收取损失费</view>
|
|
|
+ <view class="mt8rpx">
|
|
|
+ 使用日期当天23:59之后申请取消,收取100%损失费;激活后不可退
|
|
|
+ </view>
|
|
|
+ <view class="mt8rpx">
|
|
|
+ 如使用优惠,则损失费用按照优惠前金额的比例收取,最高不超过实付金额
|
|
|
+ </view>
|
|
|
+ <view class="mt8rpx">
|
|
|
+ 产品不支持部分退
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部占位 -->
|
|
|
+ <view class="h120rpx" />
|
|
|
+
|
|
|
+ <!-- 底部操作栏 -->
|
|
|
+ <view
|
|
|
+ class="fixed bottom-0 left-0 z-100 box-border w-full flex items-center justify-between border-t border-#eee bg-white px24rpx py16rpx"
|
|
|
+ :style="{ paddingBottom: `${(Number(statusBarHeight) || 44) - 20}px` }"
|
|
|
+ >
|
|
|
+ <view class="flex items-center border-t-#EEEEEE">
|
|
|
+ <view class="mr-40rpx flex flex-col items-center" @click="handleService">
|
|
|
+ <wd-icon name="service" size="22px" color="#666" />
|
|
|
+ <text class="mt4rpx text-22rpx text-#666">
|
|
|
+ 客服
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center" @click="handleOrder">
|
|
|
+ <wd-icon name="list" size="22px" color="#666" />
|
|
|
+ <text class="mt4rpx text-22rpx text-#666">
|
|
|
+ 订单
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="h80rpx w-400rpx flex items-center justify-center rounded-40rpx bg-#9ED605 px80rpx text-28rpx text-#FFF font-semibold"
|
|
|
+ @click="handleBook"
|
|
|
+ >
|
|
|
+ 立即预定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|