HanziLearn_master/pages/main/detail.wxml

<view class="container FlexColumn" style='height:{{Height}}rpx;'>
  <view class="main FlexColumn" bindtap='playAudio' data-click="true">
    <block wx:if="{{CurrentIndex<List.length-1}}">
      <view class="pinyin">
        <block wx:if="{{ShowPinyin}}">
          {{List[CurrentIndex].Pinyin}}
        </block>
      </view>
      <image binderror='getImageError' wx:if="{{!IsImageError}}" src='{{List[CurrentIndex].WordUrl}}' class="wordImage" />
      <image catchtap='getImageDownload' wx:if="{{IsImageError}}" src='../../images/05014.png' class="wordImage" />
    </block>
    <block wx:if="{{CurrentIndex==List.length-1}}">
      <view class="hanziEnd FlexColumn" wx:if="{{hanziType!='review'}}">
        <view wx:if="{{WordType!='review'}}">章节</view>
        <view class="hanziEnd2">{{List[CurrentIndex].Title}}</view>
        <view class="hanziEnd3">{{List[CurrentIndex].Title2}}</view>
      </view>

      <view class="finished FlexColumn" catchtap='updateFinish' wx:if="{{WordType!='review' && IsFinished}}">
        <view class="finished1 FlexColumn" >
          <image src='../../images/05010.png' class="btnImage04006" />
        </view>
      </view>
      <view class="finished2 finished FlexColumn" catchtap='updateFinish' wx:if="{{WordType!='review' && !IsFinished}}">
        <view class="finished3 finished1 FlexColumn" >
          <image src='../../images/05011.png' class="btnImage04006" />
        </view>
      </view>
    </block>

    <view class="{{RemindCss}} Remind" animation="{{animationData}}">{{RemindStr}}</view>

  </view>
  <view class="detail" wx:if="{{IsShowWordDetail}}">
    <image src='{{Detail.BiShunUrl}}' class="bishun" />
    <view class="line"></view>
    <view class="title2 title FlexRow">
      <view class="title1">汉语拼音</view>
    </view>
    <view class="content FlexRow">
      <view class="pinyin FlexRow" wx:for="{{Detail.PinYin}}" wx:key="index" catchtap='playAudio' data-click="true" data-pinyin="{{item.pinyin}}">
        <view>{{item.pinyin}}</view>
        <image src='../../images/05008.png' class="btnImage05008" />
      </view>
    </view>
    <view class="title FlexRow">
      <view class="title1">汉字结构</view>
    </view>
    <view class="content FlexColumn">
      <view class="content1 FlexRow">
        <view class="left">部首</view>
        <view class="right">{{Detail.BuShou}}</view>
      </view>
      <view class="line2 FlexRow">
        <view class="line3"></view>
      </view>
      <view class="content1 FlexRow">
        <view class="left">笔画</view>
        <view class="right">{{Detail.BiHua}}</view>
      </view>
    </view>
    <view class="title FlexRow">
      <view class="title1">基本释义</view>
    </view>
    <view class="content FlexColumn">
      <view class="content2 FlexColumn" wx:for="{{Detail.PinYin}}" wx:key="index" wx:for-item="item">
        <view class="pinyin2 FlexRow" wx:if="{{Detail.PinYin.length>1}}">[
          <view class="pinyin3">{{item.pinyin}}</view>]</view>
        <text class="explain FlexColumn" wx:for="{{item.explain}}" wx:key="i" wx:for-item="itemChild">{{itemChild}}</text>
      </view>
    </view>
    <view class="title FlexRow">
      <view class="title1">相关组词</view>
    </view>
    <view class="content FlexColumn">
      <view class="content2 FlexRow">
        <text class="combineWords" wx:for="{{Detail.CombineWords}}" wx:key="i">{{item}}</text>
      </view>
    </view>
    <view class="title FlexRow" wx:if="{{Detail.Antonym || Detail.Synonym}}">
      <view class="title1">近反义词</view>
    </view>
    <view class="content FlexColumn">
      <view class="content1 FlexRow" wx:if="{{Detail.Antonym}}">
        <view class="left">反义词</view>
        <view class="right">{{Detail.Antonym}}</view>
      </view>
      <view class="line2 FlexRow" wx:if="{{Detail.Synonym}}">
        <view class="line3"></view>
      </view>
      <view class="content1 FlexRow" wx:if="{{Detail.Synonym}}">
        <view class="left">近义词</view>
        <view class="right">{{Detail.Synonym}}</view>
      </view>
    </view>
    <view class="bottom1">

    </view>
  </view>

  <view class="bottom FlexColumn">
    <view class="bottom1 FlexRow">
      <view class="btn FlexColumn" bindtap='prevHandler'>
        <image src='../../images/05001.png' class="btnImage05001" wx:if="{{IsShowPrev && !IsAutoPage }}" />
      </view>
      <view class="btn FlexColumn" bindtap='reviewHandler'>
        <image wx:if="{{!List[CurrentIndex].IsReview && IsShowNext && !IsAutoPage}}" src='../../images/05002.png' class="btnImage05002" />
        <image wx:if="{{List[CurrentIndex].IsReview && IsShowNext && !IsAutoPage}}" src='../../images/05003.png' class="btnImage05002" />
        <image wx:if="{{!IsShowNext}}" src='../../images/05009.png' class="btnImage022" />
      </view>
      <view class="btn FlexColumn" bindtap='openSetting'>
        <image src='../../images/05004.png' class="btnImage05004" />
      </view>
      <view class="btn FlexColumn" bindtap='showWordDetailHandler' data-id='{{List[CurrentIndex].ID}}'>
        <image src='../../images/05005.png' wx:if="{{!IsShowWordDetail && IsShowNext && !IsAutoPage}}" class="btnImage05005" />
        <image src='../../images/05006.png' wx:if="{{IsShowWordDetail && IsShowNext && !IsAutoPage}}" class="btnImage05006" />
      </view>
      <view class="btn FlexColumn" bindtap='nextHandler' data-status="click">
        <image src='../../images/05007.png' class="btnImage05001" wx:if="{{IsShowNext && !IsAutoPage}}" />
      </view>
    </view>
  </view>
