From 70ae9185120a22ddc8748176302d72412a58e02d Mon Sep 17 00:00:00 2001
From: dzl <786316265@qq.com>
Date: Thu, 18 Sep 2025 11:10:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9B=B4=E6=94=B9=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=9A=84=E5=9B=BE=E7=89=87=E7=82=B9=E5=87=BB=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Users.vue | 133 +++++++++++++++++++++++++++++---------------
 1 file changed, 89 insertions(+), 44 deletions(-)

diff --git a/src/views/Users.vue b/src/views/Users.vue
index befb000..734290a 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -350,9 +350,16 @@
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                   >
-                    <img v-if="userForm.avatar" :src="getImageUrl(userForm.avatar)" class="avatar" />
-                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+                    <div class="avatar-card-uploader-placeholder">点击上传头像</div>
                   </el-upload>
+                  <el-image
+                    v-if="userForm.avatar"
+                    :src="getImageUrl(userForm.avatar)"
+                    class="avatar"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.avatar)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -388,12 +395,16 @@
                     :on-error="handleQrError"
                     :before-upload="beforeQrUpload"
                   >
-                    <img v-if="userForm.idCardFront" :src="getImageUrl(userForm.idCardFront)" class="id-card-image" />
-                    <div v-else class="id-card-uploader-placeholder">
-                      <el-icon class="id-card-uploader-icon"><Plus /></el-icon>
-                      <div>点击上传身份证正面照片</div>
-                    </div>
+                    <div class="id-card-uploader-placeholder">点击上传身份证正面照片</div>
                   </el-upload>
+                  <el-image
+                    v-if="userForm.idCardFront"
+                    :src="getImageUrl(userForm.idCardFront)"
+                    class="id-card-image"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.idCardFront)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -407,12 +418,16 @@
                     :on-error="handleQrError"
                     :before-upload="beforeQrUpload"
                   >
-                    <img v-if="userForm.idCardBack" :src="getImageUrl(userForm.idCardBack)" class="id-card-image" />
-                    <div v-else class="id-card-uploader-placeholder">
-                      <el-icon class="id-card-uploader-icon"><Plus /></el-icon>
-                      <div>点击上传身份证反面照片</div>
-                    </div>
-                  </el-upload>
+                    <div class="id-card-uploader-placeholder">点击上传身份证反面照片</div>
+                  </el-upload> 
+                  <el-image
+                    v-if="userForm.idCardBack"
+                    :src="getImageUrl(userForm.idCardBack)"
+                    class="id-card-image"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.idCardBack)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -427,12 +442,16 @@
                 :on-error="handleQrError"
                 :before-upload="beforeQrUpload"
               >
-                <img v-if="userForm.businessLicense" :src="getImageUrl(userForm.businessLicense)" class="license-image" />
-                <div v-else class="license-uploader-placeholder">
-                  <el-icon class="license-uploader-icon"><Plus /></el-icon>
-                  <div>点击上传营业执照照片</div>
-                </div>
+                <div class="license-uploader-placeholder">点击上传营业执照照片</div>
               </el-upload>
+              <el-image
+                v-if="userForm.businessLicense"
+                :src="getImageUrl(userForm.businessLicense)"
+                class="license-image"
+                fit="contain"
+                :preview-src-list="[getImageUrl(userForm.businessLicense)]"
+                preview-teleported
+              />
             </el-form-item>
           </el-tab-pane>
           
@@ -449,10 +468,16 @@
                     :on-error="handleQrError"
                     :before-upload="beforeQrUpload"
                   >
-                    <img v-if="userForm.wechatQr" :src="getImageUrl(userForm.wechatQr)" class="qr-image" />
-                    <el-icon v-else class="qr-uploader-icon"><Plus /></el-icon>
+                    <div class="id-card-uploader-placeholder">点击上传微信收款码图片</div>
                   </el-upload>
-                  <div class="qr-tip">点击上传微信收款码图片</div>
+                  <el-image
+                    v-if="userForm.wechatQr"
+                    :src="getImageUrl(userForm.wechatQr)"
+                    class="qr-image"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.wechatQr)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -466,10 +491,16 @@
                     :on-error="handleQrError"
                     :before-upload="beforeQrUpload"
                   >
-                    <img v-if="userForm.alipayQr" :src="getImageUrl(userForm.alipayQr)" class="qr-image" />
-                    <el-icon v-else class="qr-uploader-icon"><Plus /></el-icon>
+                    <div class="id-card-uploader-placeholder">点击上传支付宝收款码图片</div>
                   </el-upload>
-                  <div class="qr-tip">点击上传支付宝收款码图片</div>
+                  <el-image
+                    v-if="userForm.alipayQr"
+                    :src="getImageUrl(userForm.alipayQr)"
+                    class="qr-image"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.alipayQr)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -486,10 +517,16 @@
                     :on-error="handleQrError"
                     :before-upload="beforeQrUpload"
                   >
-                    <img v-if="userForm.unionpayQr" :src="getImageUrl(userForm.unionpayQr)" class="qr-image" />
-                    <el-icon v-else class="qr-uploader-icon"><Plus /></el-icon>
+                    <div class="id-card-uploader-placeholder">点击上传云闪付收款码图片</div>
                   </el-upload>
-                  <div class="qr-tip">点击上传云闪付收款码图片</div>
+                  <el-image
+                    v-if="userForm.unionpayQr"
+                    :src="getImageUrl(userForm.unionpayQr)"
+                    class="qr-image"
+                    fit="contain"
+                    :preview-src-list="[getImageUrl(userForm.unionpayQr)]"
+                    preview-teleported
+                  />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -1240,12 +1277,8 @@ onMounted(() => {
 }
 
 .avatar-uploader {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: border-color 0.3s;
+  margin-left: -35px;
+  margin-top: -65px;
 }
 
 .avatar-uploader:hover {
@@ -1269,13 +1302,22 @@ onMounted(() => {
   object-fit: cover;
 }
 
+.avatar-card-uploader-placeholder {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  width: 100%;
+  margin-left: 35px;
+  color: #70acff;
+}
+
 .qr-uploader {
-  border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: border-color 0.3s;
+  margin-left: -35px;
 }
 
 .qr-uploader:hover {
@@ -1297,6 +1339,7 @@ onMounted(() => {
   height: 120px;
   display: block;
   object-fit: cover;
+  margin-left: 15px;
 }
 
 .qr-tip {
@@ -1307,7 +1350,6 @@ onMounted(() => {
 }
 
 .id-card-uploader, .license-uploader {
-  border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
@@ -1319,19 +1361,22 @@ onMounted(() => {
   border-color: #409eff;
 }
 
-.id-card-uploader-placeholder, .license-uploader-placeholder {
+.id-card-uploader-placeholder {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 150px;
-  color: #8c939d;
+  height: 30px;
+  width: 100%;
+  margin-left: 35px;
+  color: #70acff;
 }
 
-.id-card-uploader-icon, .license-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  margin-bottom: 10px;
+.license-uploader-placeholder {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  width: 100%;
+  margin-left: 215px;
+  color: #70acff;
 }
 
 .id-card-image, .license-image {