index.vue
3.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 11:45:01
* @FilePath: /meihuaApp/src/pages/detail/index.vue
* @Description: 房间详情页面
-->
<template>
<view class="detail-page">
<nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
<nut-swiper-item v-for="(item, index) in state.imgData" :key="index">
<image @tap="showFn" style="width: 100%; height: 150px;" mode="aspectFill" :src="item.src" />
</nut-swiper-item>
</nut-swiper>
<view class="detail-info-wrapper">
<view class="detail-info-title">非凡魅力豪华总统套房</view>
<view class="detail-info-content">两室 宜住3人</view>
</view>
<!-- 日历选择器 -->
<view v-if="showBook" class="book-cal">
<calendar-select @on-dates-change="onDatesChange"></calendar-select>
</view>
<view v-else class="no-calendar-border"></view>
<!-- END -->
<view class="detail-introduce-title">房间介绍</view>
<view class="detail-introduce-html">
<view id="taro_html" v-html="taro_html" class="taro_html"></view>
</view>
<view v-if="showBook" class="book-bar">
<nut-row>
<nut-col :span="18">
<view class="book-price">
<text class="price">￥980</text>
<text class="old-price">￥1280</text>
</view>
</nut-col>
<nut-col :span="6">
<view class="book-btn" @tap="goToConfirm">预定</view>
</nut-col>
</nut-row>
</view>
<nut-image-preview :show="state.showPreview" :images="state.imgData" :is-Loop="false" @close="hideFn" />
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, computed, reactive, onMounted } from "vue";
import calendarSelect from '@/components/calendarSelect.vue'
import { getCurrentPageParam } from "@/utils/weapp";
onMounted(() => {
console.warn('id', getCurrentPageParam().id);
});
const taro_html = ref('<div>123</div>');
// TODO: 到时候根据后端实际字段修改
// const book_status = ref('已约满');
const book_status = ref('');
const showBook = computed(() => {
return book_status.value !== '已约满'
});
const start_date = ref('');
const end_date = ref('');
const between_date = ref('');
const start_date_week = ref('');
const end_date_week = ref('');
const onDatesChange = ({ startDate, endDate, betweenDate, startDateWeek, endDateWeek }) => {
start_date.value = startDate;
end_date.value = endDate;
start_date_week.value = startDateWeek;
end_date_week.value = endDateWeek;
between_date.value = betweenDate;
}
const page = ref(1);
const goToConfirm = () => {
Taro.navigateTo({
url: `/pages/confirm/index?id=123&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}`,
})
}
const state = reactive({
showPreview: false,
imgData: [
{
src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
},
{
src: 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png'
},
{
src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
},
{
src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
}
]
});
const showFn = () => {
state.showPreview = true;
};
const hideFn = () => {
state.showPreview = false;
};
</script>
<script>
import "./index.less";
export default {
name: "detailPage",
};
</script>