english_learned_master/pages/main/article.wxml

<navigation-bar
  title="文章"
  back="{{!IsBuilding}}"
  background="{{ThemeCSS === 'DarkColor' ? '#004433' : '#D0ECD3'}}"
  color="{{ThemeCSS === 'DarkColor' ? '#ffffff' : '#151815'}}"
  extClass="fixed-nav {{ThemeCSS}}"
></navigation-bar>
<!-- 正常文章 -->
<view wx:if="{{!IsBuilding && !IsBuildError}}" class="{{ThemeCSS}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;' bindtap="onContainerTap">
  <view class="panel1 FlexColumn">
    <rich-text class="textArticle" wx:if="{{!IsShowTranslate}}" nodes="{{Content.ArticleEnglishStr}}"></rich-text>
    <view class="textArticle FlexColumn" wx:if="{{IsShowTranslate}}">
      <view wx:for="{{Content.ArticleEnglish}}" wx:key="index" class="textArticle">
        <rich-text class="textArticle" nodes="{{item}}"></rich-text>
        <view class="textArticleTranslate">{{Content.ArticleChinese[index]}}</view>
        <view class="panelLine" wx:if="{{index<Content.ArticleEnglish.length-1}}"></view>
      </view>
    </view>
  </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 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">{{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">{{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="true" 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"  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="{{IsShowFirstOpen}}" 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" bind:tap="closeHelp">知道了</view>
    </view>
  </view>
</view>

<!-- 显示生成中 -->
<view wx:if="{{IsBuilding}}" class="container {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight+140}}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 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">
      <text class="text10">Vocabulary:</text>
      <text class="text11">{{WordsStr}}</text>
    </view>
  </view>
</view>

<!-- 显示生成出错 -->
<view wx:if="{{IsBuildError}}" class="container {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight+140}}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>