</view>

<!-- 设置 -->
<view class="settingContainer container FlexColumn" style='height:{{Height}}rpx;' wx:if="{{IsShowSetting}}">

  <view class="title1">
    <view class="title1_1">汉字显示</view>
  </view>
  <view class="line FlexColumn">
    <view class="line1"></view>
  </view>
  <view class="title2 FlexRow" bindtap='showSettingMenu' data-status="sort">
    <view class="title2_1">顺序</view>
    <view class="title2_2 FlexRow">
      <view>{{SortTitle}}</view>
      <image src='../../images/Arrow.png' class="Arrow" />
    </view>
  </view>

  <view class="title1">
    <view class="title1_1">汉字朗读</view>
  </view>
  <view class="title2 FlexRow" bindtap='showSettingMenu' data-status="speaker">
    <view class="title2_1">发音人</view>
    <view class="title2_2 FlexRow">
      <view>{{SpeakerTitle}}</view>
      <image src='../../images/Arrow.png' class="Arrow" />
    </view>
  </view>
  <view class="line FlexColumn">
    <view class="line1"></view>
  </view>
  <view class="title3 FlexRow">
    <view class="title2_1 FlexColumn">
      <view>连贯演示</view>
      <view class="title3_2">间隔 {{arrIntervalSecond[IntervalSecondIndex]}} 秒连续翻页并播放读音，不能点读</view>
    </view>
    <switch class='title2_2' checked="{{PageChecked}}" bindchange="settingPage" />
  </view>
  <view class="line FlexColumn">
    <view class="line1"></view>
  </view>

  <view class="title3 FlexRow" wx:if="{{IsAutoPage}}">
    <view class="title2_1 FlexColumn">
      <view>播放间隔秒数</view>
    </view>

    <view class="title2_2 FlexRow">
      <picker bindchange="bindPickerChange" value="{{IntervalSecondIndex}}" range="{{arrIntervalSecond}}">
        <view>
          {{arrIntervalSecond[IntervalSecondIndex]}} 秒
        </view>
      </picker>
      <image src='../../images/Arrow.png' class="Arrow" />
    </view>

  </view>


  <view class="title3 FlexRow" wx:if="{{!IsAutoPage}}">
    <view class="title2_1 FlexColumn">
      <view>默认播放读音</view>
    </view>
    <switch class='title2_2' checked="{{PlayChecked}}" bindchange="settingPlay" />
  </view>

  <view class="line FlexColumn" wx:if="{{!IsAutoPage}}">
    <view class="line1"></view>
  </view>

  <view class="title3 FlexRow">
    <view class="title2_1 FlexColumn">
      <view>默认显示拼音</view>
    </view>
    <switch class='title2_2' checked="{{ShowPinyin}}" bindchange="settingShowPinyin" />
  </view>

  <view class="line FlexColumn" wx:if="{{!IsAutoPage}}">
    <view class="line1"></view>
  </view>

  <view class="title3 FlexRow">
    <view class="title2_1 FlexColumn">
      <view>组词播报</view>
      <view class="title3_2">“中国的国”，以组词形式播报</view>

    </view>
    <switch class='title2_2' checked="{{IsAudioLengthChecked}}" bindchange="settingAudioLength" />
  </view>


  <view class="bottom FlexColumn" bindtap='closeSetting'>
    <view class="bottom1 FlexRow">
      返回
    </view>
  </view>

</view>

<!-- 设置菜单 -->
<view class="settingMenu container FlexColumn" style="height:{{Height}}rpx;" wx:if="{{isShowSettingMenu}}">
  <view class="settingMenu1 FlexColumn">
    <block wx:if="{{ShowMenu=='sort'}}">
      <view class="settingMenuBasic2 FlexColumn">
        <image class="settingMenuIcon" src="../../images/303.png" />
        <view class="word2">选择汉字显示顺序</view>
      </view>
      <view class="settingMenuBasic FlexColumn" bindtap='settingSort' data-id="false">
        <view class="word">按课文顺序排序</view>
        <image class="SelectLogo" src="../../images/012.png" hidden="{{selectedRandom}}" />
      </view>
      <view style='height:2rpx'></view>
      <view class="settingMenuBasic FlexColumn" bindtap='settingSort' data-id="true">
        <view class="word">随机排序</view>
        <image class="SelectLogo" src="../../images/012.png" hidden="{{!selectedRandom}}" />
      </view>
    </block>

    <block wx:if="{{ShowMenu=='speaker'}}">
      <view class="settingMenuBasic2 FlexColumn">
        <image class="settingMenuIcon" src="../../images/130.png" />
        <view class="word2">选择发音人</view>
      </view>
      <block wx:for="{{SpeakerArray}}" wx:key="index">
        <view style='height:2rpx'></view>
        <view class="settingMenuBasic FlexColumn" bindtap='settingSpeaker' data-id="{{index}}">
          <view class="word">{{item.name}}</view>
          <image class="SelectLogo" src="../../images/012.png" hidden="{{!item.isShow}}" />
        </view>
      </block>
    </block>
    <view style='height:20rpx'></view>
    <view class="settingMenuBasic" bindtap='closeSettingMenu'>取消</view>
  </view>
</view>

<audio hidden='true' src="{{AudioSrc}}" id="myAudio"></audio>