banner图上传改成pdf直接上传，图片预览不下载

src/apps/mobile/views/banner/components/addEditDialog.vue

@@ -23,15 +23,31 @@
                         ref="upload"
                     ></Upload>
                 </el-form-item>
-                <el-form-item label="跳转链接:" prop="url">
-                    <el-input placeholder="跳转链接" v-model="formData.url"></el-input>
-                </el-form-item>
                 <el-form-item label="跳转类型:" prop="jumpType">
                     <el-select v-model="formData.jumpType" placeholder="请选择">
                         <el-option label="pdf" :value="1"></el-option>
                         <el-option label="网页链接" :value="2"></el-option>
                     </el-select>
                 </el-form-item>
+                <el-form-item label="跳转链接:" prop="url" v-show="formData.jumpType == 2">
+                    <el-input placeholder="跳转链接" v-model="formData.url"></el-input>
+                </el-form-item>
+                <el-form-item label="文件:" prop="jumpType" v-show="formData.jumpType == 1">
+                    <el-upload
+                        ref="uploadPdf"
+                        :action="uploadUrl"
+                        :on-remove="handlePdfRemove"
+                        :on-success="handlePdfSuccess"
+                        :on-exceed="handlePdfExceed"
+                        :before-upload="beforeUpload"
+                        :file-list="pdfList"
+                        :multiple="false"
+                        :limit="1"
+                        accept="application/pdf">
+                        <el-button size="small" type="primary">点击上传</el-button>
+                    </el-upload>
+                </el-form-item>
+                
                 <el-form-item label="显示位置:" prop="type">
                     <el-select v-model="formData.type" placeholder="请选择">
                         <el-option label="工作台banner" :value="1"></el-option>
@@ -64,6 +80,7 @@
     </div>
 </template>
 <script>
+import { uploadUrl } from '@/config.js';
 import Upload from '@/apps/mobile/components/uploadAuto/index';
 import { addBanner, editBanner } from '@/apps/mobile/api/banner/index';
 import { validPositiveInteger, validHttps } from '@/apps/mobile/utils/validate';
