werun-wxapp/nova-werun/pages/home/statistics/index.wxml

<!--nova-werun/pages/home/statistics/index.wxml-->
<nav type="back" title="步数统计" background-color="{{'#4F9AF7'}}" front-color="{{'#333333'}}"></nav>
<view class="all" style="height: {{contentHeight}}rpx;" wx:if="{{active==0}}">
    <view class="number">
        <view class="num">
            <view class="num-num">{{sharList[0].burnCalories||0}}</view>
            <view class="num-text">
                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/p7a8bu044758822.png?imageView2/1/w/200/h/200"></image>
                卡路里
            </view>
        </view>
        <view class="num">
            <view class="num-num">
                {{sharList[0].sportDate||0}}
                <view class="numtext">分钟</view>
            </view>
            <view class="num-text">
                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/opj155044741516.png?imageView2/1/w/200/h/200"></image>
                步数时间
            </view>
        </view>
        <view class="num">
            <view class="num-num">{{sharList[0].distance||0}}</view>
            <view class="num-text">
                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/9i4h5l044715444.png?imageView2/1/w/200/h/200"></image>
                公里
            </view>
        </view>
    </view>
    <view class="circlebox">
        <view class="runbox" style="background:{{percentage}}">
            <view class="run">
                <view class="tody-steps">今日步数</view>
                <view class="step-num">{{sharList[0].steps}}</view>
                <view class="objective">
                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/q12pc1114226514.png?imageView2/1/w/200/h/200" alt="" />
                    <view class="ob-num">目标：{{target}}</view>
                </view>
                <view class="achieve">{{percent}}% 已完成</view>
            </view>
        </view>
        <!-- <image class="image2" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/14819p045007276.png?imageView2/1/w/200/h/200"></image> -->
    </view>
    <view class="sharebox">
        <button class="share" open-type="share">分享给好友</button>
        <!-- <view class="share">分享给好友</view> -->
    </view>
    <view class="text">
        <view class="text2">|</view>
        <view class="text3">本周记录</view>
    </view>
    <view class="chart">
        <ec-canvas id="mychart" canvas-id="mychart" ec="{{ec}}"></ec-canvas>
    </view>
</view>
<view class="all2" style="height: {{contentHeight}}rpx;" wx:if="{{active==1}}">
    <view class="card1">
        <view class="card1-title">
            <view>|</view>
            生涯合计
        </view>
        <view class="card1-in">自{{stardate||0}}开始，共{{daysDifference||0}}天，您走了</view>
        <view class="card1-card">
            <view class="card1card-number">{{totalSteps||0}}</view>
            <view class="card1card-text">步，相当于</view>
        </view>
        <view class="card1-card2">
            <view class="card1-c2c">
                <view class="card1-c2cnum">{{totalBurnCalories||0}}</view>
                <view class="card1-c2ctex">卡路里</view>
            </view>
            <view class="card1-c2c">
                <view class="card1-c2cnum">{{totalsportDate||0}}</view>
                <view class="card1-c2ctex">时间</view>
            </view>
            <view class="card1-c2c">
                <view class="card1-c2cnum">{{totalDistance||0}}</view>
                <view class="card1-c2ctex">公里</view>
            </view>

        </view>
    </view>
    <view class="card2">
        <view class="card2-top">
            <view class="card2-title">
                <view>|</view>
                生涯合计
            </view>
            <view class="card2-title2">今日{{sharList[0].steps||0}}步</view>
        </view>
        <view class="card2-bottom">
            <view class="card2-bottom1">今日步数已超过</view>
            <view class="card2-bottom2">
                <view class="card2-bottom2t">{{percebtage}}</view>
                <view class="card2-bottom2t2">%</view>
            </view>
            <view class="card2-bottom3">的用户，赶紧行动起来</view>

        </view>
    </view>
    <view class="card3">
        <view class="card3-top">
            <view class="card3-title">
                <view>|</view>
                生涯合计
            </view>
            <view class="card3-title2">
                <view class="{{day=='7'?'card3-bu2':'card3-bu'}}" bindtap="changeday">7天</view>
                <view class="{{day=='30'?'card3-bu2':'card3-bu'}}" bindtap="changeday">30天</view>
            </view>
        </view>
        <view class="card3-midin">
            <view class="card3-midin2">
                <view class="card3-midinnum">{{average}}步</view>
                <view class="card3-midintex">平均</view>
            </view>
            <view class="card3-midin2">
                <view class="card3-midinnum">{{totle}}步</view>
                <view class="card3-midintex">总计</view>
            </view>
        </view>
        <view class="card3-bottom" wx:if="{{day=='7'}}">
            <ec-canvas wx:if="{{day=='7'}}" id="mychart" canvas-id="mychart" ec="{{ec}}"></ec-canvas>
        </view>
        <view class="card4-bottom" wx:if="{{day=='30'}}">
            <van-calendar title='运动数据' poppable="{{ false }}" show-confirm="{{ false }}"  min-date="{{ minDate }}"  max-date="{{ maxDate }}"  formatter="{{ formatter }}" color='#015EEA' default-date="{{todatDate}}" />
        </view>
    </view>
</view>
<van-tabbar active="{{ active }}" bind:change="onChange" placeholder='true'>
    <van-tabbar-item>
        <image slot="icon" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/o1c3n1030041552.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
        <image slot="icon-active" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/g5fcr1030200091.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
        今日步数
    </van-tabbar-item>
    <van-tabbar-item>
        <image slot="icon" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/hc5guq030414553.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
        <image slot="icon-active" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/v1hhkk030354434.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
        周期统计
    </van-tabbar-item>

</van-tabbar>