1180 lines
30 KiB
Vue
1180 lines
30 KiB
Vue
<template>
|
|
<div class="profile-page">
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="nav-center">
|
|
<h1 class="nav-title">个人资料</h1>
|
|
</div>
|
|
<div class="nav-right">
|
|
<el-dropdown @command="handleCommand">
|
|
<span class="el-dropdown-link">
|
|
<el-icon><More /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="orders">我的订单</el-dropdown-item>
|
|
<el-dropdown-item command="points">积分记录</el-dropdown-item>
|
|
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 个人信息 -->
|
|
<div class="profile-content">
|
|
<div class="profile-header">
|
|
<div class="avatar-section">
|
|
<el-avatar
|
|
:size="80"
|
|
:src="userInfo?.avatar"
|
|
class="user-avatar"
|
|
>
|
|
<el-icon><User /></el-icon>
|
|
</el-avatar>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="showAvatarUpload = true"
|
|
class="upload-btn"
|
|
>
|
|
更换头像
|
|
</el-button>
|
|
</div>
|
|
<div class="user-info">
|
|
<h2 class="username">{{ userInfo?.username }}</h2>
|
|
<p class="user-email">{{ userInfo?.email }}</p>
|
|
|
|
<!-- 审核状态显示 -->
|
|
<div class="audit-status">
|
|
<el-tag
|
|
:type="getAuditStatusType(userInfo?.auditStatus)"
|
|
size="small"
|
|
class="audit-tag"
|
|
>
|
|
{{ getAuditStatusText(userInfo?.auditStatus) }}
|
|
</el-tag>
|
|
<span v-if="userInfo?.auditStatus === 'pending'" class="audit-tip">
|
|
审核通过后可参与匹配
|
|
</span>
|
|
</div>
|
|
|
|
<div class="user-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number">{{ formatNumber(userStats.currentPoints) }}</span>
|
|
<span class="stat-label">积分</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">{{ formatNumber(userStats.orderCount) }}</span>
|
|
<span class="stat-label">订单</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">{{ formatNumber(userStats.pointsSpent) }}</span>
|
|
<span class="stat-label">兑换</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人资料表单 -->
|
|
<div class="profile-form">
|
|
<el-form
|
|
ref="profileFormRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="80px"
|
|
>
|
|
<el-form-item label="用户名" prop="username">
|
|
<el-input v-model="form.username" placeholder="请输入用户名" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="昵称" prop="nickname">
|
|
<el-input v-model="form.nickname" placeholder="请输入昵称" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="真实姓名" prop="realName">
|
|
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="身份证号" prop="idCard">
|
|
<el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="微信收款码" prop="wechatQr">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeQrUpload"
|
|
:on-success="(response) => handleQrUploadSuccess(response, 'wechat')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.wechatQr" :src="formatImageUrl(form.wechatQr)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传微信收款码</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.wechatQr" type="danger" size="small" @click="removeQrCode('wechat')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="支付宝收款码" prop="alipayQr">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeQrUpload"
|
|
:on-success="(response) => handleQrUploadSuccess(response, 'alipay')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.alipayQr" :src="formatImageUrl(form.alipayQr)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传支付宝收款码</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.alipayQr" type="danger" size="small" @click="removeQrCode('alipay')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="银行卡号" prop="bankCard">
|
|
<el-input v-model="form.bankCard" placeholder="请输入银行卡号" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="云闪付收款码" prop="unionpayQr">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeQrUpload"
|
|
:on-success="(response) => handleQrUploadSuccess(response, 'unionpay')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.unionpayQr" :src="formatImageUrl(form.unionpayQr)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传云闪付收款码</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.unionpayQr" type="danger" size="small" @click="removeQrCode('unionpay')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="营业执照" prop="businessLicense">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeDocumentUpload"
|
|
:on-success="(response) => handleDocumentUploadSuccess(response, 'businessLicense')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.businessLicense" :src="formatImageUrl(form.businessLicense)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传营业执照</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.businessLicense" type="danger" size="small" @click="removeDocument('businessLicense')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="身份证正面" prop="idCardFront">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeDocumentUpload"
|
|
:on-success="(response) => handleDocumentUploadSuccess(response, 'idCardFront')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.idCardFront" :src="formatImageUrl(form.idCardFront)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传身份证正面</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.idCardFront" type="danger" size="small" @click="removeDocument('idCardFront')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="身份证反面" prop="idCardBack">
|
|
<div class="qr-upload-container">
|
|
<el-upload
|
|
class="qr-uploader"
|
|
:action="uploadUrl"
|
|
:headers="uploadHeaders"
|
|
:before-upload="beforeDocumentUpload"
|
|
:on-success="(response) => handleDocumentUploadSuccess(response, 'idCardBack')"
|
|
:on-error="handleQrUploadError"
|
|
:show-file-list="false"
|
|
accept="image/*"
|
|
>
|
|
<img v-if="form.idCardBack" :src="formatImageUrl(form.idCardBack)" class="qr-preview" />
|
|
<div v-else class="qr-upload-placeholder">
|
|
<el-icon class="qr-upload-icon"><Plus /></el-icon>
|
|
<div class="qr-upload-text">上传身份证反面</div>
|
|
</div>
|
|
</el-upload>
|
|
<el-button v-if="form.idCardBack" type="danger" size="small" @click="removeDocument('idCardBack')" class="remove-btn">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="form-actions">
|
|
<el-button @click="resetForm">重置</el-button>
|
|
<el-button type="primary" @click="saveProfile" :loading="saving">
|
|
保存资料
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 修改密码 -->
|
|
<div class="password-section">
|
|
<h3>修改密码</h3>
|
|
<el-form
|
|
ref="passwordFormRef"
|
|
:model="passwordForm"
|
|
:rules="passwordRules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="当前密码" prop="currentPassword">
|
|
<el-input
|
|
v-model="passwordForm.currentPassword"
|
|
type="password"
|
|
placeholder="请输入当前密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="新密码" prop="newPassword">
|
|
<el-input
|
|
v-model="passwordForm.newPassword"
|
|
type="password"
|
|
placeholder="请输入新密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
<el-input
|
|
v-model="passwordForm.confirmPassword"
|
|
type="password"
|
|
placeholder="请确认新密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="form-actions">
|
|
<el-button @click="resetPasswordForm">重置</el-button>
|
|
<el-button type="primary" @click="changePassword" :loading="changingPassword">
|
|
修改密码
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 头像上传对话框 -->
|
|
<el-dialog
|
|
v-model="showAvatarUpload"
|
|
title="更换头像"
|
|
width="400px"
|
|
>
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="#"
|
|
:show-file-list="false"
|
|
:before-upload="beforeAvatarUpload"
|
|
:http-request="uploadAvatar"
|
|
>
|
|
<img v-if="newAvatar" :src="newAvatar" class="avatar-preview" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="showAvatarUpload = false">取消</el-button>
|
|
<el-button type="primary" @click="confirmAvatarUpload" :disabled="!newAvatar">
|
|
确定
|
|
</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import {
|
|
ArrowLeft,
|
|
More,
|
|
User,
|
|
Plus
|
|
} from '@element-plus/icons-vue'
|
|
import api from '@/utils/api'
|
|
import { uploadURL, getImageUrl, getUploadConfig } from '@/config'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
// 响应式数据
|
|
const userInfo = ref({
|
|
id: '',
|
|
username: '',
|
|
nickname: '',
|
|
email: '',
|
|
phone: '',
|
|
realName: '',
|
|
idCard: '',
|
|
wechatQr: '',
|
|
alipayQr: '',
|
|
bankCard: '',
|
|
unionpayQr: '',
|
|
avatar: ''
|
|
})
|
|
|
|
const userStats = ref({
|
|
points: 0,
|
|
orders: 0,
|
|
exchanges: 0
|
|
})
|
|
|
|
const form = reactive({
|
|
username: '',
|
|
nickname: '',
|
|
email: '',
|
|
phone: '',
|
|
realName: '',
|
|
idCard: '',
|
|
wechatQr: '',
|
|
alipayQr: '',
|
|
bankCard: '',
|
|
unionpayQr: '',
|
|
businessLicense: '',
|
|
idCardFront: '',
|
|
idCardBack: ''
|
|
})
|
|
|
|
const passwordForm = reactive({
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
|
|
const saving = ref(false)
|
|
const changingPassword = ref(false)
|
|
const showAvatarUpload = ref(false)
|
|
const newAvatar = ref('')
|
|
const profileFormRef = ref()
|
|
const passwordFormRef = ref()
|
|
|
|
// 上传配置
|
|
const uploadUrl = ref(uploadURL)
|
|
const uploadHeaders = computed(() => getUploadConfig().headers)
|
|
|
|
// 表单验证规则
|
|
const rules = {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
|
|
],
|
|
email: [
|
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
|
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
|
],
|
|
realName: [
|
|
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
|
{ min: 2, max: 10, message: '真实姓名长度在 2 到 10 个字符', trigger: 'blur' }
|
|
],
|
|
idCard: [
|
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
|
{ pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
const passwordRules = {
|
|
currentPassword: [
|
|
{ required: true, message: '请输入当前密码', trigger: 'blur' }
|
|
],
|
|
newPassword: [
|
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
|
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value !== passwordForm.newPassword) {
|
|
callback(new Error('两次输入密码不一致'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
|
|
// 方法
|
|
const handleCommand = (command) => {
|
|
switch (command) {
|
|
case 'orders':
|
|
router.push('/orders')
|
|
break
|
|
case 'points':
|
|
router.push('/points-history')
|
|
break
|
|
case 'logout':
|
|
handleLogout()
|
|
break
|
|
}
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
|
|
userStore.logout()
|
|
router.push('/login')
|
|
ElMessage.success('已退出登录')
|
|
} catch {
|
|
// 用户取消
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取用户信息
|
|
*/
|
|
const getUserInfo = async () => {
|
|
try {
|
|
const response = await api.get('/users/profile')
|
|
console.log(response.data,'response.data.data');
|
|
|
|
userInfo.value = response.data.user
|
|
|
|
// 同步到表单
|
|
Object.keys(form).forEach(key => {
|
|
form[key] = userInfo.value[key] || ''
|
|
})
|
|
} catch (error) {
|
|
console.error('获取用户信息失败:', error)
|
|
ElMessage.error('获取用户信息失败')
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取用户统计信息
|
|
*/
|
|
const getUserStats = async () => {
|
|
try {
|
|
const response = await api.get('/users/stats')
|
|
userStats.value = response.data.stats
|
|
console.log(response.data.stats,'response.data');
|
|
|
|
} catch (error) {
|
|
console.error('获取用户统计失败:', error)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 保存个人资料
|
|
*/
|
|
const saveProfile = async () => {
|
|
try {
|
|
await profileFormRef.value.validate()
|
|
|
|
// 记录更新前的审核状态
|
|
const previousAuditStatus = userInfo.value.auditStatus
|
|
|
|
saving.value = true
|
|
const response = await api.put('/users/profile', form)
|
|
|
|
// 更新本地数据
|
|
if (response.data.success) {
|
|
Object.assign(userInfo.value, response.data.data)
|
|
// 同步更新表单数据
|
|
Object.keys(form).forEach(key => {
|
|
form[key] = userInfo.value[key] || ''
|
|
})
|
|
|
|
// 检查是否需要重新审核
|
|
if (previousAuditStatus === 'approved' && userInfo.value.auditStatus === 'pending') {
|
|
ElMessage({
|
|
message: '您更新了关键信息，需要重新审核后才能参与匹配。审核通过前您可以正常使用其他功能。',
|
|
type: 'warning',
|
|
duration: 5000
|
|
})
|
|
} else {
|
|
ElMessage.success(response.data.message || '保存成功')
|
|
}
|
|
} else {
|
|
ElMessage.error(response.data.message || '保存失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('保存个人资料失败:', error)
|
|
if (error.response) {
|
|
ElMessage.error(error.response.data.message || '保存失败')
|
|
} else {
|
|
ElMessage.error('保存失败')
|
|
}
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
const resetForm = () => {
|
|
Object.keys(form).forEach(key => {
|
|
form[key] = userInfo.value[key] || ''
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 修改密码
|
|
*/
|
|
const changePassword = async () => {
|
|
try {
|
|
await passwordFormRef.value.validate()
|
|
|
|
changingPassword.value = true
|
|
const response = await api.put('/auth/change-password', {
|
|
currentPassword: passwordForm.currentPassword,
|
|
newPassword: passwordForm.newPassword
|
|
})
|
|
|
|
if (response.data.success) {
|
|
ElMessage.success(response.data.message || '密码修改成功')
|
|
resetPasswordForm()
|
|
} else {
|
|
ElMessage.error(response.data.message || '密码修改失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('密码修改失败:', error)
|
|
if (error.response) {
|
|
ElMessage.error(error.response.data.message || '密码修改失败')
|
|
} else {
|
|
ElMessage.error('密码修改失败')
|
|
}
|
|
} finally {
|
|
changingPassword.value = false
|
|
}
|
|
}
|
|
|
|
const resetPasswordForm = () => {
|
|
passwordForm.currentPassword = ''
|
|
passwordForm.newPassword = ''
|
|
passwordForm.confirmPassword = ''
|
|
passwordFormRef.value?.clearValidate()
|
|
}
|
|
|
|
const beforeAvatarUpload = (file) => {
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
if (!isJPG) {
|
|
ElMessage.error('头像只能是 JPG/PNG 格式!')
|
|
}
|
|
if (!isLt2M) {
|
|
ElMessage.error('头像大小不能超过 2MB!')
|
|
}
|
|
return isJPG && isLt2M
|
|
}
|
|
|
|
const uploadAvatar = async (options) => {
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', options.file)
|
|
|
|
const response = await api.post('/upload', formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
'Authorization': `Bearer ${userStore.token}`
|
|
}
|
|
})
|
|
|
|
if (response.data.success) {
|
|
newAvatar.value = response.data.url
|
|
ElMessage.success('头像上传成功')
|
|
} else {
|
|
ElMessage.error(response.data.message || '头像上传失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('头像上传失败:', error)
|
|
ElMessage.error('头像上传失败')
|
|
}
|
|
}
|
|
|
|
const confirmAvatarUpload = async () => {
|
|
try {
|
|
if (!newAvatar.value) {
|
|
ElMessage.error('请先选择头像')
|
|
return
|
|
}
|
|
|
|
const response = await api.put('/users/profile', {
|
|
avatar: newAvatar.value
|
|
})
|
|
|
|
if (response.data.success) {
|
|
userInfo.value.avatar = newAvatar.value
|
|
form.avatar = newAvatar.value
|
|
showAvatarUpload.value = false
|
|
newAvatar.value = ''
|
|
ElMessage.success('头像更新成功')
|
|
} else {
|
|
ElMessage.error(response.data.message || '头像更新失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('头像更新失败:', error)
|
|
if (error.response) {
|
|
ElMessage.error(error.response.data.message || '头像更新失败')
|
|
} else {
|
|
ElMessage.error('头像更新失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 二维码上传前的验证
|
|
* @param {File} file - 上传的文件
|
|
* @returns {boolean} 是否通过验证
|
|
*/
|
|
const beforeQrUpload = (file) => {
|
|
const isImage = file.type.startsWith('image/')
|
|
const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
|
if (!isImage) {
|
|
ElMessage.error('只能上传图片文件!')
|
|
return false
|
|
}
|
|
if (!isLt5M) {
|
|
ElMessage.error('图片大小不能超过 5MB!')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* 处理二维码上传成功回调
|
|
* @param {Object} response - 上传接口返回的响应数据
|
|
* @param {string} type - 二维码类型 (wechat/alipay/unionpay)
|
|
*/
|
|
const handleQrUploadSuccess = (response, type) => {
|
|
if (response.success) {
|
|
// 更新对应的二维码字段
|
|
const fieldMap = {
|
|
wechat: 'wechatQr',
|
|
alipay: 'alipayQr',
|
|
unionpay: 'unionpayQr'
|
|
}
|
|
|
|
form[fieldMap[type]] = response.url
|
|
ElMessage.success('收款码上传成功')
|
|
} else {
|
|
ElMessage.error(response.message || '上传失败')
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 处理二维码上传错误
|
|
* @param {Object} error - 错误信息
|
|
*/
|
|
const handleQrUploadError = (error) => {
|
|
console.error('上传错误:', error)
|
|
ElMessage.error('上传失败，请重试')
|
|
}
|
|
|
|
/**
|
|
* 删除二维码
|
|
* @param {string} type - 二维码类型 (wechat/alipay/unionpay)
|
|
*/
|
|
const removeQrCode = (type) => {
|
|
const fieldMap = {
|
|
wechat: 'wechatQr',
|
|
alipay: 'alipayQr',
|
|
unionpay: 'unionpayQr'
|
|
}
|
|
|
|
form[fieldMap[type]] = ''
|
|
ElMessage.success('收款码已删除')
|
|
}
|
|
|
|
/**
|
|
* 证件上传前的验证
|
|
* @param {File} file - 上传的文件
|
|
* @returns {boolean} 是否通过验证
|
|
*/
|
|
const beforeDocumentUpload = (file) => {
|
|
const isImage = file.type.startsWith('image/')
|
|
const isLt10M = file.size / 1024 / 1024 < 10
|
|
|
|
if (!isImage) {
|
|
ElMessage.error('只能上传图片文件!')
|
|
return false
|
|
}
|
|
if (!isLt10M) {
|
|
ElMessage.error('图片大小不能超过 10MB!')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* 处理证件上传成功回调
|
|
* @param {Object} response - 上传接口返回的响应数据
|
|
* @param {string} type - 证件类型 (businessLicense/idCardFront/idCardBack)
|
|
*/
|
|
const handleDocumentUploadSuccess = (response, type) => {
|
|
if (response.success) {
|
|
form[type] = response.url
|
|
const typeNames = {
|
|
businessLicense: '营业执照',
|
|
idCardFront: '身份证正面',
|
|
idCardBack: '身份证反面'
|
|
}
|
|
ElMessage.success(`${typeNames[type]}上传成功`)
|
|
} else {
|
|
ElMessage.error(response.message || '上传失败')
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 删除证件
|
|
* @param {string} type - 证件类型 (businessLicense/idCardFront/idCardBack)
|
|
*/
|
|
const removeDocument = (type) => {
|
|
form[type] = ''
|
|
const typeNames = {
|
|
businessLicense: '营业执照',
|
|
idCardFront: '身份证正面',
|
|
idCardBack: '身份证反面'
|
|
}
|
|
ElMessage.success(`${typeNames[type]}已删除`)
|
|
}
|
|
|
|
/**
|
|
* 获取图片URL - 使用配置文件处理
|
|
* @param {string} url - 相对路径或完整URL
|
|
* @returns {string} 处理后的图片URL
|
|
*/
|
|
const formatImageUrl = (url) => {
|
|
return getImageUrl(url)
|
|
}
|
|
|
|
/**
|
|
* 格式化数字显示，确保数字安全
|
|
* @param {number|string|null|undefined} value - 数字值
|
|
* @returns {string|number} 格式化后的数字
|
|
*/
|
|
const formatNumber = (value) => {
|
|
const num = parseInt(value)
|
|
return isNaN(num) ? 0 : num
|
|
}
|
|
|
|
/**
|
|
* 获取审核状态对应的标签类型
|
|
* @param {string} status - 审核状态
|
|
* @returns {string} Element Plus 标签类型
|
|
*/
|
|
const getAuditStatusType = (status) => {
|
|
switch (status) {
|
|
case 'approved':
|
|
return 'success'
|
|
case 'pending':
|
|
return 'warning'
|
|
case 'rejected':
|
|
return 'danger'
|
|
default:
|
|
return 'info'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取审核状态对应的文本
|
|
* @param {string} status - 审核状态
|
|
* @returns {string} 状态文本
|
|
*/
|
|
const getAuditStatusText = (status) => {
|
|
switch (status) {
|
|
case 'approved':
|
|
return '审核通过'
|
|
case 'pending':
|
|
return '待审核'
|
|
case 'rejected':
|
|
return '审核拒绝'
|
|
default:
|
|
return '未知状态'
|
|
}
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
getUserInfo()
|
|
getUserStats()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-page {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
height: 56px;
|
|
background: white;
|
|
border-bottom: 1px solid #eee;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-left,
|
|
.nav-right {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.back-btn {
|
|
color: #409eff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.el-dropdown-link {
|
|
cursor: pointer;
|
|
color: #409eff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.profile-content {
|
|
padding: 20px 16px;
|
|
}
|
|
|
|
.profile-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
color: white;
|
|
}
|
|
|
|
.avatar-section {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.user-avatar {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.upload-btn {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.user-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.username {
|
|
margin: 0 0 5px 0;
|
|
font-size: 22px;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-email {
|
|
margin: 0 0 10px 0;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.audit-status {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.audit-tag {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.audit-tip {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.user-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
display: block;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.profile-form,
|
|
.password-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.password-section h3 {
|
|
margin: 0 0 20px 0;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.form-actions {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-actions .el-button {
|
|
min-width: 100px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.avatar-uploader {
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-uploader :deep(.el-upload) {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: 0.2s;
|
|
width: 178px;
|
|
height: 178px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-uploader :deep(.el-upload:hover) {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 178px;
|
|
height: 178px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 二维码上传样式 */
|
|
.qr-upload-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.qr-uploader {
|
|
width: 120px;
|
|
}
|
|
|
|
.qr-uploader :deep(.el-upload) {
|
|
border: 2px dashed #d9d9d9;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: 0.3s;
|
|
width: 120px;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.qr-uploader :deep(.el-upload:hover) {
|
|
border-color: #409eff;
|
|
background-color: #f0f9ff;
|
|
}
|
|
|
|
.qr-upload-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-upload-icon {
|
|
font-size: 24px;
|
|
color: #8c939d;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.qr-upload-text {
|
|
font-size: 12px;
|
|
color: #8c939d;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.qr-preview {
|
|
width: 120px;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.remove-btn {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.profile-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.profile-header,
|
|
.profile-form,
|
|
.password-section {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.user-stats {
|
|
gap: 15px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.username {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.qr-uploader {
|
|
width: 100px;
|
|
}
|
|
|
|
.qr-uploader :deep(.el-upload) {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.qr-preview {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-actions .el-button {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.el-form {
|
|
:deep(.el-form-item__label) {
|
|
width: 80px !important;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
</style> |