minsu-detail page

app.json

@@ -1,61 +1,62 @@
 {
-  "pages": [
-    "index"
-  ],
-  "subpackages": [
-    {
-      "root": "nova-tourism",
-      "name": "tourism",
-      "pages": [
-        "pages/index/index"
-      ]
+    "pages": [
+        "index"
+    ],
+    "subpackages": [
+        {
+            "root": "nova-tourism",
+            "name": "tourism",
+            "pages": [
+                "pages/index/index",
+                "pages/homestay/homestay-detail/index"
+            ]
+        },
+        {
+            "root": "nova-diypage",
+            "name": "DIYPAGE",
+            "pages": [
+                "pages/index/index"
+            ]
+        }
+    ],
+    "window": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "",
+        "navigationBarTextStyle": "black",
+        "navigationBarBackgroundColor": "#f6f5fa",
+        "backgroundColor": "#f6f5fa",
+        "enablePullDownRefresh": false
     },
-    {
-      "root": "nova-diypage",
-      "name": "DIYPAGE",
-      "pages": [
-        "pages/index/index"
-      ]
-    }
-  ],
-  "window": {
-    "navigationStyle": "custom",
-    "navigationBarTitleText": "",
-    "navigationBarTextStyle": "black",
-    "navigationBarBackgroundColor": "#f6f5fa",
-    "backgroundColor": "#f6f5fa",
-    "enablePullDownRefresh": false
-  },
-  "permission": {
-    "scope.userLocation": {
-      "desc": "你的位置信息将用于小程序位置接口的效果展示"
-    }
-  },
-  "usingComponents": {
-    "nav": "plugin://fm-plugin/fm-nav",
-    "get-phone-number-btn": "components/getPhone/index",
-    "search": "/components/search/search",
-    "payment": "/components/nova-payment/payment",
-    "address": "/components/address/index",
-    "upload": "/components/upload/index",
-    "van-icon": "@vant/weapp/icon/index",
-    "van-button": "@vant/weapp/button/index",
-    "van-tabbar": "@vant/weapp/tabbar/index",
-    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
-    "van-empty": "@vant/weapp/empty/index",
-    "van-loading": "@vant/weapp/loading/index"
-  },
-  "sitemapLocation": "sitemap.json",
-  "plugins": {
-    "fm-plugin": {
-      "version": "0.1.1",
-      "provider": "wx56d559d35ae6e502",
-      "export": "exportToPlugin.js",
-      "genericsImplementation": {
-        "fm-auth": {
-          "get-phone-number-btn": "components/getPhone/index"
+    "permission": {
+        "scope.userLocation": {
+            "desc": "你的位置信息将用于小程序位置接口的效果展示"
+        }
+    },
+    "usingComponents": {
+        "nav": "plugin://fm-plugin/fm-nav",
+        "get-phone-number-btn": "components/getPhone/index",
+        "search": "/components/search/search",
+        "payment": "/components/nova-payment/payment",
+        "address": "/components/address/index",
+        "upload": "/components/upload/index",
+        "van-icon": "@vant/weapp/icon/index",
+        "van-button": "@vant/weapp/button/index",
+        "van-tabbar": "@vant/weapp/tabbar/index",
+        "van-tabbar-item": "@vant/weapp/tabbar-item/index",
+        "van-empty": "@vant/weapp/empty/index",
+        "van-loading": "@vant/weapp/loading/index"
+    },
+    "sitemapLocation": "sitemap.json",
+    "plugins": {
+        "fm-plugin": {
+            "version": "0.1.1",
+            "provider": "wx56d559d35ae6e502",
+            "export": "exportToPlugin.js",
+            "genericsImplementation": {
+                "fm-auth": {
+                    "get-phone-number-btn": "components/getPhone/index"
+                }
+            }
         }
-      }
     }
-  }
 }

nova-tourism/components/homestay/index.js

@@ -93,5 +93,11 @@ Component({
             });
             console.log(`入住日期: ${this.data.date_start}, 离店日期: ${this.data.date_end}, 天数差: ${daysBetween}天`);
         },
+        gourl(e){
+            const url = e.currentTarget.dataset.url
+            wx.navigateTo({
+              url: `${url}`,
+            })
+        }
     }
 });

nova-tourism/components/homestay/index.wxml

@@ -31,19 +31,19 @@
 
             </view>
             <view class="cardbox">
