图片优化

package-lock.json

@@ -11264,6 +11264,22 @@
       "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.3.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.3.2.tgz",
       "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE="
     },
+    "v-viewer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.4.2.tgz",
+      "integrity": "sha512-WEslW+dKPHg10f9jl1v0ilH0uk4ZFOz4vUp4wJjomwl+VQEnsWLjSzHCeFoayxjE9KyZspVu9lYLNxk+o3xzkw==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.3.2"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+          "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
+        }
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
@@ -11295,6 +11311,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.4.0.tgz",
+      "integrity": "sha512-HTtR44rzdX76VrDfZGaYNciUL3EEexGX4HkvdJHP0VFSR+d2I/ZXFqdx6Q4Cc+X5VwhEf0Fx1Hi3wQy7msmKOA=="
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",

package.json

@@ -31,6 +31,7 @@
     "showdown": "1.7.1",
     "simplemde": "1.11.2",
     "sortablejs": "1.5.1",
+    "v-viewer": "^1.4.2",
     "vue": "2.4.2",
     "vue-baidu-map": "^0.21.19",
     "vue-count-to": "1.0.5",

src/main.js

@@ -64,7 +64,13 @@ import '../static/utf8-jsp/ueditor.config.js'
 import '../static/utf8-jsp/ueditor.all.min.js'
 import '../static/utf8-jsp/lang/zh-cn/zh-cn.js'
 import '../static/utf8-jsp/ueditor.parse.min.js'
-
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+Vue.use(Viewer, {
+  defaultOptions: {
+    zIndex: 9999
+  }
+})
 // register globally
 Vue.component('multiselect', Multiselect);
 Vue.component('Sticky', Sticky);

src/views/order/rentVehicleInfo/index.vue

@@ -358,23 +358,31 @@
 						<span style="margin-left:110px;">身份证号:</span>
 						<span class="label-text">{{orderReturnVehicleCrosstown.licenseIdCard}}</span>
 						<br />
-						<img
+						<!-- <img
 							:src="orderReturnVehicleCrosstown.licenseImg"
 							style="width: 100px; height: 100px;margin-left:110px;"
 							@click="lookPic(orderReturnVehicleCrosstown.licenseImg)"
-						/>
+						/> -->
+						<viewer>
+							<img :src="orderReturnVehicleCrosstown.licenseImg"  style="width: 100px; height: 100px;margin-left:110px;">
+						</viewer>
 					</div>
 
 					<div>
 						<span class="label-text">拍照取证*:</span>
 						<br />
-						<img
+						<!-- <img
 							v-for="(item,index) in otherImg"
 							:src="item"
 							:key="index"
 							style="width: 100px; height: 100px;margin-left:110px;"
               	@click="lookPic(item)"
-						/>
+						/> -->
+
+						<viewer :images="otherImg">
+							<img v-for="src in otherImg" :src="src" :key="src" style="width: 100px; height: 100px;margin-left:110px;">
+						</viewer>
+
 						<!-- 	<img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>
               <img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>
 						<img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>-->
@@ -384,20 +392,27 @@
 						<span class="label-text">当前公里数:</span>
 						<span class="label-text">{{orderReturnVehicleCrosstown.mileage}}Km</span>
 						<br />
-						<img
+						<!-- <img
 							:src="orderReturnVehicleCrosstown.mileageImg"
 							style="width: 100px; height: 100px;margin-left:110px;"
               	@click="lookPic(orderReturnVehicleCrosstown.mileageImg)"
-						/>
+						/> -->
+						<viewer>
+							<img :src="orderReturnVehicleCrosstown.mileageImg"  style="width: 100px; height: 100px;margin-left:110px;">
+						</viewer>
+
 					</div>
 					<div v-if="returnVehicle">
 						<span class="label-text">钥匙照片*:</span>
 						<br />
-						<img
+						<!-- <img
 							:src="orderReturnVehicleCrosstown.vehicleKey"
 							style="width: 100px; height: 100px;margin-left:110px;"
               	@click="lookPic(orderReturnVehicleCrosstown.vehicleKey)"
