circle page

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

@@ -1,16 +1,37 @@
 // nova-werun/components/circle-card/index.js
+const Parse = getApp().Parse;
+const company = getApp().globalData.company;
 Component({
     /**
      * 组件的属性列表
      */
     properties: {
-
+        objectId: '',
+        type: ''
     },
 
     /**
      * 组件的初始数据
      */
     data: {
+        //图片
+        images: [],
+        imageclass: '',
+        //是否展示点赞评论按钮
+        isgood: false,
+        isclick: false,
+        //朋友圈
+        cicleList: []
+    },
+    lifetimes: {
+
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+            this.getcircle()
+        },
 
     },
 
@@ -18,6 +39,68 @@ Component({
      * 组件的方法列表
      */
     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
+            const objectId = e.currentTarget.dataset.id
+            wx.navigateTo({
+                url: `${url}?id=` + objectId // 目标页面的路径
+            });
+        },
+        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);
+        },
+        async getcircle() {
+            console.log('数据',this.data.objectId,this.data.type);
+            let AIMomentquery = new Parse.Query('AIMoment');
+            AIMomentquery.equalTo('company', company);
+            AIMomentquery.equalTo('objectId', this.data.objectId);
+            AIMomentquery.equalTo('isVisible', true);
+            AIMomentquery.include('profile.user');
+            AIMomentquery.include('profile');
+            AIMomentquery.notEqualTo('isDeleted', true)
+            let P = await AIMomentquery.find();
+            let AIMoment1List = P.map(item => item.toJSON());
+            this.setData({
+                cicleList: AIMoment1List,
+            })
+            this.setData({
+                images: this.data.cicleList[0].images
+            })
+            console.log('动态', this.data.cicleList);
+            console.log('动态', this.data.type);
+        }
     }
-})
+})

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

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

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

@@ -0,0 +1,194 @@
+/* nova-werun/components/circle-card/index.wxss */
+.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;
+        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-card/index.wxml

@@ -1,2 +1,78 @@
 <!--nova-werun/components/circle-card/index.wxml-->
-<text>nova-werun/components/circle-card/index.wxml</text>
+<view class="trends-one">
+    <!-- 详细-->
+    <view wx:if="{{type=='detail'}}" class="namebax">
+        <image src="{{cicleList[0].profile.user.avatar}}"></image>
+        <view class="name">{{cicleList[0].profile.name}}</view>
+    </view>
+    <view class="text" wx:if="{{type=='detail'}}">{{cicleList[0].content}}</view>
+    <!--  -->
+    <view class="namebax" wx:if="{{type=='surface'}}" bindtap="gourl" data-url="../../pages/circle-detail/index" data-id="{{cicleList[0].objectId}}">
+        <image src="{{cicleList[0].profile.user.avatar}}"></image>
+        <view class="name">{{cicleList[0].profile.name}}</view>
+    </view>
+    <view wx:if="{{type=='surface'}}" class="text" bindtap="gourl" data-url="../../pages/circle-detail/index" data-id="{{cicleList[0].objectId}}">{{cicleList[0].content}}</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张图片 -->
+    <block wx:if="{{ type=='surface'}}">
+        <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>
+    </block>
+
+    <block wx:if="{{ type=='detail'}}">
+        <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>
+    </block>
+
+    <!-- 9张以上图片 -->
+    <view class="picture5" wx:if="{{images.length > 9 && type=='surface'}}">
+        <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-id="{{cicleList[0].objectId}}" data-url="../../pages/circle-detail/index">+{{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="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>

nova-werun/components/circle/index.js

@@ -1,4 +1,6 @@
 // nova-werun/components/circle/index.js
+const Parse = getApp().Parse;
+const company = getApp().globalData.company;
 Component({
     /**
      * 组件的属性列表
@@ -17,30 +19,10 @@ Component({
         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,
+        //朋友圈
+        cardList:[]
     },
     lifetimes: {
 
@@ -56,20 +38,16 @@ Component({
             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;
+            const contentHeight = (screenHeight - 50-bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
                 screenHeight,
                 customHeight,
                 bottomNavHeight,
-                contentHeight,
-                contentpadding,
-                contentHeight2
+                contentHeight
             });
-            console.log('123', contentHeight, contentHeight2);
+            console.log('123', contentHeight);
+            this.getcircle()
         },
 
     },
@@ -78,49 +56,43 @@ Component({
      * 组件的方法列表
      */
     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);
-        }
+                //查全部朋友圈
+                async getcircle() {
+                    const currentUser = Parse.User.current();
+                    let Profilequery2 = new Parse.Query('Profile');
+                    Profilequery2.equalTo('company', company);
+                    Profilequery2.equalTo('user', currentUser.id);
+                    Profilequery2.equalTo('isCheck', true);
+                    Profilequery2.notEqualTo('isDeleted', true)
+                    let P2 = await Profilequery2.find();
+                    let profile1List2 = P2.map(item => item.toJSON());
+                    const department = profile1List2[0].department.objectId
+                    console.log(department);
+                    let queryWhere = {
+                        where: {
+                            profile: {
+                                $inQuery: {
+                                    where: {
+                                        department: department
+                                    },
+                                    className: 'Profile',
+                                },
+                            }
+                        }
+                    }
+                    let Profilequery = Parse.Query.fromJSON('AIMoment', queryWhere);
+                    Profilequery.equalTo('company', company);
+                    Profilequery.equalTo('isVisible', true);
+                    Profilequery.notEqualTo('isDeleted', true)
+                    let P = await Profilequery.find();
+                    let profile1List = P.map(item => item.toJSON());
+                    console.log(profile1List);
+                    this.setData({
+                        cardList:profile1List
+                    })
+                },
+
 
     }
 })

