feat[litemall-admin]: 图片支持缩略图和点击放大

litemall-admin/src/utils/index.js

@@ -35,6 +35,17 @@ export function parseTime(time, cFormat) {
   return time_str
 }
 
+// NOTE: 这里的缩略图只用于阿里云存储。
+// 开发者可以参考其他云存储的缩略图参数。
+export function thumbnail(src) {
+  return src + '?x-oss-process=image/resize,m_lfit,h_250,w_250'
+}
+
+export function toPreview(item, url) {
+  item.preview = [url]
+  return item.preview
+}
+
 export function formatTime(time, option) {
   time = +time * 1000
   const d = new Date(time)

litemall-admin/src/views/goods/list.vue

@@ -49,7 +49,7 @@
 
       <el-table-column align="center" property="iconUrl" label="图片">
         <template slot-scope="scope">
-          <img :src="scope.row.picUrl" width="40">
+          <el-image :src="thumbnail(scope.row.picUrl)" :preview-src-list="toPreview(scope.row, scope.row.picUrl)" style="width: 40px; height: 40px" />
         </template>
       </el-table-column>
 
@@ -132,12 +132,15 @@
 import { listGoods, deleteGoods } from '@/api/goods'
 import BackToTop from '@/components/BackToTop'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { thumbnail, toPreview } from '@/utils/index'
 
 export default {
   name: 'GoodsList',
   components: { BackToTop, Pagination },
   data() {
     return {
+      thumbnail,
+      toPreview,
       list: [],
       total: 0,
       listLoading: true,

litemall-admin/src/views/mall/brand.vue

@@ -19,7 +19,7 @@
 
       <el-table-column align="center" property="picUrl" label="品牌商图片">
         <template slot-scope="scope">
-          <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="80">
+          <el-image :src="thumbnail(scope.row.picUrl)" :preview-src-list="toPreview(scope.row, scope.row.picUrl)" style="width: 40px; height: 40px" />
         </template>
       </el-table-column>
 
@@ -104,12 +104,15 @@ import { listBrand, createBrand, updateBrand, deleteBrand } from '@/api/brand'
 import { uploadPath } from '@/api/storage'
 import { getToken } from '@/utils/auth'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { thumbnail, toPreview } from '@/utils/index'
 
 export default {
   name: 'Brand',
   components: { Pagination },
   data() {
     return {
+      thumbnail,
+      toPreview,
       uploadPath,
       list: [],
       total: 0,

litemall-admin/src/views/promotion/topic.vue

@@ -27,7 +27,7 @@
 
       <el-table-column align="center" property="picUrl" label="图片">
         <template slot-scope="scope">
-          <img :src="scope.row.picUrl" width="80">
+          <el-image :src="thumbnail(scope.row.picUrl)" :preview-src-list="toPreview(scope.row, scope.row.picUrl)" style="width: 40px; height: 40px" />
         </template>
       </el-table-column>
 
@@ -95,12 +95,15 @@ import { listTopic, deleteTopic, batchDeleteTopic } from '@/api/topic'
 import BackToTop from '@/components/BackToTop'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 import _ from 'lodash'
+import { thumbnail, toPreview } from '@/utils/index'
 
 export default {
   name: 'Topic',
   components: { BackToTop, Pagination },
   data() {
     return {
+      thumbnail,
+      toPreview,
       list: [],
       total: 0,
       listLoading: true,