详情页tabs样式优化，答题添加页面退出拦截，合并代码

闫增涛

2024-04-09 3d73fb33c46aada16a6060adcd4ea14bb33b6b2a

 packageBookService/pages/bookServices/examination/questionOptions/index.js

@@ -1,4 +1,3 @@

// pages/bookServices/examination/questionOptions/index.js
Component({
  /**
@@ -11,15 +10,15 @@
    },
    questionDataList: {
      type: Array,
      value: []
      value: [],
    },
    cardList: {
      type: Array,
      value: []
      value: [],
    },
    subjectiveTotal: {
      type: Number,
      value: 0
      value: 0,
    },
    countdownTime: {
      type: Number,
@@ -27,23 +26,23 @@
    },
    answerType: {
      type: String,
      value: ''
      value: "",
    },
    subjectiveNum: {
      type: Number,
      value: 0
      value: 0,
    },
    subjectiveGrade: {
      type: Number,
      value: 0
      value: 0,
    },
    correctNum: {
      type: Number,
      value: 0
      value: 0,
    },
    submitStatus: {
      type: Boolean,
      value: false
      value: false,
    },
    mockSumTime: {
      type: Number,
@@ -51,8 +50,8 @@
    },
    isNight: {
      type: Boolean,
      value: false
    }
      value: false,
    },
  },

  /**
@@ -64,29 +63,35 @@
    questionCardState: false,
    setUpPopup: false,
    testReportState: false,
    sliderValue: 10,
    useTime: '',
    radioItem: 'daytime'
    sliderValue: 36,
    useTime: "",
    radioItem: "daytime",
  },
  observers: {
    "countdownTime": function (newValue, oldValue) {
      if (this.properties.answerType == 'option') {
    countdownTime: function (newValue, oldValue) {
      if (this.properties.answerType == "option") {
        this.setData({
          useTime: this.formatTime(2 * 60 * 60 * 1000 - this.properties.countdownTime)
        })
      }
      else if (this.properties.answerType == 'option') {
          useTime: this.formatTime(
            2 * 60 * 60 * 1000 - this.properties.countdownTime
          ),
        });
      } else if (this.properties.answerType == "option") {
        this.setData({
          useTime: this.formatTime(this.properties.mockSumTime - this.properties.countdownTime)
        })
          useTime: this.formatTime(
            this.properties.mockSumTime - this.properties.countdownTime
          ),
        });
      }
      if (newValue == 0 && (this.properties.answerType == 'option' || this.properties.answerType == 'mock')) {
        this.timeout()
      if (
        newValue == 0 &&
        (this.properties.answerType == "option" ||
          this.properties.answerType == "mock")
      ) {
        this.timeout();
      }
    },
  },
  created() {
  },
  created() {},

  /**
   * 组件的方法列表
@@ -96,61 +101,60 @@
    formatTime(ms) {
      const hours = Math.floor((ms / (1000 * 60 * 60)) % 24)
        .toString()
        .padStart(2, '0')
        .padStart(2, "0");
      const minutes = Math.floor((ms / (1000 * 60)) % 60)
        .toString()
        .padStart(2, '0')
        .padStart(2, "0");
      const seconds = Math.floor((ms / 1000) % 60)
        .toString()
        .padStart(2, '0')
      return `${hours}:${minutes}:${seconds}`
        .padStart(2, "0");
      return `${hours}:${minutes}:${seconds}`;
    },
    // 判断是否输入答案
    isHaveAnswer(data) {
      if (typeof data == 'string') {
      if (typeof data == "string") {
        data = data
          .replace(/<[^>]*>/g, '')
          .replace(/&nbsp;/g, '')
          .trim()
          .replace(/<[^>]*>/g, "")
          .replace(/&nbsp;/g, "")
          .trim();
        if (data.length) {
          return true
          return true;
        } else {
          return false
          return false;
        }
      } else {
        const answer = data.find((item) => item.length > 0)
        const answer = data.find((item) => item.length > 0);
        if (answer) {
          return true
          return true;
        } else {
          return false
          return false;
        }
      }
    },
    setCollect() {
      var myEventDetail = {
      }
      var myEventDetail = {};
      var myEventOption = {
        bubbles: true,
        composed: true,
      }
      this.triggerEvent('setCollect', myEventDetail, myEventOption)
      };
      this.triggerEvent("setCollect", myEventDetail, myEventOption);
    },
    // 答题卡按钮
    handlePopup() {
      this.setData({
        questionCardState: true
      })
        questionCardState: true,
      });
    },
    // 答题卡跳转题目
    goQuestion(e) {
      var myEventDetail = {
        id: e.currentTarget.dataset.id
      }
        id: e.currentTarget.dataset.id,
      };
      var myEventOption = {
        bubbles: true,
        composed: true,
      }
      this.triggerEvent('goQuestion', myEventDetail, myEventOption)
      };
      this.triggerEvent("goQuestion", myEventDetail, myEventOption);
    },
    // 答题卡遮罩层点击
    onVisibleChange(e) {
@@ -161,129 +165,144 @@
    // 设置按钮
    setUpBtn() {
      this.setData({
        setUpPopup: true
      })
        setUpPopup: true,
      });
    },
    // 滑块变化
    onChangeSlider(e) {
      console.log(e);
      this.setData({
        sliderValue: e.detail.value
      })
      const value = e.detail.value;
      console.log(value);
      this.triggerEvent("onChangeSlider", { value });
    },
    // 设置遮罩层点击
    onSetUpChange(e) {
      this.setData({
        setUpPopup: e.detail.visible
      })
        setUpPopup: e.detail.visible,
      });
    },
    // 设置模式切换
    onRadioChange(e) {
      this.setData({
        radioItem: e.detail.value
      })
      const value = e.detail.value == 'night' ? true : false
      this.triggerEvent('changeBGColor', { value })
        radioItem: e.detail.value,
      });
      const value = e.detail.value == "night" ? true : false;
      wx.setNavigationBarColor({
        backgroundColor: "#222",
        frontColor: "#222",
      });

      this.triggerEvent("changeBGColor", { value });
    },
    // 重做按钮
    resterBtn() {
      wx.showModal({
        title: '提示',
        content: '是否重新开始答题？',//editable如果为true，这就是输入框的内容
        editable: false,//是否显示输入框
        title: "提示",
        content: "是否重新开始答题？", //editable如果为true，这就是输入框的内容
        confirmColor: "#ff6c00",
        cancelColor: "#949494",
        editable: false, //是否显示输入框
        success: (res) => {
          if (res.confirm) {
            this.restart()
            this.restart();
          }
        }
      })
        },
      });
    },
    // 重做事件
    restart() {
      var myEventDetail = {
      }
      var myEventDetail = {};
      var myEventOption = {
        bubbles: true,
        composed: true,
      }
      this.triggerEvent('restart', myEventDetail, myEventOption)
      };
      this.triggerEvent("restart", myEventDetail, myEventOption);
    },

    // 还有N道题未做弹窗
    confrimPromptDialog() {
      wx.showModal({
        title: '提示',
        content: `您还有 ${this.data.noReady}道题未答，是否提交？`,//editable如果为true，这就是输入框的内容
        editable: false,//是否显示输入框
        title: "提示",
        content: `您还有 ${this.data.noReady}道题未答，是否提交？`, //editable如果为true，这就是输入框的内容
        confirmColor: "#ff6c00",
        cancelColor: "#949494",
        editable: false, //是否显示输入框
        success: (res) => {
          if (res.confirm) {
            this.submitPaper()
            this.submitPaper();
          }
        }
      })
        },
      });
    },
    // 底部提交按钮
    submitBtn() {
      this.setData({
        noReady: 0,
      });
      // 我的错题和收藏  直接走提交逻辑
      if (this.properties.answerType == 'collectQuestion' || this.properties.answerType == 'errorQuestion') {
        this.submitPaper()
        return wx.navigateBack()
      } else if (this.properties.answerType == 'option' || this.properties.answerType == 'mock') {
        if (this.properties.submitStatus) return wx.navigateBack()
        this.properties.questionDataList.forEach(item => {
      if (
        this.properties.answerType == "collectQuestion" ||
        this.properties.answerType == "errorQuestion"
      ) {
        this.submitPaper();
        return wx.navigateBack();
      } else if (
        this.properties.answerType == "option" ||
        this.properties.answerType == "mock"
      ) {
        if (this.properties.submitStatus) return wx.navigateBack();
        this.properties.questionDataList.forEach((item) => {
          if (!this.isHaveAnswer(item.userAnswer)) {
            this.setData({
              noReady: this.data.noReady + 1
            })
              noReady: this.data.noReady + 1,
            });
          }
        })
        });
        // 未做完，打开提示弹窗
        if (this.data.noReady > 0) {
          this.confrimPromptDialog()
          this.confrimPromptDialog();
        } else {
          // 做完了直接执行提交事件
          this.submitPaper()
          this.submitPaper();
        }
      }

    },
    // 提交事件
    submitPaper() {
      var myEventDetail = {
      }
      var myEventDetail = {};
      var myEventOption = {
        bubbles: true,
        composed: true,
      }
      this.triggerEvent('submitPaper', myEventDetail, myEventOption)
      };
      this.triggerEvent("submitPaper", myEventDetail, myEventOption);
    },
    // 打开测试报告弹窗
    openTestReportDialog() {
      this.setData({
        testReportState: true
      })
        testReportState: true,
      });
    },
    // 关闭测试报告弹窗
    closeTestReportDialog(e) {
      this.setData({
        testReportState: false
      })
        testReportState: false,
      });
    },
    // 测试报告弹窗查看答案解析按钮
    viewAnswer() {
      this.closeTestReportDialog()
      this.closeTestReportDialog();
    },
    // 答题时间到
    timeout() {
      wx.showModal({
        title: '提示',
        content: '答题时间已到',//editable如果为true，这就是输入框的内容
        editable: false,//是否显示输入框
        title: "提示",
        content: "答题时间已到", //editable如果为true，这就是输入框的内容
        confirmColor: "#ff6c00",
        cancelColor: "#949494",
        editable: false, //是否显示输入框
        showCancel: false,
        success: (res) => {
        }
      })
      this.submitPaper()
    }
  }
})
        success: (res) => {},
      });
      this.submitPaper();
    },
  },
});