english_learned_master/pages/main/article.wxml

<block wx:if="{{!IsBuilding && !IsBuildError}}">
  <!-- 正常文章 -->
  <view class="{{ThemeCSS}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;' catch:tap="hideWordTranslate">
    <view id="panelArticle" style="width: 100%;height: 1rpx;"></view>
    <view class="panel1 FlexColumn">
      <!-- 完整文章 -->
      <text class="textArticle" wx:if="{{!IsShowTranslate}}">
        <text bindlongpress="onLongPress" data-strtype="article" data-index="{{index}}" wx:for="{{Content.ArticleEnglishArr}}" wx:key="index">
          <text class="{{itemChild.CSS}}" wx:for="{{item}}" wx:key="index2" wx:for-item="itemChild" wx:for-index="indexChild" catch:tap="selectWord" data-word="{{itemChild.Sentence}}" data-original-word="{{itemChild.OriginalWord}}" data-css="{{itemChild.CSS}}">{{itemChild.Sentence}} </text>
        </text>
      </text>
      <!-- 有翻译文章 -->
      <view class="textArticle FlexColumn" wx:if="{{IsShowTranslate}}">
        <view wx:for="{{Content.ArticleEnglishArr}}" wx:key="index" class="textArticle">
          <text class="{{itemChild.CSS}}" wx:for="{{item}}" wx:key="index2" wx:for-item="itemChild" wx:for-index="indexChild" bind:tap="selectWord" data-word="{{itemChild.Sentence}}" data-original-word="{{itemChild.OriginalWord}}" data-css="{{itemChild.CSS}}">{{itemChild.Sentence}} </text>
          <view class="textArticleTranslate">{{Content.ArticleChinese[index]}}</view>
          <view class="panelLine" wx:if="{{index<Content.ArticleEnglish.length-1}}"></view>
        </view>
      </view>
    </view>
    <view style="width: 100%;height:700rpx;" wx:if="{{IsShowQuestion}}"></view>
    <view style="width: 100%;height:{{TranslateHeight}}rpx;" wx:if="{{IsShowWordTranslate}}"></view>

    <view wx:if="{{!IsShowQuestion}}" class="panelFooter FlexRow">
      <view class="panelFooter1 FlexRow">
        <view class="panelFooter11 panelFooter10 FlexColumn" bind:tap="showData" data-name="IsShowTranslate">
          <image src="../images/sysIcon_a15.png" class="sysIcon_a15"></image>
          <view class="text02">中英对照</view>
        </view>
        <view id="btnQAndA" class="panelFooter12 panelFooter10 FlexColumn" bind:tap="showData" data-name="IsShowQuestion">
          答题
        </view>
        <view class="panelFooter13 panelFooter10 FlexColumn" bind:tap="showData" data-name="IsShowSetting">
          <image src="../images/sysIcon_a08.png" class="sysIcon_a03"></image>
          <view class="text02">更多</view>
        </view>
      </view>
    </view>

    <!-- 看问题 -->
    <view hidden="{{!IsShowQuestion}}" class="{{ThemeCSS}} panelAnswer FlexColumn">
      <view class="text03">Reading Comprehension Questions</view>
      <swiper class="panelAnswer1" indicator-dots="true" current="{{CurrentQuestionIndex}}" bindchange="updateQuestionIndex">
        <swiper-item class="panelAnswer1Item" wx:for="{{Content.Question}}" wx:key="index" data-index="{{index}}">
          <scroll-view scroll-y="true" class="panelAnswer1Item1 FlexColumn">
            <view class="panelAnswer2 FlexRow">
              <image src="../images/sysIcon_c0{{index+1}}.png" wx:if="{{ThemeCSS=='DarkColor'}}" class="sysIcon_c01"></image>
              <image src="../images/sysIcon_d0{{index+1}}.png" wx:if="{{ThemeCSS=='LightColor'}}" class="sysIcon_c01"></image>
              <view class="text04 FlexColumn">
                <view class="text041" bindlongpress="onLongPress" data-strtype="question" data-index="{{index}}">{{item.QuestionEnglish}}</view>
                <view class="text042" wx:if="{{IsShowTranslate}}">{{item.QuestionChinese}}</view>
              </view>
            </view>
            <view class="panelAnswer3 FlexColumn">
              <view class="panelAnswer31 {{ item.AnswerNumber==indexChild && item.IsShowAnswer?'panelAnswer310':'' }} FlexRow" wx:for="{{item.OptionsEnglish}}" wx:key="indexChild" wx:for-item="itemChild" wx:for-index="indexChild" catch:tap="selectedAnswer" data-question="{{index}}" data-index="{{indexChild}}">
                <view class="panelAnswer311 {{ item.AnswerNumber==indexChild && item.IsShowAnswer?'panelAnswer3110':'' }}" wx:if="{{indexChild!=item.UserAnswer}}"></view>
                <view class="panelAnswer311 panelAnswer3110 FlexColumn" wx:if="{{indexChild==item.UserAnswer}}">
                  <image wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_a10.png" class="sysIcon_a10"></image>
                  <image wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_a11.png" class="sysIcon_a10"></image>
                </view>
                <view class="text05 FlexColumn">
                  <view class="text051" bindlongpress="onLongPress" data-strtype="option" data-index="{{index}}" data-index2="{{indexChild}}">{{itemChild}}</view>
                  <view class="text052" wx:if="{{IsShowTranslate}}">{{item.OptionsChinese[indexChild]}}</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
      <view class="panelLine2"></view>
      <view class="panelAnswer4 FlexRow">
        <view class="btn1 FlexRow" catch:tap="showData" data-index="{{CurrentQuestionIndex}}" data-name="IsShowAnswer" wx:if="{{!Content.Question[CurrentQuestionIndex].IsShowAnswer}}">看答案</view>
        <view class="btn1 FlexRow" catch:tap="showData" data-index="{{CurrentQuestionIndex}}" data-name="IsShowAnswer" wx:if="{{Content.Question[CurrentQuestionIndex].IsShowAnswer}}">关答案</view>
        <view class="btn1  {{ CurrentQuestionIndex+1==Content.Question.length?'btn10':'' }} FlexRow" catch:tap="nextQuestion">下一题</view>
      </view>
      <view class="btnClose" capture-bind:tap="showData" data-name="IsShowQuestion">隐藏</view>
    </view>

    <!-- 设置 -->
    <view wx:if="{{IsShowSetting}}" class="panelAnswer FlexColumn">
      <view class="text03 text06">更多功能</view>
      <view class="btn2 FlexRow" catch:tap="generatePDF">
        <view>PDF下载</view>
      </view>
      <view class="panelAnswer5 FlexColumn">
        <view class="panelAnswer51 FlexRow">
          <view class="text12">突出关键词</view>
          <switch class="switchClass" bindchange="showData" checked="{{IsShowKeyword}}" data-name="IsShowKeyword" />
        </view>
        <view class="text13">用亮色强调用来生成短文的单词</view>
      </view>
      <view class="panelLine3"></view>
      <view class="panelAnswer5 FlexColumn">
        <view class="panelAnswer51 panelAnswer510 FlexRow">
          <view class="text12">浅色方案</view>
          <switch class="switchClass" bindchange="showData" checked="{{IsShowLightColor}}" data-name="IsShowLightColor" />
        </view>
      </view>
      <view class="btnClose btnClose2 FlexRow" capture-bind:tap="showData" data-name="IsShowSetting">
        <image wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_a03.png" class="sysIcon_a03"></image>
        <image wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_a09.png" class="sysIcon_a03"></image>
      </view>
    </view>

  </view>

  <!-- 翻译 -->
  <view wx:if="{{IsShowWordTranslate}}" class="panelTranslate FlexColumn" catch:tap="setDataBoolean" data-name="IsShowWordTranslate">
    <text class="panelTranslateTest1">{{EnglishSentence}}</text>
    <text class="panelTranslateTest2">{{ChineseSentence}}</text>
    <view class="panelTranslateCollect FlexRow" wx:if="{{TranslateHeight==100}}" >
      <view class="panelTranslateCollect1 FlexRow" catch:tap="saveUserCollect" data-word="{{EnglishSentence}}">
        <image wx:if="{{!IsCollect}}" src="../images/sysIcon_a35.png" class="sysIcon_a35"></image>
        <image wx:if="{{IsCollect}}" src="../images/sysIcon_a36.png" class="sysIcon_a35"></image>
      </view>
      <view class="panelTranslateCollect1 FlexRow" catch:tap="onDoubleClickHandler" data-original-word="{{EnglishSentence}}">
        <image src="../images/sysIcon_a45.png" class="sysIcon_a45"></image>
      </view>
    </view>
  </view>

  <!-- 单词细节 -->
  <view wx:if="{{IsShowWordDetail}}" class="panelTranslate panelTranslate2 FlexColumn" catch:tap="setDataBoolean" data-name="IsShowWordDetail">
    <view class="panelTranslate21 FlexRow">
      <text class="panelTranslateTest1 panelTranslateTest10">{{WordJSON.Word}}</text>
      <view class="panelTranslateCollect FlexRow" catch:tap="saveUserCollect" data-word="{{WordJSON.Word}}">
        <view class="panelTranslateCollect1 FlexRow">
          <image wx:if="{{!IsCollect}}" src="../images/sysIcon_a35.png" class="sysIcon_a35"></image>
          <image wx:if="{{IsCollect}}" src="../images/sysIcon_a36.png" class="sysIcon_a35"></image>
        </view>
        <view class="panelTranslateCollect1 FlexRow" catch:tap="setDataBoolean" data-name="IsShowWordDetail">
          <image src="../images/sysIcon_a09.png" class="sysIcon_a09"></image>
        </view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="panelTranslateScroll FlexColumn">
      <block wx:if="{{WordJSON.Soundmark}}">
        <view class="panelTranslate22 FlexRow">
          <view class="panelTranslate22Text panelTranslate22Text0 FlexRow" catch:tap="playAudio" data-url="{{WordJSON.Soundmark.EngSound}}" wx:if="{{WordJSON.Soundmark.EngSound}}">
            英{{WordJSON.Soundmark.Eng}}
            <image src="../images/sysIcon_a44.png" class="sysIcon_a44"></image>
          </view>
          <view class="panelTranslate22Text FlexRow" catch:tap="playAudio" data-url="{{WordJSON.Soundmark.AmESound}}" wx:if="{{WordJSON.Soundmark.AmESound}}">
            美{{WordJSON.Soundmark.AmE}}
            <image src="../images/sysIcon_a44.png" class="sysIcon_a44"></image>
          </view>
        </view>
      </block>
      
      <block wx:if="{{WordJSON.CEFR_Level || WordJSON.WordFrequency || WordJSON.Book.length>0}}">
        <view class="panelTranslateLine"></view>
        <scroll-view class="panelTranslate23"  scroll-x="true">
          <view class="panelTranslate231 FlexRow" wx:if="{{WordJSON.CEFR_Level}}"><view>CEFR {{WordJSON.CEFR_Level}}</view></view>
          <view class="panelTranslate231 panelTranslate232 FlexRow" wx:if="{{WordJSON.WordFrequency}}"><view>高频单词{{WordJSON.WordFrequency.Max}}范围</view></view>
          <view class="panelTranslate231 panelTranslate232 FlexRow" wx:if="{{WordJSON.Book}}" wx:for="{{WordJSON.Book}}" wx:key="*this"><view>{{item}}</view></view>
          <view style="width:30rpx;display: inline-block;"></view>
        </scroll-view>
      </block>

      <block wx:if="{{WordJSON.ParaphraseEng}}">
        <view class="panelTranslateLine" ></view>
        <view class="panelTranslate24 FlexColumn" wx:for="{{WordJSON.ParaphraseEng}}" wx:key="*this">
          <view class="panelTranslate241" wx:for="{{item.ParaphraseList}}" wx:key="*this" wx:for-item="itemChild">
            {{item.PartOfSpeech}} {{itemChild}}
          </view>
        </view>
        <view style="height:30rpx;"></view>
      </block>

      <block wx:if="{{WordJSON.Paraphrase}}">
        <view class="panelTranslateLine" wx:if="{{WordJSON.Paraphrase}}"></view>
        <view class="panelTranslate24 FlexColumn" wx:for="{{WordJSON.Paraphrase}}" wx:key="*this">
          <view class="panelTranslate241">{{item.PartOfSpeech}} <block class="panelTranslate242" wx:for="{{item.ParaphraseList}}" wx:key="*this" wx:for-item="itemChild">
            {{itemChild}}
          </block>
          </view>
        </view>
        <view style="height:30rpx;"></view>
      </block>

      <block wx:if="{{WordJSON.Paraphrase}}">
        <view class="panelTranslateLine" ></view>
        <view class="panelTranslate24 FlexColumn" wx:for="{{WordJSON.ExamplesSentences}}" wx:key="*this">
          <text class="panelTranslate241 panelTranslate242">{{item[0]}}</text>
          <view class="panelTranslate241 panelTranslate243">{{item[1]}}</view>
        </view>
      </block>

      <view style="height:50rpx;"></view>
    </scroll-view>

  </view>

  <!-- 显示第一次打开帮助 -->
  <view wx:if="{{IsShowFirstOpen2}}" class="panelHelp container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
    <view class="panelHelp1">
      <image src="../images/sysIcon_b07.png" class="sysIcon_b07"></image>
      <view class="panelHelp2 FlexColumn">
        <text class="text07">点击译单词，双击看详细，长按译句子\n点答题做题目，右下角还有PDF</text>
        <view class="btn3 FlexColumn" catch:tap="setDataBoolean" data-name="IsShowFirstOpen2" data-savedata="2">知道了</view>
      </view>
    </view>
  </view>
