78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { BaseEventOrig, Button, Input, InputProps, Image } from '@tarojs/components';
|
|
import Taro from '@tarojs/taro';
|
|
|
|
import { Cell } from '@taroify/core';
|
|
import { useCallback, useRef } from 'react';
|
|
|
|
import useUserInfo from '@/hooks/use-user-info';
|
|
import { logWithPrefix } from '@/utils/common';
|
|
import Toast from '@/utils/toast';
|
|
import { updateUserInfo } from '@/utils/user';
|
|
import { commonUploadProgress, uploadVideo } from '@/utils/video';
|
|
|
|
import './index.less';
|
|
|
|
const PREFIX = 'user-info';
|
|
const log = logWithPrefix(PREFIX);
|
|
|
|
export default function UserInfo() {
|
|
const userInfo = useUserInfo();
|
|
const nameRef = useRef(userInfo.nickName);
|
|
|
|
const handleChooseAvatar = useCallback(async () => {
|
|
// const { avatarUrl } = e.detail;
|
|
// log('handleChooseAvatar', avatarUrl, e.detail);
|
|
// const { url } = await uploadVideo(avatarUrl, 'image', commonUploadProgress, 'user-avatar');
|
|
// url && updateUserInfo({ avatarUrl: url });
|
|
Taro.chooseMedia({
|
|
mediaType: ['image'],
|
|
sourceType: ['album'],
|
|
count: 1,
|
|
success: async ({ tempFiles }) => {
|
|
log('handleChooseAvatar', tempFiles[0]);
|
|
const { url } = await uploadVideo(tempFiles[0].tempFilePath, 'image', commonUploadProgress, 'user-avatar');
|
|
url && updateUserInfo({ avatarUrl: url });
|
|
},
|
|
});
|
|
}, []);
|
|
|
|
const handleInput = useCallback((e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
|
|
const value = e.detail?.value || '';
|
|
nameRef.current = value;
|
|
}, []);
|
|
|
|
const handleInputBlurOrConfirm = useCallback(() => {
|
|
const newNickName = nameRef.current;
|
|
if (!newNickName) {
|
|
Toast.error('昵称不能为空');
|
|
}
|
|
|
|
log('confirm nickname changed:', newNickName, userInfo.nickName);
|
|
newNickName !== userInfo.nickName && updateUserInfo({ nickName: newNickName });
|
|
}, [userInfo]);
|
|
|
|
return (
|
|
<div className={PREFIX}>
|
|
<Cell className={`${PREFIX}__avatar-cell`} title="头像" align="center" isLink>
|
|
<Image
|
|
mode="aspectFill"
|
|
className={`${PREFIX}__avatar`}
|
|
src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
|
|
/>
|
|
<Button className={`${PREFIX}__avatar-button`} onClick={handleChooseAvatar} />
|
|
</Cell>
|
|
<Cell title="昵称" align="center" isLink>
|
|
<Input
|
|
type="nickname"
|
|
confirmType="done"
|
|
placeholder="请输入昵称"
|
|
value={nameRef.current}
|
|
onInput={handleInput}
|
|
onBlur={handleInputBlurOrConfirm}
|
|
onConfirm={handleInputBlurOrConfirm}
|
|
/>
|
|
</Cell>
|
|
</div>
|
|
);
|
|
}
|