-                <image class="pic" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg?imageView2/1/w/200/h/200"></image>
+                <image class="pic" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg?imageView2/1/w/200/h/200" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl"></image>
                 <view class="textobx">
-                    <view class="title">
+                    <view class="title" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
                         <view class="til">剑仙居</view>
                         <image class="collect" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png?imageView2/1/w/200/h/200"></image>
                     </view>
 
-                    <view class="miaosu">
+                    <view class="miaosu" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
                         剑仙居描述剑仙居描述剑仙居描述剑仙居描述剑仙居描述
                     </view>
 
                     <view class="bottom">
-                        <view class="qian">
+                        <view class="qian" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
                             ￥
                             <view class="numbox">
                                 10000.00

nova-tourism/pages/homestay/homestay-detail/index.js

@@ -0,0 +1,97 @@
+// nova-tourism/pages/homestay/homestay-detail/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        //屏幕高度
+        statusBarHeight: 0, // 状态栏高度
+        screenHeight: 0, // 屏幕高度
+        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+        bottomNavHeight: 0, // 底部导航栏高度
+        contentHeight: 0, // 可用内容高度
+        //  轮播图数组
+        imageUrls: ['https://tse4-mm.cn.bing.net/th/id/OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK?rs=1&pid=ImgDetMain', 'https://ts1.cn.mm.bing.net/th/id/R-C.9881613a29f26488b40938427aa585e4?rik=fim4XvDejjHE%2fQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220516ac%2f797%2fw2048h1149%2f20220516%2fb0aa-5aca29fe2dfa69c385118bbc74d039de.jpg&ehk=tzq%2bJP6uMipI0aIHY3bMSVO7lS7ZQM6TKMlwZ5CFP4s%3d&risl=&pid=ImgRaw&r=0', 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg', 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/04/ChMkJ1bKyEyIMaKUAAhskHwWGqUAALIAAM2KsIACGyo249.jpg'],
+        index: 1,
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        // 计算
+        const systemInfo = wx.getSystemInfoSync();
+        const statusBarHeight = systemInfo.statusBarHeight || 0;
+        const screenHeight = systemInfo.screenHeight || 0;
+        const custom = wx.getMenuButtonBoundingClientRect();
+        const customHeight = custom.height + 10 + 2 || 0;
+        const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
+
+        const contentHeight = (screenHeight - bottomNavHeight  - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        this.setData({
+            statusBarHeight,
+            screenHeight,
+            customHeight,
+            bottomNavHeight,
+            contentHeight
+        });
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    },
+    //随轮播图变化而变化
+    onSwiperChange: function (event) {
+        const currentIndex = event.detail.current; // 获取当前索引
+        this.setData({
+            index: currentIndex + 1
+        })
+    },
+})

nova-tourism/pages/homestay/homestay-detail/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

nova-tourism/pages/homestay/homestay-detail/index.less

