数独组件

src/components/Adult/Preview.vue

@@ -29,28 +29,28 @@
               :key="indexss"
             >
               <template v-if="itemss.data">
-                <template v-if="itemss.data.type == 'ligature'">
+                <template v-if="itemss.type == 'ligature'">
                   <Ligature :curQue="itemss.que" />
                 </template>
-                <template v-if="itemss.data.type == 'image_chs'">
+                <template v-if="itemss.type == 'image_chs'">
                   <Picture :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'record_chs'">
+                <template v-if="itemss.type == 'record_chs'">
                   <Record :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'phrase_chs'">
+                <template v-if="itemss.type == 'phrase_chs'">
                   <WordPhrase :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'NewWord_chs'">
+                <template v-if="itemss.type == 'NewWord_chs'">
                   <WordPhrase :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'annotation_chs'">
+                <template v-if="itemss.type == 'annotation_chs'">
                   <WordPhrase :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'notes_chs'">
+                <template v-if="itemss.type == 'notes_chs'">
                   <Notes :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'article_chs'">
+                <template v-if="itemss.type == 'article_chs'">
                   <ArticleTemChs
                     :curQue="itemss.data"
                     :NNPENewWordList="NNPENewWordList"
@@ -58,24 +58,27 @@
                     :NNPEAnnotationList="NNPEAnnotationList"
                   />
                 </template>
-                <template v-if="itemss.data.type == 'sentence_segword_chs'">
+                <template v-if="itemss.type == 'sentence_segword_chs'">
                   <SentenceSegWordViewChs :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'input_record_chs'">
+                <template v-if="itemss.type == 'input_record_chs'">
                   <InputHasRecord :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'recordHZ_inputPY_chs'">
+                <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                   <TextInputRecord :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'inputItem_chs'||itemss.data.type == 'sentence_input'||itemss.data.type == 'sentence_judge'">
+                <template v-if="itemss.type == 'inputItem_chs'||itemss.type == 'sentence_input_chs'||itemss.type == 'sentence_judge_chs'">
                   <SentenceInput :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'NumberCombination_chs'">
+                <template v-if="itemss.type == 'NumberCombination_chs'">
                   <NumberSelectHasRecord :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'toneSelect_chs'">
+                <template v-if="itemss.type == 'toneSelect_chs'">
                   <SelectTone :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'sudoku_chs'">
+                  <Soduko :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -99,6 +102,7 @@ import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+
 import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
 import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue" // 数字组合
 import SelectTone from './preview/SelectTone.vue' // 选择声调
+import Soduko from './preview/Soduko.vue' // 数独
 export default {
   name: "preview",
   components: {
@@ -115,6 +119,7 @@ export default {
     SentenceInput,
     NumberSelectHasRecord,
     SelectTone,
+    Soduko,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/SentenceInput.vue

@@ -133,7 +133,7 @@ export default {
             box-sizing: border-box;
             border-radius: 8px;
             display: flex;
-            align-items: flex-start;
+            align-items: center;
             padding: 8px 12px;
             margin-bottom: 8px;
             >b{

src/components/Adult/preview/Soduko.vue

@@ -0,0 +1,123 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes Sudoku" v-if="curQue">
+      <div class="item-box">
+          <div :class="['item']" v-for="(item,index) in curQue.option" :key="index">
+              <div v-for="(items,indexs) in item" :key="indexs" :class="[indexs%3==2?'noBorder':'',indexs>5?'noBorder-bottom':'']">
+                  <span v-if="items.isHint">
+                      {{items.value}}
+                  </span>
+                  <input v-else v-model="soduko[index][indexs]" maxlength="1" @input="changeNumber(soduko[index][indexs],index,indexs)" @blur="handleCheck(index,indexs)">
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {
+        soduko:[]
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+      // 处理数据
+      handleData(){
+          let _this = this
+          _this.soduko = []
+          _this.curQue.option.forEach(item => {
+              let arr = []
+              item.forEach(items=>{
+                  if(items.isHint){
+                      arr.push(items.value)
+                  }else{
+                      arr.push('')
+                  }
+              })
+              _this.soduko.push(arr)
+          });
+      },
+      changeNumber(item,index,indexs) {
+          let value = item.replace(/[^\d]/g, "")
+          this.$set(this.soduko[index],indexs,value)
+      },
+      // 校验输入内容是否已有
+      handleCheck(index,indexs){
+          
+      },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+      this.handleData()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-prev-Textdes{
+    .item-box{
+        display: flex;
+        flex-flow: wrap;
+        width: 544px;
+        border-bottom: 1px solid #484848;
+        border-right: 1px solid #484848;
+        .item{
+            display: flex;
+            flex-flow: wrap;
+            width: 181px;
+            height: 181px;
+            border-top: 1px solid #484848;
+            border-left: 1px solid #484848;
+            box-sizing: border-box;
+            div{
+                width: 60px;
+                height: 60px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-bottom: 1px solid #D1D1D1;
+                border-right: 1px solid #D1D1D1;
+                box-sizing: border-box;
+                &.noBorder{
+                    border-right: none;
+                }
+                &.noBorder-bottom{
+                    border-bottom: none;
+                }
+                span{
+                    font-size: 20px;
+                    line-height: 150%;
+                    color: #32A5D8;
+                    font-family: 'robot';
+                }
+                input{
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                    outline: none;
+                    text-align: center;
+                    color: #000000;
+                    font-size: 20px;
+                    font-weight: 500;
+                    font-family: 'robot';
+                }
+            }
+        }
+    }
+}
+</style>

src/components/Adult/preview/TextInputRecord.vue

@@ -115,6 +115,7 @@ export default {
             }
             input{
                 flex: 1;
+                min-width: 150px;
                 border: 1px solid rgba(0, 0, 0, 0.15);
                 box-sizing: border-box;
                 border-radius: 8px;