GCLS_Page_Book_Component_NPC/src/components/Adult/preview/NewWordShow.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
    <div class="item-box">
      <div class="item" v-for="(item, index) in curQue.option" :key="index">
        <p v-if="item.pinyin">{{ item.pinyin }}</p>
        <div class="con-box">
          <template v-if="item.imgOrText == 'text'">
            <template v-if="item.con">
              <div
                :key="conindex"
                class="strockplay"
                v-for="(conItem, conindex) in item.con"
                @click="writeWord(conItem, item.pinyin)"
              >
                <Strockplayredline
                  :Book_text="conItem"
                  :playStorkes="true"
                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex"
                />
                <div
                  class="bwc-line"
                  v-if="conindex < item.con.length - 1"
                ></div>
              </div>
            </template>
            <template v-else>
              <div class="blank-item" @click="freeWrite('', index)">
                <img :src="freeImg[index]" v-if="freeImg[index]" />
              </div>
            </template>
          </template>
          <template v-else>
            <div
              class="img-box"
              v-for="(imgItem, imgIndex) in item.img_list"
              :key="imgIndex"
              @click="freeWrite(imgItem.url, imgIndex)"
            >
              <el-image :src="imgItem.url" fit="scale-down" class="img_url">
                <div slot="placeholder" class="image-slot">
                  <img src="../../../assets/common/icon-imgloading.png" />
                </div>
              </el-image>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
      <Practice
        :changePraShow="changePraShow"
        :cur="curData"
        :themeColor="themeColor"
      />
    </div>
    <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
      <FreePaint
        :changePraShow="changePraShow"
        :cur="curDataImg"
        ref="freePaint"
        :themeColor="themeColor"
      />
    </div>
  </div>
</template>

<script>
import Strockplayredline from "../preview/components/Strockplayredline.vue";
import Practice from "../preview/components/Practice.vue";
import FreePaint from "../preview/components/FreePaint.vue";
export default {
  components: { Strockplayredline, Practice, FreePaint },
  props: ["curQue", "themeColor"],
  data() {
    return {
      isPraShow: false,
      curData: null,
      ifFreeShow: false,
      freeImg: [],
      activeIndex: null,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      _this.freeImg = [];
      _this.curQue.option.forEach((item) => {
        _this.freeImg.push("");
      });
    },
    changePraShow() {
      this.isPraShow = false;
      this.ifFreeShow = false;
      this.freeImg[this.activeIndex] = this.$refs.freePaint.imgSrc;
    },
    writeWord(words, pinyin) {
      this.isPraShow = true;
      this.activeIndex = null;
      this.curData = {
        stem: [
          {
            con: words ? words : "",
            pinyin: pinyin && pinyin ? pinyin : "",
            mp3_url: "",
          },
        ],
      };
    },
    freeWrite(imgUrl, index) {
      this.ifFreeShow = true;
      this.curDataImg = imgUrl;
      this.activeIndex = imgUrl ? null : index;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NewWordShow {
  width: 100%;
  h2 {
    margin: 16px 0 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 16px;
  }
  .item-box {
    display: flex;
    flex-flow: wrap;
    padding-bottom: 8px;
    padding: 0 4px;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    .item {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      flex-flow: wrap;
      margin: 9px 20px;
      box-sizing: border-box;
      width: 66px;
      cursor: pointer;
      > p {
        color: #2c2c2c;
        font-size: 14px;
        line-height: 130%;
        font-family: "GB-PINYINOK-B";
        width: 100%;
        text-align: center;
        margin: 0 0 8px 0;
      }
      .strockplay {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 64px;
        height: 64px;
      }
      .strockplayRedInner {
        width: 64px;
        height: 64px;
      }
      .bwc-line {
        width: 1px;
        height: 62px;
        background: #de4444;
      }
    }
    .con-box {
      display: flex;
      border: 1px solid #de4444;
      border-radius: 8px;
      overflow: hidden;
      .img-box {
        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
          no-repeat;
        background-size: cover;
        .img_url {
          width: 64px;
          height: 64px;
        }
      }
      .blank-item {
        width: 64px;
        height: 64px;
        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
          no-repeat;
        background-size: cover;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    padding-top: 32px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    &.practiceBoxStrock {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0px;
    }
  }
}
.NNPE-Big-Book-preview-brown {
  .NewWordShow {
    .item-box {
      .item {
        .bwc-line {
          background: #bf875e;
        }
      }
      .con-box {
        border: 1px solid #bf875e;
        .img-box {
          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
            no-repeat;
          background-size: cover;
        }
        .blank-item {
          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
            no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
.NNPE-Big-Book-preview-green {
  .NewWordShow {
    .item-box {
      .item {
        .bwc-line {
          background: #24b99e;
        }
      }
      .con-box {
        border: 1px solid #24b99e;
        .img-box {
          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
            no-repeat;
          background-size: cover;
        }
        .blank-item {
          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
            no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.NNPE-Big-Book-preview-red {
  .NewWordShow {
    .strock-play-box {
      width: 22px;
      height: 22px;
      right: -2px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-red-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
.NNPE-Big-Book-preview-green {
  .NewWordShow {
    .strock-play-box {
      width: 22px;
      height: 22px;
      right: -2px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-green-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
.NNPE-Big-Book-preview-brown {
  .NewWordShow {
    .strock-play-box {
      width: 22px;
      height: 22px;
      right: -2px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-yellow-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
</style>