@@ -0,0 +1,168 @@
+/* nova-tourism/pages/homestay/homestay-detail/index.wxss */
+.all{
+    width: 100vw;
+    height: 100vh;
+    background-color: #f7f7f7;
+    position: relative;
+    .picturebox{
+        width: 100%;
+        height: 480rpx;
+        position: relative;
+        .img{
+            width: 100%;
+            height: 480rpx;
+            image{
+                width: 100%;
+                height: 100%;
+
+            }
+        }
+        .numberbox{
+            position: absolute;
+            bottom: 40rpx;
+            right: 20rpx;
+            border-radius: 45%;
+            z-index: 10;
+            color: white;
+            width: 70rpx;
+            height: 45rpx;
+            font-size: 24rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(12, 12, 12, 0.5);
+        }
+    }
+    .Legendary-Information{
+        width: 100%;
+        background-color: white;
+        border-top-left-radius: 20px; /* 左上角圆角 */
+        border-top-right-radius: 20px; /* 右上角圆角 */
+        position: absolute;
+        top: 455rpx;
+        padding-top: 20rpx;
+        padding-left: 25rpx;
+        padding-right: 20rpx;
+        z-index: 10;
+        overflow-y: hidden;
+        padding-bottom: 20rpx;
+        .text{
+            width: 100%;
+            height: 100rpx;
+            display: flex;
+            
+            margin-top: 10rpx;
+            .namebox{
+                width: 75%;
+                height: 100rpx;
+                .name{
+                    font-size: 35rpx;
+                    font-weight: 500;
+                }
+                .adress{
+                    font-size: 30rpx;
+                    white-space: nowrap; /* 不换行 */
+                    overflow: hidden; /* 隐藏超出部分 */
+                    text-overflow: ellipsis; /* 超出部分显示省略号 */
+                }
+            }
+            .markerbox{
+                width: 25%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+        }
+        .datebox{
+            width: 100%;
+            height: 90rpx;
+            background-color: #f7f7f7;
+            display: flex;
+            padding-left: 20rpx;
+            padding-right: 20rpx;
+            align-items: center;
+            color: orange;
+            font-size: 32rpx;
+            .start{
+                display: flex;
+                justify-content: flex-end;
+            }
+            .day{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-left: auto;
+                width: 90rpx;
+                height: 42rpx;
+                border-radius: 40rpx;
+                border: gray solid 1px;
+                font-size: 25rpx;
+                color: black;
+            }
+            .end{
+                margin-left: auto;
+            }
+        }
+        .cardbox{
+            .card{
+                width: 100%;
+                height: 620rpx;
+                background-color: white;
+                margin-top: 15rpx;
+                .img{
+                    width: 100%;
+                    height: 480rpx;
+                }
+                .name{
+                    font-size: 30rpx;
+                }
+                .intruduce{
+                    font-size: 28rpx;
+                }
+                .buttombox{
+                    width: 100%;
+                    height: 60rpx;
+                    color: red;
+                    display: flex;
+                    align-items: center;
+
+                    .salary{
+                        width: 50%;
+                        height: 100%;
+                        display: flex;
+                        
+                        .symbol{
+                            height: 100%;
+                            font-size: 28rpx;
+                            display: flex;
+                            align-items: flex-end;
+                        }
+                        .number{
+                            height: 100%;
+                            display: flex;
+                            align-items: flex-end;
+                            font-size: 35rpx;
+                        }
+                    }
+                    .buttom{
+                        width: 130rpx;
+                        height: 50rpx;
+                        font-size: 30rpx;
+                        color: white;
+                        background-color: red;
+                        border-radius: 48rpx;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin-left: auto;
+                    }
+
+                }
+            }
+        }
+
+    }
+
+}

nova-tourism/pages/homestay/homestay-detail/index.wxml

@@ -0,0 +1,19 @@
+<!--nova-tourism/pages/homestay/homestay-detail/index.wxml-->
+<nav type="back" background-color="#ffffff" frontColor="#000000" title="剑仙居民宿" />
+<scroll-view class="all" scroll-y="true" bindscroll="onScroll" style="height: {{contentHeight}}rpx;">
+    <!-- 轮播图 -->
+    <view class="picturebox">
+        <swiper autoplay="{{true}}"  interval="{{3000}}" circular duration="{{500}}" class="img" bindchange="onSwiperChange">
+            <block wx:for="{{imageUrls}}" wx:key="index" wx:for-item="img">
+                <swiper-item class="img">
+                    <image src="{{img}}" mode="aspectFill"></image>
+                </swiper-item>
+            </block>
+        </swiper>
+        <view class="numberbox">{{index}}/{{imageUrls.length}}</view>
+    </view>
+    <!-- 民宿信息 -->
+    <view class="Legendary-Information">
+
+    </view>
+</scroll-view>

project.private.config.json

@@ -1,20 +1,40 @@
 {
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "setting": {
-    "compileHotReLoad": false,
-    "urlCheck": true,
-    "preloadBackgroundData": false
-  },
-  "game": {
-    "list": []
-  },
-  "gamePlugin": {
-    "list": []
-  },
-  "miniprogram": {
-    "list": []
-  },
-  "libVersion": "2.27.3",
-  "condition": {},
-  "projectname": "nova-wapp"
+    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+    "setting": {
+        "compileHotReLoad": false,
+        "urlCheck": true,
+        "preloadBackgroundData": false
+    },
+    "game": {
+        "list": []
+    },
+    "gamePlugin": {
+        "list": []
+    },
+    "miniprogram": {
+        "list": []
+    },
+    "libVersion": "2.27.3",
+    "projectname": "nova-wapp",
+    "condition": {
+        "plugin": {
+            "list": []
+        },
+        "game": {
+            "list": []
+        },
+        "gamePlugin": {
+            "list": []
+        },
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "民宿详细",
+                    "pathName": "nova-tourism/pages/homestay/homestay-detail/index",
+                    "query": "",
+                    "scene": null
+                }
+            ]
+        }
+    }
 }