home-share page

app.json

@@ -12,7 +12,8 @@
                 "pages/circle/my-circle/index",
                 "pages/circle/send-circle/index",
                 "pages/home/signin/index",
-                "pages/home/ranking/index"
+                "pages/home/ranking/index",
+                "pages/home/share/index"
             ]
         },
         {

nova-werun/components/home/index.js

@@ -32,7 +32,7 @@ Component({
             {
                 image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/mcu488041343362.png?imageView2/1/w/200/h/200',
                 text: '转发分享',
-                url: ''
+                url: '../../pages/home/share/index'
                 
             },
             {

nova-werun/pages/home/share/index.js

@@ -0,0 +1,90 @@
+// nova-werun/pages/home/share/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        //屏幕高度
+        statusBarHeight: 0, // 状态栏高度
+        screenHeight: 0, // 屏幕高度
+        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+        bottomNavHeight: 0, // 底部导航栏高度
+        contentHeight: 0, // 可用内容高度
+        contentHeight2: 0,
+        contentpadding: 0, //顶部padding高度
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    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 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        this.setData({
+            statusBarHeight,
+            screenHeight,
+            customHeight,
+            bottomNavHeight,
+            contentpadding,
+            contentHeight
+        });
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

nova-werun/pages/home/share/index.json

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

nova-werun/pages/home/share/index.less

@@ -0,0 +1,141 @@
+/* nova-werun/pages/home/share/index.wxss */
+.all{
+    width: 100vw; 
+    padding-top: 15rpx;
+    padding-left: 40rpx;
+    padding-right: 40rpx;
+    .box{
+        width: 100%;
+        height: 1100rpx;
+        border: solid #808080 1px;
+        border-radius: 15rpx;
+        .picture{
+            width: 100%;
+            height: 500rpx;
+        }
+        .namebox{
+            height: 150rpx;
+            display: flex;
+            align-items: center;
+            margin-left: 40rpx;
+            margin-right: 40rpx;
+            image{
+                width: 85rpx;
+                height: 85rpx;
+                border-radius: 50%;
+            }
+            .textbox{
+                margin-left: 20rpx;
+               
+                .name{
+                    font-size: 30rpx;
+                }
+                .time{
+                    font-size: 28rpx;
+                    margin-top: 4rpx;
+                }
+            }
+        }
+        .bigtext{
+            margin-left: 40rpx;
+            font-size: 55rpx;
+        }
+        .setence{
+            margin-left: 40rpx;
+            margin-top: 20rpx;
+            font-size: 30rpx;
+        }
+        .numberbox{
+            height: 120rpx;
+            display: flex;
+            margin-left: 40rpx;
+            margin-top: 20rpx;
+            .num-tex{
+                height: 100rpx;
+                margin-left: 50rpx;
+                .nu-nam{
+                    font-size: 28rpx;
+                }
+                .num{
+                    font-size: 40rpx;
+                    display: flex;
+                    justify-content: center;
+                    margin-top: 10rpx;
+                }
+            }
+            .num-tex:nth-child(1){
+                margin-left: 0;
+            }
+        }
+        .erweimabox{
+            width: 100%;
+            height: 120rpx;
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-end;
+            .er-texbox{
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                font-size: 28rpx;
+                .we-tex2{
+                    margin-top: 10rpx;
+                }
+            }
+            .erweima{
+                width: 120rpx;
+                height: 120rpx;
+                background-color: red;
+                margin-left: 20rpx;
+                margin-right:20rpx ;
+                display: flex;
+            }
+        }
+    }
+    .sharebox{
+        width: 100%;
+        height: 250rpx;
+        padding-top: 15rpx;
+        .share-text{
+            width: 100%;
+            font-size: 30rpx;
+            font-weight: 600;
+            display: flex;
+            justify-content: center;
+        }
+        .share-picbox{
+            width: 100%;
+            height: 178rpx;
+            margin-top: 16rpx;
+            display: flex;
+            justify-content: space-between;
+            .share-pic{
+                width: 130rpx;
+                height: 178rpx;
+                .share-pic-box{
+                    width: 130rpx;
+                    height: 130rpx;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: #808080;
+                    .image{
+                        width: 90rpx;
+                        height: 90rpx;
+                    }
+                }
+                .pic-tex{
+                    width: 130rpx;
+                    font-size: 30rpx;
+                    display: flex;
+                    justify-content: center;
+                    margin-top: 10rpx;
+                }
+            }
+
+        }
+    }
+}

nova-werun/pages/home/share/index.wxml

@@ -0,0 +1,67 @@
+<!--nova-werun/pages/home/share/index.wxml-->
+<nav type="back" title="转发分享" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="box">
+        <image class="picture" src="https://file-cloud.fmode.cn//tmp/sBX4tFxdGjkk1fea2c9db35cbd67b50b01dd3bae1592.png?imageView2/1/w/200/h/200"></image>
+        <view class="namebox">
+            <image src="https://file-cloud.fmode.cn//tmp/sBX4tFxdGjkk1fea2c9db35cbd67b50b01dd3bae1592.png?imageView2/1/w/200/h/200"></image>
+            <view class="textbox">
+                <view class="name">超级无敌暴龙战士</view>
+                <view class="time">2024/09/17 20:46</view>
+            </view>
+        </view>
+        <view class="bigtext">梦想家</view>
+        <view class="setence">用汗水实现想象，用脚步丈量梦想</view>
+        <view class="numberbox">
+            <view class="num-tex">
+                <view class="nu-nam">今日排名</view>
+                <view class="num">7</view>
+            </view>
+            <view class="num-tex">
+                <view class="nu-nam">今日步数</view>
+                <view class="num">77777</view>
+            </view>
+            <view class="num-tex">
+                <view class="nu-nam">公里数</view>
+                <view class="num">
+                    <view class="num-num">5</view>
+                    <view class="num-km">km</view>
+                </view>
+            </view>
+        </view>
+        <view class="erweimabox">
+            <view class="er-texbox">
+                <view class="er-tex">长按二维码加入跑团</view>
+                <view class="we-tex2">和我一起运动</view>
+            </view>
+            <view class="erweima"></view>
+        </view>
+    </view>
+    <view class="sharebox">
+        <view class="share-text">分享到</view>
+        <view class="share-picbox">
+            <view class="share-pic">
+                <view class="share-pic-box">
+                    <image class="image" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/1djefq104546048.png?imageView2/1/w/200/h/200"></image>
+                </view>
+
+                <view class="pic-tex">微信</view>
+            </view>
+            <view class="share-pic">
+                <view class="share-pic-box">
+                    <image class="image" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/opdtpm104104293.png?imageView2/1/w/200/h/200"></image>
+                </view>
+
+                <view class="pic-tex">步小圈</view>
+            </view>
+            <view class="share-pic">
+                <view class="share-pic-box">
+                    <image class="image" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/kbm618104717414.png?imageView2/1/w/200/h/200"></image>
+                </view>
+
+                <view class="pic-tex">保存图片</view>
+            </view>
+
+        </view>
+    </view>
+</view>

project.private.config.json

@@ -45,6 +45,12 @@
                     "pathName": "nova-werun/pages/home/ranking/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "分享",
+                    "pathName": "nova-werun/pages/home/share/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }