编辑头像修改
This commit is contained in:
qiuyuan
parent
11e2900c47
commit
d65a23d727
@ -6,7 +6,7 @@
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-wrapper">
|
||||
<image class="avatar" :src="userInfo.avatarUrl || '/static/imgs/index/nav.png'"
|
||||
mode="aspectFill"></image>
|
||||
mode="aspectFill" @click="onAvatarClick"></image>
|
||||
<view class="edit-icon" @click="handleEditClick">
|
||||
<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
|
||||
</view>
|
||||
@ -23,7 +23,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<view class="function-card">
|
||||
<view class="button-item" v-for="(item, index) in choseList" :key="index" @click="goPage(item)">
|
||||
@ -34,7 +33,6 @@
|
||||
<u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改用户信息弹窗 -->
|
||||
<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
|
||||
:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
|
||||
@ -55,25 +53,33 @@
|
||||
</button>
|
||||
<view class="auth-tip">登录即表示同意《用户协议》和《隐私政策》</view>
|
||||
</view>
|
||||
|
||||
<!-- 已登录时显示编辑表单 -->
|
||||
<view v-else class="edit-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像：</text>
|
||||
<u-upload :file-list="avatarList" :max-count="1" @afterRead="handleAvatarUpload"
|
||||
@delete="handleAvatarDelete" width="160" height="160" preview-full-image>
|
||||
<view slot="delete" class="custom-delete">
|
||||
<u-icon name="close" color="#fff" size="24"></u-icon>
|
||||
<view class="avatar-upload-container" @click="onAvatarClick">
|
||||
<view class="avatar-preview">
|
||||
<image
|
||||
v-if="avatarList.length > 0"
|
||||
:src="avatarList[0].url"
|
||||
mode="aspectFill"
|
||||
class="avatar-img">
|
||||
</image>
|
||||
<view v-else class="avatar-placeholder">
|
||||
<u-icon name="plus" color="#c0c4cc" size="28"></u-icon>
|
||||
<text class="placeholder-text">点击上传</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
<view class="upload-tip">点击上传，建议尺寸1:1</view>
|
||||
<view v-if="avatarList.length > 0" class="avatar-delete" @click.stop="handleAvatarDelete">
|
||||
<u-icon name="close" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tip">点击上传，支持拍照或从相册选择</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名：</text>
|
||||
<u-input v-model="formData.name" placeholder="请输入姓名" border="bottom" clearable></u-input>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">简介：</text>
|
||||
<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"
|
||||
@ -84,7 +90,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<u-modal
|
||||
:show="showPhoneDialog"
|
||||
title="联系社区"
|
||||
@ -98,7 +103,6 @@
|
||||
<text class="phone-number">{{communityPhone}}</text>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<Footer></Footer>
|
||||
</view>
|
||||
</template>
|
||||
@ -113,7 +117,6 @@
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer
|
||||
@ -179,6 +182,44 @@
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
// 新增：点击头像触发上传
|
||||
onAvatarClick() {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在上传，则不处理
|
||||
if (this.uploading) return;
|
||||
|
||||
// 调用选择图片方法
|
||||
uni.chooseImage({
|
||||
count: 1, // 只选一张
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: (res) => {
|
||||
// 选择成功后，获取临时文件路径
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
if (tempFilePaths && tempFilePaths.length > 0) {
|
||||
// 构造一个类似file对象的结构，用于handleAvatarUpload
|
||||
const file = {
|
||||
url: tempFilePaths[0]
|
||||
};
|
||||
// 调用上传方法
|
||||
this.handleAvatarUpload({ file });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败', err);
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 其他方法保持不变...
|
||||
handleCloseModal() {
|
||||
this.showPhoneDialog = false;
|
||||
},
|
||||
@ -203,34 +244,28 @@
|
||||
this.clearUserData();
|
||||
}
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
updateUserInfo(data) {
|
||||
// 显示时拼接IMAGE_BASE_URL
|
||||
const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
|
||||
|
||||
this.userInfo = {
|
||||
nickName: data.name || data.nickName || '未命名用户',
|
||||
avatarUrl: avatarUrl,
|
||||
bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
|
||||
phone: data.phone || ''
|
||||
};
|
||||
|
||||
// 更新显示头像
|
||||
this.displayAvatar = this.userInfo.avatarUrl;
|
||||
|
||||
this.formData = {
|
||||
name: this.userInfo.nickName,
|
||||
bio: this.userInfo.bio
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
// 清除用户数据
|
||||
clearUserData() {
|
||||
this.isLogin = false;
|
||||
@ -247,20 +282,17 @@
|
||||
uni.removeStorageSync('token');
|
||||
uni.removeStorageSync('userInfo');
|
||||
},
|
||||
|
||||
// 处理编辑点击
|
||||
handleEditClick() {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 已登录时填充表单数据
|
||||
this.formData = {
|
||||
name: this.userInfo.nickName,
|
||||
bio: this.userInfo.bio
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
@ -268,10 +300,8 @@
|
||||
} else {
|
||||
this.avatarList = [];
|
||||
}
|
||||
|
||||
this.showEditModal = true;
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
onGetUserInfo(e) {
|
||||
if (e.detail.userInfo) {
|
||||
@ -286,13 +316,12 @@
|
||||
this.showEditModal = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 微信登录获取code
|
||||
wxLogin() {
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
this.showEditModal = false;
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (loginRes) => {
|
||||
@ -308,17 +337,14 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 发送登录请求
|
||||
async sendLoginRequest(code) {
|
||||
try {
|
||||
const res = await post('/api/v1/apps/login/weixins', {
|
||||
code: code
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
uni.setStorageSync('token', res.data.access_token);
|
||||
|
||||
if (!res.data.phone) {
|
||||
this.showPhoneButton = true;
|
||||
uni.showToast({
|
||||
@ -340,7 +366,6 @@
|
||||
console.error('登录接口错误:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
async getPhoneNumber(e) {
|
||||
if (e.detail.errMsg !== "getPhoneNumber:ok") {
|
||||
@ -350,16 +375,13 @@
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '获取手机号中...'
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await post('/api/v1/app_auth/weixin/bind_phone', {
|
||||
code: e.detail.code
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
await this.loginComplete(res.data);
|
||||
} else {
|
||||
@ -374,7 +396,6 @@
|
||||
console.error('绑定手机号失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 登录完成处理
|
||||
async loginComplete(data) {
|
||||
try {
|
||||
@ -385,7 +406,6 @@
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
this.updateUserInfo(res.data);
|
||||
this.isLogin = true;
|
||||
// this.showEditModal = false;
|
||||
this.showPhoneButton = false;
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
@ -401,21 +421,17 @@
|
||||
console.error('登录完成处理失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
async handleAvatarUpload(event) {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
file
|
||||
} = event;
|
||||
if (!file || !file.url) return;
|
||||
|
||||
this.uploading = true;
|
||||
|
||||
try {
|
||||
// 检查文件大小
|
||||
const fileInfo = await new Promise((resolve, reject) => {
|
||||
@ -425,17 +441,13 @@
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
|
||||
if (fileInfo.size > 3 * 1024 * 1024) {
|
||||
throw new Error('图片大小不能超过2MB');
|
||||
throw new Error('图片大小不能超过3MB');
|
||||
}
|
||||
|
||||
// 上传到服务器
|
||||
const avatarUrl = await this.uploadAvatar(file.url);
|
||||
|
||||
// 更新用户信息
|
||||
await this.updateUserAvatar(avatarUrl);
|
||||
|
||||
uni.showToast({
|
||||
title: '头像上传成功'
|
||||
});
|
||||
@ -449,7 +461,6 @@
|
||||
this.uploading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 上传头像到服务器
|
||||
uploadAvatar(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -478,7 +489,6 @@
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 上传头像到服务器
|
||||
async updateUserAvatar(avatarUrl) {
|
||||
try {
|
||||
@ -488,7 +498,6 @@
|
||||
introduce: this.formData.bio,
|
||||
name: this.formData.name
|
||||
});
|
||||
|
||||
// 2. 获取最新用户信息
|
||||
const res = await get('/api/v1/app_auth/mine');
|
||||
if (res && res.success) {
|
||||
@ -503,29 +512,38 @@
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// 删除头像
|
||||
// 删除头像 - 新增确认提示
|
||||
handleAvatarDelete() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除当前头像吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.avatarList = [];
|
||||
this.displayAvatar = '/static/imgs/index/nav.png';
|
||||
this.userInfo.avatarUrl = '';
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
async handleSubmit() {
|
||||
if (!this.isLogin) return;
|
||||
|
||||
const {
|
||||
name,
|
||||
bio
|
||||
} = this.formData;
|
||||
console.log("====", this.avatarList)
|
||||
let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||
|
||||
let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||
if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
|
||||
avatarUrl = avatarUrl.replace(IMAGE_BASE_URL, '');
|
||||
}
|
||||
|
||||
if (!name) {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
@ -533,11 +551,9 @@
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
});
|
||||
|
||||
try {
|
||||
// 1. 提交修改请求
|
||||
await post('/api/v1/app_auth/bind', {
|
||||
@ -545,7 +561,6 @@
|
||||
introduce: bio,
|
||||
name: name
|
||||
});
|
||||
|
||||
// 2. 获取最新用户信息
|
||||
const res = await get('/api/v1/app_auth/mine');
|
||||
if (res && res.success) {
|
||||
@ -553,12 +568,10 @@
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
this.updateUserInfo(res.data);
|
||||
this.showEditModal = false;
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '修改成功'
|
||||
});
|
||||
|
||||
} else {
|
||||
throw new Error(res.message || '获取用户信息失败');
|
||||
}
|
||||
@ -571,38 +584,30 @@
|
||||
console.error('修改失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 取消修改
|
||||
handleCancel() {
|
||||
this.showEditModal = false;
|
||||
},
|
||||
|
||||
// 跳转页面
|
||||
// 跳转页面
|
||||
goPage(item) {
|
||||
if (item.key === 6) { // 联系社区的特殊处理
|
||||
this.handleContactCommunity();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.key === 5) { // 设置的特殊处理
|
||||
this.handleEditClick(); // 调用编辑用户信息的方法
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.checkLogin()) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.pageUrl) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/${item.pageUrl}/index`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理联系社区点击
|
||||
handleContactCommunity() {
|
||||
if (!this.checkLogin()) {
|
||||
@ -622,7 +627,6 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 拨打社区电话
|
||||
callCommunityPhone() {
|
||||
uni.makePhoneCall({
|
||||
@ -640,7 +644,6 @@
|
||||
});
|
||||
this.showPhoneDialog = false;
|
||||
},
|
||||
|
||||
// 检查登录状态
|
||||
checkLogin() {
|
||||
const token = uni.getStorageSync('token');
|
||||
@ -665,29 +668,24 @@
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -695,7 +693,6 @@
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -709,7 +706,6 @@
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.u-loading-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -725,79 +721,66 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-section {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.description-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.function-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.button-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f2f3f5;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
@ -805,21 +788,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0 30rpx;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 编辑表单区域 */
|
||||
.edit-section {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
@ -827,14 +806,12 @@
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
@ -842,31 +819,13 @@
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义删除按钮样式 */
|
||||
.custom-delete {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f56c6c;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 授权登录区域 */
|
||||
.auth-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
|
||||
.auth-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
@ -874,7 +833,6 @@
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
@ -889,20 +847,16 @@
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.phone-button {
|
||||
background: #2979ff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.wechat-icon,
|
||||
.phone-icon {
|
||||
width: 40rpx;
|
||||
@ -910,7 +864,6 @@
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
@ -918,12 +871,10 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-dialog-content {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
|
||||
.phone-number {
|
||||
font-weight: bold;
|
||||
color: #2979ff;
|
||||
@ -931,4 +882,61 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头像上传容器
|
||||
.avatar-upload-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 头像预览区域
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c0c4cc;
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-delete {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #f56c6c;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user