feat: first commit
This commit is contained in:
eleanor.mao
19
src/fragments/profile/advantages/index.less
Normal file
19
src/fragments/profile/advantages/index.less
Normal file
@ -0,0 +1,19 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.fragment-profile-advantages {
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
color: @blColor;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
&__input-placeholder {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
53
src/fragments/profile/advantages/index.tsx
Normal file
53
src/fragments/profile/advantages/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { BaseEventOrig, Textarea, TextareaProps } from '@tarojs/components';
|
||||
|
||||
import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
|
||||
|
||||
import BlFormItem from '@/components/bl-form-item';
|
||||
import { MaterialProfile } from '@/types/material';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps {
|
||||
profile: Partial<MaterialProfile>;
|
||||
}
|
||||
|
||||
const PREFIX = 'fragment-profile-advantages';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
function ProfileAdvantagesFragment(props: IProps, ref) {
|
||||
const { profile } = props;
|
||||
const [advantages, setAdvantages] = useState(profile.advantages || '');
|
||||
|
||||
const handleInput = useCallback((e: BaseEventOrig<TextareaProps.onInputEventDetail>) => {
|
||||
const value = e.detail.value || '';
|
||||
setAdvantages(value);
|
||||
log('handleInput', value);
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
getData: () => ({ advantages }),
|
||||
}),
|
||||
[advantages]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<BlFormItem title="自身优势" optional dynamicHeight>
|
||||
<Textarea
|
||||
maxlength={-1}
|
||||
value={advantages}
|
||||
confirmType="done"
|
||||
placeholder="比如特长、风格、对直播理解等"
|
||||
onInput={handleInput}
|
||||
className={`${PREFIX}__input`}
|
||||
placeholderClass={`${PREFIX}__input-placeholder`}
|
||||
/>
|
||||
</BlFormItem>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(ProfileAdvantagesFragment);
|
||||
6
src/fragments/profile/basic/index.less
Normal file
6
src/fragments/profile/basic/index.less
Normal file
@ -0,0 +1,6 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.fragment-profile-basic {
|
||||
width: 100%;
|
||||
}
|
||||
113
src/fragments/profile/basic/index.tsx
Normal file
113
src/fragments/profile/basic/index.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
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 { GenderType } 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-basic';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
function ProfileBasicFragment(props: IProps, ref) {
|
||||
const { profile } = props;
|
||||
const [name, setName] = useState(profile.name || '');
|
||||
const [gender, setGender] = useState<GenderType>(profile.gender || GenderType.WOMEN);
|
||||
const [age, setAge] = useState(profile.age || '');
|
||||
const [height, setHeight] = useState(profile.height || '');
|
||||
const [weight, setWeight] = useState(profile.weight || '');
|
||||
const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');
|
||||
|
||||
const handleInputName = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = e.detail.value || '';
|
||||
setName(value);
|
||||
}, []);
|
||||
|
||||
const handleInputAge = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = e.detail.value || '';
|
||||
if (Number.isNaN(Number(value))) {
|
||||
return;
|
||||
}
|
||||
setAge(string2Number(value));
|
||||
}, []);
|
||||
|
||||
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 handleGenderChange = useCallback((value: GenderType) => {
|
||||
log('handleGenderChange', value);
|
||||
setGender(value);
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
getData: () => ({ name, gender, age, height, weight, shoeSize }),
|
||||
}),
|
||||
[name, gender, age, height, weight, shoeSize]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<BlFormItem title="称呼">
|
||||
<BlFormInput value={name} onInput={handleInputName} />
|
||||
</BlFormItem>
|
||||
<BlFormItem title="性别">
|
||||
<BlFormRadioGroup direction="horizontal" value={gender} onChange={handleGenderChange}>
|
||||
<BlFormRadio name={GenderType.WOMEN} text="女" value={gender} />
|
||||
<BlFormRadio name={GenderType.MEN} text="男" value={gender} />
|
||||
</BlFormRadioGroup>
|
||||
</BlFormItem>
|
||||
<BlFormItem title="年龄">
|
||||
<BlFormInput value={String(age)} type="number" maxlength={3} onInput={handleInputAge} rightText="岁" />
|
||||
</BlFormItem>
|
||||
<BlFormItem title="身高">
|
||||
<BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
|
||||
</BlFormItem>
|
||||
<BlFormItem title="体重">
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(ProfileBasicFragment);
|
||||
4
src/fragments/profile/experience/index.less
Normal file
4
src/fragments/profile/experience/index.less
Normal file
@ -0,0 +1,4 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.fragment-profile-experience {}
|
||||
150
src/fragments/profile/experience/index.tsx
Normal file
150
src/fragments/profile/experience/index.tsx
Normal file
@ -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);
|
||||
48
src/fragments/profile/intention/index.less
Normal file
48
src/fragments/profile/intention/index.less
Normal file
@ -0,0 +1,48 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.fragment-profile-intention {
|
||||
width: 100%;
|
||||
|
||||
&__indent-city-container {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__indent-city {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
.flex-row();
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: calc(calc(100% - 48px) / 3);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 24px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&__delete-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
&__add-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
201
src/fragments/profile/intention/index.tsx
Normal file
201
src/fragments/profile/intention/index.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
|
||||
|
||||
import BlFormItem from '@/components/bl-form-item';
|
||||
import { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
|
||||
import BlFormSelect from '@/components/bl-form-select';
|
||||
import { EventName, OpenSource, PageUrl } from '@/constants/app';
|
||||
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
||||
import { EmployType, EMPLOY_TYPE_TITLE_MAP, FULL_PRICE_OPTIONS, PART_PRICE_OPTIONS } from '@/constants/job';
|
||||
import { SalaryRange } from '@/types/job';
|
||||
import { MaterialProfile } from '@/types/material';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { getCurrentCity } from '@/utils/location';
|
||||
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job'
|
||||
import { navigateTo } from '@/utils/route';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps {
|
||||
profile: Partial<MaterialProfile>;
|
||||
}
|
||||
|
||||
const PREFIX = 'fragment-profile-intention';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
const calcInitCityCodes = (codeString: string = '') => {
|
||||
const codes = codeString.split('、');
|
||||
return codes.filter(code => !!CITY_CODE_TO_NAME_MAP.get(code));
|
||||
};
|
||||
|
||||
const getCityCodeString = (codes: string[]) => {
|
||||
return codes.join('、');
|
||||
};
|
||||
|
||||
const calcSalarySelect = (profile: Partial<MaterialProfile>, full: boolean) => {
|
||||
const min = full ? profile.fullTimeMinPrice : profile.partyTimeMinPrice;
|
||||
const max = full ? profile.fullTimeMaxPrice : profile.partyTimeMaxPrice;
|
||||
if (!min || !max) {
|
||||
return;
|
||||
}
|
||||
const options = full ? FULL_PRICE_OPTIONS : PART_PRICE_OPTIONS;
|
||||
return options.find(v => v.value && v.value.minSalary <= min && v.value.maxSalary >= max)?.value;
|
||||
};
|
||||
|
||||
const getSalaryPrice = (fullSalary?: SalaryRange, partSalary?: SalaryRange) => {
|
||||
const price: Partial<
|
||||
Pick<MaterialProfile, 'fullTimeMinPrice' | 'fullTimeMaxPrice' | 'partyTimeMinPrice' | 'partyTimeMaxPrice'>
|
||||
> = {};
|
||||
if (fullSalary) {
|
||||
price.fullTimeMinPrice = fullSalary.minSalary;
|
||||
price.fullTimeMaxPrice = fullSalary.maxSalary;
|
||||
}
|
||||
if (partSalary) {
|
||||
price.partyTimeMinPrice = partSalary.minSalary;
|
||||
price.partyTimeMaxPrice = partSalary.maxSalary;
|
||||
}
|
||||
return price;
|
||||
};
|
||||
|
||||
function ProfileIntentionFragment(props: IProps, ref) {
|
||||
const { profile } = props;
|
||||
const [cityCodes, setCityCodes] = useState(calcInitCityCodes(profile.cityCodes));
|
||||
const [employType, setEmployType] = useState(profile.employType);
|
||||
const [fullSalary, setFullSalary] = useState(calcSalarySelect(profile, true));
|
||||
const [partSalary, setPartSalary] = useState(calcSalarySelect(profile, false));
|
||||
const [acceptWorkForSit, setAcceptWorkForSit] = useState(profile.acceptWorkForSit);
|
||||
|
||||
const handleDeleteCity = useCallback(
|
||||
(deleteCode: string) => {
|
||||
setCityCodes(cityCodes.filter(code => code !== deleteCode));
|
||||
},
|
||||
[cityCodes]
|
||||
);
|
||||
|
||||
const handleClickAddCity = useCallback(() => {
|
||||
const currentCity = getCurrentCity();
|
||||
navigateTo(PageUrl.CitySearch, { city: currentCity, source: OpenSource.AddIndentCity });
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback(
|
||||
data => {
|
||||
log('handleSelectCity', data);
|
||||
const { openSource, cityCode: code } = data;
|
||||
if (openSource !== OpenSource.AddIndentCity) {
|
||||
return;
|
||||
}
|
||||
const newCodes = [...new Set([...cityCodes, code])];
|
||||
setCityCodes(newCodes);
|
||||
},
|
||||
[cityCodes]
|
||||
);
|
||||
|
||||
const handleEmployTypeChange = useCallback((value: EmployType) => {
|
||||
setEmployType(value);
|
||||
if (value === EmployType.Full) {
|
||||
setPartSalary({ minSalary: 0, maxSalary: 0 })
|
||||
}
|
||||
if (value === EmployType.Part) {
|
||||
setFullSalary({ minSalary: 0, maxSalary: 0 })
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSelectFullSalary = useCallback((value?: SalaryRange) => {
|
||||
setFullSalary(value);
|
||||
}, []);
|
||||
|
||||
const handleSelectPartSalary = useCallback((value?: SalaryRange) => {
|
||||
setPartSalary(value);
|
||||
}, []);
|
||||
|
||||
const handleAcceptSittingChange = useCallback((value: boolean) => {
|
||||
log('handleAcceptSittingChange', value);
|
||||
setAcceptWorkForSit(value);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
Taro.eventCenter.on(EventName.SELECT_CITY, handleSelectCity);
|
||||
return () => {
|
||||
Taro.eventCenter.off(EventName.SELECT_CITY, handleSelectCity);
|
||||
};
|
||||
}, [handleSelectCity]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
getData: () => ({
|
||||
cityCodes: getCityCodeString(cityCodes),
|
||||
employType,
|
||||
acceptWorkForSit,
|
||||
...getSalaryPrice(fullSalary, partSalary),
|
||||
}),
|
||||
}),
|
||||
[cityCodes, employType, fullSalary, partSalary, acceptWorkForSit]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<BlFormItem title="意向城市" contentClassName={`${PREFIX}__indent-city-container`} dynamicHeight>
|
||||
<div className={`${PREFIX}__indent-city`}>
|
||||
{cityCodes.map(code => {
|
||||
return (
|
||||
<div key={code} className={`${PREFIX}__indent-city__item`}>
|
||||
{CITY_CODE_TO_NAME_MAP.get(code)}
|
||||
<Image
|
||||
mode="aspectFit"
|
||||
className={`${PREFIX}__indent-city__delete-icon`}
|
||||
src={require('@/statics/svg/circle-delete.svg')}
|
||||
onClick={() => handleDeleteCity(code)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{cityCodes.length < 3 && (
|
||||
<div className={`${PREFIX}__indent-city__item`} onClick={handleClickAddCity}>
|
||||
<Image
|
||||
mode="aspectFit"
|
||||
className={`${PREFIX}__indent-city__add-icon`}
|
||||
src={require('@/statics/svg/add.svg')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BlFormItem>
|
||||
<BlFormItem title="工作类型">
|
||||
<BlFormRadioGroup direction="horizontal" value={employType} onChange={handleEmployTypeChange}>
|
||||
<BlFormRadio name={EmployType.Full} text={EMPLOY_TYPE_TITLE_MAP[EmployType.Full]} value={employType} />
|
||||
<BlFormRadio name={EmployType.Part} text={EMPLOY_TYPE_TITLE_MAP[EmployType.Part]} value={employType} />
|
||||
<BlFormRadio name={EmployType.All} text={EMPLOY_TYPE_TITLE_MAP[EmployType.All]} value={employType} />
|
||||
</BlFormRadioGroup>
|
||||
</BlFormItem>
|
||||
{isFullTimePriceRequired(employType) &&
|
||||
(<BlFormItem title="期望全职薪资">
|
||||
<BlFormSelect
|
||||
title="期望全职薪资"
|
||||
value={fullSalary}
|
||||
options={FULL_PRICE_OPTIONS}
|
||||
onSelect={handleSelectFullSalary}
|
||||
/>
|
||||
</BlFormItem>)}
|
||||
{isPartTimePriceRequired(employType) &&
|
||||
(<BlFormItem title="期望兼职薪资">
|
||||
<BlFormSelect
|
||||
title="期望兼职薪资"
|
||||
value={partSalary}
|
||||
options={PART_PRICE_OPTIONS}
|
||||
onSelect={handleSelectPartSalary}
|
||||
/>
|
||||
</BlFormItem>)}
|
||||
<BlFormItem title="是否接受坐班">
|
||||
<BlFormRadioGroup direction="horizontal" value={acceptWorkForSit} onChange={handleAcceptSittingChange}>
|
||||
<BlFormRadio name text="接受" value={acceptWorkForSit} />
|
||||
<BlFormRadio name={false} text="不接受" value={acceptWorkForSit} />
|
||||
</BlFormRadioGroup>
|
||||
</BlFormItem>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(ProfileIntentionFragment);
|
||||
209
src/fragments/profile/view/index.less
Normal file
209
src/fragments/profile/view/index.less
Normal file
@ -0,0 +1,209 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.profile-view-fragment {
|
||||
padding-bottom: 88rpx;
|
||||
|
||||
&__header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&__swiper {
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
&__swiper-item {
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__cover-preview {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
}
|
||||
|
||||
&__edit-video {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 24px;
|
||||
width: 176px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
background: #0000005C;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
&__banner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
padding: 0 24px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
|
||||
}
|
||||
|
||||
&__video-size {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin: 24px;
|
||||
// 底部按钮栏高度 + 边距
|
||||
margin-bottom: calc(24px + 24px);
|
||||
// margin-bottom: calc(112px + 24px);
|
||||
width: calc(100% - 48px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
&__basic-info {
|
||||
position: relative;
|
||||
padding: 40px;
|
||||
|
||||
&__name-container {
|
||||
.flex-row();
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
color: @blHighlightColor;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
color: @blColor;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__info-group__header {
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-group__items {
|
||||
.flex-row();
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__info-group__item {
|
||||
width: 50%;
|
||||
margin-top: 32px;
|
||||
|
||||
&.full-line {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 12px 32px;
|
||||
box-shadow: 0px -4px 20px 0px #00000014;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__buttons {
|
||||
.flex-row();
|
||||
|
||||
&__share {
|
||||
.button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
|
||||
flex: 1 1;
|
||||
color: @blHighlightColor;
|
||||
background: @blHighlightBg;
|
||||
}
|
||||
|
||||
&__manager {
|
||||
.button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
|
||||
flex: 2 2;
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
223
src/fragments/profile/view/index.tsx
Normal file
223
src/fragments/profile/view/index.tsx
Normal file
@ -0,0 +1,223 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Swiper } from '@taroify/core';
|
||||
import classNames from 'classnames';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import DevDiv from '@/components/dev-div';
|
||||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||||
import { OpenSource, PageUrl } from '@/constants/app';
|
||||
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
||||
import { FULL_PRICE_OPTIONS, PART_PRICE_OPTIONS } from '@/constants/job';
|
||||
import { ProfileGroupType, ProfileTitleMap, WORK_YEAR_OPTIONS } from '@/constants/material';
|
||||
import { MaterialProfile } from '@/types/material';
|
||||
import { logWithPrefix, isDesktop } from '@/utils/common';
|
||||
import { getBasicInfo, sortVideos } from '@/utils/material';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps {
|
||||
editable: boolean;
|
||||
profile: MaterialProfile;
|
||||
onDev?: () => void;
|
||||
}
|
||||
|
||||
const PREFIX = 'profile-view-fragment';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const DEFAULT_TEXT = '未填写';
|
||||
|
||||
const getIndentCity = (codeString: string = '') => {
|
||||
const codes = codeString.split('、');
|
||||
const cityNames: string[] = [];
|
||||
codes.forEach(code => {
|
||||
const cityName = CITY_CODE_TO_NAME_MAP.get(code);
|
||||
cityName && cityNames.push(cityName);
|
||||
});
|
||||
return cityNames.join('、');
|
||||
};
|
||||
|
||||
const getIndentPrice = (min: number, max: number, full: boolean) => {
|
||||
if (!min && !max) {
|
||||
return DEFAULT_TEXT;
|
||||
}
|
||||
const options = full ? FULL_PRICE_OPTIONS : PART_PRICE_OPTIONS;
|
||||
const option = options.find(o => o.value.minSalary === min && o.value.maxSalary === max);
|
||||
if (option) {
|
||||
return option.label;
|
||||
}
|
||||
|
||||
const unit = full ? 'K' : '';
|
||||
const prices: string[] = [];
|
||||
min && prices.push(`${full ? Number(min) / 1000 : min}${unit}`);
|
||||
max && prices.push(`${full ? Number(max) / 1000 : max}${unit}`);
|
||||
return prices.join(' - ');
|
||||
};
|
||||
|
||||
const getWorkYear = (year: number) => {
|
||||
if (!year) {
|
||||
return DEFAULT_TEXT;
|
||||
}
|
||||
const y = Math.min(year, 3);
|
||||
return WORK_YEAR_OPTIONS.find(option => option.value === y)?.label || `${y}年`;
|
||||
};
|
||||
|
||||
const getDataGroup = (profile: MaterialProfile | null) => {
|
||||
if (!profile) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
title: ProfileTitleMap[ProfileGroupType.Intention],
|
||||
type: ProfileGroupType.Intention,
|
||||
items: [
|
||||
{ title: '全职薪资', value: getIndentPrice(profile.fullTimeMinPrice, profile.fullTimeMaxPrice, true) || '' },
|
||||
{ title: '兼职薪资', value: getIndentPrice(profile.partyTimeMinPrice, profile.partyTimeMaxPrice, false) || '' },
|
||||
{ title: '意向城市', value: getIndentCity(profile.cityCodes) || DEFAULT_TEXT },
|
||||
{ title: '是否接受坐班', value: profile.acceptWorkForSit ? '是' : '否' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: ProfileTitleMap[ProfileGroupType.Experience],
|
||||
type: ProfileGroupType.Experience,
|
||||
items: [
|
||||
{ title: '直播年限', value: getWorkYear(profile.workedYear) || DEFAULT_TEXT },
|
||||
{ title: '直播过的账号', value: profile.workedAccounts || DEFAULT_TEXT },
|
||||
{ title: '自然流起号经验', value: Boolean(profile.newAccountExperience) ? '有' : '无' },
|
||||
{ title: '直播过的品类', value: profile.workedSecCategoryStr || DEFAULT_TEXT },
|
||||
{ title: '最高GMV', value: profile.maxGmv ? `${profile.maxGmv / 10000}万` : DEFAULT_TEXT },
|
||||
{ title: '最高在线人数', value: profile.maxOnline || DEFAULT_TEXT },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: ProfileTitleMap[ProfileGroupType.Advantages],
|
||||
type: ProfileGroupType.Advantages,
|
||||
items: [{ title: '自身优势', value: profile.advantages || DEFAULT_TEXT, fullLine: true }],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
export default function ProfileViewFragment(props: IProps) {
|
||||
const { profile, editable, onDev } = props;
|
||||
const [coverIndex, setCoverIndex] = useState(0);
|
||||
const dataGroup = getDataGroup(profile);
|
||||
const videos = sortVideos(profile?.materialVideoInfoList || []);
|
||||
|
||||
|
||||
const handleClickVideo = useCallback(
|
||||
(index: number) => {
|
||||
log('handleClickVideo', index);
|
||||
|
||||
if (isDesktop) {
|
||||
navigateTo(PageUrl.MaterialWebview, {
|
||||
source: encodeURIComponent(videos[index].url)
|
||||
})
|
||||
} else {
|
||||
Taro.previewMedia({
|
||||
sources: videos.map(video => ({ url: video.url, type: video.type })),
|
||||
current: index,
|
||||
});
|
||||
}
|
||||
},
|
||||
[videos]
|
||||
);
|
||||
|
||||
const handleEditVideo = useCallback(() => {
|
||||
log('handleEditBasic');
|
||||
navigateTo(PageUrl.MaterialUploadVideo, { source: OpenSource.UserPage });
|
||||
}, []);
|
||||
|
||||
const handleEditBasic = useCallback(() => {
|
||||
log('handleEditBasic');
|
||||
navigateTo(PageUrl.MaterialEditProfile, { type: ProfileGroupType.Basic });
|
||||
}, []);
|
||||
|
||||
const handleEditGroupItem = useCallback((groupType: ProfileGroupType) => {
|
||||
log('handleEditGroupItem', groupType);
|
||||
navigateTo(PageUrl.MaterialEditProfile, { type: groupType });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__header`}>
|
||||
<Swiper className={`${PREFIX}__header__swiper`} onChange={setCoverIndex} stopPropagation={false} lazyRender>
|
||||
{videos.map((cover, index) => (
|
||||
<Swiper.Item key={cover.coverUrl}>
|
||||
<div className={`${PREFIX}__header__swiper-item`}>
|
||||
<Image
|
||||
mode="aspectFill"
|
||||
src={cover.coverUrl}
|
||||
className={`${PREFIX}__header__cover`}
|
||||
onClick={() => handleClickVideo(index)}
|
||||
/>
|
||||
{cover.type === 'video' && (
|
||||
<Image
|
||||
className={`${PREFIX}__header__cover-preview`}
|
||||
mode="aspectFit"
|
||||
src={require('@/statics/svg/preview_video.svg')}
|
||||
onClick={() => handleClickVideo(index)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Swiper.Item>
|
||||
))}
|
||||
</Swiper>
|
||||
{editable && (
|
||||
<div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
|
||||
编辑录屏
|
||||
</div>
|
||||
)}
|
||||
<div className={`${PREFIX}__header__banner`}>
|
||||
<div>{videos[coverIndex]?.title || ''}</div>
|
||||
<div
|
||||
className={`${PREFIX}__header__video-size`}
|
||||
>{`${coverIndex + 1}/${profile.materialVideoInfoList.length}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
<div className={`${PREFIX}__basic-info`}>
|
||||
<div className={`${PREFIX}__basic-info__name-container`}>
|
||||
<DevDiv className={`${PREFIX}__basic-info__name`} OnDev={onDev}>
|
||||
{profile.name}
|
||||
</DevDiv>
|
||||
{editable && (
|
||||
<div className={`${PREFIX}__basic-info__edit`} onClick={handleEditBasic}>
|
||||
编辑
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${PREFIX}__basic-info__content`}>{getBasicInfo(profile)}</div>
|
||||
<div className={`${PREFIX}__divider`} />
|
||||
</div>
|
||||
{dataGroup.map((data, index: number) => (
|
||||
<div className={`${PREFIX}__info-group`} key={data.type}>
|
||||
<div className={`${PREFIX}__info-group__header`}>
|
||||
<div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
|
||||
{editable && (
|
||||
<div className={`${PREFIX}__info-group__header__edit`} onClick={() => handleEditGroupItem(data.type)}>
|
||||
编辑
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${PREFIX}__info-group__items`}>
|
||||
{data.items.map(item => (
|
||||
<div
|
||||
key={String(item.value)}
|
||||
className={classNames(`${PREFIX}__info-group__item`, { 'full-line': item.fullLine })}
|
||||
>
|
||||
<div className={`${PREFIX}__info-group__item__title`}>{item.title}</div>
|
||||
<div className={`${PREFIX}__info-group__item__value`}>{item.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{index !== dataGroup.length - 1 && <div className={`${PREFIX}__divider`} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<SafeBottomPadding />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user