@@ -91,6 +108,7 @@ export default {
             }
         };
         return {
+            uploadUrl: uploadUrl,
             jumpType: null,
             type: null,
             visible: false,
@@ -98,6 +116,7 @@ export default {
             formData: { file: null },
             submitBtndisabled: false,
             fileList: [], // 图片列表
+            pdfList: [],//pdf列表
             maximumSize: 3, //图片大小  不超过3MB
             limitUpload: 1,
             rules: {
@@ -125,8 +144,6 @@ export default {
             };
             if (type === 'edit') {
                 this.title = '编辑';
-                console.log(data, 'daaaaa');
-
                 if (data.image) {
                     obj1.file = true;
                     let url = staticPath(data.image);
@@ -138,9 +155,17 @@ export default {
                         },
                     };
                     this.fileList.push(obj);
+
+                    this.pdfList = [
+                        {
+                            name: data.url,
+                            url: data.url,
+                            hasBeenUploaded: true,
+                            newName: data.url,
+                        },
+                    ];
                 }
                 this.formData = Object.assign({ ...data, ...obj1 });
-                console.log(this.formData, 'this.formData');
             } else {
                 this.title = '新增';
                 this.formData = obj1;
@@ -152,6 +177,7 @@ export default {
             this.$refs['formData'].resetFields();
             this.$refs.upload.clearFiles(); // 清空已上传的文件列表
             this.fileList = [];
+            this.pdfList = [];
             this.submitBtndisabled = false;
             this.visible = false;
         },
@@ -226,6 +252,30 @@ export default {
             this.submitBtndisabled = false;
             this.$emit('queryListData');
         },
+
+        handlePdfRemove() {
+            this.formData.url = '';
+            this.formData.file = null;
+        },
+        handlePdfSuccess(response) {
+            this.formData.url = response.data.pathUrl;
+            this.formData.file = true;
+            this.$refs['formData'].validateField('file');
+        },
+        handlePdfExceed() {
+            this.$message.warning('只能上传一个文件!');
+        },
+        beforeUpload(file) {
+            let fileType = ['application/pdf'].indexOf(file.type);
+            const isLt5M = file.size / 1024 / 1024 < 8;
+            if (fileType === -1) {
+                this.$message.warning('文件只能是pdf格式!');
+            }
+            if (!isLt5M) {
+                this.$message.warning('文件大小不能超过8MB!');
+            }
+            return fileType !== -1 && isLt5M;
+        },
     },
     watch: {
         fileList(val) {

src/apps/mobile/views/banner/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container banner-index">
         <TitleBar></TitleBar>
         <div class="main-container">
             <div class="search-container TableSelectMain">
@@ -68,17 +68,23 @@
                     <el-table-column prop="imgName" label="名称" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="planDate" label="图片" :show-overflow-tooltip="true">
                         <template slot-scope="scope">
-                            <span @click="imgOpen(scope.row.image)">
+                            <!-- <span @click="imgOpen(scope.row.image)"></span> -->
                             <el-image
                                 :src="scope.row.image | pathPipe"
                                 style="width:40px;cursor:pointer"
                                 fit="cover"
-                                :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
+                                :preview-src-list="[scope.row.image]"
                             ></el-image>
+                            
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="url" label="跳转链接" :show-overflow-tooltip="true">
+                        <template slot-scope="scope">
+                            <span @click="openPdf(scope.row.url)" style="cursor:pointer">
+                                {{ scope.row.url }}
                             </span>
                         </template>
                     </el-table-column>
-                    <el-table-column prop="url" label="跳转链接" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="jumpType" label="跳转类型">
                         <template slot-scope="scope">
                             <span v-show="scope.row.jumpType == 1">pdf</span>
@@ -288,12 +294,26 @@ export default {
                 })
                 .catch(err => err);
         },
-        imgOpen(imgs){
+        openPdf(imgs){
             window.open(imgs);
         }
+        
     },
     created() {
         this.queryListData();
     },
 };
 </script>
+<style lang="stylus" scoped>
+.banner-index {
+  ::v-deep .el-image {
+      img {
+          pointer-events: auto;
+      }
+      .el-icon-circle-close {
+          font-size: 50px;
+          color: #fff;
+      }
+  }
+}
+</style>

src/apps/mobile/views/comment/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
         <div class="main-container">
             <div class="search-container TableSelectMain">
@@ -89,11 +89,12 @@
                     <el-table-column prop="userName" label="评论人" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="userUrl" label="头像">
                         <template slot-scope="scope">
-                            <span @click="imgOpen(scope.row.userUrl)">
+                            <span>
                             <el-image
                                 :src="scope.row.userUrl | pathPipe"
                                 style="width:60px;height:60px;cursor:pointer"
                                 fit="cover"
+                                :preview-src-list="[scope.row.userUrl]"
                             ></el-image>
                             </span>
                         </template>
@@ -340,15 +341,28 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
-}
 
-::v-deep .el-date-editor .el-range-separator {
-    width: auto;
-}
+.my-open-img{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+
+    ::v-deep .el-date-editor .el-range-separator {
+        width: auto;
+    }
 
-.main-container {
-    padding: 0 15px 15px;
+    .main-container {
+        padding: 0 15px 15px;
+    }
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
 </style>

src/apps/mobile/views/data-bank/brands/brand/brand.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
 
         <div class="main-container">
@@ -65,12 +65,13 @@
                     <el-table-column prop="ename" label="英文名" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="logo" label="logo">
                         <template slot-scope="scope">
-                            <span @click="imgOpen(scope.row.logo)">
+                            <!-- <span @click="imgOpen(scope.row.logo)"></span> -->
                             <el-image
                                 :src="scope.row.logo | pathPipe"
                                 style="width:40px;height:40px;cursor:pointer"
+                                fit="cover"
+                                :preview-src-list="[scope.row.logo]"
                             ></el-image>
-                            </span>
                         </template>
                     </el-table-column>
                     <el-table-column prop="descr" label="描述" :show-overflow-tooltip="true"></el-table-column>
@@ -337,7 +338,20 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
+.my-open-img{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
+
 </style>

src/apps/mobile/views/data-bank/operation-accessory/index.vue

@@ -63,7 +63,11 @@
                 >
                     <el-table-column type="selection"></el-table-column>
                     <el-table-column label="系统名称" prop="controName" :show-overflow-tooltip="true"></el-table-column>
-                    <el-table-column prop="name" label="文件名" :show-overflow-tooltip="true"></el-table-column>
+                    <el-table-column prop="name" label="文件名" :show-overflow-tooltip="true">
+                        <template slot-scope="scope">
+                            <span @click="openPdf(scope.row.url)">{{ scope.row.name }}</span>
+                        </template>
+                    </el-table-column>
                     <el-table-column prop="browseNum" label="浏览量">
                         <template slot-scope="scope">
                             <span>{{scope.row.browseNum || 0}}</span>
@@ -320,6 +324,9 @@ export default {
                 })
                 .catch();
         },
+        openPdf(pdf){
+            window.open(pdf);
+        }
     },
 };
 </script>

