81 lines
1.7 KiB
Plaintext
81 lines
1.7 KiB
Plaintext
<template>
|
||
<cl-page>
|
||
<cl-topbar safe-area-top :title="t('编辑昵称')" background-color="transparent"> </cl-topbar>
|
||
|
||
<view class="p-3">
|
||
<cl-input
|
||
v-model="content"
|
||
autofocus
|
||
:placeholder="t('请输入昵称')"
|
||
:border="false"
|
||
:pt="{
|
||
className: '!h-[80rpx]'
|
||
}"
|
||
>
|
||
<template #append>
|
||
<cl-text color="info" :pt="{ className: '!text-sm ml-2' }"
|
||
>{{ content.length }}/20</cl-text
|
||
>
|
||
</template>
|
||
</cl-input>
|
||
|
||
<view class="p-3">
|
||
<cl-text color="info" :pt="{ className: '!text-sm' }">{{
|
||
t("请设置2-20个字符，不包括@<>/等无效字符")
|
||
}}</cl-text>
|
||
</view>
|
||
</view>
|
||
|
||
<cl-footer>
|
||
<cl-button size="large" :disabled="content == ''" @tap="confirm">{{
|
||
t("确认")
|
||
}}</cl-button>
|
||
</cl-footer>
|
||
</cl-page>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { router, useStore } from "@/cool";
|
||
import { t } from "@/locale";
|
||
import { useUi } from "@/uni_modules/cool-ui";
|
||
import { ref } from "vue";
|
||
|
||
const ui = useUi();
|
||
const { user } = useStore();
|
||
|
||
// 输入框内容
|
||
const content = ref("");
|
||
|
||
// 确认按钮点击事件
|
||
async function confirm() {
|
||
// 检查昵称长度和特殊字符
|
||
if (content.value.length < 2 || content.value.length > 20) {
|
||
ui.showToast({
|
||
message: t("昵称长度需在2-20个字符之间")
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 正则匹配 - 不允许特殊字符@<>/等
|
||
const reg = /^[^@<>\/]*$/;
|
||
if (!reg.test(content.value)) {
|
||
ui.showToast({
|
||
message: t("昵称不能包含@<>/等特殊字符")
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 更新用户昵称
|
||
await user.update({
|
||
nickName: content.value
|
||
});
|
||
|
||
router.back();
|
||
}
|
||
|
||
// 页面加载时，设置输入框内容
|
||
onReady(() => {
|
||
content.value = user.info.nickName ?? "";
|
||
});
|
||
</script>
|