@zykjcommon/questions 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykjcommon/questions",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "main": "src/components/questions/entry.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,7 +12,7 @@
     "build:lib": "vue-cli-service build --target lib src/components/questions/buildEntry.js --name zykjcommon-questions"
   },
   "dependencies": {
-    "@zykjcommon/questions": "^0.0.14",
+    "@zykjcommon/questions": "^0.0.16",
     "alife-logger": "^1.8.30",
     "axios": "^0.26.0",
     "cookie": "^0.4.1",
@@ -37,6 +37,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "file-loader": "^6.2.0",
     "image-webpack-loader": "^8.1.0",
+    "mobile-detect": "^1.4.5",
     "postcss": "^8.4.6",
     "postcss-cssnext": "^3.1.0",
     "postcss-extend": "^1.0.5",

package/src/assets/js/fun.js

@@ -4,7 +4,7 @@
 // import {postWeb} from "./http.js";
 // import helper from "./helper";
 import Vue from "vue";
-
+let MobileDetect = require('mobile-detect')
 /**
  * 字典排序
  * @param <Object> dict
@@ -863,7 +863,50 @@ function getVueVersion(){
   return version
 }
 
+
+function getDeviceEnv(){
+  function isIpad() {
+    var ua = window.navigator.userAgent
+    var IsIPad = false
+    if (/ipad/i.test(ua)) {
+      IsIPad = true
+    }
+    // iPad from IOS13
+    var macApp = ua.match(/Macintosh/i) != null
+    if (macApp) {
+      // need to distinguish between Macbook and iPad
+      var canvas = document.createElement('canvas')
+      if (canvas != null) {
+        var context =
+            canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+        if (context) {
+          var info = context.getExtension('WEBGL_debug_renderer_info')
+          if (info) {
+            var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL)
+            if (renderer.indexOf('Apple') != -1) IsIPad = true
+          }
+        }
+      }
+    }
+    return IsIPad
+  }
+  let env = ''
+  let md= new MobileDetect(window.navigator.userAgent) //初始化mobile-detect
+  let os = md.os();//获取系统
+  if(os){
+    os = os.toLowerCase()
+  }
+  if(os === 'ios' || os === 'androidos' || isIpad()){
+    env = 'mobile'
+  }else{
+    env = 'pc'
+  }
+  return env
+}
+
+
 export default {
+  getDeviceEnv,
   getVueVersion,
   getToken,
   getQueryVariable,

package/src/assets/js/rem.js

@@ -2,7 +2,7 @@
  * Created by Allen Liu on 2022/3/31.
  */
 
-export default function(){
+export let setRem = function(){
   //动态设置html的font-size ----start
   let designWidth = 1440;
   let baseNum = 100;
@@ -30,4 +30,17 @@ export default function(){
     setRootFontSize();
   })
 //动态设置html的font-size ----end
+}
+
+export let setRemFixedHeight = function(designWidth=1440,repairH = 0,scale=1){
+  let baseNum = 100;
+  let winWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  let winHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  winHeight = winHeight - repairH
+  let html = document.getElementsByTagName('html')[0];
+  let frameBili = 4 / 3
+  let b = frameBili / (winWidth / winHeight)
+  let realW = parseInt(winWidth * b)
+  html.style.fontSize = (realW / designWidth) * baseNum * scale + 'px';
+  console.log(html.style.fontSize);
 }

package/src/assets/scss/questions/index.scss

@@ -1,3 +1,4 @@
+$greenItemFontSize:0.14rem;
 .zykjcommon-question{
   .editor-content{
     margin-top: 10px;
@@ -66,12 +67,12 @@
       display: inline-block;
       width: 16px;
       height: 16px;
-      background: url("~@src/assets/img/radio.png") no-repeat center;
+      background: url("../../img/radio.png") no-repeat center;
       background-size: 100% 100%;
     }
     &.checked{
       .radio-bg{
-        background: url("~@src/assets/img/radio-cur.png") no-repeat center;
+        background: url("../../img/radio-cur.png") no-repeat center;
         background-size: 100% 100%;
       }
     }
@@ -90,12 +91,12 @@
     }
     .checkbox-bg{
       width: 16px;height: 16px;display: inline-block;
-      background: url("~@src/assets/img/checkbox.png") no-repeat center;
+      background: url("../../img/checkbox.png") no-repeat center;
       background-size: 100% 100%;
     }
     &.checked{
       .checkbox-bg{
-        background: url("~@src/assets/img/checkbox-cur.png") no-repeat center;
+        background: url("../../img/checkbox-cur.png") no-repeat center;
         background-size: 100% 100%;
       }
     }
@@ -286,7 +287,7 @@
         position: absolute;
         width: 20px;
         height: 20px;
-        background:url("~@src/assets/img/tab-mark.png") no-repeat center;
+        background:url("../../img/tab-mark.png") no-repeat center;
         background-size: 100% 100%;
         right: -3px;
         top: -5px;
@@ -340,6 +341,157 @@
     margin-top: -25px;
     z-index:99999;
   }
