涂色提组件优化

闫增涛

2024-07-01 0ab7ff07fd29ac32be045d505ae2d2b9290647a7

 src/books/mathBook/view/components/chapter001.vue

@@ -156,7 +156,7 @@
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectImg ? collectCheck : collectImg"
                :src="collectResourceList.findIndex(item => item.id == '722FE833') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('img')"
@@ -184,7 +184,7 @@
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                :src="collectResourceList.findIndex(item => item.id == 'a28cd862d61b5df2201406b76e9f01b0') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
@@ -564,23 +564,55 @@
          </p>
          <div class="bj">
            <examinations
              :cardList="questionData"
              :cardList="questionData[9]"
              :hideCollect="true"
              sourceType="json"
              inputBc="#d3edfa"
              v-if="questionData"
              :isReal="false"
            ></examinations>
            <p class="gr-title">四、函数 f(x)=x’-3 的图像在 轴左边的部分如图所示，请你画出这个函数图像在 y轴右边的部分.</p>
            <div style="margin:0 auto;width:330px">
              <graffiti :page="9" :bcImg="this.config.activeBook.resourceUrl + '/images/0103-2.jpg'" :imgHeight="300" :imgWidth="300" :bcColor="'#d3edfa'"  /> 
            </div>
            
          </div>
        </div>
      </div>
    </div>

    <!-- 函数控件弹窗 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :append-to-body="true"
      :show-close="false"
    >
    <div slot="title" style="padding: 0 0 15px 0;position: relative;">
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="dialogVisible = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <iframe
        src="https://www.geogebra.org/calculator"
        frameborder="0"
@@ -790,24 +822,28 @@

<script>
import examinations from "@/components/examinations/index.vue";
import graffiti from '@/components/graffiti/index.vue'
import { getResourcePath } from "@/assets/methods/resources";
import axios from "axios";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  components: { examinations },
  components: { examinations,graffiti },
  props: {
    showPageList: {
      type: Array,
      default: [],
    },
    questionData:{
      type:Object
    }
  },
  mounted() {
  async mounted() {
    const data = localStorage.getItem("math-chapterData");
    if (data) {
      this.chapterData = JSON.parse(data);
    }
    this.getPath();
    this.getQuestionData();
    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
  },
  data() {
    return {
@@ -822,9 +858,9 @@
      thinkingDialog: false,
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex: 1,
      collectResourceList:[],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -855,6 +891,80 @@
          isShow: false,
        },
      ],
      dragQuestion:[
          {
          analysisCon: null,
          answer: ['A','B','C'],
          difficulty: 0,
          id: "7BC7B760",
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          option: [
            {
              img: "",
              index: "010311",
              txt: "胆小的",
              value: "A",
              isShow:true
            },
            {
              img: "",
              index: "010312",
              txt: "善良的",
              value: "B",
              isShow:true
            },
            {
              img: "",
              index: "010313",
              txt: "沉稳的",
              value: "C",
              isShow:true
            },
          ],
          optionStyle: "Txt",
          questionType: "drag",
          score: 2,
          stem: {
            0: "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只(",
            1:{
              data: "span",
              num: 0
            },
            2: ")蚂蚁;小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只(",
            3:{
              data:"span",
              num:1
            },
            4:")蚂蚁;蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只(",
            5:{
              data:"span",
              num:2,
            },
            6:" )蚂蚁"
          },
          stemStyle: "RichTxt",
          type: "拖拽题",
          userAnswer:[
            {
              vlaue:'',
              txt:''
            },
            {
              vlaue:'',
              txt:''
            },
            {
              vlaue:'',
              txt:''
            },
          ]
        },
      ]
    };
  },
  methods: {
@@ -869,45 +979,46 @@
        "a28cd862d61b5df2201406b76e9f01b0"
      );
    },
    getQuestionData() {
      axios
        .get(this.config.activeBook.resourceUrl + "/question.json")
        .then((res) => {
          let oldAnswer = localStorage.getItem(
            this.config.activeBook.name + "oldAnswerData"
          );
          if (oldAnswer) {
            oldAnswer = JSON.parse(oldAnswer);
            console.log("旧数据", oldAnswer);
            if (oldAnswer[9]) {
              for (let index = 0; index < res.data.data.length; index++) {
                const item = res.data.data[index];
                if (item.infoList.length) {
                  for (
                    let cindex = 0;
                    cindex < item.infoList.length;
                    cindex++
                  ) {
                    const citem = item.infoList[cindex];
                    const question = oldAnswer[9].find(
                      (ditem) => ditem.id == citem.id
                    );
                    if (question) {
                      citem.userAnswer = question.userAnswer;
                    }
                  }
                }
              }
            }
          }
          this.questionData = res.data.data;
        });
    },
    // getQuestionData() {
    //   axios
    //     .get(this.config.activeBook.resourceUrl + "/question.json")
    //     .then((res) => {
    //       let oldAnswer = localStorage.getItem(
    //         this.config.activeBook.name + "oldAnswerData"
    //       );
    //       if (oldAnswer) {
    //         oldAnswer = JSON.parse(oldAnswer);
    //         console.log("旧数据", oldAnswer);
    //         if (oldAnswer[9]) {
    //           for (let index = 0; index < res.data.data.length; index++) {
    //             const item = res.data.data[index];
    //             if (item.infoList.length) {
    //               for (
    //                 let cindex = 0;
    //                 cindex < item.infoList.length;
    //                 cindex++
    //               ) {
    //                 const citem = item.infoList[cindex];
    //                 const question = oldAnswer[9].find(
    //                   (ditem) => ditem.id == citem.id
    //                 );
    //                 if (question) {
    //                   citem.userAnswer = question.userAnswer;
    //                 }
    //               }
    //             }
    //           }
    //         }
    //       }
    //       this.questionData = res.data.data;
    //     });
    // },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
        this.handleCollectResource("722FE833","",'images/0101-1.jpg',"图片","json",'图3-15')
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
        this.handleCollectResource("a28cd862d61b5df2201406b76e9f01b0","a28cd862d61b5df2201406b76e9f01b0",'',"视频","bits",'视频：判数函数奇偶性的方法和步骤')
        // setCollectResource(this.config.activeBook.bookId,[])
      }
      this.handleChapterData();
    },
@@ -932,6 +1043,25 @@
        this.stepIndex++;
      }
    },
    //资源收藏事件
    handleCollectResource(id,md5,resourcePath,resourceType,source,resourceName){
      console.log(this.collectResourceList);
      let list = this.collectResourceList
      if(list.findIndex(item => item.id == id) > -1) {
        list = list.filter(item => item.id != id)
      } else {
        list.push({
          id,
          md5,
          resourcePath,
          resourceType,
          source,
          resourceName,
        })
      }
      this.collectResourceList = list
      setCollectResource(this.config.activeBook.bookId,this.collectResourceList)
    }
  },
};
</script>