<style lang="less">@import "../advanced-router.less";</style> <template> <div class="balance-accounts">  <Row class-name="detail-row">   <Card>    <p slot="title">     回單照片    </p>    <div class="demo-upload-list" v-for="(item,index) in opPicsList" :key="index">     <img :src="item.url">     <div class="demo-upload-list-cover">      <Icon type="ios-search-strong" @click.native="handleView(item.name)"></Icon>     </div>    </div>   </Card>  </Row> </div></template><script>import * as API from "@/api/adminApi";import iconLeft from "@/images/icon-left.png";import iconRight from "@/images/icon-right.png";import iconClose from "@/images/icon-close.png";import iconRotate from "@/images/icon-rotate.png";import iconNoImages from "@/images/icon-no-images.png"; export default { name: "shopping-info", data() { return {  opPicsList: [  {   name: "none",   url: iconNoImages  }  ],  bigImage: null,  currentImageName: "",  currentRotate: 0 }; }, props: ['imageList'], methods: { loadDetail() {  let vm = this;  API.getFundClearDetail({ orderId: this.$route.query.orderId }).then(  data => {   if (data.resultObj.detail) {   if (data.resultObj.detail.opPics.length > 0) {    vm.opPicsList.splice(0, vm.opPicsList.length);    data.resultObj.detail.opPics    .split(",")    .forEach((element, index) => {     vm.opPicsList.push({     name: index,     url: element     });    });   }   }  }  ); }, rollImg() {  /* 獲取當前頁面的縮放比   若未設置zoom縮放比，則為默認100%，即1，原圖大小  */  var zoom = parseInt(this.bigImage.style.zoom) || 100;  /* event.wheelDelta 獲取滾輪滾動值并將滾動值疊加給縮放比zoom   wheelDelta統一為±120，其中正數表示為向上滾動，負數表示向下滾動  */  zoom += event.wheelDelta / 12;  /* 如果縮放比大于0，則將縮放比加載到頁面元素 */  if (zoom >= 100) {  this.bigImage.style.zoom = zoom + "%";  }  /* 如果縮放比不大于0，則返回false，不執行操作 */  return false; }, handleView(name) {  if (this.opPicsList[0].name == "none") {  this.$Message.error("沒有圖片哦~");  return;  }  this.currentImageName = name;   let elementArr = document.getElementsByClassName("showBigImage");  if (elementArr.length == 0) {  this.createShowImage();  }  for (let y = 0; y < this.opPicsList.length; y++) {  if (name == this.opPicsList[y].name) {   document.getElementById("bigImageE").src = this.opPicsList[y].url;   break;  }  } }, closeImageShow() {  let elementArr = document.getElementsByClassName("showBigImage");  let main = document.getElementsByClassName("main");  let count = elementArr.length;  for (let i = 0; i < count; i++) {  main[0].removeChild(elementArr[0]);  } }, rotateImage() {  let imageE = document.getElementById("bigImageE");  this.currentRotate = (this.currentRotate + 90) % 360;  imageE.style.transform =  imageE.style.transform.split(" ")[0] +  " rotate(" +  this.currentRotate +  "deg)"; }, toLeftImage() {  for (let y = 0; y < this.opPicsList.length; y++) {  if (this.currentImageName == this.opPicsList[y].name) {   if (y - 1 < 0) {   this.$Message.info("已經是最左邊的一張圖了哦~");   } else {   this.currentImageName = this.opPicsList[y - 1].name;   let imageE = document.getElementById("bigImageE");   imageE.src = this.opPicsList[y - 1].url;   // 加載完成執行   imageE.onload = function() {    if (imageE.naturalHeight < window.innerHeight) {    //圖片高度小于屏幕則需要垂直居中處理    imageE.style.height = imageE.naturalHeight + "px";    imageE.style.top = "50%";    imageE.style.position = "relative";    imageE.style.transform = "translateY(-50%)";    imageE.style.zoom = "100%";    } else {    //需要去除前一張圖片的效果    imageE.style.height = window.innerHeight + "px";    imageE.style.top = "0";    imageE.style.position = "relative";    imageE.style.transform = "translateY(0%)";    imageE.style.zoom = "100%";    }   };   }   break;  }  } }, toRightImage() {  for (let y = 0; y < this.opPicsList.length; y++) {  if (this.currentImageName == this.opPicsList[y].name) {   if (y + 1 == this.opPicsList.length) {   this.$Message.info("已經是最右邊的一張圖了哦~");   } else {   this.currentImageName = this.opPicsList[y + 1].name;   let imageE = document.getElementById("bigImageE");   imageE.src = this.opPicsList[y + 1].url;   // 加載完成執行   imageE.onload = function() {    if (imageE.naturalHeight < window.innerHeight) {    //圖片高度小于屏幕則需要垂直居中處理    imageE.style.height = imageE.naturalHeight + "px";    imageE.style.top = "50%";    imageE.style.position = "relative";    imageE.style.transform = "translateY(-50%)";    imageE.style.zoom = "100%";    } else {    //需要去除前一張圖片的效果    imageE.style.height = window.innerHeight + "px";    imageE.style.top = "0";    imageE.style.position = "relative";    imageE.style.transform = "translateY(0%)";    imageE.style.zoom = "100%";    }   };   }   break;  }  } }, createShowImage() {  //創建圖片顯示  let main = document.getElementsByClassName("main");  let topContainer = document.createElement("div");  let scrollContainer = document.createElement("div");  topContainer.style.position = "fixed";  topContainer.style.zIndex = "80";  topContainer.style.background = "rgba(0,0,0,0.80)";  topContainer.style.height = "100%";  topContainer.style.width = "100%";  topContainer.style.textAlign = "center";  topContainer.className = "showBigImage";   let imageContainer = document.createElement("div");  imageContainer.style.width = window.innerWidth + "px";  imageContainer.style.height = window.innerHeight + "px";  imageContainer.style.margin = "0 auto";  imageContainer.style.overflow = "auto";  imageContainer.style.top = "50%";  imageContainer.style.position = "relative";  imageContainer.style.transform = "translateY(-50%)";   let imageE = document.createElement("img");  imageE.src = iconNoImages;  imageE.title = "鼠標滾輪滾動可縮放圖片";  imageE.id = "bigImageE";  // 加載完成執行  imageE.onload = function() {  if (imageE.naturalHeight < window.innerHeight) {   //圖片高度小于屏幕則需要垂直居中處理   // imageE.style.width = "100%";   imageE.style.top = "50%";   imageE.style.position = "relative";   imageE.style.transform = "translateY(-50%)";  } else {   imageE.style.height = window.innerHeight + "px";  }  };   this.bigImage = imageE;   //添加鼠標滾輪事件縮放圖片  if (imageE.addEventListener) {  // IE9, Chrome, Safari, Opera  imageE.addEventListener("mousewheel", this.rollImg, false);  // Firefox  imageE.addEventListener("DOMMouseScroll", this.rollImg, false);  } else {  // IE 6/7/8  imageE.attachEvent("onmousewheel", this.rollImg);  }  imageContainer.appendChild(imageE);  topContainer.appendChild(imageContainer);   main[0].appendChild(topContainer);   //創建點擊左右瀏覽按鈕  //左按鈕  let imgLeft = document.createElement("img");  imgLeft.src = iconLeft;  imgLeft.style.zIndex = "101";  imgLeft.style.position = "fixed";  imgLeft.style.top = "50%";  imgLeft.style.transform = "translateY(-50%)";  imgLeft.style.left = "12%";  imgLeft.style.cursor = "pointer";  imgLeft.className = "showBigImage";  //添加鼠標點擊事件切換圖片  imgLeft.addEventListener("click", this.toLeftImage);  //右按鈕  let imgRight = document.createElement("img");  imgRight.src = iconRight;  imgRight.style.zIndex = "101";  imgRight.style.position = "fixed";  imgRight.style.top = "50%";  imgRight.style.transform = "translateY(-50%)";  imgRight.style.right = "12%";  imgRight.style.cursor = "pointer";  imgRight.className = "showBigImage";  //添加鼠標點擊事件切換圖片  imgRight.addEventListener("click", this.toRightImage);   //大圖片選轉  let imgRotate = document.createElement("img");  imgRotate.id = "rotateImageBtn";  imgRotate.src = iconRotate;  imgRotate.style.zIndex = "102";  imgRotate.style.position = "fixed";  imgRotate.style.top = "5%";  imgRotate.style.right = "5%";  imgRotate.style.transform = "translateY(-50%)";  imgRotate.style.cursor = "pointer";  imgRotate.className = "showBigImage";  //添加鼠標點擊事件旋轉大圖  imgRotate.addEventListener("click", this.rotateImage);   //關閉按鈕  let imgClose = document.createElement("img");  imgClose.src = iconClose;  imgClose.style.zIndex = "101";  imgClose.style.position = "fixed";  imgClose.style.top = "5%";  imgClose.style.right = "1%";  imgClose.style.transform = "translateY(-50%)";  imgClose.style.cursor = "pointer";  imgClose.className = "showBigImage";  //添加鼠標點擊事件關閉顯示大圖  imgClose.addEventListener("click", this.closeImageShow);   main[0].appendChild(imgLeft);  main[0].appendChild(imgRight);  main[0].appendChild(imgClose);  main[0].appendChild(imgRotate);  } }, mounted() { this.loadDetail(); }};</script>

<template> <div> </div></template><script>import iconLeft from "@/images/icon-left.png";import iconRight from "@/images/icon-right.png";import iconClose from "@/images/icon-close.png";import iconRotate from "@/images/icon-rotate.png";import iconNoImages from "@/images/icon-no-images.png";import {IMAGE_URL_PREFIX} from "@/config/constant";export default { data() { return {  opPicsList: [  {   name: "none",   url: iconNoImages  }  ],  imgName: "",  bigImage: null,  currentImageName: "",  currentRotate: 0 }; }, props: { }, methods: { loadImages(opPics) {  this.opPicsList.splice(0, this.opPicsList.length);  opPics.split(",").forEach((element, index) => {  this.opPicsList.push({   name: index,   url: IMAGE_URL_PREFIX + element  });  });  this.handleView("0"); }, rollImg() {  /* 獲取當前頁面的縮放比   若未設置zoom縮放比，則為默認100%，即1，原圖大小  */   var zoom = parseInt(this.bigImage.style.zoom) || 100;  /* event.wheelDelta 獲取滾輪滾動值并將滾動值疊加給縮放比zoom   wheelDelta統一為±120，其中正數表示為向上滾動，負數表示向下滾動  */  zoom += event.wheelDelta / 12;  /* 如果縮放比大于0，則將縮放比加載到頁面元素 */  if (zoom >= 100) {  this.bigImage.style.zoom = zoom + "%";  }  /* 如果縮放比不大于0，則返回false，不執行操作 */  return false; }, handleView(name) {  if (this.opPicsList[0].name == "none") {  this.$Message.error("沒有圖片哦~");  return;  }  this.currentImageName = name;   let elementArr = document.getElementsByClassName("showBigImage");  if (elementArr.length == 0) {  this.createShowImage();  }  for (let y = 0; y < this.opPicsList.length; y++) {  if (name == this.opPicsList[y].name) {   document.getElementById("bigImageE").src = this.opPicsList[y].url;   // debugger   // document.getElementById("bigImageE").width = this.opPicsList[y].url;   // document.getElementById("bigImageE").height = this.opPicsList[y].url;   // for (let i = 0; i < elementArr.length; i++) {   // elementArr[i].style.display = "block";   // }   break;  }  } }, closeImageShow() {  let elementArr = document.getElementsByClassName("showBigImage");  let main = document.getElementsByClassName("main");  let count = elementArr.length;  for (let i = 0; i < count; i++) {  main[0].removeChild(elementArr[0]);  } }, rotateImage() {  let imageE = document.getElementById("bigImageE");  this.currentRotate = (this.currentRotate + 90) % 360;  imageE.style.transform =  imageE.style.transform.split(" ")[0] +  " rotate(" +  this.currentRotate +  "deg)"; }, toLeftImage() {  for (let y = 0; y < this.opPicsList.length; y++) {  if (this.currentImageName == this.opPicsList[y].name) {   if (y - 1 < 0) {   this.$Message.info("已經是最左邊的一張圖了哦~");   } else {   this.currentImageName = this.opPicsList[y - 1].name;   let imageE = document.getElementById("bigImageE");   imageE.src = this.opPicsList[y - 1].url;   // 加載完成執行   imageE.onload = function() {    if (imageE.naturalHeight < window.innerHeight) {    //圖片高度小于屏幕則需要垂直居中處理    imageE.style.height = imageE.naturalHeight + "px";    imageE.style.top = "50%";    imageE.style.position = "relative";    imageE.style.transform = "translateY(-50%)";    imageE.style.zoom = "100%";    } else {    //需要去除前一張圖片的效果    imageE.style.height = window.innerHeight + "px";    imageE.style.top = "0";    imageE.style.position = "relative";    imageE.style.transform = "translateY(0%)";    imageE.style.zoom = "100%";    }   };   }   break;  }  } }, toRightImage() {  for (let y = 0; y < this.opPicsList.length; y++) {  if (this.currentImageName == this.opPicsList[y].name) {   if (y + 1 == this.opPicsList.length) {   this.$Message.info("已經是最右邊的一張圖了哦~");   } else {   this.currentImageName = this.opPicsList[y + 1].name;   let imageE = document.getElementById("bigImageE");   imageE.src = this.opPicsList[y + 1].url;   // 加載完成執行   imageE.onload = function() {    if (imageE.naturalHeight < window.innerHeight) {    //圖片高度小于屏幕則需要垂直居中處理    imageE.style.height = imageE.naturalHeight + "px";    imageE.style.top = "50%";    imageE.style.position = "relative";    imageE.style.transform = "translateY(-50%)";    imageE.style.zoom = "100%";    } else {    //需要去除前一張圖片的效果    imageE.style.height = window.innerHeight + "px";    imageE.style.top = "0";    imageE.style.position = "relative";    imageE.style.transform = "translateY(0%)";    imageE.style.zoom = "100%";    }   };   }   break;  }  } }, createShowImage() {  //創建圖片顯示  // let elementArr = document.getElementsByClassName("showBigImage");  // if (elementArr.length == 0) {  let main = document.getElementsByClassName("main");  let topContainer = document.createElement("div");  let scrollContainer = document.createElement("div");  topContainer.style.position = "fixed";  topContainer.style.zIndex = "80";  topContainer.style.background = "rgba(0,0,0,0.80)";  topContainer.style.height = "100%";  topContainer.style.width = "100%";  topContainer.style.textAlign = "center";  topContainer.className = "showBigImage";  // topContainer.style.display = "none";   let imageContainer = document.createElement("div");  imageContainer.style.width = window.innerWidth + "px";  imageContainer.style.height = window.innerHeight + "px";  imageContainer.style.margin = "0 auto";  imageContainer.style.overflow = "auto";  imageContainer.style.top = "50%";  imageContainer.style.position = "relative";  imageContainer.style.transform = "translateY(-50%)";   let imageE = document.createElement("img");  imageE.src = iconNoImages;  imageE.title = "鼠標滾輪滾動可縮放圖片";  imageE.id = "bigImageE";  // 加載完成執行  imageE.onload = function() {  if (imageE.naturalHeight < window.innerHeight) {   //圖片高度小于屏幕則需要垂直居中處理   // imageE.style.width = "100%";   imageE.style.top = "50%";   imageE.style.position = "relative";   imageE.style.transform = "translateY(-50%)";  } else {   imageE.style.height = window.innerHeight + "px";  }  };  // imageE.style.width = "100%";  // imageE.style.width = "475px";  // imageE.style.height = window.innerHeight + 'px';   // imageE.style.objectFit= "scale-down";  // imageE.style.height = "100%";  // imageE.style.top = "50%";  // imageE.style.position = "relative";  // imageE.style.transform = "translateY(-50%)";  this.bigImage = imageE;   //添加鼠標滾輪事件縮放圖片  if (imageE.addEventListener) {  // IE9, Chrome, Safari, Opera  imageE.addEventListener("mousewheel", this.rollImg, false);  // Firefox  imageE.addEventListener("DOMMouseScroll", this.rollImg, false);  } else {  // IE 6/7/8  imageE.attachEvent("onmousewheel", this.rollImg);  }  imageContainer.appendChild(imageE);  topContainer.appendChild(imageContainer);   main[0].appendChild(topContainer);   //創建點擊左右瀏覽按鈕  //左按鈕  let imgLeft = document.createElement("img");  imgLeft.src = iconLeft;  imgLeft.style.zIndex = "101";  imgLeft.style.position = "fixed";  imgLeft.style.top = "50%";  imgLeft.style.transform = "translateY(-50%)";  imgLeft.style.left = "12%";  imgLeft.style.cursor = "pointer";  imgLeft.className = "showBigImage";  //添加鼠標點擊事件切換圖片  imgLeft.addEventListener("click", this.toLeftImage);  //右按鈕  let imgRight = document.createElement("img");  imgRight.src = iconRight;  imgRight.style.zIndex = "101";  imgRight.style.position = "fixed";  imgRight.style.top = "50%";  imgRight.style.transform = "translateY(-50%)";  imgRight.style.right = "12%";  imgRight.style.cursor = "pointer";  imgRight.className = "showBigImage";  //添加鼠標點擊事件切換圖片  imgRight.addEventListener("click", this.toRightImage);   //大圖片選轉  let imgRotate = document.createElement("img");  imgRotate.id = "rotateImageBtn";  imgRotate.src = iconRotate;  imgRotate.style.zIndex = "102";  imgRotate.style.position = "fixed";  imgRotate.style.top = "5%";  imgRotate.style.right = "5%";  imgRotate.style.transform = "translateY(-50%)";  imgRotate.style.cursor = "pointer";  imgRotate.className = "showBigImage";  //添加鼠標點擊事件旋轉大圖  imgRotate.addEventListener("click", this.rotateImage);   //關閉按鈕  let imgClose = document.createElement("img");  imgClose.src = iconClose;  imgClose.style.zIndex = "101";  imgClose.style.position = "fixed";  imgClose.style.top = "5%";  imgClose.style.right = "1%";  imgClose.style.transform = "translateY(-50%)";  imgClose.style.cursor = "pointer";  imgClose.className = "showBigImage";  //添加鼠標點擊事件關閉顯示大圖  imgClose.addEventListener("click", this.closeImageShow);   // imgLeft.style.display = "none";  // imgRight.style.display = "none";  // imgClose.style.display = "none";  main[0].appendChild(imgLeft);  main[0].appendChild(imgRight);  main[0].appendChild(imgClose);  main[0].appendChild(imgRotate);  // main[0].style.textAlign = "center";  // this.imgName = name;  // this.visible = true;  // } } }, mounted() { // this.loadImages(); }};</script>