init

src/components/ImageAvatar/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-image
+    :src="`${realSrc}`"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};border-radius: 49%;`"
+    :preview-src-list="realSrcList"
+  >
+    <div slot="error" class="image-slot">
+      <i class="el-icon-picture-outline"></i>
+    </div>
+  </el-image>
+</template>
+
+<script>
+
+import {isExternal} from "@/utils/validate";
+
+export default {
+  name: "ImagePreview",
+  props: {
+    src: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [Number, String],
+      default: "41px"
+    },
+    height: {
+      type: [Number, String],
+      default: "41px"
+    },
+  },
+  computed: {
+    realSrc() {
+      if (!this.src) {
+        return;
+      }
+      let real_src = this.src.split(",")[0];
+      if(isExternal(real_src)){
+        return real_src;
+      }
+      return process.env.VUE_APP_COS_BASE_URL + real_src;
+    },
+    realSrcList() {
+      if (!this.src) {
+        return;
+      }
+      let real_src_list = this.src.split(",");
+      let srcList = [];
+      real_src_list.forEach(item => {
+        if (isExternal(item)) {
+          return srcList.push(item);
+        }
+        return srcList.push(process.env.VUE_APP_COS_BASE_URL + item);
+      });
+      return srcList;
+    },
+    realWidth() {
+      return typeof this.width == "string" ? this.width : `${this.width}px`;
+    },
+    realHeight() {
+      return typeof this.height == "string" ? this.height : `${this.height}px`;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+  ::v-deep .el-image__inner {
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+  ::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>

src/main.js

@@ -32,6 +32,7 @@ import ImageUpload from "@/components/ImageUpload"
 import ImageUpload2 from "@/components/ImageUpload2"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
+import ImageAvatar from "@/components/ImageAvatar"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 import CaiDictTag from '@/components/CaiDictTag'
@@ -60,6 +61,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('ImageAvatar', ImageAvatar)
 Vue.component('ImageUpload2', ImageUpload2)
 Vue.component('CaiDictTag', CaiDictTag)
 

src/views/cai/account/index.vue

@@ -34,7 +34,7 @@
       <el-table-column label="昵称" align="center" prop="nickname"/>
       <el-table-column label="头像" align="center" prop="avatar">
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/anchor/index.vue

@@ -28,7 +28,7 @@
       <el-table-column label="手机" align="center" prop="mobile" width="120"/>
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/anchorApply/index.vue

@@ -18,7 +18,7 @@
       <el-table-column label="手机" align="center" prop="mobile" />
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/dynamic/index.vue

@@ -58,7 +58,7 @@
       <el-table-column label="昵称" align="center" prop="nickname"/>
       <el-table-column label="头像" align="center" prop="avatar">
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="审核状态" align="center" prop="auditStatus">

src/views/cai/lowHeightRisk/index.vue

@@ -18,7 +18,7 @@
       <el-table-column label="手机" align="center" prop="mobile" />
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/user/index.vue

@@ -72,7 +72,7 @@
       <el-table-column label="手机号" align="center" prop="mobile" width="120"/>
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/userCameraAudit/index.vue

@@ -58,7 +58,7 @@
       <el-table-column label="昵称" align="center" prop="nickname"/>
       <el-table-column label="头像" align="center" prop="avatar">
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="审核状态" align="center" prop="auditStatus">

src/views/cai/userCount/index.vue

@@ -34,7 +34,7 @@
       <el-table-column label="昵称" align="center" prop="nickname"/>
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">

src/views/cai/userMember/index.vue

@@ -28,7 +28,7 @@
       <el-table-column label="手机" align="center" prop="mobile" />
       <el-table-column label="头像" align="center" prop="avatar" >
         <template v-slot="scope">
-          <image-preview :src="scope.row.avatar" height="40px" width="40px"/>
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="gender">