生字展示

src/components/Adult/preview/NewWordShow.vue

@@ -25,13 +25,13 @@
                             </div>
                       </template>
                       <template v-else>
-                          <div class="blank-item">
-
+                          <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">
+                    <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"
@@ -49,19 +49,26 @@
       <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
         <Practice :changePraShow="changePraShow" :cur="curData" />
       </div>
+      <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
+        <FreePaint :changePraShow="changePraShow" :cur="curDataImg" ref="freePaint" />
+      </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},
+  components: {Strockplayredline,Practice,FreePaint},
   props: ["curQue"],
   data() {
     return {
         isPraShow: false,
         curData: null,
+        ifFreeShow: false,
+        freeImg: [],
+        activeIndex: null
     };
   },
   computed: {},
@@ -71,13 +78,19 @@ export default {
     // 处理数据
     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: [
           {
@@ -88,7 +101,11 @@ export default {
         ],
       };
     },
-    
+    freeWrite(imgUrl,index){
+        this.ifFreeShow = true
+        this.curDataImg = imgUrl
+        this.activeIndex = imgUrl ? null : index
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -158,7 +175,7 @@ export default {
             border-radius: 8px;
             overflow: hidden;
             .img-box{
-                background: url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
+                background: #fff url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
                 background-size: cover;
                 .img_url{
                     width: 64px;
@@ -168,6 +185,12 @@ export default {
             .blank-item{
                 width: 64px;
                 height: 64px;
+                background: #fff url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
+                background-size: cover;
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
             }
         }
     }
@@ -202,7 +225,7 @@ export default {
         background-size: cover;
     }
     .character-target-div{
-        background-color: initial;
+        // background-color: initial;
     }
 }
 </style>

src/components/Adult/preview/components/FreePaint.vue

@@ -1,59 +1,43 @@
 <!--  -->
 <template>
   <div class="practice practiceSingle">
-    <div
-      :key="item.con + index"
-      class="Book_content"
-      v-for="(item, index) in cur.stem"
-    >
       <img
         @click="changePraShow()"
         class="close-icon"
         src="../../../../assets/NPC/close-icon-red.png"
       />
-      <el-tabs type="border-card">
-        <el-tab-pane label="简体">
-            <div class="right-content">
-              <div class="right-strockred">
-                  <Freewrite
-                    :cur="cur"
-                    :lineColor="hanzicolor"
-                    :lineWidth="hanziweight"
-                    ref="freewrite"
-                  />
-                  <div class="footer">
-                    <div class="pen-colors">
-                      <a @click="resetHuahua(index)" class="clean-btn"></a>
-                    </div>
-                  </div>
-              </div>
-
-              <ul class="nav-list">
-                <li
-                  :class="navIndex == 0 ? 'active' : ''"
-                  @click="changeNav(0)"
-                >
-                  
-                </li>
-                <li
-                  :class="navIndex == 1 ? 'active' : ''"
-                  @click="changeNav(1)"
-                >
-                  默写
-                </li>
-              </ul>
+        <div class="right-content">
+            <div class="right-strockred">
+                <Freewrite
+                :cur="cur"
+                :lineColor="hanzicolor"
+                :lineWidth="hanziweight"
+                :handleGetImg="handleGetImg"
+                :changePraShow="changePraShow"
+                ref="freewrite"
+                />
             </div>
-        </el-tab-pane>
-        <el-tab-pane label="繁体"> </el-tab-pane>
-      </el-tabs>
-    </div>
+
+            <ul class="nav-list">
+            <li
+                @click="resetHuahua()"
+            >
+                重写
+            </li>
+            <li
+                @click="handleWriteImg()"
+            >
+                确定
+            </li>
+            </ul>
+        </div>
   </div>
 </template>
 
 <script>
 import Strockplayredline from "./Strockplayredline.vue";
 import Strockred from "./Strockred.vue";
-import Freewrite from "./Freewrite.vue";
+import Freewrite from "./FreewriteWord.vue";
 // import ChinaDict from "./ChinaDict";
 // import Audio from "./AudioRed.vue";
 export default {
@@ -81,6 +65,7 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       collectFlag: false, // 是否收藏
+      imgSrc: ''
     };
   },
   computed: {},
@@ -104,10 +89,16 @@ export default {
     changeLearnMode(mode) {
       this.learn_mode = mode;
     },
-    resetHuahua(index) {
-      console.log(this.$refs.freewrite);
-      this.$refs.freewrite[index].handelReset();
+    resetHuahua() {
+      this.$refs.freewrite.handelReset();
+    },
+    handleWriteImg () {
+        this.$refs.freewrite.handleGenerate()
     },
+    // 得到画
+    handleGetImg(){
+        this.imgSrc = this.$refs.freewrite.resultImg
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -130,13 +121,14 @@ export default {
 </script>
 <style lang='scss' scoped>
 .practice {
-  width: 504px;
-  max-height: 434px;
+  width: 320px;
+  max-height: 400px;
   overflow: auto;
   margin: 0 auto;
   background: #f3f3f3;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
+  position: relative;
   .clean-btn {
     width: 16px;
     height: 16px;
@@ -179,16 +171,16 @@ export default {
   .right-content {
     position: relative;
     width: 288px;
-    height: 338px;
+    height: 360px;
     background: #f3f3f3;
     border-radius: 16px;
     box-sizing: border-box;
-    padding: 16px;
+    padding: 30px 16px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-left: 24px;
+    margin: 0 auto;
     .nav-list {
       width: 100%;
       height: 34px;
@@ -210,10 +202,10 @@ export default {
         cursor: pointer;
         background: #ffe6e6;
         border-radius: 8px;
-        &.active {
+        // &:hover {
           background: #ff5757;
           color: #ffffff;
-        }
+        // }
       }
     }
     .right-strockred {

src/components/Adult/preview/components/FreewriteWord.vue

@@ -0,0 +1,163 @@
+<!--  -->
+<template>
+    <div class="freewrite">
+        <div class="strockred" :class="wordNum ? '' : 'strockred_single'">
+            <!-- <div class="strock-play-box" @click="handelReset">
+        <img src="@/assets/common/strock-play.png" class="strock-play" />
+            </div>-->
+            <div :class="wordNum ? 'character-target-div_more' : 'character-target-div_single'" class="character-target-div">
+                <el-image
+                    :src="cur"
+                    fit="contain"
+                    class="img_url"
+                    v-if="cur"
+                >
+                    <div slot="placeholder" class="image-slot">
+                        <img src="../../../../assets/common/icon-imgloading.png" />
+                    </div>
+                </el-image>
+                <vueEsign
+                    :bgColor.sync="bgColor"
+                    :height="height"
+                    :isCrop="isCrop"
+                    :lineColor="lineColor"
+                    :lineWidth="lineWidth"
+                    :width="width"
+                    class="vueEsign"
+                    ref="esign"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import vueEsign from "vue-esign";
+export default {
+    components: {
+        vueEsign,
+    },
+    props: ["lineColor", "lineWidth", "cur", "wordNum","handleGetImg","changePraShow"],
+    data () {
+        return {
+            width: this.wordNum != "2" ? 256 : 256,
+            height: 256,
+            bgColor: "",
+            isCrop: false,
+            resultImg:''
+        };
+    },
+    computed: {},
+    watch: {
+        lineColor(newVal, oldVal) {
+          this.updateColor(newVal);
+        }
+    },
+    //方法集合
+    methods: {
+        handelReset () {
+            this.$refs.esign.reset();
+        },
+        // handleGenerate () {
+        //     this.$refs.esign
+        //         .generate()
+        //         .then((res) => {
+        //             let Book_img = res.replace("data:image/png;base64,", "");
+        //             //console.log(Book_img);
+        //             //this.textOcr(res.replace("data:image/png;base64,", ""));
+        //         })
+        //         .catch((err) => {
+        //             console.log(err);
+        //         });
+        // },
+        // 保存图片
+        handleGenerate () {
+            this.$refs.esign.generate().then(res => {
+                this.resultImg = res
+                this.handleGetImg()
+                this.changePraShow()
+            }).catch(err => {
+                this.changePraShow()
+            })
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created () { },
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted () { },
+    beforeCreate () { }, //生命周期 - 创建之前
+    beforeMount () { }, //生命周期 - 挂载之前
+    beforeUpdate () { }, //生命周期 - 更新之前
+    updated () { }, //生命周期 - 更新之后
+    beforeDestroy () { }, //生命周期 - 销毁之前
+    destroyed () { }, //生命周期 - 销毁完成
+    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.freewrite {
+    width: 100%;
+    .strockred {
+        position: relative;
+        margin: 0 auto;
+        width: 100%;
+        height: 256px;
+        .character-target-div {
+            width: 100%;
+            height: 256px;
+            background: #fff url('../../../../assets/NPC/chinaTianRed.png') center no-repeat;
+            background-size: 100% 100%;
+            border-radius: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 99999;
+            position: relative;
+            &_more {
+                width: 100%;
+                background: 0 0;
+                background-size: 100% 100%;
+            }
+            .img_url{
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .vueEsign {
+                width: 256px;
+                height: 256px;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.strock-play-box {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 999;
+    width: 84px;
+    height: 84px;
+    background: url('../../../../assets/NPC/strock-play-red-click.png');
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    > img {
+        width: 19px;
+        height: 24px;
+    }
+}
+.strock-play-box:active {
+    background: url('../../../../assets/NPC/strock-play-red-click.png');
+    background-size: 100%;
+}
+</style>

src/components/Adult/preview/components/Strockplayredline.vue

@@ -106,10 +106,10 @@ export default {
   align-items: center;
   cursor: pointer;
 }
-.strock-play-box:active {
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
-}
+// .strock-play-box:active {
+//   background: url("../../../../assets/NPC/strock-play-red-click.png");
+//   background-size: 100%;
+// }
 .animate-butto {
   width: 240px;
   height: 160px;