+
+
+  .question-classify{
+    margin: 0 auto;
+    width: 10rem;
+    height: 100%;
+    position: relative;
+    background: url("../../img/classify-bg-seaworld.png") no-repeat center;
+    background-size: 100% 100%;
+    overflow: auto;
+    .box{
+      padding: 0 0.8rem;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.72rem;
+    }
+    .box-item{
+      width: 4rem;
+      height: 4.4rem;
+      display: flex;
+      flex-direction: column;
+      background: url("../../img/classify-boxitem-bg.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+    .main-block{
+      margin:0.38rem auto 0;
+      width: 1.1rem;
+      height: 1.1rem;
+      background: #76d2ff;
+      border: 1px dashed #ffffff;
+      border-radius: 0.11rem;
+      flex-shrink: 0;
+    }
+    .main-content{
+      padding: 0 0.28rem 0.15rem 0.35rem;
+      flex: 1;
+      .main-append{
+        /*height: 2.72rem;*/
+        height: 2.9rem;
+        overflow: auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-content: start;
+      }
+    }
+    .append-item{
+      background: url("../../img/classify-green-item.png") no-repeat center;
+      background-size: 100% 100%;
+      width: 1.3rem;
+      height: 1.3rem;
+      margin-right: 0.1rem;
+      flex-shrink: 0;
+      cursor: move;
+      text-align: center;
+      font-size: $greenItemFontSize;
+      color:rgb(238,252,149);
+      padding:0 0.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 1.2em;
+      /*letter-spacing: 0.8px;*/
+      .list-item-text{
+        margin-top: 0.1rem;
+        display: inline-block;
+      }
+      &:nth-child(2n+1){
+        margin-left: 0.2rem;
+      }
+      &:nth-child(2n){
+        margin-right: 0.2rem;
+      }
+    }
+    .list-outter{
+      padding: 0 0.33rem;
+      height: 1.5rem;
+      position: absolute;
+      bottom: 0.2rem;
+      left:50%;
+      margin-left: -4.5rem;
+      width: 9rem;
+      background: url("../../img/classify-list-bg.png") no-repeat center;
+      background-size: 100% 100%;
+      .list{
+        height: 1.5rem;
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+        width: 100%;
+      }
+      .prev,.next{
+        width: 0.24rem;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top:0;
+        cursor: pointer;
+      }
+      .prev{
+        left:5px;
+      }
+      .next{
+        right:5px;
+      }
+      .prev-main,.next-main{
+        width: 0.24rem;
+        height: 0.28rem;
+        top:50%;
+      }
+      .prev-main{
+        background: url("../../img/classify-arrow-left.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      .next-main{
+        background: url("../../img/classify-arrow-right.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+    .list-item{
+      background: url("../../img/classify-green-item.png") no-repeat center;
+      background-size: 100% 100%;
+      width: 1.3rem;
+      height: 1.3rem;
+      margin-right: 0.1rem;
+      flex-shrink: 0;
+      cursor: move;
+      text-align: center;
+      font-size: $greenItemFontSize;
+      color:rgb(238,252,149);
+      padding:0 0.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 1.2em;
+      /*letter-spacing: 0.8px;*/
+      .list-item-text{
+        margin-top: 0.1rem;
+        display: inline-block;
+      }
+    }
+    .list-item.drag{
+      border:1px dashed #ddd;
+    }
+    .append-item.drag{
+      border:1px dashed #ddd;
+    }
+
+  }
 }
 
 .imgLookerDialog{
@@ -361,12 +513,12 @@
   }
   .prev{
     left:10px;
-    background: url("~@src/assets/img/big-pre.png") no-repeat center;
+    background: url("../../img/big-pre.png") no-repeat center;
     background-size: cover;
   }
   .next{
     right:10px;
-    background: url("~@src/assets/img/big-next.png") no-repeat center;
+    background: url("../../img/big-next.png") no-repeat center;
     background-size: cover;
   }
   .close{
@@ -417,4 +569,27 @@
   &:hover {
     background-color: #fff;
   }
+}
+.question-classify-moveDiv{
+  position: fixed;
+  background: url("../../img/classify-green-item.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 1.3rem;
+  height: 1.3rem;
+  margin-right: 0.1rem;
+  flex-shrink: 0;
+  cursor: move;
+  text-align: center;
+  font-size: $greenItemFontSize;
+  color:rgb(238,252,149);
+  padding:0 0.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1.2em;
+  /*letter-spacing: 0.8px;*/
+  .list-item-text{
+    display: inline-block;
+    margin-top: 0.1rem;
+  }
 }

package/src/common/const.ts

@@ -11,5 +11,6 @@ export let questionMapper:any = {
   '7':'Question_BriefAnswer',//简答
   '16':'Question_Programming',//编程
   '11':'Question_Reading',//阅读
-  '4':'Question_FillBlank'//填空
+  '4':'Question_FillBlank',//填空
+  '17':'Question_Classify'//填空
 }

package/src/components/questions/Question_Classify.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="zykjcommon-question" style="width: 100%;height: 100%;">
+    <div class="question-classify">
+      <div class="box">
+        <div class="box-item">
+          <div class="main-block"></div>
+          <div class="main-content">
+            <div class="main-append">
+<!--              <div class="append-item"></div>-->
+            </div>
+          </div>
+        </div>
+        <div class="box-item">
+          <div class="main-block"></div>
+          <div class="main-content">
+            <div class="main-append">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list-outter">
+        <div class="prev">
+          <div class="prev-main"></div>
+        </div>
+        <div class="next">
+          <div class="next-main"></div>
+        </div>
+        <div class="list">
+          <div class="list-item" v-for="(item,index) in list" :key="index">
+            <div class="list-item-text">{{item.name}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import fun from "../../assets/js/fun";
+import {setRemFixedHeight} from "../../assets/js/rem";
+let env = fun.getDeviceEnv()
+export default {
+  name: 'Question_Classify',
+  props: {
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    bus: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  created() {
+    this.setRootFontSize()
+    window.addEventListener('resize',this.setRootFontSize)
+  },
+  unmounted() {
+    this.unmountedDo()
+  },
+  destroyed() {
+    this.unmountedDo()
+  },
+  mounted() {
+    this.init()
+    this.$watch('list',(nv)=>{
+      if(nv && nv.length){
+        this.$nextTick(()=>{
+          this.dothings()
+        })
+      }
+    })
+    setTimeout(()=>{
+      this.list = [{name:'每年春夏秋冬季节变化'},{name:'音乐播放10次'},{name:'把10个梨子放进篮子'},{name:'音乐播放9次'},{name:'把9个梨子放进篮子'},{name:'音乐播放8次'},{name:'把8个梨子放进篮子'},{name:'音乐播放6次'}]
+    },500)
+  },
+  data() {
+    return {
+      analyCorrectAnswer:'',
+      exam_options_data:[],
+      answerMap:{},
+      list:[],
+      env,
+      p1:{},//存mousedown相关
+      p2:{},//存mousemove相关
+      listItem:null,
+      moveDiv:null,
+      timer:null,
+      mousedown : env === 'mobile' ? 'touchstart':'mousedown',
+      mousemove : env === 'mobile' ? 'touchmove':'mousemove',
+      mouseup : env === 'mobile' ? 'touchend':'mouseup',
+      dragWay : '',
+      flag : false,
+      scrollDistance : 3000,//设置一个死的滚动距离，保证能滚到底，目前够用
+    };
+  },
+  watch: {
+
+  },
+  computed:{
+  },
+  methods: {
+    setRootFontSize() {
+      setRemFixedHeight(1000,140,1.08)
+    },
+    unmountedDo(){
+      window.removeEventListener('resize',this.setRootFontSize)
+      document.removeEventListener('gesturestart', this.gesturestartListener)
+      $('.question-classify .append-item').off(this.mousedown)
+      $('.question-classify .list-item').off(this.mousedown)
+      $(document).off(this.mouseup)
+      let html = document.getElementsByTagName("html")[0];
+      html.style.fontSize = "";
+    },
+    gesturestartListener(event){
+      event.preventDefault()
+    },
+    init(){
+      //禁止ios10以上缩放页面
+      if(env === 'mobile'){
+        document.addEventListener('gesturestart', this.gesturestartListener)
+      }
+    },
+    getSpecArr(){
+      let self = this
+      let specArr = []
+      let moveDivLeft = self.moveDiv.offset().left
+      let moveDivLeftEnd = moveDivLeft + self.moveDiv.width()
+      let moveDivTop = self.moveDiv.offset().top
+      let moveDivTopEnd = moveDivTop + self.moveDiv.height()
+      $('.box-item').each((index,item)=>{
+        let boxItem = $(item)
+        let boxLeft = boxItem.offset().left
+        let boxLeftEnd = boxLeft + boxItem.width()
+        let boxTop = boxItem.offset().top
+        let boxTopEnd = boxTop + boxItem.height()
+
+        if(moveDivLeft > boxLeft && moveDivLeftEnd < boxLeftEnd && moveDivTop > boxTop && moveDivTopEnd < boxTopEnd){
+          specArr.push({
+            dom:boxItem
+          })
+        }
+      })
+      return specArr
+    },
+    bindDragDomEvent(appendItem,way){
+      let self = this
+      appendItem.on(this.mousedown,function(e){
+        if(self.moveDiv){
+          return
+        }
+        self.flag = false
+        self.dragWay = way
+        console.log(e);
+        e.stopPropagation()
+        e.preventDefault()
+        self.listItem = $(this)
+        self.listItem.addClass('drag')
+        self.p1.moveX = self.listItem.offset().left;
+        self.p1.moveY = self.listItem.offset().top - 30;
+        console.log(this.p1);
+        self.moveDiv = $(`<div class="question-classify-moveDiv"><div class="list-item-text">${self.listItem.find('.list-item-text').text()}</div></div>`)
+        self.moveDiv.css({left:`${self.p1.moveX}px`,top:`${self.p1.moveY}px`})
+        $('body').append(self.moveDiv)
+        $(document).on(self.mousemove,function(e2){
+          // e2.preventDefault()
+          e2.stopPropagation()
+          self.p2.moveX = e2.clientX || (e2.originalEvent.touches && e2.originalEvent.touches[0].clientX);
+          self.p2.moveY = e2.clientY || (e2.originalEvent.touches && e2.originalEvent.touches[0].clientY);
+          let curX = self.p2.moveX - self.moveDiv.width()/2
+          let curY = self.p2.moveY - self.moveDiv.height()/2
+          self.moveDiv.css({
+            left:curX + 'px',
+            top:curY + 'px'
+          })
+
+        })
+
+      })
+    },
+    appendMoveDiv(options){
+      let self = this
+      self.listItem.remove()
+      let appendItem = $(`<div class="${options.appendItemClassName}"><div class="list-item-text">${self.moveDiv.find('.list-item-text').text()}</div></div>`)
+      appendItem.css({opacity:0})
+      options.targetList.append(appendItem)
+      options.targetList[options.scrollDirection](self.scrollDistance)
+      let appendLeft = appendItem.offset().left
+      let appendTop = appendItem.offset().top
+      //transitionend事件会执行2次，所以使用标记避免
+      self.moveDiv.css({
+        transition:'all 0.5s',
+        left:appendLeft,
+        top:appendTop
+      }).on('transitionend',function(){
+        if(!self.flag){
+          self.moveDiv.remove()
+          self.moveDiv.off('transitionend')
+          self.moveDiv = null
+          appendItem.css({opacity:1})
+          self.bindDragDomEvent(appendItem,options.op)
+        }
+        self.flag = true
+      })
+    },
+    bindNextPrevEvent(type){
+      $(`.question-classify .${type}`).on('click',function(e){
+        e.stopPropagation()
+        e.preventDefault()
+        let listItem = $('.question-classify .list-item')
+        let list = $('.question-classify .list')
+        let w = listItem.outerWidth() * (type === 'next' ? 1 : -1)
+        let scrollLeft = list.scrollLeft()
+        console.log(scrollLeft);
+        $('.question-classify .list').stop(true).animate({scrollLeft:scrollLeft + w},500)
+      })
+    },
+    dothings(){
+      let self = this
+      self.bindDragDomEvent($('.question-classify .list-item'),'go')
+      $(document).on(self.mouseup,function(e){
+        // e.preventDefault()
+        if(self.dragWay === 'go'){
+          $(document).off(self.mousemove)
+          self.listItem && self.listItem.removeClass('drag')
+          if(self.moveDiv){
+            let specArr = self.getSpecArr()
+            if(specArr.length === 0){
+              //没进框内，回到原位
+              if(self.moveDiv){
+                self.moveDiv.remove()
+                self.moveDiv = null
+              }
+            }else{
+              let appendItemBox = specArr[0].dom
+              self.appendMoveDiv({
+                targetList:appendItemBox.find('.main-append'),
+                appendItemClassName:'append-item',
+                op:'back',
+                scrollDirection:'scrollTop'
+              })
+            }
+          }
+        }else if(self.dragWay === 'back'){
+          $(document).off(self.mousemove)
+          self.listItem && self.listItem.removeClass('drag')
+          if(self.moveDiv){
+            let specArr = self.getSpecArr()
+            //0说明都不在两个框内 1说明在其中一个框内
+            if(specArr.length === 0){
+              self.appendMoveDiv({
+                targetList:$('.question-classify .list'),
+                appendItemClassName:'list-item',
+                op:'go',
+                scrollDirection:'scrollLeft'
+              })
+            }else{
+              let appendItemBox = specArr[0].dom
+              let curAppendItemBox = self.listItem.parents('.question-classify .box-item')
+              if(appendItemBox.get(0) === curAppendItemBox.get(0)){
+                console.log('自己');
+                self.moveDiv.remove()
+                self.moveDiv = null
+                self.listItem && self.listItem.removeClass('drag')
+              }else{
+                console.log('不是自己');
+                self.appendMoveDiv({
+                  targetList:appendItemBox.find('.main-append'),
+                  appendItemClassName:'append-item',
+                  op:'back',
+                  scrollDirection:'scrollTop'
+                })
+                console.log('不是自己');
+              }
+            }
+
+            console.log(specArr.length);
+          }
+
+
+        }
+      })
+      self.bindNextPrevEvent('next')
+      self.bindNextPrevEvent('prev')
+    }
+  },
+  components:{
+
+  }
+};
+</script>