telephone-clients 4.0.0-1-69 → 4.0.0-1-70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telephone-clients",
-  "version": "4.0.0-1-69",
+  "version": "4.0.0-1-70",
   "description": "呼叫模块前台组件",
   "main": "src/index.js",
   "directories": {

package/src/components/Util/TelImgSelfSafePlus.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
+         :id="'vc-imgself-img-'+attach">
+    <div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle">
+      <img :src="src2" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
+           @mousedown.prevent="dropImage" style="position:fixed">
+      <div class="btns row">
+        <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+
+  export default {
+    props: {
+      src: {
+        type: String
+      },
+      width: {
+        default: 60
+      },
+      height: {
+        default: 60
+      },
+      alt: {
+        default: '图片加载失败'
+      },
+      attach: {
+        type: String,
+        default: 'name'
+      },
+      list: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        show: false,
+        deg: 0,
+        odiv: null,
+        powerw: 1.0,
+        container:null,
+        positionX: null,
+        positionY: null,
+        powerh: 1.0,
+        src2:""
+      }
+    },
+    ready(){
+      const elementsToMount = document.getElementsByClassName("full-img");
+      this.container = document.createElement('div');
+      this.container.style.height = '0px'
+      // 将要挂载的元素放入新创建的 div中
+      for (let i = 0; i < elementsToMount.length; i++) {
+        this.container.appendChild(elementsToMount[i]);
+      }
+      // 将新创建的 div 挂载到 body 上
+      document.body.appendChild(this.container);
+      this.src2=this.src
+    },
+    beforeDestroy(){
+      // 销毁挂载的
+      if (this.container && this.container.parentNode) {
+        this.container.parentNode.removeChild(this.container);
+      }
+    },
+    methods: {
+      nextPage() {
+        console.log(this.list)
+        //当前图片，是最后一张图片
+        if (this.src2=== this.list[this.list.length - 1].f_overall_path) {
+            this.src2= this.list[0].f_overall_path
+          } else {
+          for (let i = 0; i < this.list.length; i++) {
+            if (this.src2=== this.list[i].f_overall_path) {
+              this.src2= this.list[i + 1].f_overall_path
+              break
+            }
+          }
+        }
+
+      },
+      previousPage() {
+        console.log(this.list)
+        //当前图片，是第一张图片
+        if (this.src2 === this.list[0].f_overall_path) {
+          this.src2= this.list[this.list.length - 1].f_overall_path
+        } else {
+          for (let i = 0; i < this.list.length; i++) {
+            if (this.src2=== this.list[i].f_overall_path) {
+              this.src2= this.list[i - 1].f_overall_path
+              break
+            }
+          }
+        }
+      },
+      clearStyle(e){
+        if (e === null) {
+          return
+        }
+        this.odiv = document.getElementById('image')
+        this.odiv.style.left = 500 + 'px';
+        this.odiv.style.top = -150 + 'px';
+      },
+      bigimg() {
+        if (event.wheelDelta > 0) {
+          this.powerh = this.powerh * 1.15
+          this.powerw = 1.15 * this.powerw
+        } else {
+          this.powerh = this.powerh * 0.85
+          this.powerw = 0.85 * this.powerw
+        }
+        this.imgState()
+      },
+      dropImage(e) {
+        if (e === null) {
+          return
+        }
+        this.odiv = e.target;
+        let disX = e.clientX - this.odiv.offsetLeft;
+        let disY = e.clientY - this.odiv.offsetTop;
+        document.onmousemove = (e) => {
+          let left = e.clientX - disX;
+          let top = e.clientY - disY;
+          this.positionX = top;
+          this.positionY = left;
+          this.odiv.style.left = left + 'px';
+          this.odiv.style.top = top + 'px';
+        };
+        document.onmouseup = (e) => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      },
+      open() {
+        this.deg = 0
+        this.powerw = 0.55 // Initial scale X for the image
+        this.powerh = 0.65 // Initial scale Y for the image
+
+        // Make the .full-img (black background) full size by setting its scale to 1,1
+        // It will still rotate with the image.
+        $('.full-img').css({
+          'transform': 'rotate(' + this.deg + 'deg) scale(1, 1)'
+        })
+
+        // Apply the initial rotation and scale (this.powerw, this.powerh) to the image itself
+        this.imgState()
+
+        // This line was in the original code, related to a '.container' element.
+        // Leaving it as is, as it's not directly tied to the black box scale.
+        $('.container').css({
+          'opacity': '1'
+        })
+
+        this.show = true
+      },
+      close() {
+        this.show = false
+      },
+      leftRevolve() {
+        //tag
+        this.deg -= 90
+        this.imgState()
+      },
+      rightRevolve() {
+        //tag
+        this.deg += 90
+        this.imgState()
+      },
+      imgState() {
+        $('.img-state').css({
+          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
+        })
+
+      }
+    },
+    watch:{
+      'src'(val){
+        if(val){
+          this.src2 = val
+        }
+      }
+    }
+  }
+</script>
+<style media="screen" scoped>
+  .full-img {
+    position: fixed;
+    width: 100%;
+    /*height: 1000px;*/
+    overflow: hidden;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1070;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+  }
+
+  .btns {
+    position: fixed;
+    bottom: 100px;
+    height: auto;
+  }
+
+  .btns button {
+    margin-right: 20px;
+  }
+
+  .img-state {
+
+  }
+</style>