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' {
NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
......
......@@ -70,3 +70,173 @@
width: 100%;
height: 100%;
}
.overlay-body {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.overlay-content {
width: 85%;
height: 80%;
background: #fff;
border-radius: 8px;
overflow: scroll;
}
.container {
display: grid;
grid-template-columns: auto auto auto auto;
color: #666;
font-size: 1rem;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
.item {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
text-align: center;
// padding: 0.85rem 0;
display: grid;
align-items: center;
}
.item-1 {
grid-column: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
}
.item-3 {
grid-column: 3 / 4;
}
.item-4 {
grid-column: 4 / 7;
}
.item-5 {
grid-row: 2 / 4
}
// .item-6 {
// grid-column: 3 / 7;
// }
// .item-8 {
// grid-column: 3 / 7;
// }
// .item-9 {
// grid-column: 1 / 3;
// }
// .item-10 {
// grid-column-end: span 4;
// }
}
// .table {
// display: flex;
// flex-direction: column; /* 排列形式: 向下 */
// margin-top: 50px;
// margin-bottom: 50px;
// }
// .tr {
// display: flex;
// flex-direction: row;
// }
// .th, .td { /* 公有的属性 */
// display: flex;
// flex-direction: row;
// flex-wrap: wrap; /* 自动换行 */
// width: 25%; /* 4个25%相加刚好100% */
// text-align: center; /* 文本居中 */
// justify-content:center; /* 主轴居中 */
// align-items: center; /* 交叉轴居中 */
// border-top: 1px solid #dadada; /* 单元格上线框 */
// border-bottom: 1px solid #dadada; /* 单元格下线框 */
// border-left: 1px solid #dadada; /* 单元格左线框 */
// border-right: 1px solid #dadada; /* 单元格右线框 */
// &.rowspan {
// width: 50%;
// }
// }
// .th {
// font-weight: 800; /* 字体加重 */
// background-color:#B3CCF4; /* 背景色 */
// }
// .td {
// background-color:#edf3e9; /* 背景色 */
// }
.table {
display: flex;
flex-direction: column; /* 排列形式: 向下 */
margin-top: 50px;
margin-bottom: 50px;
}
.tr {
// width: 160%; /* 15% + 25% + 25% + 85% = 150%*/
width: 100%; /* 15% + 25% + 25% + 85% = 150%*/
display: flex;
flex-direction: row;
}
.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 自动换行 */
text-align: center; /* 文本居中 */
justify-content:center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
border-top: 1px solid #dadada; /* 单元格上线框 */
border-bottom: 1px solid #dadada; /* 单元格下线框 */
border-left: 1px solid #dadada; /* 单元格左线框 */
border-right: 1px solid #dadada; /* 单元格右线框 */
}
.th_1, .th_2, .th_3, .th_4 {
font-weight: 800; /* 字体加重 */
background-color:#B3CCF4; /* 背景色 */
}
.td_1, .td_2, .td_3, .td_4 {
background-color:#edf3e9; /* 背景色 */
}
.th_1, .td_1 {
width: 25%;
&.rowspan {
width: 50%;
}
}
.th_2, .td_2 {
width: 25%;
}
.th_3, .td_3 {
width: 25%;
}
.th_4, .td_4 {
width: 85%;
}
.notice-wrapper {
padding: 1rem;
.notice-content {
.title {
font-weight: bold;
text-align: center;
margin-bottom: 0.5rem;
}
.content {
margin-bottom: 0.5rem;
text-align: justify;
}
.mb-1 {
margin-bottom: 1rem !important;
}
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-03-28 18:20:06
* @LastEditTime: 2024-05-26 12:52:44
* @FilePath: /meihuaApp/src/pages/detail/index.vue
* @Description: 房间详情页面
-->
......@@ -41,6 +41,64 @@
</nut-row>
</view>
<nut-image-preview :show="state.showPreview" :images="state.imgData" :is-Loop="false" @close="hideFn" />
<nut-overlay
v-model:visible="show_notice"
:lock-scroll="false"
:close-on-click-overlay="false"
>
<view class="overlay-body">
<view class="overlay-content">
<view class="notice-wrapper">
<view class="notice-content">
<view>
<view class="title">本味略影</view>
<view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，回归本味。</view>
<view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
<view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
<view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
<view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
<view class="content">2、古早作息方式，日出而作，日落而息。</view>
<view class="content">3、正念、静心、慢生活。</view>
<view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
</view>
<view>
<view class="title">入住须知</view>
<view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
<view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
<view class="content">3、本味山居周边有野生动物出没，禁止进入山居经营范围外的区域（详见提示牌）。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
<view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
<view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
<view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
<view class="content">7、工作时间：8:00-10:50；14:30-17:00。</view>
<view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
<view class="content">其余时间，无法上岛。</view>
<view class="content">8、入住人员需年满18周岁。</view>
<view class="content">9、取消或变更请及时联系我们。</view>
<view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
<view class="content">若入住当天取消，扣除100%费用。</view>
<view class="content mb-1">此须知为入住本位山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
</view>
<view>
<view class="title">配套设施</view>
<view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
<view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
<view class="content">3、独栋二楼配有景观天窗。</view>
<view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
<view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
<view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
<view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
</view>
<nut-row :gutter="10">
<nut-col :span="24">
<nut-button @tap="agreedNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">同意</nut-button>
</nut-col>
</nut-row>
</view>
</view>
</view>
</view>
</nut-overlay>
</view>
</template>
......@@ -195,6 +253,153 @@ onMounted(async () => {
}
});
// TODO: 在预定房之前弹出须知，预订者要同意须知
const show_notice = ref(false); // 显示须知
const agreed_notice = ref(false); // 同意须知
const refuseNotice = () => {
show_notice.value = false;
}
const agreedNotice = () => {
show_notice.value = false;
agreed_notice.value = true;
}
const table_columns = ref([
{
title: '时间(冬令)',
key: 'winter',
align: 'center'
},
{
title: '时间（夏令)',
key: 'summer',
align: 'center'
},
{
title: '事项',
key: 'matter',
align: 'center'
},
{
title: '备注',
key: 'note',
align: 'center'
}
])
const table_data = ref([
{
winter: '4:30',
summer: '',
matter: '打板起床',
note: ''
},
{
winter: '4:45-5:30',
summer: '',
matter: '闻思',
note: ''
},
{
winter: '5:40-6:40',
summer: '',
matter: '定课',
note: '小禅堂（提前5分钟到达，5:40后坐迟席)'
},
{
winter: '6.42-6.55',
summer: '',
matter: '八段锦',
note: '六头猪茶室平台'
},
{
winter: '7:00',
summer: '',
matter: '早斋',
note: '斋堂（止语排班）'
},
{
winter: '7:40-8:20',
summer: '',
matter: '晨会',
note: '不迟到'
},
{
winter: '8:20-10:45',
summer: '',
matter: '上午出坡',
note: ''
},
{
winter: '11:00',
summer: '',
matter: '午斋',
note: '斋堂 10:55排班'
},
{
winter: '11:40-13:30',
summer: '',
matter: '午休（宿舍止静）',
note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
},
{
winter: '13:40-14:20',
summer: '13:40-14:50',
matter: '自修',
note: '自修室或各自宿舍'
},
{
winter: '14:30-16:55',
summer: '15:00-17:25',
matter: '下午出坡',
note: ''
},
{
winter: '17:00',
summer: '17:30',
matter: '药石',
note: '斋堂'
},
{
winter: '19:00-21:30',
summer: '',
matter: '自修',
note: '自修室或各自宿舍'
},
{
winter: '20:30-21:30（周四、周六）',
summer: '',
matter: '禅修（必修）',
note: '地点：小禅堂'
},
{
winter: '21：30-22：00',
summer: '',
matter: '宿舍止静',
note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
},
{
winter: '22:00',
summer: '',
matter: '打板媳灯',
note: ''
},
{
winter: '22:00-22:30',
summer: '',
matter: '床上打坐',
note: ''
},
]);
const table_summary = () => {
return {
value: '早课、午斋、八段锦、禅修等须提前5分钟到达。思惟：无常迅速，时不我待。'
}
}
// 预定房间
const goToConfirm = async () => {
let params = getCurrentPageParam();
......@@ -204,6 +409,11 @@ const goToConfirm = async () => {
state.phone = myInfoData.data.wxapp_user_phone;
}
if (state.phone) {
// 弹出用户须知
if (!agreed_notice.value) {
show_notice.value = true;
return false;
}
// 查看是否选择日期
if (!start_date.value || !end_date.value) {
Taro.showToast({
......
......@@ -86,18 +86,16 @@
justify-content: center;
}
.overlay-content {
// display: flex;
width: 85%;
height: 80%;
max-height: 70%;
background: #fff;
border-radius: 8px;
// align-items: center;
// justify-content: center;
overflow: scroll;
}
.notice-wrapper {
padding: 1rem;
.notice-content {
.title {
font-weight: bold;
......@@ -106,6 +104,7 @@
}
.content {
margin-bottom: 0.5rem;
text-align: justify;
}
.mb-1 {
margin-bottom: 1rem !important;
......
This diff is collapsed. Click to expand it.