Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d67276b1 1 parent e62cce05

fix 房间详情完善

Inline Side-by-side
Showing 2 changed files with 71 additions and 15 deletions
1 +.detail-page {
2 + position: relative;
3 + height: 100vh;
4 + .detail-info-wrapper {
5 + padding: 1rem;
6 + }
7 + .book-cal {
8 + padding: 0 0.75rem;
9 + }
10 + .no-calendar-border {
11 + width: 100%;
12 + height: 1rpx;
13 + background-color: rgb(244, 244, 244);
14 + }
15 + .detail-introduce-title {
16 + padding: 1rem;
17 + text-align: center;
18 + font-weight: bold;
19 + }
20 + .detail-introduce-html {
21 + padding: 0 1rem;
22 + }
23 + .book-bar {
24 + position: fixed;
25 + bottom: 0;
26 + left: 0;
27 + right: 0;
28 + background-color: #fff;
29 + height: 4rem;
30 + padding: 30rpx 30rpx 20rpx 30rpx;
31 + box-shadow: 0px -5px 4px 0px rgba(0, 0, 0, 0.07);
32 + .book-price {
33 + height: 2rem;
34 + margin-left: 0.5rem;
35 + display: flex;
36 + align-items: center;
37 + }
38 + .book-btn {
39 + background-color: #6a4925;
40 + border-radius: 1.25rem;
41 + padding: 0.25rem 0.5rem;
42 + color: #fff;
43 + text-align: center;
44 + height: 2rem;
45 + line-height: 2rem;
46 + }
47 + }
48 +}
1 .nut-swiper-item { 49 .nut-swiper-item {
2 // line-height: 250px; 50 // line-height: 250px;
3 } 51 }
...@@ -5,6 +53,3 @@ ...@@ -5,6 +53,3 @@
5 width: 100%; 53 width: 100%;
6 height: 100%; 54 height: 100%;
7 } 55 }
8 -.book-cal {
9 - padding: 0 0.75rem;
10 -}
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-19 15:21:03 4 + * @LastEditTime: 2023-12-20 11:19:46
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 - * @Description: 文件描述 6 + * @Description: 房间详情页面
7 --> 7 -->
8 <template> 8 <template>
9 - <view style="position: relative; height: 100vh;"> 9 + <view class="detail-page">
10 <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000"> 10 <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
11 <nut-swiper-item v-for="(item, index) in state.imgData" :key="index"> 11 <nut-swiper-item v-for="(item, index) in state.imgData" :key="index">
12 <image @tap="showFn" style="width: 100%; height: 150px;" mode="aspectFill" :src="item.src" /> 12 <image @tap="showFn" style="width: 100%; height: 150px;" mode="aspectFill" :src="item.src" />
13 </nut-swiper-item> 13 </nut-swiper-item>
14 </nut-swiper> 14 </nut-swiper>
15 - <view style="padding: 1rem;"> 15 + <view class="detail-info-wrapper">
16 <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view> 16 <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
17 <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view> 17 <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
18 </view> 18 </view>
19 - <view vif="!showBook" style="width: 100%; height: 1rpx; background-color: rgb(244, 244, 244);"></view> 19 + <!-- 日历选择器 -->
20 - <view v-if="showBook" id="book-cal" class="book-cal"> 20 + <view v-if="showBook" class="book-cal">
21 <calendar-select @on-dates-change="onDatesChange"></calendar-select> 21 <calendar-select @on-dates-change="onDatesChange"></calendar-select>
22 </view> 22 </view>
23 - <view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view> 23 + <view v-else class="no-calendar-border"></view>
24 - <view style="padding: 0 1rem;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem quibusdam nostrum numquam quaerat corporis totam similique expedita, omnis ratione aut magnam nihil. Modi repudiandae at minus enim beatae fugit. Modi.</view> 24 + <!-- END -->
25 - <view v-if="showBook" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 30rpx 30rpx 20rpx 30rpx;box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.07);"> 25 + <view class="detail-introduce-title">房间介绍</view>
26 + <view class="detail-introduce-html">
27 + <view id="taro_html" v-html="taro_html" class="taro_html"></view>
28 + </view>
29 + <view v-if="showBook" class="book-bar">
26 <nut-row> 30 <nut-row>
27 <nut-col :span="18"> 31 <nut-col :span="18">
28 - <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;"> 32 + <view class="book-price">
29 <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text> 33 <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
30 <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text> 34 <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
31 </view> 35 </view>
32 </nut-col> 36 </nut-col>
33 <nut-col :span="6"> 37 <nut-col :span="6">
34 - <view @tap="goToConfirm" style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">预定</view> 38 + <view class="book-btn" @tap="goToConfirm">预定</view>
35 </nut-col> 39 </nut-col>
36 </nut-row> 40 </nut-row>
37 </view> 41 </view>
...@@ -41,8 +45,15 @@ ...@@ -41,8 +45,15 @@
41 45
42 <script setup> 46 <script setup>
43 import Taro from '@tarojs/taro' 47 import Taro from '@tarojs/taro'
44 -import { ref, computed, reactive } from "vue"; 48 +import { ref, computed, reactive, onMounted } from "vue";
45 import calendarSelect from '@/components/calendarSelect.vue' 49 import calendarSelect from '@/components/calendarSelect.vue'
50 +import { getCurrentPageParam } from "@/utils/weapp";
51 +
52 +onMounted(() => {
53 + console.warn('id', getCurrentPageParam().id);
54 +});
55 +
56 +const taro_html = ref('<div>123</div>');
46 57
47 // TODO: 到时候根据后端实际字段修改 58 // TODO: 到时候根据后端实际字段修改
48 // const book_status = ref('已约满'); 59 // const book_status = ref('已约满');
......