From 2e17964a852572f1b3a727c509cd13b7620c8972 Mon Sep 17 00:00:00 2001
From: dute7liang <383200134@qq.com>
Date: Tue, 2 Jan 2024 02:25:50 +0800
Subject: [PATCH] init

---
 src/components/ImageAvatar/index.vue    | 91 +++++++++++++++++++++++++
 src/main.js                             |  2 +
 src/views/cai/account/index.vue         |  2 +-
 src/views/cai/anchor/index.vue          |  2 +-
 src/views/cai/anchorApply/index.vue     |  2 +-
 src/views/cai/dynamic/index.vue         |  2 +-
 src/views/cai/lowHeightRisk/index.vue   |  2 +-
 src/views/cai/user/index.vue            |  2 +-
 src/views/cai/userCameraAudit/index.vue |  2 +-
 src/views/cai/userCount/index.vue       |  2 +-
 src/views/cai/userMember/index.vue      |  2 +-
 11 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ImageAvatar/index.vue

diff --git a/src/components/ImageAvatar/index.vue b/src/components/ImageAvatar/index.vue
new file mode 100644
index 0000000..c9d98d8
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 563af70..1aafcaf 100644
--- a/src/main.js
+++ b/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)
 
diff --git a/src/views/cai/account/index.vue b/src/views/cai/account/index.vue
index 9183a49..ded6cef 100644
--- a/src/views/cai/account/index.vue
+++ b/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">
diff --git a/src/views/cai/anchor/index.vue b/src/views/cai/anchor/index.vue
index ecdb858..1ceb6ac 100644
--- a/src/views/cai/anchor/index.vue
+++ b/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">
diff --git a/src/views/cai/anchorApply/index.vue b/src/views/cai/anchorApply/index.vue
index 9a175d6..9a1fb8b 100644
--- a/src/views/cai/anchorApply/index.vue
+++ b/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">
diff --git a/src/views/cai/dynamic/index.vue b/src/views/cai/dynamic/index.vue
index 1820aa1..9e05ecf 100644
--- a/src/views/cai/dynamic/index.vue
+++ b/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">
diff --git a/src/views/cai/lowHeightRisk/index.vue b/src/views/cai/lowHeightRisk/index.vue
index 88a0e16..cdb5ade 100644
--- a/src/views/cai/lowHeightRisk/index.vue
+++ b/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">
diff --git a/src/views/cai/user/index.vue b/src/views/cai/user/index.vue
index 2fe4f67..d8f4001 100644
--- a/src/views/cai/user/index.vue
+++ b/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">
diff --git a/src/views/cai/userCameraAudit/index.vue b/src/views/cai/userCameraAudit/index.vue
index 2a65fc5..077cad6 100644
--- a/src/views/cai/userCameraAudit/index.vue
+++ b/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">
diff --git a/src/views/cai/userCount/index.vue b/src/views/cai/userCount/index.vue
index f1f80c9..4eeffed 100644
--- a/src/views/cai/userCount/index.vue
+++ b/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">
diff --git a/src/views/cai/userMember/index.vue b/src/views/cai/userMember/index.vue
index 95c6765..1186883 100644
--- a/src/views/cai/userMember/index.vue
+++ b/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">