细节修改

hookehuyr
Commit 24bba7ac617e3ad2562de15466011e661f700e1d 24bba7ac 1 parent 9d744aa3
Showing 10 changed files with 141 additions and 44 deletions
components.d.ts
src/assets/images/banner1@2x.png
src/assets/images/icon_checked@2x.png
src/assets/images/img1@2x.png
src/components/roomCard.vue
src/pages/book/index.vue
src/pages/confirm/index.vue
src/pages/detail/index.vue
src/pages/index/index.config.js
src/pages/index/index.vue
--- a/components.d.ts
View file @24bba7a
+++ b/components.d.ts
View file @24bba7a
@@ -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']
+    NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
-    NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
     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']
--- a/src/assets/images/banner1@2x.png 0 → 100644
View file @24bba7a
+++ b/src/assets/images/banner1@2x.png 0 → 100644
View file @24bba7a
--- a/src/assets/images/icon_checked@2x.png 0 → 100644
View file @24bba7a
+++ b/src/assets/images/icon_checked@2x.png 0 → 100644
View file @24bba7a
--- a/src/assets/images/img1@2x.png 0 → 100644
View file @24bba7a
+++ b/src/assets/images/img1@2x.png 0 → 100644
View file @24bba7a
--- a/src/components/roomCard.vue
View file @24bba7a
+++ b/src/components/roomCard.vue
View file @24bba7a
 <!--
  * @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">
+  <view class="room-card-component" @tap="handleTap">
-    <image style="width: 100%; height: 10rem;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+    <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);
--- a/src/pages/book/index.vue
View file @24bba7a
+++ b/src/pages/book/index.vue
View file @24bba7a
 <!--
  * @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-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 list" :title="'Tab ' + item" :pane-key="item">
+          <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">
+                <view v-for="(item, index) in bookList" :key="index">
-                  <room-card :key="index"></room-card>
+                  <room-card :key="index" :status="item.status"></room-card>
-                  <view v-if="index === 9" style="height: 2rem;"></view>
+                  <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>
--- a/src/pages/confirm/index.vue
View file @24bba7a
+++ b/src/pages/confirm/index.vue
View file @24bba7a
 <!--
  * @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 #icon><IconFont name="checked"></IconFont></template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
+          <template #checkedIcon><IconFont name="checked" color="red"></IconFont></template>
         </nut-radio>
         <nut-radio label="2">
           帮别人订
-          <template #icon> <Checklist /> </template>
+          <template #icon><IconFont name="checked"></IconFont></template>
-          <template #checkedIcon> <Checklist color="red" /> </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>
--- a/src/pages/detail/index.vue
View file @24bba7a
+++ b/src/pages/detail/index.vue
View file @24bba7a
 <!--
  * @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">
+      <nut-swiper-item v-for="(item, index) in state.imgData" :key="index">
-        <image style="width: 100%; height: 150px;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        <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>
--- a/src/pages/index/index.config.js
View file @24bba7a
+++ b/src/pages/index/index.config.js
View file @24bba7a
 /*
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 17:20:42
+ * @LastEditTime: 2023-12-19 14:37:58
- * @FilePath: /meihua-island-book/src/pages/index/index.config.js
+ * @FilePath: /meihuaApp/src/pages/index/index.config.js
  * @Description: 文件描述
  */
 export default {
-  navigationBarTitleText: '梅花岛',
+  navigationBarTitleText: '梅花岛民宿',
   usingComponents: {
   },
   enableShareAppMessage: true
--- a/src/pages/index/index.vue
View file @24bba7a
+++ b/src/pages/index/index.vue
View file @24bba7a
 <!--
  * @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" />
+        <image :style="coverStyle" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/banner1@2x.png" />
-        <div class="arrow-down" @tap="onArrowDown">
+        <!-- <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>
-      <view style="text-align: center; font-weight: bold; font-size: 1.25rem; margin-top: 1rem;">热门推荐</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'