296 lines
7.1 KiB
Plaintext
296 lines
7.1 KiB
Plaintext
<template>
|
|
<view class="user-center-container">
|
|
<view class="page-header">
|
|
<text class="page-title">个人中心</text>
|
|
</view>
|
|
|
|
<view class="form-container">
|
|
<view class="form-item">
|
|
<text class="form-label">头像</text>
|
|
<view class="form-content avatar-uploader">
|
|
<!-- 默认使用一个占位头像或 Logo -->
|
|
<image class="avatar-img" :src="avatarUrl" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">账号</text>
|
|
<view class="form-content">
|
|
<input class="uni-input disabled" :value="userAccount" disabled placeholder="请输入账号" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label"><text class="required">*</text>姓名</text>
|
|
<view class="form-content">
|
|
<input class="uni-input" v-model="formData.name" placeholder="请输入姓名" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">原始密码</text>
|
|
<view class="form-content">
|
|
<input class="uni-input" type="password" v-model="formData.oldPassword" placeholder="请输入原始密码" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">新密码</text>
|
|
<view class="form-content">
|
|
<input class="uni-input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">确认密码</text>
|
|
<view class="form-content">
|
|
<input class="uni-input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-actions">
|
|
<button class="submit-btn" type="primary" @click="onSubmit">保存修改</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { reactive, computed, onMounted } from 'vue'
|
|
import { state, logout } from '@/utils/store.uts'
|
|
import supa from '@/components/supadb/aksupainstance.uts'
|
|
|
|
const userAccount = computed((): string => state.userProfile.email || 'demo@example.com')
|
|
const avatarUrl = computed((): string => state.userProfile.avatar_url || '/static/logo.png')
|
|
|
|
const formData = reactive({
|
|
name: '',
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
|
|
onMounted(() => {
|
|
formData.name = state.userProfile.username || ''
|
|
})
|
|
|
|
const onSubmit = async () => {
|
|
if (formData.name.trim() == '') {
|
|
uni.showToast({ title: '姓名不能为空', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 修改密码逻辑
|
|
if (formData.oldPassword != '' || formData.newPassword != '' || formData.confirmPassword != '') {
|
|
if (formData.oldPassword == '') {
|
|
uni.showToast({ title: '需要输入原始密码', icon: 'none' })
|
|
return
|
|
}
|
|
if (formData.newPassword == '') {
|
|
uni.showToast({ title: '新密码不能为空', icon: 'none' })
|
|
return
|
|
}
|
|
if (formData.newPassword !== formData.confirmPassword) {
|
|
uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' })
|
|
return
|
|
}
|
|
if (formData.newPassword === formData.oldPassword) {
|
|
uni.showToast({ title: '新密码不能与原始密码相同', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '验证并提交中...' })
|
|
|
|
try {
|
|
const email = state.userProfile.email
|
|
if (email == '') {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '账号缺失，无法验证', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 1. 验证原密码
|
|
const resSignIn = await supa.auth.signInWithPassword({
|
|
email: email,
|
|
password: formData.oldPassword
|
|
})
|
|
|
|
if (resSignIn.error != null) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '原密码错误', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 2. 更新新密码
|
|
const resUpdate = await supa.auth.updateUser({
|
|
password: formData.newPassword
|
|
})
|
|
|
|
if (resUpdate.error != null) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '密码更新失败', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 3. 同时更新姓名
|
|
if (formData.name !== state.userProfile.username) {
|
|
await supa.from('ak_users').update({
|
|
username: formData.name
|
|
}).eq('id', state.userProfile.id)
|
|
}
|
|
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '修改成功, 请重新登录', icon: 'success' })
|
|
|
|
// 退出登录
|
|
setTimeout(() => {
|
|
logout()
|
|
uni.removeStorageSync('adminRole')
|
|
uni.removeStorageSync('token')
|
|
uni.reLaunch({
|
|
url: '/pages/user/login'
|
|
})
|
|
}, 1500)
|
|
|
|
return
|
|
} catch (e) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '网络异常', icon: 'none' })
|
|
return
|
|
}
|
|
}
|
|
|
|
// 仅修改基本信息
|
|
if (formData.name !== state.userProfile.username) {
|
|
uni.showLoading({ title: '保存中...' })
|
|
try {
|
|
const res = await supa.from('ak_users').update({
|
|
username: formData.name
|
|
}).eq('id', state.userProfile.id)
|
|
|
|
if (res.error != null) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '保存失败', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
state.userProfile.username = formData.name
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
} catch (e) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '网络异常', icon: 'none' })
|
|
}
|
|
} else {
|
|
uni.showToast({ title: '无修改内容', icon: 'none' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-center-container {
|
|
padding: 20px;
|
|
background-color: #f5f7f9;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.form-container {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
padding: 30px 20px;
|
|
max-width: 800px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-label {
|
|
width: 100px;
|
|
text-align: right;
|
|
margin-right: 16px;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.required {
|
|
color: #f5222d;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.form-content {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.uni-input {
|
|
width: 100%;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uni-input:focus {
|
|
border-color: #1890ff;
|
|
outline: none;
|
|
}
|
|
|
|
.disabled {
|
|
background-color: #f5f7fa;
|
|
color: #c0c4cc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.avatar-uploader {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
background-color: #f0f2f5;
|
|
border: 1px dashed #d9d9d9;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 40px;
|
|
padding-left: 116px;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
width: 120px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
}
|
|
.submit-btn:active {
|
|
background-color: #096dd9;
|
|
}
|
|
</style>
|