</block>

<!-- 引入引导模板 -->
<import src="../templates/guide-container.wxml" />
<!-- 显示引导 -->
<template is="guide-container" data="{{IsShowGuideContainer, panelGuideContainerTop, panelGuideContainerWidth1, panelGuideContainerHeight1, panelGuideContainerLeft2, Containnerheight, panelGuideContainerImage, panelGuideContainerImageLeft, panelGuideContainerImageTop, panelGuideContainerCloseLeft, panelGuideContainerCloseTop}}" />

<!-- 显示生成出错 -->
<view wx:if="{{IsBuildError}}" class="container {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <view class="{{ThemeCSS}} panelError FlexColumn">
    <image wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_b14.png" class="sysIcon_b14"></image>
    <image wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_b15.png" class="sysIcon_b14"></image>
    <view class="textError1">抱歉，生成失败</view>
    <view class="textError2">可能生成过于频繁、网络不畅或使用了不适合的单词，请稍候再试。</view>
  </view>
</view>


<!-- 显示生成排队中 -->
<view wx:if="{{IsBuildQueue}}" class="container {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <view class="{{ThemeCSS}} panelError FlexColumn">
    <image wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_b14.png" class="sysIcon_b14"></image>
    <image wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_b15.png" class="sysIcon_b14"></image>
    <view class="textError1">抱歉，生成排队中</view>
    <view class="textError2">生成文章已加入队列，等待处理，请稍候</view>
  </view>
