订单详情展示原图

src/components/order-card-item/index.vue

@@ -50,7 +50,8 @@
           <span v-if="showFlagBtn">
           <el-button v-if="item.flag==0 && mode=='view'" type="success" size="mini" style="margin-right: 20px" @click="handleFlag(item, index)">待标记</el-button>
           <el-button v-if="item.flag==1 && mode=='view'" type="warning" size="mini" style="margin-right: 5px" @click="handleFlag(item, index)">已标记</el-button>
-          <el-button v-if="item.prodName.indexOf('语音') !== -1 && mode=='view'" type="text" size="mini" style="margin-right: 5px" @click="openYYForm(item, index)">查看语音</el-button>
+          <el-button v-if="mode=='view'" type="text" size="mini" @click="openOrgPicForm(item, index)">原图</el-button>
+          <el-button v-if="item.prodName.indexOf('语音') !== -1 && mode=='view'" type="text" size="mini" @click="openYYForm(item, index)">查看语音</el-button>
           <el-button v-if="mode==='edit'" type="primary" size="mini" style="margin-right: 5px" @click="addOrUpdateCardItem(item)">保存</el-button>
           <el-button v-if="mode==='edit' && item.cardItemId" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(item, index)">删除</el-button>
         </span>
@@ -75,6 +76,7 @@
     </div>
     <CanvasPreview v-if= "previewPicDialogVisible" ref="canvasPreviewRef"></CanvasPreview>
     <YuyinPreview ref="yuYinPreviewRef"></YuyinPreview>
+    <OrgPicPreview ref="orgPicPreviewRef"></OrgPicPreview>
 
   </div>
 </template>
@@ -82,8 +84,9 @@
 <script>
   import CanvasPreview from "../canvas-preview/index";
   import YuyinPreview from "../yuyin-preview/index";
+  import OrgPicPreview from "../org-pic-preview/index";
   export default {
-    components: {CanvasPreview, YuyinPreview},
+    components: {CanvasPreview, YuyinPreview,OrgPicPreview},
     data () {
       return {
         lang: localStorage.getItem('lang') || 'zh_CN',
@@ -121,6 +124,11 @@
           this.$refs.yuYinPreviewRef.init(item)
         })
       },
+      openOrgPicForm(item, index){
+        this.$nextTick(() =>{
+          this.$refs.orgPicPreviewRef.init(item)
+        })
+      },
       previewLoad(event){
         this.previewWidth = event.srcElement.clientWidth;
         this.previewHeight = event.srcElement.clientHeight;

src/components/org-pic-preview/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :append-to-body="false"
+    :modal="false"
+    title="原图预览"
+    top="5vh"
+    width="60%"
+    @close="closeDialog"
+    v-if="visible">
+    <el-form
+      :model="dataForm"
+      size="small">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="正面原图">
+            <el-image
+              style="width: 421px; height: 645px"
+              :src="dataForm.frontOrgPic.indexOf('https://') !== -1? dataForm.frontOrgPic : resourcesUrl + dataForm.frontOrgPic"
+              v-if="dataForm.frontOrgPic"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="背面原图">
+            <el-image
+              style="width: 421px; height: 645px"
+              :src="dataForm.backOrgPic.indexOf('https://') !== -1? dataForm.backOrgPic : resourcesUrl + dataForm.backOrgPic"
+              v-if="dataForm.backOrgPic"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+
+</template>
+
+<script>
+  export default {
+    name: "YuyinPreview",
+    data() {
+      return {
+        visible: false,
+        dataForm:{},
+        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+      };
+    },
+    mounted() {
+    },
+    methods: {
+      init(cardItem){
+        this.dataForm = cardItem;
+        this.visible = true;
+      },
+      closeDialog(){
+        this.visible = false
+        this.dataForm = {}
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>