-						/>
+						/> -->
+						<viewer>
+							<img :src="orderReturnVehicleCrosstown.vehicleKey"  style="width: 100px; height: 100px;margin-left:110px;">
+						</viewer>
 					</div>
 					<div v-if="returnVehicle">
 						<span class="label-text">押金扣除项*:</span>
@@ -412,16 +427,6 @@
 				</div>
 			</el-form>
 		</el-dialog>
-
-		<el-dialog
-			:title="bigPicTitle"
-			:visible.sync="bigPicPop"
-			:append-to-body="true"
-			:modal="false"
-			top="0"
-		>
-			<img :src="priceUrl" alt style="width:100%" />
-		</el-dialog>
 	</div>
 </template>
 
@@ -460,9 +465,6 @@ export default {
 	},
 	data() {
 		return {
-			bigPicTitle: '查看',
-			bigPicPop: false,
-			priceUrl: '',
 			pictureList: [],
 			dedDetail: [],
 			depositRefundRecord: [],
@@ -861,13 +863,6 @@ export default {
 			this.vehicleDetail = true
 			this.depositDetail = false
 		},
-		//查看大图
-		lookPic(val) {
-			if (!!val) {
-				this.priceUrl = val
-				this.bigPicPop = true
-			}
-		},
 		getAllOrderVehicleCrosstown() {
 			getOrderVehicleCrosstown(this.orderVehicleQuery).then(response => {
 				// console.log(response);

src/views/vehicle/bookRecord/index.vue

@@ -407,7 +407,7 @@
 					</el-col>
 				</el-row>
 				<el-row style="margin-left: 20px;" v-if="departurePicList.length>0">
-					<el-col
+					<!-- <el-col
 						:span="3"
 						v-for="(item, index) in departurePicList"
 						:key="index"
@@ -417,7 +417,11 @@
 						<el-card>
 							<img :src="item" class="image"  @click="lookPic(item)" />
 						</el-card>
-					</el-col>
+						
+					</el-col> -->
+					<viewer :images="departurePicList">
+							<img v-for="src in departurePicList" :src="src" :key="src" style="width: 100px; height: 100px;margin-right:30px;">
+						</viewer>
 				</el-row>
 				<hr />
 				<el-row>
@@ -463,7 +467,7 @@
 					</el-col>
 				</el-row>
 				<el-row style="margin-left: 20px;" v-if="arrivalPicList.length>0">
-					<el-col
+					<!-- <el-col
 						:span="3"
 						v-for="(item, index) in arrivalPicList"
 						:key="index"
@@ -473,7 +477,10 @@
 						<el-card>
 							<img :src="item" class="image" @click="lookPic(item)" />
 						</el-card>
-					</el-col>
+					</el-col> -->
+					<viewer :images="arrivalPicList">
+							<img v-for="src in arrivalPicList" :src="src" :key="src" style="width: 100px; height: 100px;margin-right:30px;">
+						</viewer>
 				</el-row>
 				<hr />
 				<el-row>
@@ -495,10 +502,6 @@
 			</div>
 		</el-dialog>
 
-		<el-dialog :title="bigPicTitle" :visible.sync="bigPicPop" :append-to-body="true" :modal="false" top='0'>
-			<img :src="priceUrl" alt style='width:100%'/>
-		</el-dialog>
-
 		<!-- 更改还车地点 -->
 		<div class="modal_modal" v-show="resetReturn"></div>
 		<el-dialog title="更改还车地点" :visible.sync="resetReturn" :append-to-body="true" :modal="false">
@@ -753,9 +756,6 @@ export default {
 	},
 	data() {
 		return {
-			priceUrl: '',
-			bigPicPop: false,
-			bigPicTitle: '',
 			returnForm: {
 				retCompany: ''
 			},
@@ -1164,12 +1164,6 @@ export default {
 		}
 	},
 	methods: {
-		//查看大图
-		lookPic(val) {
-			this.priceUrl = val;
-			this.bigPicPop = true;
-			this.bigPicTitle = '图片放大'
-		},
 		/**
 		 * 重置
 		 * */