magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: login

Browse Source
This commit is contained in:
eleanor.mao 2025-05-22 18:08:31 +08:00
parent 8ebd3363b8
commit 6762973e14
9 changed files with 176 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/search-city/index.tsx
View File

@ -53,10 +53,17 @@ export interface SearchCityProps {
onSelectCity: (cityCode: string) => void; onSelectCity: (cityCode: string) => void;
currentCity?: string; currentCity?: string;
forGroup?: boolean; forGroup?: boolean;
banner?: string;
offset?: number; offset?: number;
} }
export default function SearchCity({ onSelectCity, currentCity = '', forGroup = false, offset = 0 }: SearchCityProps) { export default function SearchCity({
onSelectCity,
currentCity = '',
banner = '',
forGroup = false,
offset = 0,
}: SearchCityProps) {
const [winHeight, indexItemHeight] = useHeight(); const [winHeight, indexItemHeight] = useHeight();
const [touchAnchor, setTouchAnchor] = useState<string | undefined>(); const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
const [touchMoving, setTouchMoving] = useState(false); const [touchMoving, setTouchMoving] = useState(false);
@ -134,13 +141,13 @@ export default function SearchCity({ onSelectCity, currentCity = '', forGroup =
<div className={PREFIX}> <div className={PREFIX}>
<ScrollView scrollY style={{ height: winHeight - offset }} scrollIntoView={touchAnchor}> <ScrollView scrollY style={{ height: winHeight - offset }} scrollIntoView={touchAnchor}>
<div className={`${PREFIX}__search-wrapper ${forGroup ? 'group' : ''}`}> <div className={`${PREFIX}__search-wrapper ${forGroup ? 'group' : ''}`}>
{forGroup && ( {forGroup && banner ? (
<div className={`${PREFIX}__banner`}> <div className={`${PREFIX}__banner`}>
<div className="dash"></div> <div className="dash"></div>
<div className="text">点击城市名称，进本地通告群，免费招主播</div> <div className="text">{banner}</div>
<div className="dash"></div> <div className="dash"></div>
</div> </div>
)} ) : null}
<Search <Search
className={`${PREFIX}__search`} className={`${PREFIX}__search`}
placeholder="输入城市名称" placeholder="输入城市名称"
@ -211,7 +218,7 @@ export default function SearchCity({ onSelectCity, currentCity = '', forGroup =
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
onTouchCancel={handleTouchEnd} onTouchCancel={handleTouchEnd}
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE + offset }} style={{ top: indexItemHeight * OFFSET_INDEX_SIZE + (forGroup ? 72 : 0) }}
> >
{CITY_LIST.map(item => { {CITY_LIST.map(item => {
return ( return (

76
src/pages/group-v2/index.less
View File

@ -2,77 +2,7 @@
@import '@/styles/variables.less'; @import '@/styles/variables.less';
.group-v2-page { .group-v2-page {
padding: 24px; padding-bottom: 200px;
height: 100vh;
box-sizing: border-box;
&__header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 32px;
&__left-line,
&__right-line {
width: 88px;
height: 1px;
}
&__left-line {
background: linear-gradient(270deg, #CCCCCC -0.05%, rgba(204, 204, 204, 0) 99.95%);
}
&__right-line {
background: linear-gradient(90deg, #CCCCCC 0%, rgba(204, 204, 204, 0) 100%);
}
&__title {
font-size: 28px;
line-height: 40px;
font-weight: 400;
color: @blColorG2;
margin: 0 16px;
}
}
&__group-card {
.flex-row();
width: 100%;
padding: 32px;
background: #FFF;
border-radius: 16px;
margin-top: 24px;
box-sizing: border-box;
&:first-child {
margin-top: 0;
}
&__avatar {
width: 88px;
height: 88px;
border-radius: 6px;
border: 4px solid #D9D9D9;
}
&__title {
flex: 1;
font-size: 32px;
line-height: 40px;
font-weight: 500;
color: @blColor;
align-self: flex-start;
margin-left: 36px;
}
&__button {
.button(@width: 176px; @height: 56px; @fontSize: 28px; @fontWeight: 500);
}
}
&__bottom-padding {
width: 100%;
height: 24px;
}
} }

58
src/pages/group-v2/index.tsx
View File

@ -1,63 +1,37 @@
import { Image } from '@tarojs/components'; import { useShareAppMessage } from '@tarojs/taro';
import { NodesRef, useShareAppMessage } from '@tarojs/taro';
import { List } from '@taroify/core';
import { useCallback } from 'react'; import { useCallback } from 'react';
import HomePage from '@/components/home-page'; import HomePage from '@/components/home-page';
import LoginButton from '@/components/login-button'; import SearchCity from '@/components/search-city';
import { APP_TAB_BAR_ID } from '@/constants/app';
import { GROUPS } from '@/constants/group'; import { GROUPS } from '@/constants/group';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { GroupItem } from '@/types/group';
import { openCustomerServiceChat } from '@/utils/common'; import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { getCommonShareMessage } from '@/utils/share'; import { getCommonShareMessage } from '@/utils/share';
import './index.less'; import './index.less';
const PREFIX = 'group-v2-page'; const PREFIX = 'group-v2-page';
const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
const CALC_LIST_PROPS: IUseListHeightProps = {
selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
const [rect, diffRect] = rects;
return diffRect.top - rect.top;
},
};
export default function GroupV2() { export default function GroupV2() {
const listHeight = useListHeight(CALC_LIST_PROPS); const handleSelectCity = useCallback(cityCode => {
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
const handleClick = useCallback((group: GroupItem) => openCustomerServiceChat(group.serviceUrl), []); if (group) {
openCustomerServiceChat(group.serviceUrl);
}
}, []);
useShareAppMessage(() => getCommonShareMessage()); useShareAppMessage(() => getCommonShareMessage());
return ( return (
<HomePage> <HomePage>
<div className={PREFIX}> <div className={PREFIX}>
<div className={`${PREFIX}__header`}> <SearchCity
<div className={`${PREFIX}__header__left-line`} /> onSelectCity={handleSelectCity}
<div className={`${PREFIX}__header__title`}>进本地通告群，高薪通告早知道</div> currentCity={getCurrentCityCode()}
<div className={`${PREFIX}__header__right-line`} /> forGroup
</div> offset={72}
<div className={LIST_CONTAINER_CLASS}> banner="点击城市加入本地通告群，高薪工作早知道"
<List style={{ height: `${listHeight}px` }} disabled fixedHeight> />
{GROUPS.map(group => (
<div className={`${PREFIX}__group-card`} key={group.serviceUrl}>
<Image
mode="aspectFit"
className={`${PREFIX}__group-card__avatar`}
src="https://neighbourhood.cn/addGroup.jpg"
/>
<div className={`${PREFIX}__group-card__title`}>{group.title}</div>
<LoginButton className={`${PREFIX}__group-card__button`} onClick={() => handleClick(group)}>
我要进群
</LoginButton>
</div>
))}
<div className={`${PREFIX}__bottom-padding`} />
</List>
</div>
</div> </div>
</HomePage> </HomePage>
); );

1
src/pages/start/index.config.ts
View File

@ -1,3 +1,4 @@
export default definePageConfig({ export default definePageConfig({
navigationBarTitleText: '', navigationBarTitleText: '',
navigationStyle: 'custom',
}); });

70
src/pages/start/index.less
View File

@ -6,6 +6,12 @@
height: 100vh; height: 100vh;
.flex-column(); .flex-column();
&.color-bg {
background: linear-gradient(180deg, #efecff 0%, #f7f5ff 100%);
padding-top: 347px;
display: block;
}
&__app { &__app {
margin-top: 50%; margin-top: 50%;
} }
@ -22,4 +28,68 @@
color: @blColorG2; color: @blColorG2;
margin-top: 32px; margin-top: 32px;
} }
&__role-app {
padding: 64px;
}
&__greet {
font-size: 28px;
line-height: 56px;
color: @blColorG1;
margin-bottom: 14px;
}
&__title {
font-weight: 500;
font-size: 48px;
line-height: 57px;
color: @blColor;
margin-bottom: 75px;
}
&__card {
background: rgba(255, 255, 255, 0.5);
border: 2px solid #ffffff;
border-radius: 16px;
padding: 56px 40px 56px;
.flex-row();
& + & {
margin-top: 64px;
}
}
&__avatar {
width: 140px;
height: 140px;
border-radius: 50%;
}
&__content {
padding-left: 34px;
.flex-column();
flex: 1;
align-items: start;
.title {
font-weight: 600;
font-size: 40px;
line-height: 48px;
color: @blColor;
margin-bottom: 16px;
}
.desc {
font-size: 28px;
line-height: 40px;
color: @blColorG1;
}
}
&__arrow {
width: 24px;
height: 24px;
}
} }

67
src/pages/start/index.tsx
View File

@ -1,23 +1,76 @@
import { Image } from '@tarojs/components'; import { Image } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';
import { switchDefaultTab } from '@/utils/app'; import { useLoad } from '@tarojs/taro';
import Slogan from '@/components/slogan';
import { PageUrl, RoleType } from '@/constants/app';
import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
import store from '@/store';
import { changeHomePage } from '@/store/actions';
import { getRoleType, switchDefaultTab, switchRoleType } from '@/utils/app';
import { switchTab } from '@/utils/route';
import './index.less'; import './index.less';
const PREFIX = 'page-start'; const PREFIX = 'page-start';
export default function Start() { export default function Start() {
const mode = getRoleType();
useLoad(() => { useLoad(() => {
switchDefaultTab(); switchDefaultTab();
}); });
const handleAnchor = async () => {
await switchRoleType(RoleType.Anchor);
store.dispatch(changeHomePage(ANCHOR_TAB_LIST[0].type));
await switchTab(ANCHOR_TAB_LIST[0].pagePath as PageUrl);
};
const handleCompany = async () => {
await switchRoleType(RoleType.Company);
store.dispatch(changeHomePage(COMPANY_TAB_LIST[0].type));
await switchTab(COMPANY_TAB_LIST[0].pagePath as PageUrl);
};
return ( return (
<div className={PREFIX}> <div className={`${PREFIX} ${mode ? '' : 'color-bg'}`}>
<div className={`${PREFIX}__app`}> {mode && (
<Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} /> <div className={`${PREFIX}__app`}>
<div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div> <Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
</div> <div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
</div>
)}
{!mode && (
<>
<div className={`${PREFIX}__role-app`}>
<div className={`${PREFIX}__greet`}>Hi，很高兴见到你</div>
<div className={`${PREFIX}__title`}>请选择您的身份</div>
<div className={`${PREFIX}__card`} onClick={handleAnchor}>
<Image
className={`${PREFIX}__avatar anchor`}
src="https://publiccdn.neighbourhood.com.cn/img/avatar_f.png"
mode="aspectFill"
/>
<div className={`${PREFIX}__content`}>
<div className="title">我是主播</div>
<div className="desc">我要找工作</div>
</div>
<Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
</div>
<div className={`${PREFIX}__card`} onClick={handleCompany}>
<Image
className={`${PREFIX}__avatar company`}
src="https://publiccdn.neighbourhood.com.cn/img/avatar_m.png"
mode="aspectFill"
/>
<div className={`${PREFIX}__content`}>
<div className="title">我是企业</div>
<div className="desc">我要招主播</div>
</div>
<Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
</div>
</div>
<Slogan />
</>
)}
</div> </div>
); );
} }

8
src/pages/user-batch-publish/index.tsx
View File

@ -30,7 +30,13 @@ export default function BizService() {
<div className={PREFIX}> <div className={PREFIX}>
<Tabs className={`${PREFIX}__tabs`} defaultValue={0}> <Tabs className={`${PREFIX}__tabs`} defaultValue={0}>
<Tabs.TabPane value={0} title="主播群"> <Tabs.TabPane value={0} title="主播群">
<SearchCity onSelectCity={handleSelectCity} currentCity={getCurrentCityCode()} forGroup offset={72} /> <SearchCity
onSelectCity={handleSelectCity}
currentCity={getCurrentCityCode()}
forGroup
offset={72}
banner="点击城市名称，进本地通告群，免费招主播"
/>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane value={1} title="群代发"> <Tabs.TabPane value={1} title="群代发">
<UserBatchPublish /> <UserBatchPublish />

4
src/store/reducers/app.ts
View File

@ -18,10 +18,10 @@ const DEFAULT_LOCATION: LocationInfo = {
longitude: 113.280637, longitude: 113.280637,
}; };
const defaultAppMode = Taro.getStorageSync<RoleType>(CacheKey.APP_MODE_NEW) || RoleType.Anchor; const defaultAppMode = Taro.getStorageSync<RoleType>(CacheKey.APP_MODE_NEW);
const INIT_STATE: AppState = { const INIT_STATE: AppState = {
roleType: defaultAppMode, roleType: defaultAppMode,
homePageType: defaultAppMode === RoleType.Anchor ? PageType.JOB : PageType.Anchor, homePageType: defaultAppMode === RoleType.Company ? PageType.Anchor : PageType.JOB,
location: Taro.getStorageSync<LocationInfo>(CacheKey.CACHE_LOCATION_INFO) || DEFAULT_LOCATION, location: Taro.getStorageSync<LocationInfo>(CacheKey.CACHE_LOCATION_INFO) || DEFAULT_LOCATION,
}; };

3
src/utils/app.ts
View File

@ -25,6 +25,9 @@ export const isCompanyMode = () => getRoleType() === RoleType.Company;
export const switchDefaultTab = async () => { export const switchDefaultTab = async () => {
await sleep(1); await sleep(1);
const mode = getRoleType(); const mode = getRoleType();
if (!mode) {
return;
}
const tabList = mode === RoleType.Anchor ? ANCHOR_TAB_LIST : COMPANY_TAB_LIST; const tabList = mode === RoleType.Anchor ? ANCHOR_TAB_LIST : COMPANY_TAB_LIST;
const item = tabList[0]; const item = tabList[0];
store.dispatch(changeHomePage(item.type)); store.dispatch(changeHomePage(item.type));