</view>

<!-- 显示生成中 -->
<view wx:if="{{IsBuilding}}" class="container panelBuildindParent {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
</view>
<image wx:if="{{IsBuilding && ThemeCSS=='DarkColor'}}" src="../images/pic_08.png" mode="widthFix" class="pic_08"></image>
<image wx:if="{{IsBuilding && ThemeCSS=='LightColor'}}" src="../images/pic_09.png" mode="widthFix" class="pic_08"></image>
<view wx:if="{{IsBuilding}}" class="panelBuilding panelBuilding{{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight+140}}rpx;'>
  <view class="panelBuilding1 FlexColumn">
    <image src="../images/pic_03.png" class="pic_03"></image>
    <image src="../images/sysIcon_b08.gif" class="sysIcon_b08"></image>
    <view class="panelBuilding11 FlexColumn">
      <text class="text08" wx:if="{{CountDown>0}}">生成中…{{CountDown}}秒</text>
      <text class="text08" wx:if="{{CountDown==0}}">生成中…差一点，就快好了</text>
      <text class="text09">生成后会通知您，等待时可看看下面这些范文</text>
    </view>
    <view class="panelBuilding12 FlexColumn">
      <view class="panelBuilding121 FlexRow" wx:for="{{ChoicenessList}}" wx:key="index" catch:tap="goto" data-url="./article?ID={{item.ID}}" wx:if="{{item.IsRecommend}}">
        <image src="../images/sysIcon_a17.png" class="sysIcon_a17"></image>
        <view class="panelBuilding121text">{{item.ArticleTitle}}</view>
      </view>
      <view class="panelBuilding121 panelBuilding122 FlexColumn" catch:tap="goto" data-url="articlefine">更多精选</view>
    </view>
  </view>
</view>

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