admin/jurong_circle_backstage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持更改信息的图片点击放大

Browse Source
This commit is contained in:
dzl
2025-09-18 11:10:07 +08:00
parent b64c609dbf
commit 70ae918512
1 changed files with 89 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/views/Users.vue
View File

@@ -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 {