english_learned_master/pages/main/article.wxml

<block wx:if="{{!IsBuilding && !IsBuildError}}">
<!-- 正常文章 -->
<view class="{{ThemeCSS}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <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">{{itemChild.Sentence}}</text>
      </text>
    </text>
    <!-- 有翻译文章 -->
    <view class="textArticle FlexColumn" wx:if="{{IsShowTranslate}}">
      <view wx:for="{{Content.ArticleEnglishArr}}" wx:key="index" class="textArticle">
        <!-- <rich-text class="textArticle" nodes="{{item}}"></rich-text> -->
        <text  class="{{itemChild.CSS}}" wx:for="{{item}}" wx:key="index2" wx:for-item="itemChild" wx:for-index="indexChild">{{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 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="{{IsShowRemind}}" class="panelRemindParent {{remindAnimation}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <view class="panelRemind FlexColumn">
    <image src="../images/sysIcon_b17.png" class="sysIcon_b10"></image>
      
    <view class="panelRemind1 FlexRow">
      <image src="../images/sysIcon_b18.png" class="sysIcon_b09"></image>
      <view>中英对照</view>
    </view>
    <view class="panelRemind2 FlexColumn">
      <view class="textRemind FlexColumn">
        <text>{{EnglishSentence}}</text>
        <text class="textRemind2">{{ChineseSentence}}</text>
      </view>
      <view class="btnReind1 FlexColumn" catch:tap="showRemind">关闭</view>
    </view>
  </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" bind:tap="closeHelp">知道了</view>
    </view>
  </view>
</view>
</block>

<!-- 显示引导 -->
<view  wx:if="{{IsShowGuideContainer}}" class="panelGuideContainer container FlexColumn">
  <view class="panelGuideContainerTop panelGuideContainer0" style='height:{{panelGuideContainerTop}}rpx;' catchtouchmove="catchTouchMove"></view>
  <view class="panelGuideContainerLeft panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;width:{{panelGuideContainerWidth1}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
  <view class="panelGuideContainerRight panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;left:{{panelGuideContainerLeft2}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
  <view class="panelGuideContainerBottom panelGuideContainer0" style='top:{{panelGuideContainerTop+panelGuideContainerHeight1-1}}rpx;height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove"></view>
  <image class="panelGuideContainerImage {{panelGuideContainerImage}}" style="left:{{panelGuideContainerImageLeft}}rpx;top:{{panelGuideContainerImageTop}}rpx;" src="../images/{{panelGuideContainerImage}}.png" catchtouchmove="catchTouchMove">
    <view class="panelGuideContainerClose FlexColumn" style="left:{{panelGuideContainerCloseLeft}}rpx;top:{{panelGuideContainerCloseTop}}rpx;" catchtap="closeGuideContainer"></view>
  </image>
</view>

<!-- 显示生成出错 -->
<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="{{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 && AIVersion=='1.0'}}">生成中…差一点，就快好了</text>
      <text class="text08" wx:if="{{CountDown==0 && AIVersion=='1.5'}}">再等一等，就差一点点了</text>
      <text class="text09">用1.0生成文章平均30秒，用1.5平均60秒，\n这是由于1.5的单词水平更高、思考更为深入。</text>
    </view>
    <view class="panelBuilding12 FlexColumn">
      <text class="text10">生成后会通知您，等待时可看看这些范文:</text>
      <view class="panelBuilding121 FlexRow">
        <view class="panelBuilding1211 FlexRow" wx:for="{{ChoicenessList}}" wx:key="index" catch:tap="goto" data-url="./article?ID={{item.ID}}">
          <image src="../images/sysIcon_a17.png" class="sysIcon_a17"></image>
          <view class="panelBuilding12111 FlexColumn">
            <view class="panelBuilding1211text">{{item.ArticleTitle}}</view>
            <view class="panelBuilding1211text2">{{item.LevelStr}} {{item.ArticleStyle}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>