|
@@ -87,6 +87,7 @@
|
|
|
保存修改
|
|
保存修改
|
|
|
</el-button>
|
|
</el-button>
|
|
|
<el-button @click="handleReset">重置</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
|
|
|
+ <el-button @click="handleBack">取消</el-button>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
</div>
|
|
</div>
|
|
@@ -96,8 +97,8 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import { UserFilled, Camera } from '@element-plus/icons-vue'
|
|
import { UserFilled, Camera } from '@element-plus/icons-vue'
|
|
|
import { useUserStore } from '@/store/user'
|
|
import { useUserStore } from '@/store/user'
|
|
|
import { updateProfile, uploadImage, getUserInfoApi } from '@/api/auth'
|
|
import { updateProfile, uploadImage, getUserInfoApi } from '@/api/auth'
|
|
@@ -106,11 +107,13 @@ import { updateProfile, uploadImage, getUserInfoApi } from '@/api/auth'
|
|
|
const defaultAvatar = '/default-avatar.png'
|
|
const defaultAvatar = '/default-avatar.png'
|
|
|
|
|
|
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
|
|
|
+const route = useRoute()
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
const formRef = ref()
|
|
const formRef = ref()
|
|
|
const fileInput = ref()
|
|
const fileInput = ref()
|
|
|
const submitLoading = ref(false)
|
|
const submitLoading = ref(false)
|
|
|
const avatarUrl = ref('')
|
|
const avatarUrl = ref('')
|
|
|
|
|
+const savedFormSnapshot = ref('')
|
|
|
|
|
|
|
|
const formData = reactive({
|
|
const formData = reactive({
|
|
|
nickname: '',
|
|
nickname: '',
|
|
@@ -121,6 +124,48 @@ const formData = reactive({
|
|
|
confirmPassword: ''
|
|
confirmPassword: ''
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+function createFormSnapshot() {
|
|
|
|
|
+ return JSON.stringify({
|
|
|
|
|
+ nickname: formData.nickname || '',
|
|
|
|
|
+ phone: formData.phone || '',
|
|
|
|
|
+ address: formData.address || '',
|
|
|
|
|
+ oldPassword: formData.oldPassword || '',
|
|
|
|
|
+ password: formData.password || '',
|
|
|
|
|
+ confirmPassword: formData.confirmPassword || ''
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function markFormClean() {
|
|
|
|
|
+ savedFormSnapshot.value = createFormSnapshot()
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function hasUnsavedChanges() {
|
|
|
|
|
+ return !!savedFormSnapshot.value && createFormSnapshot() !== savedFormSnapshot.value
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function handleBack() {
|
|
|
|
|
+ if (hasUnsavedChanges()) {
|
|
|
|
|
+ await ElMessageBox.confirm(
|
|
|
|
|
+ '当前个人信息有未保存的修改,返回后这些修改将不会保留,确认返回吗?',
|
|
|
|
|
+ '未保存提示',
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ confirmButtonText: '确认返回',
|
|
|
|
|
+ cancelButtonText: '继续编辑'
|
|
|
|
|
+ }
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const from = typeof route.query.from === 'string' ? route.query.from : ''
|
|
|
|
|
+ if (from && from !== route.path && from !== route.fullPath && from.startsWith('/')) {
|
|
|
|
|
+ router.push(from)
|
|
|
|
|
+ } else if (window.history.state?.back) {
|
|
|
|
|
+ router.back()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ router.push('/')
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 表单验证规则
|
|
// 表单验证规则
|
|
|
const formRules = {
|
|
const formRules = {
|
|
|
phone: [
|
|
phone: [
|
|
@@ -184,6 +229,11 @@ async function loadUserInfo() {
|
|
|
formData.nickname = info.nickname || ''
|
|
formData.nickname = info.nickname || ''
|
|
|
formData.phone = info.phone || ''
|
|
formData.phone = info.phone || ''
|
|
|
formData.address = info.address || ''
|
|
formData.address = info.address || ''
|
|
|
|
|
+ formData.oldPassword = ''
|
|
|
|
|
+ formData.password = ''
|
|
|
|
|
+ formData.confirmPassword = ''
|
|
|
|
|
+ markFormClean()
|
|
|
|
|
+ formRef.value?.clearValidate()
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
// ignore
|
|
// ignore
|
|
|
}
|
|
}
|
|
@@ -244,6 +294,10 @@ async function handleSubmit() {
|
|
|
await updateProfile(payload)
|
|
await updateProfile(payload)
|
|
|
// 如果修改了密码,提示后退出登录重新登录
|
|
// 如果修改了密码,提示后退出登录重新登录
|
|
|
if (formData.password) {
|
|
if (formData.password) {
|
|
|
|
|
+ formData.oldPassword = ''
|
|
|
|
|
+ formData.password = ''
|
|
|
|
|
+ formData.confirmPassword = ''
|
|
|
|
|
+ markFormClean()
|
|
|
ElMessage.success('密码修改成功,请重新登录')
|
|
ElMessage.success('密码修改成功,请重新登录')
|
|
|
setTimeout(async () => {
|
|
setTimeout(async () => {
|
|
|
await userStore.logout()
|
|
await userStore.logout()
|
|
@@ -258,6 +312,7 @@ async function handleSubmit() {
|
|
|
formData.oldPassword = ''
|
|
formData.oldPassword = ''
|
|
|
formData.password = ''
|
|
formData.password = ''
|
|
|
formData.confirmPassword = ''
|
|
formData.confirmPassword = ''
|
|
|
|
|
+ markFormClean()
|
|
|
} finally {
|
|
} finally {
|
|
|
submitLoading.value = false
|
|
submitLoading.value = false
|
|
|
}
|
|
}
|
|
@@ -266,10 +321,6 @@ async function handleSubmit() {
|
|
|
// 重置表单
|
|
// 重置表单
|
|
|
function handleReset() {
|
|
function handleReset() {
|
|
|
loadUserInfo()
|
|
loadUserInfo()
|
|
|
- formData.oldPassword = ''
|
|
|
|
|
- formData.password = ''
|
|
|
|
|
- formData.confirmPassword = ''
|
|
|
|
|
- formRef.value?.clearValidate()
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|