ProfilePage 用户中心 ​

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ProfilePage, UMessage } from 'uniboot-ui'

const activeKey = ref('info')

const menus = [
  { key: 'info', title: '账户信息' },
  { key: 'security', title: '账号与安全' },
]

const profile = ref({
  account: 'Admin',
  nickname: 'Chuck',
  gender: '女',
  birthday: '2010-07-28',
})

const loginMeta = reactive({
  lastIp: '222.180.149.94',
  lastTime: '2024-11-21 16:01:10',
})

const securityEmail = ref('6712****0@qq.com')

async function mockSendOld() {
  return { codeToken: 'demo-old-token' }
}

async function mockSendNew(_email: string) {
  return { codeToken: 'demo-new-token' }
}

async function onChangeEmailFinish(payload: {
  email: string
  code: string
  codeToken: string
}) {
  UMessage.success(`演示：将邮箱更新为 ${payload.email}（codeToken 已带上）`)
  return true
}

function onBack() {
  console.log('back')
}

function onEditBasicFinish() {
  UMessage.success('保存成功')
}

function onChangeEmailStep1() {
  UMessage.info('演示：已通过原邮箱验证，进入第二步')
}

function onChangePasswordFinish(payload: {
  oldPassword: string
  newPassword: string
}) {
  UMessage.success(
    `已提交修改密码（演示）：新密码长度 ${payload.newPassword.length}`
  )
}
</script>

<template>
  <profile-page
    v-model:active-key="activeKey"
    v-model:basic-profile="profile"
    builtin-panels
    nick-name="905020483@qq.com"
    :role-names="['管理员', '操作员']"
    :menus="menus"
    :login-meta="loginMeta"
    :security-email="securityEmail"
    change-email-current-email="905020483@qq.com"
    :on-send-old-email-code="mockSendOld"
    :on-send-new-email-code="mockSendNew"
    :on-verify-old-email-code="async () => true"
    :on-change-email-finish="onChangeEmailFinish"
    :on-back="onBack"
    @edit-basic-finish="onEditBasicFinish"
    @change-email-step1-finish="onChangeEmailStep1"
    @change-password-finish="onChangePasswordFinish"
  />
</template>