95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import { BaseEventOrig, InputProps } from '@tarojs/components';
|
||
|
||
import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
|
||
|
||
import BlFormInput from '@/components/bl-form-input';
|
||
import BlFormItem from '@/components/bl-form-item';
|
||
import BlFormSelect from '@/components/bl-form-select';
|
||
import { EDUCATION_TYPE_OPTIONS, EducationType } from '@/constants/material';
|
||
import { MaterialProfile } from '@/types/material';
|
||
import { logWithPrefix, string2Number } from '@/utils/common';
|
||
|
||
import './index.less';
|
||
|
||
interface IProps {
|
||
profile: Partial<MaterialProfile>;
|
||
}
|
||
|
||
const PREFIX = 'fragment-profile-others';
|
||
const log = logWithPrefix(PREFIX);
|
||
|
||
function ProfileOthersFragment(props: IProps, ref) {
|
||
const { profile } = props;
|
||
const [educationType, setEducationType] = useState(profile.educationType || '');
|
||
const [height, setHeight] = useState(profile.height || '');
|
||
const [weight, setWeight] = useState(profile.weight || '');
|
||
const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');
|
||
|
||
const handleInputHeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||
const value = e.detail.value || '';
|
||
if (Number.isNaN(Number(value))) {
|
||
return;
|
||
}
|
||
setHeight(string2Number(value));
|
||
}, []);
|
||
|
||
const handleInputWeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||
const value = e.detail.value || '';
|
||
if (Number.isNaN(Number(value))) {
|
||
return;
|
||
}
|
||
setWeight(string2Number(value));
|
||
}, []);
|
||
|
||
const handleInputShoeSize = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||
const value = e.detail.value || '';
|
||
if (Number.isNaN(Number(value))) {
|
||
return;
|
||
}
|
||
setShoeSize(string2Number(value));
|
||
}, []);
|
||
|
||
const handleSelectEducationType = useCallback((type: EducationType) => {
|
||
setEducationType(type);
|
||
}, []);
|
||
|
||
useImperativeHandle(
|
||
ref,
|
||
() => ({
|
||
getData: () => ({ height, weight, shoeSize, educationType }),
|
||
}),
|
||
[height, weight, shoeSize, educationType]
|
||
);
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
<div className={`${PREFIX}__title`}>服饰等穿版品类必填，其他品类选填</div>
|
||
<BlFormItem title="身高" optional>
|
||
<BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
|
||
</BlFormItem>
|
||
<BlFormItem title="体重" optional>
|
||
<BlFormInput value={String(weight)} type="number" maxlength={3} onInput={handleInputWeight} rightText="KG" />
|
||
</BlFormItem>
|
||
<BlFormItem title="鞋码" optional>
|
||
<BlFormInput
|
||
value={String(shoeSize)}
|
||
type="number"
|
||
maxlength={2}
|
||
onInput={handleInputShoeSize}
|
||
rightText="码"
|
||
/>
|
||
</BlFormItem>
|
||
<BlFormItem title="学历" optional>
|
||
<BlFormSelect
|
||
title="学历"
|
||
value={educationType}
|
||
options={EDUCATION_TYPE_OPTIONS}
|
||
onSelect={handleSelectEducationType}
|
||
/>
|
||
</BlFormItem>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default forwardRef(ProfileOthersFragment);
|