english_learned_master/pages/main/article.js

import common from '../../utils/util';
import main from '../../utils/main';
const Theme=[{
    "Name":"DarkColor",
    "backgroundColor": "#004433",
    "color":"#C1E1C1",
    "frontColor": '#ffffff',
  },{
    "Name":"LightColor",
    "backgroundColor": "#D0ECD3",
    "color":"#151815",
    "frontColor": '#000000',
  }
];
const app = getApp();

Page({
  data: {
    Words:"",
    IsShowPanelHelp:true,
    IsBuilding:false,
    IsShowLightColor:false,
    IsShowKeyword:true,//显示关键词
    IsShowQuestion:true,
    IsShowTranslate:false,
    IsShowAnswer:false,
    IsShowSetting:false,
    CurrentQuestionIndex:0,
    swiperHeight: "526rpx",
    lastTapTime: 0, // 记录上一次点击的时间，用于检测双击
  },
  onLoad: function (options) {
    let that = this;
    let words=app.globalData.SelectedWords.join(" ");
    const hiddenhelp=wx.getStorageSync('HiddenArticleHelp');

    that.setData({
      Containnerheight: main.getWindowHeight(),
      Words:words, 
      IsShowPanelHelp:!hiddenhelp,
    });

    that.init();
    that.setTheme();
  },

  init:function(){
    const that=this;
    let content={
          "ArticleEnglish": [
              "Once upon a time, there was a king in a beautiful kingdom.",
              "A fierce dragon came and brought yellow fire to the kingdom.",
              "The people in the kingdom were very afraid.",
              "A brave boy and a kind - hearted girl decided to go and fight against the dragon.",
              "They came to the dragon's cave and saw the dragon sleeping.",
              "The boy used a big stick to wake up the dragon.",
              "The dragon was angry and spat out yellow fire at them.",
              "But the boy and the girl were not scared.",
              "They worked together and finally defeated the dragon.",
              "The king was very happy and thanked the boy and the girl."
          ],
          "ArticleChinese": [
              "从前，在一个美丽的王国里有一位国王。",
              "一条凶猛的龙来了，给王国带来了黄色的火焰。",
              "王国里的人们非常害怕。",
              "一个勇敢的男孩和一个善良的女孩决定去与龙战斗。",
              "他们来到了龙的洞穴，看到龙正在睡觉。",
              "男孩用一根大棍子把龙叫醒了。",
              "龙很生气，朝他们吐出了黄色的火焰。",
              "但是男孩和女孩并不害怕。",
              "他们齐心协力，最终打败了龙。",
              "国王非常高兴，感谢了男孩和女孩。"
          ],
          "FormsOfWords": [
              "boy",
              "girl",
              "king",
              "come",
              "came",
              "go",
              "went",
              "yellow",
              "dragon",
              "dragons",
              "fire"
          ],
          "Question": [
              {
                  "QuestionEnglish": "Who brought yellow fire to the kingdom?",
                  "QuestionChinese": "谁给王国带来了黄色的火焰？",
                  "OptionsEnglish": [
                      "A. The boy",
                      "B. The girl",
                      "C. The king",
                      //"D. The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon  The dragon"
                      "D. The dragon"
                  ],
                  "OptionsChinese": [
                      "A. 男孩",
                      "B. 女孩",
                      "C. 国王",
                      "D. 龙"
                  ],
                  "Answer": "D"
              },
              {
                  "QuestionEnglish": "What did the boy and the girl decide to do?",
                  "QuestionChinese": "男孩和女孩决定做什么？",
                  "OptionsEnglish": [
                      "A. Go home",
                      "B. Fight against the dragon",
                      "C. Play with the dragon",
                      "D. Sleep in the cave"
                  ],
                  "OptionsChinese": [
                      "A. 回家",
                      "B. 与龙战斗",
                      "C. 和龙一起玩",
                      "D. 在洞穴里睡觉"
                  ],
                  "Answer": "B"
              },
              {
                  "QuestionEnglish": "How did the boy wake up the dragon?",
                  "QuestionChinese": "男孩是如何叫醒龙的？",
                  "OptionsEnglish": [
                      "A. By shouting",
                      "B. By using a big stick",
                      "C. By throwing stones",
                      "D. By singing"
                  ],
                  "OptionsChinese": [
                      "A. 通过大喊",
                      "B. 通过使用一根大棍子",
                      "C. 通过扔石头",
                      "D. 通过唱歌"
                  ],
                  "Answer": "B"
              },
              {
                  "QuestionEnglish": "How did the dragon feel when it woke up?",
                  "QuestionChinese": "龙醒来时感觉如何？",
                  "OptionsEnglish": [
                      "A. Happy",
                      "B. Sad",
                      "C. Angry",
                      "D. Tired"
                  ],
                  "OptionsChinese": [
                      "A. 高兴的",
                      "B. 悲伤的",
                      "C. 生气的",
                      "D. 疲惫的"
                  ],
                  "Answer": "C"
              },
              {
                  "QuestionEnglish": "What did the king do after the boy and the girl defeated the dragon?",
                  "QuestionChinese": "男孩和女孩打败龙后，国王做了什么？",
                  "OptionsEnglish": [
                      "A. He punished them",
                      "B. He thanked them",
                      "C. He ignored them",
                      "D. He was angry with them"
                  ],
                  "OptionsChinese": [
                      "A. 他惩罚了他们",
                      "B. 他感谢了他们",
                      "C. 他无视了他们",
                      "D. 他对他们很生气"
                  ],
                  "Answer": "B"
              }
          ]
      };
    that.updateData(content);
  },
  setTheme:function(){
    const that=this;
    const css=Theme[that.data.IsShowLightColor?1:0];
    wx.setNavigationBarColor({
      frontColor: css.frontColor,
      backgroundColor: css.backgroundColor,
    });
    wx.setBackgroundColor({
      backgroundColor: css.backgroundColor,
      backgroundColorTop:css.backgroundColor,
      backgroundColorBottom:css.backgroundColor,
    });
    that.setData({
      ThemeCSS:css.Name,
    });
  },
  updateData:function(content){
    const that=this;
    //console.log(content);
    for(let i=0;i<content.ArticleEnglish.length;i++){
      for(let j=0;j<content.FormsOfWords.length;j++){
        let word = content.FormsOfWords[j];
        let regex = new RegExp(`\\b${word}\\b[.,!?;:]?`, 'gi');
        if (that.data.IsShowKeyword){
          content.ArticleEnglish[i] = content.ArticleEnglish[i].replace(regex, match => {
            let punctuation = match.match(/[.,!?;:]$/);
            let punc = punctuation ? punctuation[0] : '';
            let wordPart = match.replace(/[.,!?;:]$/, '');
            return `<span class='highlight'>${wordPart}</span>${punc}`;
          });
        }
      }
    }
    content.ArticleEnglishStr=content.ArticleEnglish.join(" ");
    for(let i=0;i<content.Question.length;i++){
      for(let j=0;j<content.Question[i].OptionsEnglish.length;j++){
        let str=content.Question[i].OptionsChinese[j];
        content.Question[i].OptionsChinese[j]=str.substr(2);
      }
      let char = content.Question[i].Answer;
      let asciiCode = char.charCodeAt(0);
      content.Question[i].AnswerNumber=asciiCode-65;
    }
    that.setData({
      Content:content,
    }, function() {
      // 数据加载完成后，计算swiper高度
      that.calculateSwiperHeight();
      setTimeout(function(){
        that.setData({
          IsShowQuestion:false,
        })
      },1000);
    });
  },
  closeHelp:function(){
    this.setData({
      IsShowPanelHelp:false,
    });
    wx.setStorageSync('HiddenArticleHelp', true);
  },
  selectedAnswer:function(e){
    const that=this;
    const question=e.currentTarget.dataset.question;
    const index=e.currentTarget.dataset.index;
    that.data.Content.Question[question].UserAnswer=index;
    that.setData({
      Content:that.data.Content,
    });
  },

  showData:function(e){
    const that=this;
    let name=e.currentTarget.dataset.name;
    this.data[name] = !this.data[name];
    this.setData(this.data);

    if (name=="IsShowKeyword"){
      that.setShowKeyword();
    }
    else if (name=="IsShowLightColor"){
      that.setTheme();
    }
    else if (this.data[name] && (name=="IsShowTranslate" || name=="IsShowQuestion")){
      wx.showLoading({
        title: '请稍等',
        mask:true,
      })
      that.calculateSwiperHeight();
      setTimeout(function(){
        wx.hideLoading();
      },500);
    }
  },
  setShowKeyword:function(){
    const that=this;
    let content=that.data.Content;
    let source="highlight",target="nonelight";
    if (that.data["IsShowKeyword"]){
      source="nonelight";
      target="highlight";
    }
    content.ArticleEnglishStr=common.ReplaceAllString(content.ArticleEnglishStr,source,target);
    for(let i=0;i<content.Question.length;i++){
      for(let j=0;j<content.Question[i].OptionsEnglish.length;j++){
        content.Question[i].OptionsEnglish[j]=common.ReplaceAllString(content.Question[i].OptionsEnglish[j],source,target);
      }
    }
    that.setData({
      Content:content,
    });
  },
  nextQuestion:function(e){
    if (this.data.CurrentQuestionIndex+1<this.data.Content.Question.length){
      this.data.CurrentQuestionIndex=this.data.CurrentQuestionIndex+1;
      this.setData({
        IsShowAnswer:false,
        CurrentQuestionIndex:this.data.CurrentQuestionIndex,
      });
    }
  },
  updateQuestionIndex:function(e){
    this.setData({
      CurrentQuestionIndex:e.detail.current,
    });
  },
  // 计算所有swiper-item的高度，并设置swiper的高度为最高的那个
  calculateSwiperHeight: function() {
    const that = this;

    // 增加延迟时间，确保DOM完全渲染
    setTimeout(function() {
      // 分别计算每个问题和选项的高度
      const query = wx.createSelectorQuery();
      
      // 先计算问题文本的高度
      query.selectAll('.text04').boundingClientRect();
      
      // 再计算所有选项的高度
      query.selectAll('.text05').boundingClientRect();
      
      query.exec(function(res) {
        if (!res || res.length < 2 || !res[0] || !res[1]) return;
        
        const questionRects = res[0];
        const optionsRects = res[1];
        
        // 计算每个swiper-item的总高度
        let itemHeights = [];
        
        // 假设问题和选项是一一对应的
        const questionCount =questionRects.length;
        
        for (let i = 0; i < questionCount; i++) {
          // 问题高度 + 选项高度 + 固定间距(margin等)
          let totalHeight = questionRects[i].height + 100; // 100是估计的间距
          for(let j=0;j<4;j++){
            optionsRects[i*4+j].height=optionsRects[i*4+j].height*2+40;
            console.log(optionsRects[i*4+j].height);
            totalHeight+=optionsRects[i*4+j].height;
          }
          //debugger;
          itemHeights.push(totalHeight);
        }
        
        // 找出最高的高度
        let maxHeight = 0;
        itemHeights.forEach(function(height) {
          if (height > maxHeight) {
            maxHeight = height;
          }
        });
        
          console.log("计算的各项高度:", itemHeights);
          console.log("最大高度:", maxHeight);
        
        // 为swiper高度增加一些额外空间（为指示点和边距）
        maxHeight += 200; // 增加额外空间，确保内容完全显示
        
        // 设置swiper的高度
        that.setData({
          swiperHeight: maxHeight + 'rpx',
        });
      });
    }, 500); // 增加延迟时间到500ms
  },

  onContainerTap: function() {
    const currentTime = new Date().getTime();
    const lastTapTime = this.data.lastTapTime;
    const timeDiff = currentTime - lastTapTime;
    
    // 如果两次点击的时间间隔小于300毫秒，则认为是双击
    if (timeDiff < 300 && timeDiff > 0) {
      console.log('双击事件触发');
      // 在这里添加双击事件的处理逻辑
      // 例如：切换翻译显示状态
      this.showData({currentTarget:{dataset:{name:"IsShowTranslate"}}});
    }
    
    // 更新上一次点击的时间
    this.setData({
      lastTapTime: currentTime
    });
  },
  onShareAppMessage: function () {
    return {
      title: app.globalData.ShareTitle,
      path: app.globalData.SharePath + '?UserID=' + app.globalData.userInfo.UserID,
      imageUrl: app.globalData.ShareImage,
    }
  },
})