优化个人中心页面,使用 script setup 重写

This commit is contained in:
hooray 2021-11-22 06:40:01 +08:00
parent 93dd7a0704
commit 9049807407
6 changed files with 100 additions and 85 deletions

View File

@ -6,7 +6,7 @@ import { ElMessage } from 'element-plus'
const toLogin = () => {
router.push({
path: '/login',
name: 'login',
query: {
redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined
}

View File

@ -39,5 +39,16 @@ export default [
}
}
}
},
{
url: '/mock/member/edit/password',
method: 'post',
response: {
error: '',
status: 1,
data: {
isSuccess: true
}
}
}
]

View File

@ -32,6 +32,7 @@ const constantRoutes = [
component: () => import('@/views/personal/setting.vue'),
meta: {
title: '个人设置',
cache: 'personalEditPassword',
breadcrumbNeste: [
{ title: '个人设置', path: '/personal/setting' }
]

View File

@ -52,6 +52,19 @@ const actions = {
resolve(res.data.permissions)
})
})
},
editPassword({ state }, data) {
return new Promise(resolve => {
api.post('member/edit/password', {
account: state.account,
password: data.password,
newpassword: data.newpassword
}, {
baseURL: '/mock/'
}).then(() => {
resolve()
})
})
}
}

View File

@ -4,7 +4,7 @@
<page-main>
<el-row>
<el-col :md="24" :lg="12">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="原密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入原密码" />
</el-form-item>
@ -24,53 +24,57 @@
</div>
</template>
<script>
export default {
data() {
const validatePassword = (rule, value, callback) => {
if (value !== this.form.newpassword) {
callback(new Error('请确认新密码'))
} else {
callback()
}
}
return {
form: {
password: '',
newpassword: '',
checkpassword: ''
},
rules: {
password: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
newpassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
],
checkpassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ validator: validatePassword }
]
}
}
},
methods: {
onSubmit() {
this.$refs['form'].validate(valid => {
if (valid) {
this.$store.dispatch('user/editPassword', this.form).then(() => {
this.$message({
type: 'success',
message: '修改成功,请重新登录'
})
this.$store.dispatch('user/logout').then(() => {
this.$router.push('/login')
})
}).catch(() => {})
}
})
}
<script setup name="PersonalEditPassword">
const store = useStore()
const route = useRoute(), router = useRouter()
const { proxy } = getCurrentInstance()
const validatePassword = (rule, value, callback) => {
if (value !== form.value.newpassword) {
callback(new Error('请确认新密码'))
} else {
callback()
}
}
const form = ref({
password: '',
newpassword: '',
checkpassword: ''
})
const rules = ref({
password: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
newpassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
],
checkpassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ validator: validatePassword }
]
})
function onSubmit() {
proxy.$refs['formRef'].validate(valid => {
if (valid) {
store.dispatch('user/editPassword', form.value).then(() => {
proxy.$message({
type: 'success',
message: '模拟修改成功,请重新登录'
})
store.dispatch('user/logout').then(() => {
router.push({
name: 'login',
query: {
redirect: route.fullPath
}
})
})
}).catch(() => {})
}
})
}
</script>

View File

@ -67,44 +67,30 @@
</div>
</template>
<script>
export default {
name: 'PersonalSetting',
beforeRouteLeave(to, from, next) {
if (['personalEditPassword'].includes(to.name)) {
this.$store.commit('keepAlive/add', 'PersonalSetting')
}
next()
},
props: {},
data() {
return {
form: {
headimg: '',
mobile: '',
name: '',
qq: '',
wechat: ''
}
}
},
created() {},
mounted() {},
methods: {
handleSuccess(res) {
if (res.error == '') {
this.form.headimg = res.data.path
} else {
this.$message.warning(res.error)
}
},
editPassword() {
this.$router.push({
name: 'personalEditPassword'
})
}
<script setup name="PersonalSetting">
const router = useRouter()
const { proxy } = getCurrentInstance()
const form = ref({
headimg: '',
mobile: '',
name: '',
qq: '',
wechat: ''
})
function handleSuccess(res) {
if (res.error == '') {
form.value.headimg = res.data.path
} else {
proxy.$message.warning(res.error)
}
}
function editPassword() {
router.push({
name: 'personalEditPassword'
})
}
</script>
<style lang="scss" scoped>