图片放大

package.json

@@ -17,8 +17,10 @@
     "element-ui": "^2.10.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
+    "v-viewer": "^1.4.2",
     "vue": "^2.6.6",
     "vue-echarts": "^4.0.1",
+    "vue-photo-preview": "^1.1.3",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },

src/config/api.js

@@ -399,7 +399,7 @@ const apis = {
         url: `${commPrefix}/tdSpec/update`
       },
       delete: {
-        method: 'delete',
+        method: 'put',
         url: `${commPrefix}/tdSpec/delete/:id`
       },
     },

src/main.js

@@ -14,6 +14,10 @@ import './assets/iconfont.css'
 
 Vue.use(Element)
 
+import preview from 'vue-photo-preview'
+import 'vue-photo-preview/dist/skin.css'
+Vue.use(preview)
+
 Vue.config.productionTip = false
 Vue.component('v-chart', ECharts)
 Vue.component('xm-icon', XMIcon)

src/views/carManagement/management.vue

@@ -29,10 +29,7 @@
               prop="carImage"
               label="车辆图片">
               <template slot-scope="scope">
-              <el-image
-                  style="width: 100px; height: 100px"
-                  :src="scope.row.carImage"
-                  fit="fill"></el-image>
+              <el-image :src="scope.row.carImage" preview  style="width: 96px;" ></el-image>
               </template>
       </el-table-column>
           <el-table-column
@@ -154,6 +151,7 @@ export default {
     },
     getPage() {
       this.getManagement(this.formInline);
+      this.$previewRefresh()
     },
     handleSizeChange(val) {
       // console.log(`每页 ${val} 条`)

src/views/cart/list.vue

@@ -40,10 +40,7 @@
               align='center'
               label="驾驶员照片">
         <template slot-scope="scope">
-          <el-image
-                  style="width: 100px; height: 100px"
-                  :src="scope.row.driverImage"
-                  fit="fill"></el-image>
+          <el-image style="width: 96px;" :src="scope.row.driverImage" preview fit="fill"></el-image>
         </template>
       </el-table-column>
       <!-- <el-table-column

src/views/followup/list.vue

@@ -52,6 +52,7 @@
       label="头像">
       <template slot-scope="scope">
         <el-image
+          preview
           style="width: 100px; height: 100px"
           :src="scope.row.avatar"
           fit="fill">
@@ -241,6 +242,7 @@ export default {
     },
     getPage() {
       this.getFollowup(this.formInline)
+      this.$previewRefresh()
       // window.console.log(this.$store)
       // this.$store.commit('security/foo')
       // this.$store.dispatch('security/getSecurity')

src/views/goodsManager/GoodsType.vue

@@ -160,6 +160,7 @@ export default {
         }
 
         this.$message('操作成功')
+        this.getList()
       }).catch((err) => {
         this.$message.error(err.message || err)
       })

src/views/goodsManager/goodManager/index.vue

@@ -29,7 +29,7 @@
         <el-table-column prop="goodsName" label="商品名称"></el-table-column>
         <el-table-column label="图片" width="300">
           <template slot-scope="scope">
-            <img :src="scope.row.imgUrl" style="width: 96px;" />
+            <img :src="scope.row.imgUrl" preview style="width: 96px;" />
           </template>
         </el-table-column>
         <el-table-column label="类型">

src/views/lobby/list.vue

@@ -46,7 +46,7 @@
     </el-table-column>
     <el-table-column label="头像" width="150" >
            <template slot-scope="scope">
-              <img :src="scope.row.carImage" width="150" class="head_pic"/>
+              <img :src="scope.row.carImage" preview width="150" class="head_pic"/>
           </template>
     </el-table-column>
     <el-table-column

src/views/person/list.vue

@@ -52,7 +52,7 @@
           label="照片">
           <template slot-scope="scope">
             <div class="avatar">
-              <img :src="scope.row.avatar" alt="" />
+              <img :src="scope.row.avatar" preview alt="" />
             </div>
           </template>
         </el-table-column>

src/views/security/list.vue

@@ -69,7 +69,7 @@
               prop="carImage"
               label="车辆图片">
               <template slot-scope="scope">
-              <el-image
+              <el-image preview
                   style="width: 100px; height: 100px"
                   :src="scope.row.carImage"
                   fit="fill"></el-image>
@@ -129,6 +129,7 @@ export default {
     },
     getPage() {
       this.getSecurity(this.formInline)
+      this.$previewRefresh()
       // window.console.log(this.$store)
       // this.$store.commit('security/foo')
       // this.$store.dispatch('security/getSecurity')