reader/pages/reading/index.wxml

<view class="readingBox">
    <!-- 查看全部配音作品 -->
    <view class="moreWork" wx:if="{{readingType=='public'||readingType=='readMatch'}}">
        <view class="left">查看全部配音作品</view>
        <view class="right" bindtap="otherWork" style="width: {{(videoInfo.avatarList.length+1)*42+64}}rpx;">
            <block wx:for="{{videoInfo.avatarList}}" wx:key="index">
                <image class="moreImg" style="left: {{(index+1)*40}}rpx;" src="{{item}}"></image>
            </block>
            <image src="/static/more.png" class="moreImg" />
        </view>
    </view>
    <view class="videoBox" 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}}"
            custom-cache="{{false}}" controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
    </view>
    <view class="audio" bindtap='videoPlay' wx:else>
        <!-- <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" /> -->
        <!-- <view class="mask"></view> -->
        <view class="audioPlay" 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 class="progressBar">
            <image src="{{state||exampleState?'/static/aStop.png':'/static/aPlay.png'}}" class="audioSwitch" />
            <view class="time">{{silderData.currentTime}}</view>
            <slider class="slider" value="{{silderData.sliderValue}}" catchtap="false"
                disabled="{{!state&&!exampleState}}" catchchange="slider" block-size='12' backgroundColor='#ffffff50'
                selected-color="#ffffff" />
            <view class="time">{{silderData.endTime}}</view>
        </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:else src="/static/work.png" class="playImg" bindtap="eeeeee" /> -->
        <view class="workBox">
            <view class="vipLogo" wx:if="{{!isVip}}">VIP</view>
            <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
            <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
        </view>
        <view class="text">
            {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}
        </view>
        <block wx:if="{{readingReset}}">
            <uploadFile activityId='{{activityId}}' readingType='{{readingType}}' class="btnPosition"
                wx:if="{{!uploadHide}}" />
            <view class="stBtn" bindtap="backReading">退出</view>
        </block>
    </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>
    <page-container show="{{uploadState}}" bind:beforeleave='beforeleave'>
        <view class="uploadBox">
            <view class="upload">
                <image src="/static/uploadTips.png" class="tipsImg" />
                <view>{{readingType=='pk'?'挑战结算中,小朋友请耐心等待哦~':'作品上传中,小朋友请耐心等待哦~'}}</view>
                <view class="speed">
                    {{percent}}%
                </view>
            </view>
        </view>
    </page-container>
    <buyVip id="buyVip" />
    <canvas id='share' type="2d"> </canvas>
    <vipModal id="vipModal"></vipModal>
    <canvas id='vip' type="2d"> </canvas>
</view>