Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
24bba7ac 1 parent 9d744aa3

细节修改

Inline Side-by-side
Showing 10 changed files with 141 additions and 44 deletions
......@@ -14,13 +14,12 @@ declare module '@vue/runtime-core' {
NavBar: typeof import('./src/components/navBar.vue')['default']
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
NutAvatarCropper: typeof import('@nutui/nutui-taro')['AvatarCropper']
NutBacktop: typeof import('@nutui/nutui-taro')['Backtop']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutCountdown: typeof import('@nutui/nutui-taro')['Countdown']
NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
......@@ -34,7 +33,6 @@ declare module '@vue/runtime-core' {
NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
NutTag: typeof import('@nutui/nutui-taro')['Tag']
NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
NutToast: typeof import('@nutui/nutui-taro')['Toast']
OrderCard: typeof import('./src/components/orderCard.vue')['default']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
<!--
* @Date: 2023-12-13 13:42:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 14:01:57
* @LastEditTime: 2023-12-19 15:02:45
* @FilePath: /meihuaApp/src/components/roomCard.vue
* @Description: 文件描述
-->
<template>
<div class="room-card-component" @tap="handleTap">
<image style="width: 100%; height: 10rem;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<view class="room-card-component" @tap="handleTap">
<image style="width: 100%; height: 10rem;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
<view style="padding: 0.5rem;">
<nut-row>
<nut-col span="18">
......@@ -20,23 +20,40 @@
</nut-col>
</nut-row>
</view>
</div>
<view style="width: 100%; height: 10rem; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5);">
<view style="position: absolute; left: calc(50% - 200rpx / 2); right: 0; top: 50rpx;">
<image style="width: 200rpx; height: 200rpx;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { ref, defineProps, onMounted } from 'vue'
import Taro from '@tarojs/taro'
const props = defineProps({
status: {
type: String,
default: '',
},
});
const handleTap = () => {
Taro.navigateTo({
url: '../detail/index',
})
}
onMounted(() => {
console.warn(props.status);
})
</script>
<style lang="less">
.room-card-component {
position: relative;
margin: 1rem;
background-color: white;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 11:19:03
* @LastEditTime: 2023-12-19 15:01:47
* @FilePath: /meihuaApp/src/pages/book/index.vue
* @Description: 文件描述
-->
......@@ -12,13 +12,13 @@
<calendar-select @on-dates-change="onDatesChange"></calendar-select>
</view>
<view class="book-type">
<nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
<nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item">
<nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
<view v-if="showContent" class="book-list">
<scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in 10" :key="index">
<room-card :key="index"></room-card>
<view v-if="index === 9" style="height: 2rem;"></view>
<view v-for="(item, index) in bookList" :key="index">
<room-card :key="index" :status="item.status"></room-card>
<view v-if="index === bookList.length - 1" style="height: 2rem;"></view>
</view>
</scroll-view>
</view>
......@@ -32,7 +32,7 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import { ref, onMounted } from "vue";
import navBar from '@/components/navBar.vue'
import calendarSelect from '@/components/calendarSelect.vue'
import roomCard from '@/components/roomCard.vue'
......@@ -42,7 +42,40 @@ const onDatesChange = ({ startDate, endDate }) => {
}
const value = ref('0');
const list = new Array(5).fill(0).map((_, index) => index);
const tabList = ref([{
title: '全部',
key: '0',
}, {
title: '总统套房',
key: '1',
}, {
title: '豪华套间',
key: '2',
}, {
title: '家庭豪华间',
key: '3',
}, {
title: '连排别墅',
key: '4',
}]);
const bookList = ref([]);
onMounted(() => {
for (let index = 0; index < 5; index++) {
bookList.value.push({
id: index,
title: '标题',
price: 100,
status: 'all',
});
}
});
const onTabClick = ({ title, paneKey, disabled }) => {
console.warn(title, paneKey);
}
</script>
<script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-16 08:29:08
* @LastEditTime: 2023-12-19 15:34:49
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 文件描述
-->
......@@ -14,7 +14,7 @@
<view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</view>
</nut-col>
<nut-col :span="8">
<image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
</nut-col>
</nut-row>
</view>
......@@ -24,7 +24,7 @@
<view style="font-weight: bold; color: #0B0B0B; font-size: 1rem;">预定房间数</view>
</nut-col>
<nut-col :span="8" style="text-align: center;">
<nut-input-number v-model="value" min="1" button-size="30" input-width="50" />
<nut-input-number v-model="book_count" min="1" button-size="30" input-width="50" @blur="onBookCountBlur" />
</nut-col>
</nut-row>
</view>
......@@ -79,13 +79,13 @@
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio label="1">
本人入住
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
<template #icon><IconFont name="checked"></IconFont></template>
<template #checkedIcon><IconFont name="checked" color="red"></IconFont></template>
</nut-radio>
<nut-radio label="2">
帮别人订
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
<template #icon><IconFont name="checked"></IconFont></template>
<template #checkedIcon><IconFont name="checked" color="red"></IconFont></template>
</nut-radio>
</nut-radio-group>
</view>
......@@ -144,9 +144,9 @@
import Taro from '@tarojs/taro'
import { ref, reactive, onMounted } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { Checklist } from '@nutui/icons-vue-taro';
import { IconFont } from '@nutui/icons-vue-taro';
const radioVal = ref('1');
const value = ref(1);
const book_count = ref(1);
const visible = ref(false);
const basicData = reactive({
name: '',
......@@ -160,7 +160,9 @@ onMounted(() => {
});
const goPay = () => {
Taro.navigateTo({
url: '/pages/payInfo/index?id=123',
});
}
function showKeyBoard() {
......@@ -170,6 +172,12 @@ function showKeyBoard() {
function close() {
visible.value = false;
}
const onBookCountBlur = (evt) => {
if (isNaN(evt.detail.value)){
book_count.value = 1;
}
}
</script>
<script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 17:10:51
* @LastEditTime: 2023-12-19 15:21:03
* @FilePath: /meihuaApp/src/pages/detail/index.vue
* @Description: 文件描述
-->
<template>
<view style="position: relative; height: 100vh;">
<nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
<nut-swiper-item v-for="(item, index) in 3" :key="index">
<image style="width: 100%; height: 150px;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<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 style="padding: 1rem;">
<view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
<view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
</view>
<view id="book-cal" class="book-cal">
<view vif="!showBook" style="width: 100%; height: 1rpx; background-color: rgb(244, 244, 244);"></view>
<view v-if="showBook" id="book-cal" class="book-cal">
<calendar-select @on-dates-change="onDatesChange"></calendar-select>
</view>
<view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view>
<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>
<view 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);">
<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);">
<nut-row>
<nut-col :span="18">
<view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
......@@ -34,17 +35,27 @@
</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 } from "vue";
import { ref, computed, reactive } from "vue";
import calendarSelect from '@/components/calendarSelect.vue'
// TODO: 到时候根据后端实际字段修改
// const book_status = ref('已约满');
const book_status = ref('');
const showBook = computed(() => {
return book_status.value !== '已约满'
});
const onDatesChange = ({ startDate, endDate }) => {
console.warn(startDate, endDate);
}
const page = ref(1);
const goToConfirm = () => {
......@@ -52,6 +63,32 @@ const goToConfirm = () => {
url: '/pages/confirm/index?id=123',
})
}
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>
......
/*
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-14 17:20:42
* @FilePath: /meihua-island-book/src/pages/index/index.config.js
* @LastEditTime: 2023-12-19 14:37:58
* @FilePath: /meihuaApp/src/pages/index/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '梅花岛',
navigationBarTitleText: '梅花岛民宿',
usingComponents: {
},
enableShareAppMessage: true
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 13:25:58
* @LastEditTime: 2023-12-19 14:35:59
* @FilePath: /meihuaApp/src/pages/index/index.vue
* @Description: 首页
-->
<template>
<div>
<view>
<scroll-view :style="scrollStyle" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
<view style="position: relative;">
<image :style="coverStyle" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<div class="arrow-down" @tap="onArrowDown">
<image :style="coverStyle" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/banner1@2x.png" />
<!-- <div class="arrow-down" @tap="onArrowDown">
<image style="width: 2rem; height: 2rem;" :src="arrowDownImg"/>
</div>
</div> -->
<view @tap="onArrowDown" style="position: absolute; right: 0; left: calc(50% - 30rpx); bottom: 1%;">
<IconFont color="#f9f9f9" size="30" name="joy-smile" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
</view>
<view style="text-align: center; font-weight: bold; font-size: 1.25rem; margin-top: 1rem;">热门推荐</view>
</view>
<view style="text-align: center; font-weight: bold; font-size: 1.25rem; padding: 1rem 0 0.25rem; background-color: #f9f9f9;">热门推荐</view>
<view style="background-color: #f9f9f9; overflow: auto;">
<room-card v-for="(item, index) in 20" :key="index"></room-card>
<room-card v-for="(item, index) in 5" :key="index"></room-card>
</view>
</scroll-view>
<view style="height: 6rem;"></view>
<nav-bar activated="index" />
</div>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from 'vue';
import roomCard from '@/components/roomCard.vue'
import arrowDownImg from '@/assets/images/arrow-down.png'
......