feat: first commit

src/fragments/profile/experience/index.tsx

@@ -0,0 +1,150 @@
+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 { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
+import BlFormSelect from '@/components/bl-form-select';
+import { WORK_YEAR_OPTIONS, WorkedYears } 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-experience';
+const log = logWithPrefix(PREFIX);
+// const STYLE_VALUES = Object.values(StyleType).filter(v => typeof v === 'number');
+
+// const calcInitStyle = (styleString: string = '') => {
+//   const styles = styleString.split('、');
+//   return styles.filter(v => STYLE_VALUES.includes(Number(v))).map(v => Number(v));
+// };
+
+// const getStyleString = (styles: StyleType[]) => {
+//   return styles.join('、');
+// };
+
+const calcInitMaxGmv = (maxGmv: number) => {
+  if (!maxGmv) {
+    return '';
+  }
+  return maxGmv / 10000;
+};
+
+const getMaxGmv = (maxGmv: number) => {
+  if (Number.isNaN(maxGmv)) {
+    return 0;
+  }
+  return maxGmv * 10000;
+};
+
+function ProfileExperienceFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [workedYear, setWorkedYear] = useState(profile.workedYear);
+  const [workedAccounts, setWorkedAccounts] = useState(profile.workedAccounts || '');
+  const [newAccountExperience, setNewAccountExperience] = useState(profile.newAccountExperience);
+  const [workedSecCategoryStr, setWorkedSecCategoryStr] = useState(profile.workedSecCategoryStr || '');
+  // const [style, setStyle] = useState(calcInitStyle(profile.style));
+  const [maxGmv, setMaxGmv] = useState(calcInitMaxGmv(profile?.maxGmv || 0));
+  const [maxOnline, setMaxOnline] = useState(profile.maxOnline || '');
+
+  const handleSelectWorkYear = useCallback((newYear: WorkedYears) => {
+    setWorkedYear(newYear);
+  }, []);
+
+  const handleInputWorkedAccounts = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setWorkedAccounts(value);
+  }, []);
+
+  const handleNewAccountExperienceChange = useCallback((value: number) => {
+    log('handleNewAccountExperienceChange', value);
+    setNewAccountExperience(value);
+  }, []);
+
+  const handleInputWorkedSecCategoryStr = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setWorkedSecCategoryStr(value);
+  }, []);
+
+  // const handleStyleChange = useCallback((value: StyleType[]) => {
+  //   log('handleStyleChange', value);
+  //   setStyle(value);
+  // }, []);
+
+  const handleInputMaxGmv = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setMaxGmv(string2Number(value));
+  }, []);
+
+  const handleInputMaxOnline = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setMaxOnline(string2Number(value));
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({
+        workedYear,
+        workedAccounts,
+        newAccountExperience,
+        workedSecCategoryStr,
+        // style: getStyleString(style.sort()),
+        maxOnline: maxOnline === '' ? undefined : maxOnline,
+        maxGmv: maxGmv === '' ? undefined : getMaxGmv(Number(maxGmv)),
+      }),
+    }),
+    [workedYear, workedAccounts, newAccountExperience, workedSecCategoryStr, maxGmv, maxOnline]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="直播经验">
+        <BlFormSelect title="直播经验" value={workedYear} options={WORK_YEAR_OPTIONS} onSelect={handleSelectWorkYear} />
+      </BlFormItem>
+      <BlFormItem title="直播过的品类" optional>
+        <BlFormInput value={workedSecCategoryStr} maxlength={140} onInput={handleInputWorkedSecCategoryStr} />
+      </BlFormItem>
+      <BlFormItem title="自然流起号经验" optional>
+        <BlFormRadioGroup
+          direction="horizontal"
+          value={newAccountExperience}
+          onChange={handleNewAccountExperienceChange}
+        >
+          <BlFormRadio name={false} text="无" value={newAccountExperience} />
+          <BlFormRadio name text="有" value={newAccountExperience} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+      <BlFormItem title="直播过的账号" optional>
+        <BlFormInput value={workedAccounts} maxlength={140} onInput={handleInputWorkedAccounts} />
+      </BlFormItem>
+      {/* <ProfileEditItem title="直播风格" optional>
+        <ProfileCheckboxGroup value={style} onChange={handleStyleChange}>
+          <ProfileCheckbox value={style} name={StyleType.Broadcasting} text="平播" />
+          <ProfileCheckbox value={style} name={StyleType.HoldOrder} text="憋单" />
+          <ProfileCheckbox value={style} name={StyleType.Passion} text="激情" />
+        </ProfileCheckboxGroup>
+      </ProfileEditItem> */}
+      <BlFormItem title="最高GMV" optional>
+        <BlFormInput value={String(maxGmv)} type="number" maxlength={10} onInput={handleInputMaxGmv} rightText="W" />
+      </BlFormItem>
+      <BlFormItem title="最高在线人数" optional>
+        <BlFormInput value={String(maxOnline)} type="number" onInput={handleInputMaxOnline} rightText="人" />
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileExperienceFragment);