circle page

app.json

@@ -1,61 +1,62 @@
 {
-  "pages": [
-    "index"
-  ],
-  "subpackages": [
-    {
-      "root": "nova-werun",
-      "name": "werun",
-      "pages": [
-        "pages/index/index"
-      ]
+    "pages": [
+        "index"
+    ],
+    "subpackages": [
+        {
+            "root": "nova-werun",
+            "name": "werun",
+            "pages": [
+                "pages/index/index",
+                "pages/circle-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-werun/components/circle-card/index.js

@@ -0,0 +1,23 @@
+// nova-werun/components/circle-card/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

nova-werun/components/circle-card/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

nova-werun/components/circle-card/index.wxml

@@ -0,0 +1,2 @@
+<!--nova-werun/components/circle-card/index.wxml-->
+<text>nova-werun/components/circle-card/index.wxml</text>

nova-werun/components/circle-card/index.wxss

@@ -0,0 +1 @@
+/* nova-werun/components/circle-card/index.wxss */

nova-werun/components/circle/index.js

@@ -11,14 +11,116 @@ Component({
      * 组件的初始数据
      */
     data: {
+        //屏幕高度
+        statusBarHeight: 0, // 状态栏高度
+        screenHeight: 0, // 屏幕高度
+        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+        bottomNavHeight: 0, // 底部导航栏高度
+        contentHeight: 0, // 可用内容高度
+        contentHeight2: 0,
+        contentpadding: 0, //顶部padding高度
+        //图片
+        images: [
+            'http://img2.baidu.com/it/u=2324169262,1340424811&fm=253&app=138&f=JPEG?w=800&h=1422',
+            'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+            'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+            'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+            'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
 
+        ],
+        imageclass:'',
+        //是否展示点赞评论按钮
+        isgood:false,
+        isclick:false,
     },
+    lifetimes: {
 
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+            // 计算
+            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 contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
+            const contentHeight = (screenHeight - bottomNavHeight - 50) * 750 / systemInfo.windowWidth;
+            const contentHeight2 = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            this.setData({
+                statusBarHeight,
+                screenHeight,
+                customHeight,
+                bottomNavHeight,
+                contentHeight,
+                contentpadding,
+                contentHeight2
+            });
+            console.log('123', contentHeight, contentHeight2);
+        },
+
+    },
 
     /**
      * 组件的方法列表
      */
     methods: {
 
+        onImageLoad: function (e) {
+            const {
+                width,
+                height
+            } = e.detail; // 获取图片的宽高
+            console.log('11', e.detail);
+            const imageClass = width > height ? 'image-landscape' : 'image-portrait'; // 判断横竖屏
+
+            this.setData({
+                imageclass: imageClass // 动态设置图片的类名
+            });
+        },
+        previewImage: function(e) {
+            const index = e.currentTarget.dataset.index; // 获取当前点击图片的索引
+            const images = this.data.images; // 获取所有图片的链接
+    
+            wx.previewImage({
+                current: images[index], // 当前显示图片的链接
+                urls: images // 需要预览的图片链接列表
+            });
+        },
+        gourl(e){
+            const url = e.currentTarget.dataset.url
+            wx.navigateTo({
+                url: url // 目标页面的路径
+            });
+        },
+        showgood(){
+            this.setData({
+                isgood:!this.data.isgood
+            })
+            console.log(this.data.isgood);
+        },
+        isclick(){
+            this.setData({
+                isclick:!this.data.isclick
+            })
+            setTimeout(()=>{
+                this.showgood()
+            },400)
+            console.log(this.data.isclick);
+        }
+
     }
-})
+})

nova-werun/components/circle/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
 }

nova-werun/components/circle/index.less

@@ -1 +1,205 @@
-/* nova-werun/components/circle/index.wxss */
+/* nova-werun/components/circle/index.wxss */
+
+.all{
+        width: 100vw;
+        .trends{
+            width: 100%;
+            border-top: grey solid 1px;
+            overflow-y: scroll;
+            padding-top: 20rpx;
+            .trends-one{
+                width: 100%;
+                margin-bottom: 20rpx;
+                border-bottom: grey solid 1px;
+                padding-left: 30rpx;
+                padding-right: 20rpx;
+                .namebax{
+                    width: 100%;
+                    height: 100rpx;
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 20rpx;
+                    image{
+                        width: 80rpx;
+                        height: 80rpx;
+                        border-radius: 50%;
+                    }
+                    .name{
+                        margin-left: 10rpx;
+                        font-size: 34rpx;
+                        font-weight: 600;
+                    }
+                }
+                .text{
+                    width: 92%;
+                    padding-left: 90rpx;
+                    font-size: 34rpx;
+                }
+                .picture{
+                    width: 92%;
+                    padding-left: 90rpx;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 30rpx;
+                    .image{
+                        width: 175rpx;
+                        height: 175rpx;
+                        margin-right: 10rpx;
+                        margin-bottom: 10rpx;
+                    }
+                    .image:nth-child(3n) {
+                        margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                    }
+                }
+                .picture5 {
+                    width: 92%;
+                    padding-left: 90rpx;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 30rpx;
+                    
+                    .image {
+                        width: 175rpx;
+                        height: 175rpx;
+                    }
+                
+                    .image-wrapper {
+                        margin-right: 10rpx;
+                        position: relative;
+                    }
+                
+                    .image-wrapper:nth-of-type(3n) {
+                        margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                    }
+                
+                    .more-images {
+                        position: absolute;
+                        bottom: 10rpx;
+                        right: 0rpx;
+                        background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+                        color: white;
+                        font-size: 26px;
+                        width: 175rpx;
+                        height: 175rpx;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+                .picture2{
+                    width: 92%;
+                    padding-left: 90rpx;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 30rpx;
+                    .image{
+                        width: 240rpx;
+                        height: 240rpx;
+                        margin-right: 10rpx;
+                        margin-bottom: 10rpx;
+                    }
+                }
+                .picture4{
+                    width: 92%;
+                    padding-left: 90rpx;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 30rpx;
+                
+                    .image{
+                        width: 230rpx;
+                        height: 230rpx;
+                        margin-right: 10rpx;
+                        margin-bottom: 10rpx;
+                        object-fit: cover;
+                    }
+                    .image:nth-child(2n) {
+                        margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                    }
+                }
+                .picture3{
+                    width: 92%;
+                    padding-left: 90rpx;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 30rpx;
+                    .image{
+                        margin-right: 10rpx;   
+                        margin-bottom: 10rpx;
+                    }
+                    .image-portrait {
+                        width: 332rpx; /* 竖屏图片的宽度 */
+                        height: 425rpx;
+                    }
+                
+                    .image-landscape {
+                        width: 442rpx; /* 横屏图片的宽度 */
+                        height: 300rpx;
+
+                    }
+                }
+                
+                .timebox{
+                    width: 100%;
+                    height: 80rpx;
+                    padding-left: 90rpx;
+                    margin-bottom: 20rpx;
+                    display: flex;
+                    align-items: center;
+                    position: relative;
+                    .time-box{
+                        width: 85%;
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        .time{
+                            font-size: 30rpx;
+                            margin-right: 20rpx;
+                        }
+                    }
+                    .functionbox{
+                        width: 280rpx;
+                        height: 80rpx;
+                        background-color: black;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: absolute;
+                        right: 99rpx;
+                        border-radius: 10rpx;
+                        .function{
+                            width: 100%;
+                            display: flex;
+                            color: white;
+                            justify-content: center;
+                            .function1{
+                                width: 48%;
+                                display: flex;
+                                justify-content: center;
+                                color: white;
+                                .text2{
+                                    display: flex;
+                                    justify-content: center;
+                                    align-items: center;
+                                    font-size: 28rpx;
+                                    margin-left: 12rpx;
+                                }
+                            }
+                        }
+                    }
+                    .point{
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 70rpx;
+                        height: 40rpx;
+                        border-radius: 10rpx;
+                        background-color: #efefef;
+                        color: #506692;
+                        font-size: 50rpx;
+                    }
+
+                }
+            }
+        }
+}

nova-werun/components/circle/index.wxml

@@ -1,4 +1,66 @@
 <!--nova-werun/components/circle/index.wxml-->
-<view class="all" style="padding-top: {{contentHeight}}rpx;">
+<view class="all" style="padding-top: {{contentpadding}}rpx; height: {{contentHeight}}rpx;">
+    <view class="trends" style="height: {{contentHeight2}}rpx;">
+        <view class="trends-one" wx:for="{{7}}" wx:key="index">
+            <view class="namebax" bindtap="gourl" data-url="../../pages/circle-detail/index">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/uk13u1041343733.png?imageView2/1/w/200/h/200"></image>
+                <view class="name">名字</view>
+            </view>
+            <view class="text" bindtap="gourl" data-url="../../pages/circle-detail/index">说说在微信开发者工具中进行测试，确保定位和轨迹绘制的准确性。</view>
+            <!-- 图片 -->
+            <!-- 4张图片 -->
+            <view class="picture4" wx:if="{{images.length==4}}">
+                <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 3张和4-9张图片 -->
+            <view class="picture" wx:if="{{images.length>4  && images.length<=9 || images.length==3 }}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}"  class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 9张以上图片 -->
+            <view class="picture5" wx:if="{{images.length > 9}}">
+                <view wx:for="{{images}}" wx:if="{{index < 9}}">
+                    <view class="image-wrapper">
+                        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" src="{{item}}"></image>
+                        <view class="more-images" wx:if="{{index==8}}" bindtap="gourl" data-url="../../pages/circle-detail/index">+{{images.length - 9}}</view>
+                    </view>
+                </view>
 
-</view>
+            </view>
+            <!-- 2张图片 -->
+            <view class="picture2" wx:if="{{images.length==2}}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 1张图片 -->
+            <view class="picture3" wx:if="{{images.length==1}}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
+            </view>
+            <!--  -->
+            <view class="timebox">
+                <view class="time-box">
+                    <view class="time">3个月前</view>
+                    <van-icon name="delete-o" size='20' />
+                </view>
+                <!-- 点赞评论 -->
+                <view class="functionbox" wx:if="{{isgood}}">
+                    <view class="function">
+                        <view class="function1" wx:if="{{!isclick}}" bindtap="isclick">
+                            <van-icon name="like-o" />
+                            <view class="text2">赞</view>
+                        </view>
+                        <view class="function1" wx:if="{{isclick}}" bindtap="isclick">
+                            <van-icon name="like"  color='red'/>
+                            <view class="text2">取消</view>
+                        </view>
+                        |
+                        <view class="function1">
+                            <van-icon name="chat-o" /> 
+                            <view class="text2">评论</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="point" bindtap="showgood"> ·· </view>
+
+            </view>
+        </view>
+    </view>
+</view>

nova-werun/components/home/index.js

@@ -25,9 +25,10 @@ Component({
             {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/mcu488041343362.png?imageView2/1/w/200/h/200',text:'转发分享'},
             {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/pqln61041343428.png?imageView2/1/w/200/h/200',text:'我的勋章'},
             {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/9crt85041343498.png?imageView2/1/w/200/h/200',text:'步行'},
-            {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/3o1cdr041343554.png?imageView2/1/w/200/h/200',text:'骑行'},
+           
             {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/71svpg041343669.png?imageView2/1/w/200/h/200',text:'跑步'},
             {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/uk13u1041343733.png?imageView2/1/w/200/h/200',text:'我的统计'},
+            {image:'https://file-cloud.fmode.cn/qpFbRRSZrO/20241104/k1q4no034958681.png?imageView2/1/w/200/h/200',text:'积分'},
         ]
     },
     lifetimes: {

nova-werun/pages/circle-detail/index.js

@@ -0,0 +1,140 @@
+// nova-werun/pages/circle-detail/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+                //屏幕高度
+                statusBarHeight: 0, // 状态栏高度
+                screenHeight: 0, // 屏幕高度
+                customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+                bottomNavHeight: 0, // 底部导航栏高度
+                contentHeight: 0, // 可用内容高度
+                contentHeight2: 0,
+                contentpadding: 0, //顶部padding高度
+                //图片
+                images: [
+                    'http://img2.baidu.com/it/u=2324169262,1340424811&fm=253&app=138&f=JPEG?w=800&h=1422',
+                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
+        
+                ],
+                imageclass:''
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    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 contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
+            const contentHeight = (screenHeight - bottomNavHeight ) * 750 / systemInfo.windowWidth;
+            const contentHeight2 = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            this.setData({
+                statusBarHeight,
+                screenHeight,
+                customHeight,
+                bottomNavHeight,
+                contentHeight,
+                contentpadding,
+                contentHeight2
+            });
+            console.log('123', contentHeight, contentHeight2);
+    },
+
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    },
+    onImageLoad: function (e) {
+        const {
+            width,
+            height
+        } = e.detail; // 获取图片的宽高
+        console.log('11', e.detail);
+        const imageClass = width > height ? 'image-landscape' : 'image-portrait'; // 判断横竖屏
+
+        this.setData({
+            imageclass: imageClass // 动态设置图片的类名
+        });
+    },
+    previewImage: function(e) {
+        const index = e.currentTarget.dataset.index; // 获取当前点击图片的索引
+        const images = this.data.images; // 获取所有图片的链接
+
+        wx.previewImage({
+            current: images[index], // 当前显示图片的链接
+            urls: images // 需要预览的图片链接列表
+        });
+    },
+    goback(){
+        wx.navigateBack({
+            delta: 1 // 返回上一页
+        });
+    }
+})

nova-werun/pages/circle-detail/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

nova-werun/pages/circle-detail/index.less

@@ -0,0 +1,169 @@
+/* nova-werun/pages/circle-detail/index.wxss */
+.all{
+    width: 100vw;
+    background-color: skyblue;
+    .trends{
+        width: 100%;
+        border-top: grey solid 1px;
+        padding-top: 20rpx;
+        .trends-one{
+            width: 100%;
+            margin-bottom: 20rpx;
+            border-bottom: grey solid 1px;
+            padding-left: 30rpx;
+            padding-right: 20rpx;
+            .namebax{
+                width: 100%;
+                height: 100rpx;
+                display: flex;
+                align-items: center;
+                margin-bottom: 20rpx;
+                image{
+                    width: 80rpx;
+                    height: 80rpx;
+                    border-radius: 50%;
+                }
+                .name{
+                    margin-left: 10rpx;
+                    font-size: 34rpx;
+                    font-weight: 600;
+                }
+            }
+            .text{
+                width: 92%;
+                padding-left: 90rpx;
+                font-size: 34rpx;
+            }
+            .picture{
+                width: 92%;
+                padding-left: 90rpx;
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 30rpx;
+                .image{
+                    width: 175rpx;
+                    height: 175rpx;
+                    margin-right: 10rpx;
+                    margin-bottom: 10rpx;
+                }
+                .image:nth-child(3n) {
+                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                }
+            }
+            .picture5 {
+                width: 92%;
+                padding-left: 90rpx;
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 30rpx;
+                
+                .image {
+                    width: 175rpx;
+                    height: 175rpx;
+                }
+            
+                .image-wrapper {
+                    margin-right: 10rpx;
+                    position: relative;
+                }
+            
+                .image-wrapper:nth-of-type(3n) {
+                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                }
+            
+                .more-images {
+                    position: absolute;
+                    bottom: 10rpx;
+                    right: 0rpx;
+                    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+                    color: white;
+                    font-size: 26px;
+                    width: 175rpx;
+                    height: 175rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+            .picture2{
+                width: 92%;
+                padding-left: 90rpx;
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 30rpx;
+                .image{
+                    width: 240rpx;
+                    height: 240rpx;
+                    margin-right: 10rpx;
+                    margin-bottom: 10rpx;
+                }
+            }
+            .picture4{
+                width: 92%;
+                padding-left: 90rpx;
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 30rpx;
+            
+                .image{
+                    width: 230rpx;
+                    height: 230rpx;
+                    margin-right: 10rpx;
+                    margin-bottom: 10rpx;
+                    object-fit: cover;
+                }
+                .image:nth-child(2n) {
+                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+                }
+            }
+            .picture3{
+                width: 92%;
+                padding-left: 90rpx;
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 30rpx;
+                .image{
+                    margin-right: 10rpx;   
+                    margin-bottom: 10rpx;
+                }
+                .image-portrait {
+                    width: 332rpx; /* 竖屏图片的宽度 */
+                    height: 425rpx;
+                }
+            
+                .image-landscape {
+                    width: 442rpx; /* 横屏图片的宽度 */
+                    height: 300rpx;
+
+                }
+            }
+            
+            .timebox{
+                width: 92%;
+                height: 80rpx;
+                padding-left: 90rpx;
+                margin-bottom: 20rpx;
+                display: flex;
+                align-items: center;
+                .time-box{
+                    width: 85%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    .time{
+                        font-size: 30rpx;
+                        margin-right: 20rpx;
+                    }
+                }
+                .point{
+                    width: 10%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+            }
+        }
+    }
+}

nova-werun/pages/circle-detail/index.wxml

@@ -0,0 +1,49 @@
+
+<view class="all" style="padding-top: {{contentpadding}}rpx; height: {{contentHeight}}rpx;">
+    <van-icon name="arrow-left" size='25'  bind:click='goback'/>
+    <view class="trends" style="height: {{contentHeight2}}rpx;">
+        <view class="trends-one" >
+            <view class="namebax">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/uk13u1041343733.png?imageView2/1/w/200/h/200"></image>
+                <view class="name">名字</view>
+            </view>
+            <view class="text">说说在微信开发者工具中进行测试，确保定位和轨迹绘制的准确性。</view>
+            <!-- 图片 -->
+            <!-- 4张图片 -->
+            <view class="picture4" wx:if="{{images.length==4}}">
+                <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 3张和4-9张图片 -->
+            <view class="picture" wx:if="{{images.length>4   || images.length==3 }}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}"  class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 9张以上图片
+            <view class="picture5" wx:if="{{images.length > 9}}">
+                <view wx:for="{{images}}" wx:if="{{index < 9}}">
+                    <view class="image-wrapper">
+                        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" src="{{item}}"></image>
+                        <view class="more-images" wx:if="{{index==8}}">+{{images.length - 9}}</view>
+                    </view>
+                </view>
+
+            </view> -->
+            <!-- 2张图片 -->
+            <view class="picture2" wx:if="{{images.length==2}}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            </view>
+            <!-- 1张图片 -->
+            <view class="picture3" wx:if="{{images.length==1}}">
+                <image mode="scaleToFill"  bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
+            </view>
+            <!--  -->
+            <view class="timebox">
+                <view class="time-box">
+                    <view class="time">3个月前</view>
+                    <van-icon name="delete-o" size='20' />
+                </view>
+                <view class="point"> ·· </view>
+
+            </view>
+        </view>
+    </view>
+</view>