src/apps/mobile/views/data-bank/operation/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
         <!-- 搜索栏与表格区域 -->
         <div class="main-container">
@@ -52,7 +52,7 @@
             </div>
             <div class="SearchTitle">
                 已选择
-                <span class="subject-color">4</span> 项
+                <span class="subject-color">{{ tableSelection.length }}</span> 项
             </div>
             <div class="MaintenanceTable">
                 <el-table
@@ -69,12 +69,13 @@
                     <el-table-column prop="name" label="系统名称"></el-table-column>
                     <el-table-column prop="logo" label="logo">
                         <template slot-scope="scope">
-                            <span @click="imgOpen(scope.row.logo)">
+                            <!-- <span @click="imgOpen(scope.row.logo)"></span> -->
                             <el-image
                                 :src="scope.row.logo | pathPipe"
                                 style="width:40px;height:40px;cursor:pointer"
+                                :preview-src-list="[scope.row.logo]"
                             ></el-image>
-                            </span>
+                            
                         </template>
                     </el-table-column>
                     <el-table-column prop="descr" label="描述" :show-overflow-tooltip="true"></el-table-column>
@@ -360,7 +361,20 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
+
+.my-open-img{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
 </style>

src/apps/mobile/views/expert-database-bank/punishment/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
         <div class="main-container">
             <div class="search-container TableSelectMain">
@@ -58,11 +58,12 @@
                     <el-table-column prop="punishAmount" label="处罚金额"></el-table-column>
                     <el-table-column prop="picUrl" label="图片">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.picUrl" @click="imgOpen(scope.row.picUrl)">
+                            <span v-if="scope.row.picUrl">
                             <el-image                                
                                 :src="scope.row.picUrl | pathPipe"
                                 style="width:40px;height:40px;cursor:pointer"
                                 fit="cover"
+                                :preview-src-list="[scope.row.picUrl]"
                             ></el-image>
                             </span>
                             <span v-else>暂无图片</span>
@@ -193,7 +194,21 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
+
+
+.my-open-img{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
 </style>

src/apps/mobile/views/question-bank/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
         <div class="main-container">
             <div class="search-container TableSelectMain">
@@ -67,8 +67,12 @@
                     <el-table-column prop="solution" label="解决方法" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="imgs" label="图片">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.imgs && scope.row.imgs.length > 0" @click="imgOpen(scope.row.imgs[0])">
-                                <el-image :src="scope.row.imgs[0] | pathPipe" style="width:64px;height:64px;cursor:pointer"></el-image>
+                            <span v-if="scope.row.imgs && scope.row.imgs.length > 0">
+                                <el-image 
+                                    :src="scope.row.imgs[0] | pathPipe" 
+                                    style="width:64px;height:64px;cursor:pointer"
+                                    :preview-src-list="[scope.row.imgs[0]]">
+                                </el-image>
                             </span>
                             <span v-else>-无-</span>
                         </template>
@@ -435,4 +439,17 @@ export default {
     },
 };
 </script>
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+.my-open-img{
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
+}
+</style>

src/apps/mobile/views/school/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container my-open-img">
         <TitleBar></TitleBar>
         <!-- 搜索栏与表格区域 -->
         <div class="main-container">
@@ -84,21 +84,23 @@
                     <el-table-column prop="nickname" label="作者" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="cover" label="封面图" min-width="100px;">
                         <template slot-scope="scope">
-                        <span @click="imgOpen(scope.row.cover)">
+                        <!-- <span @click="imgOpen(scope.row.cover)"></span> -->
                             <el-image
                                 style="width:70px;height:70px;cursor:pointer"
                                 :src="scope.row.cover | pathPipe"
+                                :preview-src-list = "[scope.row.cover]"
                             ></el-image>
-                        </span>
+                        
                         </template>
                     </el-table-column>
                     <el-table-column label="视频">
                         <template slot-scope="scope">
-                            <el-link
+                            <!-- <el-link
                                 type="primary"
                                 :href="scope.row.url | pathPipe"
                                 target="_blank"
-                            >查看视频</el-link>
+                            >查看视频</el-link> -->
+                            <span @click="openVideo(scope.row.url)" style="cursor:pointer">查看视频</span>
                         </template>
                     </el-table-column>
                     <el-table-column prop="descr" label="描述" :show-overflow-tooltip="true"></el-table-column>
@@ -503,7 +505,12 @@ export default {
         },
         imgOpen(imgs){
             window.open(imgs);
+        },
+        
+        openVideo(src){
+            window.open(src);
         }
+
     },
     beforeCreate() {
         that = this;
@@ -511,7 +518,21 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
+
+
+.my-open-img{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
 </style>

src/apps/mobile/views/shop/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="common-container">
+    <div class="common-container shop-index">
         <TitleBar></TitleBar>
         <!-- 搜索栏与表格区域 -->
         <div class="main-container">
@@ -89,14 +89,14 @@
                     <el-table-column prop="brandName" label="品牌" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="imgs" label="图集">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.imgs[0]" @click="imgOpen(scope.row.imgs[0])">
+                            <!-- <span v-if="scope.row.imgs[0]" @click="imgOpen(scope.row.imgs[0])"></span> -->
                             <el-image
                                 :src="scope.row.imgs[0] | pathPipe"
                                 style="width:40px;height:40px;cursor:pointer"
                                 fit="cover"
+                                :preview-src-list="[scope.row.imgs[0]]"
                             ></el-image>
-                            </span>
-                            <span v-else>暂无图片</span>
+                            <span v-if="!scope.row.imgs[0]">暂无图片</span>
                         </template>
                     </el-table-column>
                     <el-table-column prop="price" label="原价" :show-overflow-tooltip="true"></el-table-column>
@@ -377,7 +377,20 @@ export default {
 };
 </script>
 <style lang="stylus" scoped>
-.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 95%;
+
+.shop-index{
+    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
+        width: 95%;
+    }
+    ::v-deep .el-image {
+      img {
+          pointer-events: auto;
+      }
+      .el-icon-circle-close {
+          font-size: 50px;
+          color: #fff;
+      }
+  }
 }
+
 </style>

src/apps/mobile/views/state-bank/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="state common-container">
+    <div class="state common-container my-open-img">
         <TitleBar></TitleBar>
         <div class="main-container">
             <div class="search-container TableSelectMain">
@@ -104,12 +104,13 @@
                     </el-table-column>
                     <el-table-column prop="imgs" label="申述图片">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.imgs && scope.row.imgs.length > 0" @click="imgOpen(scope.row.imgs[0])">
+                            <!-- <span v-if="scope.row.imgs && scope.row.imgs.length > 0" @click="imgOpen(scope.row.imgs[0])"></span> -->
                             <el-image
                                 :src="scope.row.imgs[0] | pathPipe"
                                 style="width:40px;height:40px;cursor:pointer"
+                                :preview-src-list="[scope.row.imgs]"
                             ></el-image>
-                            </span>
+                            
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -370,4 +371,16 @@ a:visited {
     color: #0000CC;
     text-decoration: none;
 }
+.my-open-img{
+    ::v-deep .el-image{
+        img{
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
+}
 </style>