73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script lang='ts' setup>
|
||
import { toastController } from "@ionic/vue";
|
||
import { arrowBackOutline } from "ionicons/icons";
|
||
import { safeClient } from "@/api";
|
||
import { authClient } from "@/auth";
|
||
|
||
const userStore = useUserStore();
|
||
const { userProfile } = storeToRefs(userStore);
|
||
const username = ref(userProfile.value?.user?.username || "");
|
||
const { updateProfile } = useUserStore();
|
||
|
||
async function handleSave() {
|
||
if (!usernamePattern.test(username.value)) {
|
||
const toast = await toastController.create({
|
||
message: "用户名格式不正确",
|
||
duration: 2000,
|
||
position: "bottom",
|
||
color: "danger",
|
||
});
|
||
await toast.present();
|
||
return;
|
||
}
|
||
const { data } = await safeClient(authClient.updateUser({
|
||
username: username.value,
|
||
}));
|
||
if (data) {
|
||
updateProfile();
|
||
const toast = await toastController.create({
|
||
message: "用户名更新成功",
|
||
duration: 2000,
|
||
position: "bottom",
|
||
color: "success",
|
||
});
|
||
await toast.present();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<ion-page>
|
||
<ion-header>
|
||
<ion-toolbar class="ui-toolbar">
|
||
<ion-buttons slot="start">
|
||
<ion-button @click="$router.back()">
|
||
<ion-icon slot="icon-only" :icon="arrowBackOutline" />
|
||
</ion-button>
|
||
</ion-buttons>
|
||
<ion-title>用户设置</ion-title>
|
||
</ion-toolbar>
|
||
</ion-header>
|
||
|
||
<ion-content :fullscreen="true" class="ion-padding">
|
||
<div class="space-y-3">
|
||
<ui-input
|
||
v-model="username"
|
||
placeholder="请输入用户名"
|
||
class="w-full"
|
||
/>
|
||
|
||
<div class="text-xs text-gray-500">
|
||
仅支持字母、数字、下划线，长度 3-20 个字符
|
||
</div>
|
||
|
||
<ion-button expand="block" class="mt-5" @click="handleSave">
|
||
保存
|
||
</ion-button>
|
||
</div>
|
||
</ion-content>
|
||
</ion-page>
|
||
</template>
|
||
|
||
<style lang='css' scoped></style>
|