违禁品包裹图片预览优化

Administrator

2021-03-29 76e9bb6df786f5d63b3ece31958bd989b3e6a9db

违禁品包裹图片预览优化

 src/views/parcel/parcel.vue

@@ -33,17 +33,14 @@
      </template>
      
    </avue-crud>
      <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      @opened="parcelConversation = true"
      @close="(parcelConversation = false), (oldParcelSatart = false)" >
    <template>
      <div>
        <el-image  :src="'data:image/png;base64,'+imgUrl"  :preview-src-list="'data:image/png;base64,'+imgUrl">
        </el-image>
          <el-image-viewer 
              v-if="showViewer" 
              :on-close="closeViewer" 
              :url-list="['data:image/png;base64,'+imgUrl]" />
      </div>
    </el-dialog>
    </template>
    
  </basic-container>
</template>
@@ -51,12 +48,16 @@
<script>
  import {getList, getDetail, getParcelPic} from "@/api/parcel/parcel";
  import {mapGetters} from "vuex";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

  export default {
    name:'index',
    components: { ElImageViewer },
    data() {
      return {
        form: {},
        query: {},
        showViewer: false, // 显示查看器
        imgUrl:'',
        loading: true,
        dialogTableVisible: false,
@@ -309,10 +310,16 @@
        });
      },
      handleParcelPic(row) {
        var that=this;
        getParcelPic(row.imgUrl).then(res => {
            this.imgUrl = res.data.data.imgBase64;
            that.imgUrl = res.data.data.imgBase64;
            //that.$refs.preview.clickHandler();
            this.showViewer = true
          });
          this.dialogTableVisible=true;
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false
      }
    }
  };

 src/views/parcel/parcelKind.vue

@@ -1,5 +1,5 @@
<template>
  <basic-container>
    <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
@@ -25,65 +25,49 @@
          :size="size"
          :type="type"
          @click.stop="handleParcelPic(row)"
          id="show"
          >查看包裹图片
        </el-button>
        
        
      </template>
      

    </avue-crud>
    <!-- <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      @opened="parcelConversation = true"
      @close="(parcelConversation = false), (oldParcelSatart = false)" >
      <div>
        <el-image  :src="'data:image/png;base64,'+imgUrl">
        </el-image>
      </div>
    </el-dialog> -->

    <!-- <template>
        <div style="width: 100%; height: 100%;" id="divImage">
          <el-image v-show="flag" ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>
        </div>
    </template> -->
    <template>
      <div id="imgs">
          <!-- <el-button v-model="show" :images="images" @change="onChange">查看包裹图片</el-button> -->
          <el-image :src="'data:image/png;base64,'+imgUrl"/>
      <div>
        <!-- style="display:none" -->
        <!-- <el-image 
        ref="preview"
        :src="'data:image/png;base64,'+imgUrl"
        :preview-src-list="['data:image/png;base64,'+imgUrl]"
        z-index=9999></el-image> -->
        <el-image-viewer 
                     v-if="showViewer" 
                     :on-close="closeViewer" 
                     :url-list="['data:image/png;base64,'+imgUrl]" />
      </div>
    </template>
  </basic-container>
    </basic-container>

</template>


<script>
  import {getKindList, getParcelPic} from "@/api/parcel/parcel";
  import {mapGetters} from "vuex";
  //import {ImagePreview} from "@/view/parcel/ImagePreview"
  // import VueDirectiveImagePreviewer from 'vue-directive-image-previewer';
  // import 'vue-directive-image-previewer/dist/assets/style.css';
  import Vue from 'vue';
   import { ImagePreview } from 'vant';
  //Vue.use(ImagePreview);
  // Vue.use(VueDirectiveImagePreviewer, {
  //   zIndex: 9999,  //层级显示
  //   previewSize: 3 //三倍图
  // });
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  Vue.use(ElementUI)


  export default {
    name:'index',
    components: { ElImageViewer },
    data() {
      return {
        form: {},
        query: {},
        showViewer: false, // 显示查看器
        imgUrl:'',
        loading: true,
        dialogTableVisible: false,
        parcelConversation:false,
        oldParcelSatart:false,
        page: {
          pageSize: 10,
          currentPage: 1,
@@ -294,22 +278,14 @@
        var that = this;
        getParcelPic(row.imgUrl).then(res => {
            that.imgUrl = res.data.data.imgBase64;
            this.flag=true;
            //that.$refs.preview.clickHandler();
            this.showViewer = true
          });
          // var divImage= document.getElementById("divImage");
          // console.log(divImage,111);
          // divImage.innerHTML=divImage.innerHTML+`<el-image ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>`;
          // console.log(divImage,111);
        setTimeout(() => {
            //代码
            //that.$refs.image.$el.click();
            var image=new ImagePreview();
            image.Image(document.getElementById("imgs"));
            document.getElementById("show").onclick=function(){
              image.show(0);
            }
        }, 1000);
      }
      },
      // 关闭查看器
        closeViewer() {
          this.showViewer = false
        }
    }
  };
</script>