nova-werun/components/circle/index.json

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

nova-werun/components/circle/index.less

@@ -2,204 +2,21 @@
 
 .all{
         width: 100vw;
+        position: relative;
         .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;
-                    }
-
-                }
+            
+        }
+        .publishbox{
+            position: absolute;
+            bottom: 170rpx;
+            right: 12rpx;
+            image{
+                width: 80rpx;
+                height: 80rpx;
             }
         }
 }

nova-werun/components/circle/index.wxml

@@ -1,66 +1,12 @@
 <!--nova-werun/components/circle/index.wxml-->
-<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>
-            <!-- 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>
+<nav type="title" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="trends" style="height: {{contentHeight}}rpx;">
+        <block wx:for="{{cardList}}" wx:key="{{item.objectId}}">
+            <circle-card objectId='{{item.objectId}}' type='surface'></circle-card>
+        </block>
     </view>
+    <view class="publishbox">
+            <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241105/8qes51030838243.png?imageView2/1/w/200/h/200"></image>
+        </view>
 </view>

nova-werun/components/home/index.js

@@ -47,7 +47,7 @@ Component({
             const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
 
             const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
-            const contentHeight = (screenHeight-bottomNavHeight-50) * 750 / systemInfo.windowWidth;
+            const contentHeight = (screenHeight - bottomNavHeight-50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
                 screenHeight,

nova-werun/components/home/index.less

@@ -1,11 +1,11 @@
 /* nova-werun/components/home/index.wxss */
 .all{
     width: 100vw;
-    background-color: skyblue;
+   
     .clockinbox{
         width: 100%;
         height: 650rpx;
-        // background-color: aqua;
+        background-color: skyblue;
         display:flex;
         flex-direction: column;
         align-items: center;

nova-werun/components/home/index.wxml

@@ -1,5 +1,6 @@
 <!--nova-werun/components/home/index.wxml-->
-<view class="all" style="padding-top: {{contentpadding}}rpx;height: {{contentHeight}}rpx;">
+<nav type="title" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;">
     <!-- 顶部 -->
     <view class="clockinbox">
         <view class="addressbox">

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

@@ -13,32 +13,19 @@ Page({
                 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:''
+                //
+                objectId1:""
+
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-                    // 在组件实例进入页面节点树时执行
+        console.log(options);
+        this.setData({
+            id:options.id
+        })
             // 计算
             const systemInfo = wx.getSystemInfoSync();
             const statusBarHeight = systemInfo.statusBarHeight || 0;
@@ -48,18 +35,15 @@ Page({
             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;
+            const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
                 screenHeight,
                 customHeight,
                 bottomNavHeight,
-                contentHeight,
                 contentpadding,
-                contentHeight2
+                contentHeight
             });
-            console.log('123', contentHeight, contentHeight2);
     },
 
 
@@ -67,7 +51,7 @@ Page({
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {
-
+        
     },
 
     /**
@@ -111,27 +95,7 @@ Page({
     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

@@ -1,5 +1,5 @@
 {
   "usingComponents": {
-    "van-icon": "@vant/weapp/icon/index"
+    "circle-card":"../../components/circle-card/index"
   }
 }

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

@@ -1,169 +1,8 @@
 /* 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

@@ -1,49 +1,7 @@
 
-<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>
+<nav type="back" title="详情" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="trends" style="height: {{contentHeight}}rpx;">
+        <circle-card wx:if="{{id}}" objectId="{{id}}" type='detail'></circle-card>
     </view>
 </view>