Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cd1187a1 1 parent 2e7592b7

首页须知和详情页须知调整

Expand all
Inline Side-by-side
Showing 5 changed files with 385 additions and 5 deletions
...@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' { ...@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
18 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar'] 18 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
19 NutCol: typeof import('@nutui/nutui-taro')['Col'] 19 NutCol: typeof import('@nutui/nutui-taro')['Col']
20 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider'] 20 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
21 + NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
21 NutEmpty: typeof import('@nutui/nutui-taro')['Empty'] 22 NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
22 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview'] 23 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
23 NutInput: typeof import('@nutui/nutui-taro')['Input'] 24 NutInput: typeof import('@nutui/nutui-taro')['Input']
......
...@@ -70,3 +70,173 @@ ...@@ -70,3 +70,173 @@
70 width: 100%; 70 width: 100%;
71 height: 100%; 71 height: 100%;
72 } 72 }
73 +
74 +.overlay-body {
75 + display: flex;
76 + height: 100%;
77 + align-items: center;
78 + justify-content: center;
79 +}
80 +.overlay-content {
81 + width: 85%;
82 + height: 80%;
83 + background: #fff;
84 + border-radius: 8px;
85 + overflow: scroll;
86 +}
87 +
88 +.container {
89 + display: grid;
90 + grid-template-columns: auto auto auto auto;
91 + color: #666;
92 + font-size: 1rem;
93 + border-left: 1px solid #ddd;
94 + border-top: 1px solid #ddd;
95 + .item {
96 + border-right: 1px solid #ddd;
97 + border-bottom: 1px solid #ddd;
98 + text-align: center;
99 + // padding: 0.85rem 0;
100 + display: grid;
101 + align-items: center;
102 + }
103 + .item-1 {
104 + grid-column: 1 / 2;
105 + }
106 + .item-2 {
107 + grid-column: 2 / 3;
108 + }
109 + .item-3 {
110 + grid-column: 3 / 4;
111 + }
112 + .item-4 {
113 + grid-column: 4 / 7;
114 + }
115 + .item-5 {
116 + grid-row: 2 / 4
117 + }
118 + // .item-6 {
119 + // grid-column: 3 / 7;
120 + // }
121 + // .item-8 {
122 + // grid-column: 3 / 7;
123 + // }
124 + // .item-9 {
125 + // grid-column: 1 / 3;
126 + // }
127 + // .item-10 {
128 + // grid-column-end: span 4;
129 + // }
130 +}
131 +
132 +// .table {
133 +// display: flex;
134 +// flex-direction: column; /* 排列形式: 向下 */
135 +// margin-top: 50px;
136 +// margin-bottom: 50px;
137 +// }
138 +
139 +// .tr {
140 +// display: flex;
141 +// flex-direction: row;
142 +// }
143 +
144 +// .th, .td { /* 公有的属性 */
145 +// display: flex;
146 +// flex-direction: row;
147 +// flex-wrap: wrap; /* 自动换行 */
148 +// width: 25%; /* 4个25%相加刚好100% */
149 +// text-align: center; /* 文本居中 */
150 +// justify-content:center; /* 主轴居中 */
151 +// align-items: center; /* 交叉轴居中 */
152 +// border-top: 1px solid #dadada; /* 单元格上线框 */
153 +// border-bottom: 1px solid #dadada; /* 单元格下线框 */
154 +// border-left: 1px solid #dadada; /* 单元格左线框 */
155 +// border-right: 1px solid #dadada; /* 单元格右线框 */
156 +// &.rowspan {
157 +// width: 50%;
158 +// }
159 +// }
160 +
161 +// .th {
162 +// font-weight: 800; /* 字体加重 */
163 +// background-color:#B3CCF4; /* 背景色 */
164 +// }
165 +
166 +// .td {
167 +// background-color:#edf3e9; /* 背景色 */
168 +// }
169 +
170 +.table {
171 + display: flex;
172 + flex-direction: column; /* 排列形式: 向下 */
173 + margin-top: 50px;
174 + margin-bottom: 50px;
175 +}
176 +
177 +.tr {
178 + // width: 160%; /* 15% + 25% + 25% + 85% = 150%*/
179 + width: 100%; /* 15% + 25% + 25% + 85% = 150%*/
180 + display: flex;
181 + flex-direction: row;
182 +}
183 +
184 +.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
185 + display: flex;
186 + flex-direction: row;
187 + flex-wrap: wrap; /* 自动换行 */
188 + text-align: center; /* 文本居中 */
189 + justify-content:center; /* 主轴居中 */
190 + align-items: center; /* 交叉轴居中 */
191 + border-top: 1px solid #dadada; /* 单元格上线框 */
192 + border-bottom: 1px solid #dadada; /* 单元格下线框 */
193 + border-left: 1px solid #dadada; /* 单元格左线框 */
194 + border-right: 1px solid #dadada; /* 单元格右线框 */
195 +}
196 +
197 +.th_1, .th_2, .th_3, .th_4 {
198 + font-weight: 800; /* 字体加重 */
199 + background-color:#B3CCF4; /* 背景色 */
200 +}
201 +
202 +.td_1, .td_2, .td_3, .td_4 {
203 + background-color:#edf3e9; /* 背景色 */
204 +}
205 +
206 +.th_1, .td_1 {
207 + width: 25%;
208 + &.rowspan {
209 + width: 50%;
210 + }
211 +}
212 +
213 +.th_2, .td_2 {
214 + width: 25%;
215 +}
216 +
217 +.th_3, .td_3 {
218 + width: 25%;
219 +}
220 +
221 +.th_4, .td_4 {
222 + width: 85%;
223 +}
224 +
225 +.notice-wrapper {
226 + padding: 1rem;
227 +
228 + .notice-content {
229 + .title {
230 + font-weight: bold;
231 + text-align: center;
232 + margin-bottom: 0.5rem;
233 + }
234 + .content {
235 + margin-bottom: 0.5rem;
236 + text-align: justify;
237 + }
238 + .mb-1 {
239 + margin-bottom: 1rem !important;
240 + }
241 + }
242 +}
......
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: 2024-03-28 18:20:06 4 + * @LastEditTime: 2024-05-26 12:52:44
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 * @Description: 房间详情页面 6 * @Description: 房间详情页面
7 --> 7 -->
...@@ -41,6 +41,64 @@ ...@@ -41,6 +41,64 @@
41 </nut-row> 41 </nut-row>
42 </view> 42 </view>
43 <nut-image-preview :show="state.showPreview" :images="state.imgData" :is-Loop="false" @close="hideFn" /> 43 <nut-image-preview :show="state.showPreview" :images="state.imgData" :is-Loop="false" @close="hideFn" />
44 + <nut-overlay
45 + v-model:visible="show_notice"
46 + :lock-scroll="false"
47 + :close-on-click-overlay="false"
48 + >
49 + <view class="overlay-body">
50 + <view class="overlay-content">
51 + <view class="notice-wrapper">
52 + <view class="notice-content">
53 + <view>
54 + <view class="title">本味略影</view>
55 + <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，回归本味。</view>
56 + <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
57 + <view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
58 + <view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
59 + <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
60 + <view class="content">2、古早作息方式，日出而作，日落而息。</view>
61 + <view class="content">3、正念、静心、慢生活。</view>
62 + <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
63 + </view>
64 + <view>
65 + <view class="title">入住须知</view>
66 + <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
67 + <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
68 + <view class="content">3、本味山居周边有野生动物出没，禁止进入山居经营范围外的区域（详见提示牌）。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
69 + <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
70 + <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
71 + <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
72 + <view class="content">7、工作时间：8:00-10:50；14:30-17:00。</view>
73 + <view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
74 + <view class="content">其余时间，无法上岛。</view>
75 + <view class="content">8、入住人员需年满18周岁。</view>
76 + <view class="content">9、取消或变更请及时联系我们。</view>
77 + <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
78 + <view class="content">若入住当天取消，扣除100%费用。</view>
79 + <view class="content mb-1">此须知为入住本位山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
80 + </view>
81 + <view>
82 + <view class="title">配套设施</view>
83 + <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
84 + <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
85 + <view class="content">3、独栋二楼配有景观天窗。</view>
86 + <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
87 + <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
88 + <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
89 + <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
90 + </view>
91 +
92 + <nut-row :gutter="10">
93 + <nut-col :span="24">
94 + <nut-button @tap="agreedNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">同意</nut-button>
95 + </nut-col>
96 + </nut-row>
97 + </view>
98 + </view>
99 + </view>
100 + </view>
101 + </nut-overlay>
44 </view> 102 </view>
45 </template> 103 </template>
46 104
...@@ -195,6 +253,153 @@ onMounted(async () => { ...@@ -195,6 +253,153 @@ onMounted(async () => {
195 } 253 }
196 }); 254 });
197 255
256 +// TODO: 在预定房之前弹出须知，预订者要同意须知
257 +const show_notice = ref(false); // 显示须知
258 +const agreed_notice = ref(false); // 同意须知
259 +
260 +const refuseNotice = () => {
261 + show_notice.value = false;
262 +}
263 +const agreedNotice = () => {
264 + show_notice.value = false;
265 + agreed_notice.value = true;
266 +}
267 +
268 +const table_columns = ref([
269 + {
270 + title: '时间(冬令)',
271 + key: 'winter',
272 + align: 'center'
273 + },
274 + {
275 + title: '时间（夏令)',
276 + key: 'summer',
277 + align: 'center'
278 + },
279 + {
280 + title: '事项',
281 + key: 'matter',
282 + align: 'center'
283 + },
284 + {
285 + title: '备注',
286 + key: 'note',
287 + align: 'center'
288 + }
289 +])
290 +
291 +const table_data = ref([
292 + {
293 + winter: '4:30',
294 + summer: '',
295 + matter: '打板起床',
296 + note: ''
297 + },
298 + {
299 + winter: '4:45-5:30',
300 + summer: '',
301 + matter: '闻思',
302 + note: ''
303 + },
304 + {
305 + winter: '5:40-6:40',
306 + summer: '',
307 + matter: '定课',
308 + note: '小禅堂（提前5分钟到达，5:40后坐迟席)'
309 + },
310 + {
311 + winter: '6.42-6.55',
312 + summer: '',
313 + matter: '八段锦',
314 + note: '六头猪茶室平台'
315 + },
316 + {
317 + winter: '7:00',
318 + summer: '',
319 + matter: '早斋',
320 + note: '斋堂（止语排班）'
321 + },
322 + {
323 + winter: '7:40-8:20',
324 + summer: '',
325 + matter: '晨会',
326 + note: '不迟到'
327 + },
328 + {
329 + winter: '8:20-10:45',
330 + summer: '',
331 + matter: '上午出坡',
332 + note: ''
333 + },
334 + {
335 + winter: '11:00',
336 + summer: '',
337 + matter: '午斋',
338 + note: '斋堂 10:55排班'
339 + },
340 + {
341 + winter: '11:40-13:30',
342 + summer: '',
343 + matter: '午休（宿舍止静）',
344 + note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
345 + },
346 + {
347 + winter: '13:40-14:20',
348 + summer: '13:40-14:50',
349 + matter: '自修',
350 + note: '自修室或各自宿舍'
351 + },
352 + {
353 + winter: '14:30-16:55',
354 + summer: '15:00-17:25',
355 + matter: '下午出坡',
356 + note: ''
357 + },
358 + {
359 + winter: '17:00',
360 + summer: '17:30',
361 + matter: '药石',
362 + note: '斋堂'
363 + },
364 + {
365 + winter: '19:00-21:30',
366 + summer: '',
367 + matter: '自修',
368 + note: '自修室或各自宿舍'
369 + },
370 + {
371 + winter: '20:30-21:30（周四、周六）',
372 + summer: '',
373 + matter: '禅修（必修）',
374 + note: '地点：小禅堂'
375 + },
376 + {
377 + winter: '21：30-22：00',
378 + summer: '',
379 + matter: '宿舍止静',
380 + note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
381 + },
382 + {
383 + winter: '22:00',
384 + summer: '',
385 + matter: '打板媳灯',
386 + note: ''
387 + },
388 + {
389 + winter: '22:00-22:30',
390 + summer: '',
391 + matter: '床上打坐',
392 + note: ''
393 + },
394 +]);
395 +
396 +const table_summary = () => {
397 + return {
398 + value: '早课、午斋、八段锦、禅修等须提前5分钟到达。思惟：无常迅速，时不我待。'
399 + }
400 +}
401 +
402 +
198 // 预定房间 403 // 预定房间
199 const goToConfirm = async () => { 404 const goToConfirm = async () => {
200 let params = getCurrentPageParam(); 405 let params = getCurrentPageParam();
...@@ -204,6 +409,11 @@ const goToConfirm = async () => { ...@@ -204,6 +409,11 @@ const goToConfirm = async () => {
204 state.phone = myInfoData.data.wxapp_user_phone; 409 state.phone = myInfoData.data.wxapp_user_phone;
205 } 410 }
206 if (state.phone) { 411 if (state.phone) {
412 + // 弹出用户须知
413 + if (!agreed_notice.value) {
414 + show_notice.value = true;
415 + return false;
416 + }
207 // 查看是否选择日期 417 // 查看是否选择日期
208 if (!start_date.value || !end_date.value) { 418 if (!start_date.value || !end_date.value) {
209 Taro.showToast({ 419 Taro.showToast({
......
...@@ -86,18 +86,16 @@ ...@@ -86,18 +86,16 @@
86 justify-content: center; 86 justify-content: center;
87 } 87 }
88 .overlay-content { 88 .overlay-content {
89 - // display: flex;
90 width: 85%; 89 width: 85%;
91 - height: 80%; 90 + max-height: 70%;
92 background: #fff; 91 background: #fff;
93 border-radius: 8px; 92 border-radius: 8px;
94 - // align-items: center;
95 - // justify-content: center;
96 overflow: scroll; 93 overflow: scroll;
97 } 94 }
98 95
99 .notice-wrapper { 96 .notice-wrapper {
100 padding: 1rem; 97 padding: 1rem;
98 +
101 .notice-content { 99 .notice-content {
102 .title { 100 .title {
103 font-weight: bold; 101 font-weight: bold;
...@@ -106,6 +104,7 @@ ...@@ -106,6 +104,7 @@
106 } 104 }
107 .content { 105 .content {
108 margin-bottom: 0.5rem; 106 margin-bottom: 0.5rem;
107 + text-align: justify;
109 } 108 }
110 .mb-1 { 109 .mb-1 {
111 margin-bottom: 1rem !important; 110 margin-bottom: 1rem !important;
......
This diff is collapsed. Click to expand it.