数独功能

src/components/Adult/Preview.vue

@@ -67,7 +67,7 @@
                 <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                   <TextInputRecord :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.type == 'inputItem_chs'||itemss.type == 'sentence_input_chs'||itemss.type == 'sentence_judge_chs'">
+                <template v-if="itemss.type == 'inputItem_chs'||itemss.type == 'sentence_input_chs'||itemss.type == 'sentence_judge_chs'||itemss.type=='sentence_record_chs'||itemss.type=='sentence_input_record_chs'">
                   <SentenceInput :curQue="itemss.data" />
                 </template>
                 <template v-if="itemss.type == 'NumberCombination_chs'">

src/components/Adult/preview/SentenceInput.vue

@@ -2,20 +2,21 @@
 <template>
   <div class="Big-Book-prev-Textdes" v-if="curQue">
     <h2 v-if="curQue.title">{{curQue.title}}</h2>
+    {{dataType}}
     <ul>
       <li v-for="(items, indexs) in curQue.option" :key="indexs">
           <p :class="[oldsrc==items.mp3_list[0].url?palyClass:'']" @click="handlePlayVoice(items.mp3_list[0].url)" v-if="items.mp3_list&&items.mp3_list.length>0">
           </p>
           <b v-if="items.number">{{ items.number }}.</b>
           <span class="item-con">{{items.con}}</span>
-          <!-- <template v-if="curQue.ChildType=='sentence_answer'"> -->
+          <template v-if="curQue.ChildType=='sentence_answer'">
             <input
                     @input="handleInput"
                     :class="['item-input']"
                     v-model="curQue.Bookanswer[indexs]"
                     placeholder="输入"
                 >
-          <!-- </template> -->
+          </template>
           <template v-if="curQue.ChildType=='sentence_judge'">
             <div class="judge-box">
                 <a :class="['right-btn',curQue.Bookanswer[indexs]=='right'?'active':'']" @click="handleSelectJudge('right',indexs)"></a>
@@ -40,7 +41,7 @@ export default {
         audio: new Audio(),
         oldsrc: '', // 存储播放音频的src 用来比对是否点击的是同一个音频
         palyClass: '',
-        judge: '',
+        dataType: [], // 题型
     };
   },
   computed: {},
@@ -71,6 +72,8 @@ export default {
         },
         // 处理数据
         handleData(){
+            let _this = this
+            this.dataType = []
             if(!this.curQue.Bookanswer){
                 let curCorrect = [];
                 this.curQue.option.forEach(item => {
@@ -78,11 +81,17 @@ export default {
                 });
                 this.$set(this.curQue, "Bookanswer", curCorrect);
             }
+            this.curQue.fn_list.forEach(item=>{
+                if(item.isFn){
+                    _this.dataType.push(item.type)
+                }
+            })
         },
         // 判断题选择
         handleSelectJudge(obj,index){
             this.$set(this.curQue.Bookanswer, index, obj);
         },
+        
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {

src/components/Adult/preview/Soduko.vue

@@ -1,16 +1,30 @@
 <!--  -->
 <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 class="sodu-inner">
+          <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':'',index==seletcItem[0]&&indexs==seletcItem[1]?'active':'',styleList[index][indexs]]">
+                    <span v-if="items.isHint">
+                        {{items.value}}
+                    </span>
+                    <p v-else @click="handleCheck(index,indexs)">{{soduko[index][indexs]}}</p>
+                    <!-- <input v-else v-model="soduko[index][indexs]" maxlength="1" readonly> -->
+                </div>
+            </div>
+          </div>
+          <div class="item-right">
+              <ul>
+                  <li v-for="(item,index) in selectList" :key="index" :class="[]" @click="handleClick(item)">
+                      {{item}}
+                  </li>
+              </ul>
+              <a class="resetBtn" @click="handleData">重做</a>
+              <a class="submitBtn" @click="handleSubmit">提交</a>
           </div>
       </div>
+      
   </div>
 </template>
 
@@ -20,7 +34,10 @@ export default {
   props: ["curQue"],
   data() {
     return {
-        soduko:[]
+        soduko:[],
+        selectList:['1','6','2','7','3','8','4','9','5','?'],
+        seletcItem:[],
+        styleList:[]
     };
   },
   computed: {},
@@ -31,6 +48,7 @@ export default {
       handleData(){
           let _this = this
           _this.soduko = []
+          _this.styleList = []
           _this.curQue.option.forEach(item => {
               let arr = []
               item.forEach(items=>{
@@ -41,16 +59,41 @@ export default {
                   }
               })
               _this.soduko.push(arr)
+              _this.styleList.push(JSON.parse(JSON.stringify(arr)))
           });
       },
       changeNumber(item,index,indexs) {
           let value = item.replace(/[^\d]/g, "")
           this.$set(this.soduko[index],indexs,value)
       },
-      // 校验输入内容是否已有
+      // 点击九宫格元素
       handleCheck(index,indexs){
-          
+          this.seletcItem = []
+          this.seletcItem.push(index)
+          this.seletcItem.push(indexs)
+      },
+      // 点击右侧数字
+      handleClick(item){
+          if(this.seletcItem.length>0){
+              this.$set(this.soduko[this.seletcItem[0]],this.seletcItem[1],item)
+          }
       },
+      // 提交
+      handleSubmit(){
+          let _this = this
+          _this.curQue.option.forEach((item,index) => {
+              item.forEach((items,indexs)=>{
+                  if(!items.isHint){
+                      if(items.value &&_this.soduko[index][indexs] && _this.soduko[index][indexs] == items.value){
+                          this.$set(this.styleList[index],indexs,'right')
+                      }else if(items.value &&_this.soduko[index][indexs] && _this.soduko[index][indexs] != items.value){
+                          this.$set(this.styleList[index],indexs,'error')
+                      }
+                  }
+              })
+          });
+          this.seletcItem = []
+      }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -70,19 +113,26 @@ export default {
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .Big-Book-prev-Textdes{
+    .sodu-inner{
+        display: flex;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+    }
     .item-box{
         display: flex;
         flex-flow: wrap;
-        width: 544px;
-        border-bottom: 1px solid #484848;
-        border-right: 1px solid #484848;
+        width: 550px;
+        border-bottom: 1px solid #000000;
+        border-right: 1px solid #000000;
+        margin: 24px;
+        background: #E6E6E6;
         .item{
             display: flex;
             flex-flow: wrap;
-            width: 181px;
-            height: 181px;
-            border-top: 1px solid #484848;
-            border-left: 1px solid #484848;
+            width: 183px;
+            height: 183px;
+            border-top: 1px solid #000000;
+            border-left: 1px solid #000000;
             box-sizing: border-box;
             div{
                 width: 60px;
@@ -90,34 +140,109 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                border-bottom: 1px solid #D1D1D1;
-                border-right: 1px solid #D1D1D1;
+                border: 1px solid #FFFFFF;
+                background: #FFFFFF;
+                // border-bottom: 1px solid #E6E6E6;
+                // border-right: 1px solid #E6E6E6;
+                margin-bottom: 1px;
+                margin-right: 1px;
                 box-sizing: border-box;
                 &.noBorder{
-                    border-right: none;
+                    // border-right: none;
+                    margin-right: 0px;
                 }
                 &.noBorder-bottom{
-                    border-bottom: none;
+                    // border-bottom: none;
+                    margin-bottom: 0px;
+                }
+                &.active{
+                    border-color: #0086FF;
+                }
+                &:hover{
+                    border-color: #737373;
+                }
+                &.right{
+                    background: #F5FFF9;
+                    border-color: #F5FFF9;
+                    p{
+                        color: #00BC4B;
+                    }
+                }
+                &.error{
+                    background: #FFF8F8;
+                    border-color: #FFF8F8;
+                    p{
+                        color: #DE4444;
+                    }
                 }
                 span{
-                    font-size: 20px;
+                    font-size: 16px;
                     line-height: 150%;
-                    color: #32A5D8;
+                    color: rgba(0, 0, 0, 0.85);
                     font-family: 'robot';
+                    font-weight: 700;
                 }
-                input{
+                p{
                     width: 100%;
                     height: 100%;
-                    border: none;
-                    outline: none;
                     text-align: center;
-                    color: #000000;
-                    font-size: 20px;
-                    font-weight: 500;
+                    color: #1890FF;
+                    font-size: 16px;
+                    font-weight: 700;
                     font-family: 'robot';
+                    background: initial;
+                    line-height: 58px;
+                    margin: 0;
+                    
                 }
             }
         }
     }
+    .item-right{
+        background: rgba(0, 0, 0, 0.04);
+        width: 164px;
+        padding: 12px 10px;
+        ul{
+            display: flex;
+            flex-flow: wrap;
+            li{
+                width: 60px;
+                height: 60px;
+                background: #FFFFFF;
+                border: 1px solid #E6E6E6;
+                margin: 12px 6px;
+                font-size: 20px;
+                font-weight: bold;
+                color: rgba(0, 0, 0, 0.85);
+                font-family: 'robot';
+                text-align: center;
+                line-height: 60px;
+                cursor: pointer;
+                &:hover {
+                    border: 1px solid #0086FF;
+                    box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.5);
+                }
+            }
+        }
+        .resetBtn,.submitBtn{
+            width: 132px;
+            height: 40px;
+            background: #DE4444;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            border-radius: 8px;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 38px;
+            font-size: 16px;
+            display: block;
+            margin: 0 auto;
+            margin-top: 54px;
+        }
+        .submitBtn{
+            background: #00BC4B;
+            margin-top: 8px;
+        }
+    }
 }
 </style>