reader/pages/reading/index.wxml

<view class="readingBox">
  <block wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
    <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!exampleState}}" bindtap="videoPlay" />
    <image src="/static/play-btn.png" bindtap="videoPlay" wx:if="{{!state&&!exampleState}}" class="playBtn" />
    <!-- 水印 -->
    <image src="{{videoInfo.readMaskTemplate.imgPath}}" class="watermark" />
    <video id="myVideo" src="{{videoPath}}" bindended='videoEnd' show-center-play-btn="{{readingReset}}"
      controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
  </block>
  <view class="audio" wx:else>
    <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
    <view class="mask"></view>
    <view class="audioPlay" bindtap='videoPlay'
      style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
      <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
      <image src="/static/zhen.png" class="audioPlayZhen" />
      <image src="/static/play-btn.png" wx:if="{{!state&&!exampleState}}" class="playBtn" />
      <image src="{{videoInfo.userRead.coverImg}}" class="cover {{state||exampleState?'circle':''}}" mode="" />
    </view>
  </view>
  <view class="contentBox" wx:if="{{!readingReset}}">
    <view class="articleMask"></view>
    <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
      scroll-with-animation>
      <view style="height: 100rpx;"></view>
      <view class="row {{currentRow==index?'currentRow':''}}" wx:for="{{article}}" wx:key="id">{{item.text}}
      </view>
      <view style="height: {{contentH}}rpx;"></view>
    </scroll-view>
  </view>
  <view class="scoreBoxC" wx:elif="{{readingReset}}">
    <view class="scoreBox">
      <!-- 星星区域 -->
      <view class="lightBox">
        <image src="/static/{{readDetail.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1" mode="" />
        <image src="/static/{{readDetail.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2" mode="" />
        <image src="/static/{{readDetail.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3" mode="" />
        <image src="/static/{{readDetail.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4" mode="" />
        <image src="/static/{{readDetail.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5" mode="" />
        <image src="/static/light.png" class="light" mode="" />
      </view>
      <!-- 主体得分区域 -->
      <view class="score">
        <view class="avatarBox">
          <image src="{{userInfo.avatar}}" class="avatar" mode="" />
        </view>
        <view class="nickName">
          {{userInfo.nickName||userInfo.eid}}
        </view>
        <view class="totalScore">
          <text>综合得分：</text>
          <text class="num">{{readDetail.myOverall}}</text>
        </view>
        <view class="progressBox">
          <view class="row">
            <view class="name">完整度</view>
            <progress class="progress" active percent='{{readDetail.integrity}}' stroke-width="18"
              activeColor="#70D9FF" />
            <view class="scoreInfo">
              {{readDetail.integrity}}/100
            </view>
          </view>
          <view class="row">
            <view class="name">正确率</view>
            <progress class="progress" active percent='{{readDetail.accuracy}}' stroke-width="18"
              activeColor="#918EFD" />
            <view class="scoreInfo">
              {{readDetail.accuracy}}/100
            </view>
          </view>
          <view class="row">
            <view class="name">流利度</view>
            <progress class="progress" active percent='{{readDetail.fluency}}' stroke-width="18"
              activeColor="#FE9500" />
            <view class="scoreInfo">
              {{readDetail.fluency}}/100
            </view>
          </view>
          <view class="row">
            <view class="name">语调</view>
            <progress class="progress" active percent='{{readDetail.tone}}' stroke-width="18" activeColor="#9BE74B " />
            <view class="scoreInfo">
              {{readDetail.tone}}/100
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="controller">
    <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
    <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
    <view class="text">
      {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}</view>
    <uploadFile wx:if="{{readingReset&&!uploadHide}}" class="btnPosition" />
  </view>
  <view class="playImgBg"></view>
  <!-- 倒计时 -->
  <view class="countDownBox" wx:if="{{countDown.state}}">
    <view class="countDown">
      <view class="number">{{countDown.num}}</view>
      <view class="tips">秒后开始</view>
    </view>
  </view>
  <view class="uploadBox" wx:if="{{uploadState}}">
    <view class="upload">
      <view class="speed">{{percent}}%</view>
      <progress percent="{{percent}}" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
      <view>挑战结算中</view>
    </view>
  </view>
  <readingTips id="readingTips"></readingTips>
  <canvas id='share' type="2d"> </canvas>
</view>