@zykjcommon/questions 0.0.50 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykjcommon/questions",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "main": "src/components/questions/entry.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/readme

@@ -5,4 +5,6 @@ watch(() => props.questionList, (nv) => {
         }
       },{immediate:true,deep:true})
 
+如果源是cnpm需要cnpm sync手动同步
+
 

package/src/assets/scss/questions/zykjcommon-questions.scss

@@ -512,6 +512,7 @@ $greenItemFontSize:0.13em;
       }
     }
     .list-item{
+      position: relative;
       /*background: url("../../img/classify-green-item.png") no-repeat center;*/
       background-repeat: no-repeat;
       background-position: center;
@@ -624,6 +625,7 @@ $greenItemFontSize:0.13em;
     img{
       width: 100%;
       height: 100%;
+      display: block;
     }
     &:hover {
       background: rgba(0, 0, 0, 0.2);
@@ -659,4 +661,16 @@ $greenItemFontSize:0.13em;
   &:hover {
     background-color: #fff;
   }
+}
+
+.look-big-img-btn{
+  z-index:2;
+  cursor: pointer;
+  width: 0.16em;
+  height: 0.16em;
+  background: url("../../img/lookBigImgBtn.png") no-repeat center;
+  background-size: 100% 100%;
+  position: absolute;
+  right:0;
+  top:0;
 }

package/src/components/common/MediaLooker.vue

@@ -4,8 +4,8 @@
     <div class="close" @click="cancel">
       <img src="../../assets/img/big-close.png" alt="" />
     </div>
-    <div class="prev" @click="prev"></div>
-    <div class="next" @click="next"></div>
+    <div class="prev" @click="prev" v-if="mediaLookerList.length > 1"></div>
+    <div class="next" @click="next" v-if="mediaLookerList.length > 1"></div>
     <!--      <button style="position: fixed;z-index: 9999;top:0;left:0" @click="fn">click</button>-->
     <div class="imgLooker" v-if="curMediaObj.mediaType == 1"
          @click="enlarge"
@@ -56,11 +56,7 @@ export default {
     mediaLookerList:{
       handler(nv,ov){
         if(nv && nv.length){
-          if(nv && nv.length){
-            // console.log(nv,3333);
-            this.getCurMedia(this.mediaCount)
-            // console.log(props.mediaCount,11113);
-          }
+          this.getCurMedia(this.mediaCount)
         }
       },
       immediate:true,

package/src/components/questions/Question_Classify.vue

@@ -29,15 +29,24 @@
                v-for="(item,index) in optionList"
                :key="index">
             <div class="list-item-text" v-show="item.content_type!=2">{{item.content}}</div>
+            <div class="look-big-img-btn" v-if="isNeedLookBigImgBtn"></div>
           </div>
         </div>
       </div>
     </div>
+
+    <MediaLooker :visible.sync="visible"
+                 v-model:visible="visible"
+                 v-if="visible"
+                 :mediaCount="curMediaCount"
+                 :mediaLookerList="mediaLookerList"></MediaLooker>
   </div>
 </template>
 <script>
 import fun from "../../assets/js/fun";
 import {setRemFixedHeight} from "../../assets/js/rem";
+import {commonData} from './mixin'
+import MediaLooker from '../common/MediaLooker.vue'
 let env = fun.getDeviceEnv()
 export default {
   name: 'Question_Classify',
@@ -92,6 +101,7 @@ export default {
   },
   data() {
     return {
+      isNeedLookBigImgBtn:false,
       animationing:false,
       analyCorrectAnswer:'',
       classify_question_info:{},
@@ -114,7 +124,8 @@ export default {
       flag : false,
       scrollDistance : 3000,//设置一个死的滚动距离，保证能滚到底，目前够用
       lazyDragTimer:null,
-      dragingStart:false
+      dragingStart:false,
+      ...JSON.parse(commonData)
     };
   },
   watch: {
@@ -182,6 +193,17 @@ export default {
       let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
       return correct
     },
+    getIsNeedLookBigImgBtn(exam_options_data){
+      //如果每个item的file_url地址都是同一个就说明是默认背景不需要看大图
+      let arr = []
+      exam_options_data.forEach((item)=>{
+        let objItem = item.data
+        if(arr.indexOf(objItem.file_url) <= -1){
+          arr.push(objItem.file_url)
+        }
+      })
+      return arr.length > 1 ? true : false
+    },
     parseLists(nv){
       this.classify_question_info = nv.classify_question_info
       let exam_options_data = nv.exam_options_data
@@ -202,6 +224,7 @@ export default {
             idx:item.index
           })
         })
+        this.isNeedLookBigImgBtn = this.getIsNeedLookBigImgBtn(exam_options_data)
         this.optionList = optionList
         this.listItemBgCss = !optionList[0]?'':optionList[0].bgUrlCss
 
@@ -272,6 +295,21 @@ export default {
       })
       return specArr
     },
+    lookBigImg(e){
+      let self = this
+      let bgStr = $(e.target).parent('.list-item').css('background-image')
+      let bgStrReg = /url\(["'](.+)["']\)/
+      let matchArr = bgStr.match(bgStrReg)
+      if(matchArr && matchArr.length > 1){
+        let bgUrl = matchArr[1].replace(/^\s+/ig,'').replace(/\s+$/ig,'')
+        self.mediaLookerList = []
+        self.mediaLookerList.push({
+          url:bgUrl,
+          mediaType:1
+        })
+        self.visible = true
+      }
+    },
     //移动端为了解决拖动事件和原生滚动条事件冲突，设置延迟100毫秒拖动（PC端不变）
     bindDragDomEvent(appendItem,way){
       let self = this
@@ -313,6 +351,13 @@ export default {
       }
       appendItem.off(this.mousedown)
       appendItem.on(this.mousedown,function(e){
+        e.stopPropagation()
+        let curClassName = e.target.className
+        if(curClassName.indexOf('look-big-img-btn') > -1){
+          self.lookBigImg(e)
+          return
+        }
+        console.log(123);
         if(env === 'mobile'){
           self.lazyDragTimer = setTimeout(()=>{
             dragDomEventFn(e,this)
@@ -329,7 +374,8 @@ export default {
       let itemBgCss = `${self.moveDiv.get(0).style.backgroundImage}`
       let itemColorCss = `${self.moveDiv.get(0).style.color}`
       let textDisplayCss = self.moveDiv.find('.list-item-text').get(0).style.display
-      let appendItem = $(`<div class="${options.appendItemClassName}" idx="${idx}"><div class="list-item-text" style="${textDisplayCss?'display:'+textDisplayCss:''}">${self.moveDiv.find('.list-item-text').text()}</div></div>`)
+      let lookBigImgBtnStr = options.appendItemClassName === 'list-item' ? '<div class="look-big-img-btn"></div>' : ''
+      let appendItem = $(`<div class="${options.appendItemClassName}" idx="${idx}"><div class="list-item-text" style="${textDisplayCss?'display:'+textDisplayCss:''}">${self.moveDiv.find('.list-item-text').text()}</div>${lookBigImgBtnStr}</div>`)
       appendItem.css({opacity:0,backgroundImage:itemBgCss,color:itemColorCss})
       options.targetList.append(appendItem)
       options.targetList[options.scrollDirection](self.scrollDistance)
@@ -381,6 +427,7 @@ export default {
           return
         }
         // e.preventDefault()
+        console.log(self.dragWay,7788);
         if(self.dragWay === 'go'){
           $(document).off(self.mousemove)
           self.listItem && self.listItem.removeClass('drag')
@@ -520,7 +567,7 @@ export default {
     }
   },
   components:{
-
+    MediaLooker
   }
 };
 </script>