Files
cheflinkuser/src/pages-user/pages/edit-nickname/index.vue
T

97 lines
3.2 KiB
Vue

<!--
* @Author: ISFP_T 68358856@qq.com
* @Date: 2026-02-25 10:02:44
* @LastEditors: ISFP_T 68358856@qq.com
* @LastEditTime: 2026-04-01 15:51:38
* @FilePath: \chef-link-uniapp\src\pages-user\pages\edit-nickname\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import Config from '@/config'
import { useUserStore } from '@/store'
import { appUserEditUserInfoPost } from '@/service'
import { debounce } from 'throttle-debounce';
import { z } from "zod";
import * as R from "ramda";
const { t } = useI18n()
const userStore = useUserStore()
const form = ref({
firstName: userStore.userInfo?.firstName,
surname: userStore.userInfo?.surname,
})
const FormSchema = z.object({
firstName: z.string().min(1, { message: t('pages-login.prompt.first-name') }),
surname: z.string().min(1, { message: t('pages-login.prompt.last-name') }),
})
function checkForm(): boolean {
const validateFormField = FormSchema.safeParse(form.value)
if (!validateFormField.success) {
const fieldErrorMessage = validateFormField.error.flatten().fieldErrors
const errorMessage: string | undefined = R.path([0, 0], R.values(fieldErrorMessage))
errorMessage &&
uni.showToast({
title: errorMessage,
icon: 'none',
})
}
return validateFormField.success
}
async function submit() {
try {
await appUserEditUserInfoPost({
body: {
...form.value,
}
})
await uni.showToast({ title: t('common.prompt.save-successfully'), icon: 'none' })
await userStore.getUserInfo()
setTimeout(uni.navigateBack, 1000)
} catch (e) {
}
}
// 提交
const handleSubmit = R.when(checkForm, debounce(Config.debounceLongTime, submit, {
atBegin: true
}))
</script>
<template>
<view>
<navbar :title="t('navbar-nickname')" />
<view class="py-36rpx px-30rpx bg-#fff">
<view class="">
<view class="text-28-bold">{{ t("pages-login.sign-up.first-name") }}</view>
<view class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
<wd-input no-border clearable :focus-when-clear="false" :cursorSpacing="20" :maxlength="40"
v-model.trim="form.firstName" custom-class="flex-1" placeholder="">
</wd-input>
</view>
</view>
<view class="mt-36rpx">
<view class="text-28-bold">{{ t("pages-login.sign-up.last-name") }}</view>
<view class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
<wd-input no-border clearable :focus-when-clear="false" use-prefix-slot :maxlength="40" :cursorSpacing="20"
v-model.trim="form.surname" custom-class="flex-1" placeholder="">
</wd-input>
</view>
</view>
</view>
<view class="mt-318rpx px-30rpx" style="position: fixed; bottom: 30rpx; left: 0; right: 0; z-index: 100;">
<wd-button custom-class="!h-108rpx !text-36rpx font-bold !rounded-46rpx" block @click="handleSubmit">
{{ t('common.save') }}
</wd-button>
</view>
</view>
</template>
<style lang="scss"></style>