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" wx:if="{{active==0}}">
  <view class="number">
    <view class="num">
      <view class="num-num">{{sportsDate.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">
        {{sportsDate.sportDate/60||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">{{sportsDate.distance/1000||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">{{sportsDate.steps||0}}</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||0}}% 已完成</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>
  <view class="text">
    <view class="text2">|</view>
    <view class="text3">本周记录</view>
  </view>
  <block>
    <view style="width: 100vw; height: 800rpx;z-index: 0;">
      <ec-canvas wx:if="{{option}}" style="width: 100vw; height: 800rpx;z-index: 0;" ec="{{ ec }}"></ec-canvas>
    </view>
  </block>
</view>

<view class="all2" wx:if="{{active==1}}">
  <view class="card1">
    <view class="card1-title">
      <view>|</view>
      生涯合计
    </view>
    <view class="card1-in">自{{careerData.startDate||0}}开始，共{{careerData.difDays||0}}天，您走了</view>
    <view class="card1-card">
      <view class="card1card-number">{{careerData.steps||0}}</view>
      <view class="card1card-text">步,累计</view>
    </view>
    <view class="card1-card2">
      <view class="card1-c2c">
        <view class="card1-c2cnum">{{careerData.burnCalories||0}}</view>
        <view class="card1-c2ctex">卡路里</view>
      </view>
      <view class="card1-c2c">
        <view class="card1-c2cnum" wx:if="{{careerData.sportDate.days||careerData.sportDate.hours}}">{{careerData.sportDate.days}}天{{careerData.sportDate.hours}}小时</view>
        <view class="card1-c2cnum" wx:else>不足1小时</view>
        <view class="card1-c2ctex">时间</view>
      </view>
      <view class="card1-c2c">
        <view class="card1-c2cnum">{{careerData.distance||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">今日{{rankOfAll.steps||0}}步</view>
    </view>
    <view class="card2-bottom">
      <block wx:if="{{rankOfAll.percent||rankOfAll.steps}}">
        <view class="card2-bottom1">今日步数已超过</view>
        <view class="card2-bottom2">
          <view class="card2-bottom2t">{{rankOfAll.percent}}</view>
          <view class="card2-bottom2t2">%</view>
        </view>
        <view class="card2-bottom3">的用户，赶紧行动起来</view>
      </block>
      <block wx:else>
        <view class="card2-bottom1">今日排名</view>
        <view class="card2-bottom2">
          <view class="card2-bottom2t">200</view>
          <view class="card2-bottom2t2">之外</view>
        </view>
        <view class="card2-bottom3">赶紧行动起来吧</view>
      </block>
    </view>
  </view>
  <view class="card3">
    <view class="card3-top">
      <view class="card3-title">
        <view>|</view>
        近期趋势
      </view>
      <view class="card3-title2">
        <view class="{{rece==7?'card3-bu2':'card3-bu'}}" data-t="7" bindtap="changeTrend">7天</view>
        <view class="{{rece==30?'card3-bu2':'card3-bu'}}" data-t="30" bindtap="changeTrend">30天</view>
      </view>
    </view>
    <view class="card3-midin">
      <view class="card3-midin2">
        <view class="card3-midinnum">{{receDate.svg||0}}步</view>
        <view class="card3-midintex">每日平均</view>
      </view>
      <view class="card3-midin2">
        <view class="card3-midinnum">{{receDate.count||0}}步</view>
        <view class="card3-midintex">总计</view>
      </view>
    </view>
    <view class="card3-bottom">
      <view style="height: 600rpx;z-index: 0;">
        <block>
          <ec-canvas wx:if="{{option}}" ec="{{ ec }}"></ec-canvas>
        </block>
      </view>
    </view>
  </view>
</view>




<van-tabbar fixed="{{false}}" active="{{ active }}" z-index='9999' bind:change="onChange">
  <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>