minsu page

nova-tourism/components/homestay/index.js

@@ -1,40 +1,27 @@
-// nova-tourism/components/home/index.js
 Component({
     /**
      * 组件的属性列表
      */
-    properties: {
-
-    },
+    properties: {},
 
     /**
      * 组件的初始数据
      */
     data: {
-        //屏幕高度
-        statusBarHeight: 0, // 状态栏高度
-        screenHeight: 0, // 屏幕高度
-        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
-        bottomNavHeight: 0, // 底部导航栏高度
-        contentHeight: 0, // 可用内容高度
-        //  轮播图数组
-        //卡片数组
-        cardarr: [1, 2, 3, 4, 5, 6, 7],
-        //日历
+        statusBarHeight: 0,
+        screenHeight: 0,
+        customHeight: 0,
+        bottomNavHeight: 0,
+        contentHeight: 0,
+        
         date_start: '',
-        date_end:'',
-        week_start:'',
-        week_end:'',
+        date_end: '',
+        daysBetween:1,
         show: false,
     },
     lifetimes: {
-
-        detached: function () {
-            // 在组件实例被从页面节点树移除时执行
-        },
+        detached: function () {},
         attached: async function () {
-            // 在组件实例进入页面节点树时执行
-            // 计算
             const systemInfo = wx.getSystemInfoSync();
             const statusBarHeight = systemInfo.statusBarHeight || 0;
             const screenHeight = systemInfo.screenHeight || 0;
@@ -42,46 +29,69 @@ Component({
             const customHeight = custom.height + 10 + 2 || 0;
             const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
 
-            const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
             const contentHeight = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
                 screenHeight,
                 customHeight,
                 bottomNavHeight,
-                contentHeight,
-                contentpadding
+                contentHeight
             });
-            console.log(this.data.contentHeight);
+            this.getcurrentdate();
         },
     },
     /**
      * 组件的方法列表
      */
     methods: {
-
-        //选择日期
-        //打开日历
+        //获取今日明日日期
+        getcurrentdate() {
+            const today = new Date();
+            const tomorrow = new Date();
+            tomorrow.setDate(today.getDate() + 1);
+            
+            this.setData({
+                date_start: this.formatDate(today),
+                date_end: this.formatDate(tomorrow),
+            });
+            console.log(this.data.date_start, this.data.date_end);
+        },
+        // 计算两个日期之间的天数
+        calculateDaysBetween(startDate, endDate) {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            const timeDifference = end - start; // 计算时间差（毫秒）
+            const daysDifference = timeDifference / (1000 * 3600 * 24); // 转换为天数
+            return daysDifference; // 返回天数差
+        },
+        //开日历
         onDisplay() {
-            this.setData({ show: true });
-          },
-          //关闭日历
-          onClose() {
-            this.setData({ show: false });
-          },
-          formatDate(date) {
+            this.setData({
+                show: true
+            });
+        },
+        //关日历
+        onClose() {
+            this.setData({
+                show: false
+            });
+        },
+        //转换日期
+        formatDate(date) {
             date = new Date(date);
-            console.log(date);
             return `${date.getMonth() + 1}月${date.getDate()}日`;
-          },
-          onConfirm(event) {
+        },
+        //选好日期点击完成后
+        onConfirm(event) {
             const [start, end] = event.detail;
+            const daysBetween = this.calculateDaysBetween(start, end); // 计算天数差
             this.setData({
-              show: false,
-              date_start: `${this.formatDate(start)} `,
-              date_end:`${this.formatDate(end)}`
+                show: false,
+                date_start: `${this.formatDate(start)} `,
+                date_end: `${this.formatDate(end)}`,
+                daysBetween
             });
-            console.log(this.data.date_start,this.data.date_end);
-          },
+            console.log(`入住日期: ${this.data.date_start}, 离店日期: ${this.data.date_end}, 天数差: ${daysBetween}天`);
+        },
     }
-})
+});

nova-tourism/components/homestay/index.less

@@ -59,8 +59,7 @@
                     margin-left: auto;
                     width: 90rpx;
                     height: 42rpx;
-                    border-radius: 40rpx;
-                    border: gray solid 1px;
+                    background-color: #ECECEC;
                     font-size: 25rpx;
                     color: black;
                 }
@@ -73,29 +72,25 @@
     }
 
     .Legendary-Information{
-        margin-top: 186rpx;
+        margin-top: 204rpx;
         width: 100%;
         background-color: white;
         overflow-y: hidden;
         padding-left: 3%;
         padding-right: 3%;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
         padding-bottom: 40rpx;
+        column-count: 2; /* 设置列数 */
+        column-gap: 20rpx; /* 设置列间距 */
         .picbox {
-            width: 48%;
             height: 280rpx;
             background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png?imageView2/1/w/200/h/200');
-            background-size: cover; /* 使背景图片覆盖整个容器 */
-            background-position: center; /* 使背景图片居中显示 */
-            background-repeat: no-repeat; /* 防止背景图片重复 */
             margin-top: 20rpx;
+            margin-bottom: 20rpx;
         }
         .cardbox {
-            width: 48%;
-            height: 495rpx;
-            margin-top: 20rpx;
+            break-inside: avoid; /* 防止卡片在列之间断裂 */
+            margin-bottom: 20rpx; /* 设置卡片底部间距 */
+            width: 100%; /* 确保卡片宽度为100% */
             .pic{
                 width: 100%;
                 height: 275rpx;

nova-tourism/components/homestay/index.wxml

@@ -12,7 +12,7 @@
             </view>
             <view class="datebox" bindtap="onDisplay">
                 <view class="start">{{date_start}}</view>
-                <view class="day">共4晚</view>
+                <view class="day">共{{daysBetween}}晚</view>
                 <view class="end">{{date_end}}</view>
             </view>
             <van-calendar show="{{ show }}" show-confirm="{{ true }}" confirm-text="完成" confirm-disabled-text='完成' type="range" bind:close="onClose" bind:confirm="onConfirm" color='#ff0000' position='top' />