新页面
This commit is contained in:
eleanor.mao
parent
f60a753e5a
commit
fc37a612cc
123
src/components/search-city/index.less
Normal file
123
src/components/search-city/index.less
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
@import '@/styles/variables.less';
|
||||||
|
|
||||||
|
.search-city {
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
&__position-title {
|
||||||
|
font-size: 24px;
|
||||||
|
color: @blColorG1;
|
||||||
|
padding: 0 24px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__position-city {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: @blColor;
|
||||||
|
padding: 0 24px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hot-city-title {
|
||||||
|
height: 48px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 24px;
|
||||||
|
color: #999;
|
||||||
|
background: #f2f5f7;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hot-city-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: space-between;
|
||||||
|
width: 630px;
|
||||||
|
padding: 12px 90px 26px 30px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hot-city-item {
|
||||||
|
width: 140px;
|
||||||
|
height: 58px;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 58px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 58px;
|
||||||
|
border: 2px solid @blColorG1;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-list {
|
||||||
|
width: 100%;
|
||||||
|
/* 兼容 iOS < 11.2 */
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
/* 兼容 iOS >= 11.2 */
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-fragment {}
|
||||||
|
|
||||||
|
&__indexes-anchor {
|
||||||
|
height: 48px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 24px;
|
||||||
|
color: @blColorG1;
|
||||||
|
background: #f2f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-cell {
|
||||||
|
position: relative;
|
||||||
|
font-size: 28px;
|
||||||
|
padding: 30px 24px;
|
||||||
|
color: @blColor;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-bottom: 1rpx solid #eaeef1;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-bar {
|
||||||
|
width: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
position: fixed;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-bar-item {
|
||||||
|
font-size: 22px;
|
||||||
|
color: @blColor;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indexes-index-alert {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 20;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-left: -80px;
|
||||||
|
margin-top: -80px;
|
||||||
|
border-radius: 80px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 160px;
|
||||||
|
font-size: 70px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
225
src/components/search-city/index.tsx
Normal file
225
src/components/search-city/index.tsx
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
||||||
|
import Taro from '@tarojs/taro';
|
||||||
|
|
||||||
|
import { Search } from '@taroify/core';
|
||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST, GROUP_CITY_INDEXES_LIST } from '@/constants/city';
|
||||||
|
import { logWithPrefix } from '@/utils/common';
|
||||||
|
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
interface Item {
|
||||||
|
cityCode: number | string;
|
||||||
|
cityName: string;
|
||||||
|
keyword: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PREFIX = 'search-city';
|
||||||
|
const HOT_CITY = [
|
||||||
|
{ cityCode: 110100, cityName: '北京' },
|
||||||
|
{ cityCode: 310100, cityName: '上海' },
|
||||||
|
{ cityCode: 440100, cityName: '广州' },
|
||||||
|
{ cityCode: 440300, cityName: '深圳' },
|
||||||
|
{ cityCode: 330100, cityName: '杭州' },
|
||||||
|
{ cityCode: 430100, cityName: '长沙' },
|
||||||
|
{ cityCode: 420100, cityName: '武汉' },
|
||||||
|
{ cityCode: 350200, cityName: '厦门' },
|
||||||
|
{ cityCode: 610100, cityName: '西安' },
|
||||||
|
{ cityCode: 410100, cityName: '郑州' },
|
||||||
|
{ cityCode: 510100, cityName: '成都' },
|
||||||
|
{ cityCode: 340100, cityName: '合肥' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const OFFSET_INDEX_SIZE = 2;
|
||||||
|
const log = logWithPrefix(PREFIX);
|
||||||
|
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||||
|
realtimeLogger.tag(PREFIX);
|
||||||
|
const useHeight = () => {
|
||||||
|
const [winHeight, setWinHeight] = useState(0);
|
||||||
|
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const windowInfo = Taro.getWindowInfo();
|
||||||
|
const windowHeight = windowInfo.windowHeight;
|
||||||
|
setWinHeight(windowHeight);
|
||||||
|
// 上下预留两个选项高度的空白
|
||||||
|
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return [winHeight, indexItemHeight];
|
||||||
|
};
|
||||||
|
export interface SearchCityProps {
|
||||||
|
onSelectCity: (cityCode: string) => void;
|
||||||
|
currentCity?: string;
|
||||||
|
forGroup?: boolean;
|
||||||
|
offset?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SearchCity({ onSelectCity, currentCity = '', forGroup = false, offset = 0 }: SearchCityProps) {
|
||||||
|
const [winHeight, indexItemHeight] = useHeight();
|
||||||
|
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
||||||
|
const [touchMoving, setTouchMoving] = useState(false);
|
||||||
|
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
||||||
|
const showSearchList = searchResult.length > 0;
|
||||||
|
const CITY_LIST = forGroup ? GROUP_CITY_INDEXES_LIST : CITY_INDEXES_LIST;
|
||||||
|
|
||||||
|
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||||
|
const value = event.detail.value;
|
||||||
|
log('handleSearchChange', value);
|
||||||
|
if (!value) {
|
||||||
|
setSearchResult([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const result: Item[] = [];
|
||||||
|
CITY_LIST.forEach(obj => {
|
||||||
|
obj.data.forEach(city => {
|
||||||
|
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
||||||
|
result.push({ ...city });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
setSearchResult(result);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSelectCity = useCallback(
|
||||||
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const cityCode = e.currentTarget.dataset.code;
|
||||||
|
onSelectCity(String(cityCode));
|
||||||
|
},
|
||||||
|
[onSelectCity]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTouchStart = useCallback(
|
||||||
|
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||||
|
const pageY = e.touches[0].pageY;
|
||||||
|
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||||
|
if (index < 0 || index >= CITY_LIST.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const item = CITY_LIST[index];
|
||||||
|
if (item) {
|
||||||
|
setTouchMoving(true);
|
||||||
|
setTouchAnchor(item.letter);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[indexItemHeight]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTouchMove = useCallback(
|
||||||
|
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||||
|
const pageY = e.touches[0].pageY;
|
||||||
|
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||||
|
if (index < 0 || index >= CITY_LIST.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const item = CITY_LIST[index];
|
||||||
|
item && setTouchAnchor(item.letter);
|
||||||
|
},
|
||||||
|
[indexItemHeight]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setTouchMoving(false);
|
||||||
|
log('touch end');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleClickAnchor = useCallback((anchor: string) => {
|
||||||
|
setTouchAnchor(anchor);
|
||||||
|
log('click anchor', anchor);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={PREFIX}>
|
||||||
|
<ScrollView scrollY style={{ height: winHeight - offset }} scrollIntoView={touchAnchor}>
|
||||||
|
<Search
|
||||||
|
className={`${PREFIX}__search`}
|
||||||
|
placeholder="输入城市名称"
|
||||||
|
shape="rounded"
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
/>
|
||||||
|
{showSearchList && (
|
||||||
|
<div className={`${PREFIX}__search-list`}>
|
||||||
|
{searchResult.map(city => (
|
||||||
|
<div
|
||||||
|
key={city.cityCode}
|
||||||
|
className={`${PREFIX}__indexes-cell`}
|
||||||
|
data-code={city.cityCode}
|
||||||
|
onClick={handleSelectCity}
|
||||||
|
>
|
||||||
|
{city.cityName}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!showSearchList && (
|
||||||
|
<div>
|
||||||
|
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
||||||
|
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
||||||
|
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
||||||
|
<div className={`${PREFIX}__hot-city-container`}>
|
||||||
|
{HOT_CITY.map(city => (
|
||||||
|
<div
|
||||||
|
key={city.cityCode}
|
||||||
|
className={`${PREFIX}__hot-city-item`}
|
||||||
|
data-code={city.cityCode}
|
||||||
|
onClick={handleSelectCity}
|
||||||
|
>
|
||||||
|
{city.cityName}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className={`${PREFIX}__indexes-list`}>
|
||||||
|
{CITY_LIST.map(item => {
|
||||||
|
return (
|
||||||
|
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
||||||
|
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
||||||
|
{item.letter}
|
||||||
|
</div>
|
||||||
|
{item.data.map(city => (
|
||||||
|
<div
|
||||||
|
key={city.cityCode}
|
||||||
|
className={`${PREFIX}__indexes-cell`}
|
||||||
|
data-code={city.cityCode}
|
||||||
|
onClick={handleSelectCity}
|
||||||
|
>
|
||||||
|
{city.cityName}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
<div>
|
||||||
|
{!showSearchList && (
|
||||||
|
<div
|
||||||
|
className={`${PREFIX}__indexes-bar`}
|
||||||
|
onTouchStart={handleTouchStart}
|
||||||
|
onTouchMove={handleTouchMove}
|
||||||
|
onTouchEnd={handleTouchEnd}
|
||||||
|
onTouchCancel={handleTouchEnd}
|
||||||
|
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
|
||||||
|
>
|
||||||
|
{CITY_LIST.map(item => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.letter}
|
||||||
|
className={`${PREFIX}__indexes-bar-item`}
|
||||||
|
style={{ height: indexItemHeight }}
|
||||||
|
onClick={() => handleClickAnchor(item.letter)}
|
||||||
|
>
|
||||||
|
{item.letter}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -3,7 +3,6 @@
|
|||||||
|
|
||||||
.user-batch-publish {
|
.user-batch-publish {
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
padding-bottom: 200px;
|
|
||||||
|
|
||||||
&__header-image {
|
&__header-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -5859,3 +5859,151 @@ export const CITY_INDEXES_LIST = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const GROUP_CITY_INDEXES_LIST = [
|
||||||
|
{
|
||||||
|
letter: 'C',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '500100',
|
||||||
|
cityName: '重庆',
|
||||||
|
keyword: 'CHONGQING重庆',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cityCode: '510100',
|
||||||
|
cityName: '成都',
|
||||||
|
keyword: 'CHENGDOU成都',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'D',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '441900',
|
||||||
|
cityName: '东莞',
|
||||||
|
keyword: 'DONGGUAN东莞',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'F',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '440600',
|
||||||
|
cityName: '佛山',
|
||||||
|
keyword: 'FUSHAN佛山',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cityCode: '350100',
|
||||||
|
cityName: '福州',
|
||||||
|
keyword: 'FUZHOU福州',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'G',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '440100',
|
||||||
|
cityName: '广州',
|
||||||
|
keyword: 'GUANGZHOU广州',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'H',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '340100',
|
||||||
|
cityName: '合肥',
|
||||||
|
keyword: 'HEFEI合肥',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'N',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '320100',
|
||||||
|
cityName: '南京',
|
||||||
|
keyword: 'NANJING南京',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'Q',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '370200',
|
||||||
|
cityName: '青岛',
|
||||||
|
keyword: 'QINGDAO青岛',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'S',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '310100',
|
||||||
|
cityName: '上海',
|
||||||
|
keyword: 'SHANGHAI上海',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cityCode: '440300',
|
||||||
|
cityName: '深圳',
|
||||||
|
keyword: 'SHENZHEN深圳',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cityCode: '320500',
|
||||||
|
cityName: '苏州',
|
||||||
|
keyword: 'SUZHOU苏州',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cityCode: '330300',
|
||||||
|
cityName: '温州',
|
||||||
|
keyword: 'WENZHOU温州',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'T',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '120100',
|
||||||
|
cityName: '天津',
|
||||||
|
keyword: 'TIANJIN天津',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'W',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '420100',
|
||||||
|
cityName: '武汉',
|
||||||
|
keyword: 'WUHAN武汉',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'X',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '610100',
|
||||||
|
cityName: '西安',
|
||||||
|
keyword: 'XIAN西安',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
letter: 'Z',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
cityCode: '410100',
|
||||||
|
cityName: '郑州',
|
||||||
|
keyword: 'ZHENGZHOU郑州',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|||||||
@ -33,28 +33,28 @@ export const GROUP_STATUS_OPTIONS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const GROUPS: GroupItem[] = [
|
export const GROUPS: GroupItem[] = [
|
||||||
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
{ title: '【杭州】', cityCode: 330100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
||||||
{ title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
{ title: '【广州】', cityCode: 440100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
||||||
{ title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
{ title: '【深圳】', cityCode: 440300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
||||||
{ title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
{ title: '【北京】', cityCode: 110100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
||||||
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
{ title: '【上海】', cityCode: 310100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
||||||
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
{ title: '【郑州】', cityCode: 410100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||||
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
{ title: '【长沙】', cityCode: 430100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
||||||
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
{ title: '【成都】', cityCode: 510100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
||||||
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
{ title: '【重庆】', cityCode: 500100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
||||||
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
{ title: '【武汉】', cityCode: 420100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||||
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
{ title: '【厦门】', cityCode: 350200, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||||
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
{ title: '【西安】', cityCode: 610100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||||
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
{ title: '【合肥】', cityCode: 340100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||||
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
{ title: '【南京】', cityCode: 320100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
{ title: '【青岛】', cityCode: 370200, serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||||
{ title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
{ title: '【佛山】', cityCode: 440600, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
||||||
{ title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
{ title: '【东莞】', cityCode: 441900, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
||||||
{ title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
{ title: '【苏州】', cityCode: 320500, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
||||||
{ title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
{ title: '【福州】', cityCode: 350100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
||||||
{ title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
{ title: '【泉州】', cityCode: 350500, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
||||||
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
{ title: '【温州】', cityCode: 330300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
||||||
{ title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
{ title: '【天津】', cityCode: 120100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||||
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
{ title: '【昆明】', cityCode: 530100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||||
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
{ title: '【全国】', cityCode: 440300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||||
];
|
];
|
||||||
|
|||||||
@ -12,8 +12,8 @@ import { EmployType, EMPLOY_TYPE_TITLE_MAP, FULL_PRICE_OPTIONS, PART_PRICE_OPTIO
|
|||||||
import { SalaryRange } from '@/types/job';
|
import { SalaryRange } from '@/types/job';
|
||||||
import { MaterialProfile } from '@/types/material';
|
import { MaterialProfile } from '@/types/material';
|
||||||
import { logWithPrefix } from '@/utils/common';
|
import { logWithPrefix } from '@/utils/common';
|
||||||
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job'
|
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job';
|
||||||
import { getCurrentCity } from '@/utils/location';
|
import { getCurrentCityCode } from '@/utils/location';
|
||||||
import { navigateTo } from '@/utils/route';
|
import { navigateTo } from '@/utils/route';
|
||||||
|
|
||||||
import './index.less';
|
import './index.less';
|
||||||
@ -76,9 +76,9 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handleClickAddCity = useCallback(() => {
|
const handleClickAddCity = useCallback(() => {
|
||||||
const currentCity = getCurrentCity();
|
const currentCityCode = getCurrentCityCode();
|
||||||
realtimeLogger.info('handleClickAddCity', OpenSource.AddIndentCity);
|
realtimeLogger.info('handleClickAddCity', OpenSource.AddIndentCity);
|
||||||
navigateTo(PageUrl.CitySearchProfile, { city: currentCity, source: OpenSource.AddIndentCity });
|
navigateTo(PageUrl.CitySearchProfile, { city: currentCityCode, source: OpenSource.AddIndentCity });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSelectCity = useCallback(
|
const handleSelectCity = useCallback(
|
||||||
@ -98,10 +98,10 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
|||||||
const handleEmployTypeChange = useCallback((value: EmployType) => {
|
const handleEmployTypeChange = useCallback((value: EmployType) => {
|
||||||
setEmployType(value);
|
setEmployType(value);
|
||||||
if (value === EmployType.Full) {
|
if (value === EmployType.Full) {
|
||||||
setPartSalary({ minSalary: 0, maxSalary: 0 })
|
setPartSalary({ minSalary: 0, maxSalary: 0 });
|
||||||
}
|
}
|
||||||
if (value === EmployType.Part) {
|
if (value === EmployType.Part) {
|
||||||
setFullSalary({ minSalary: 0, maxSalary: 0 })
|
setFullSalary({ minSalary: 0, maxSalary: 0 });
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -173,24 +173,26 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
|||||||
<BlFormRadio name={EmployType.All} text={EMPLOY_TYPE_TITLE_MAP[EmployType.All]} value={employType} />
|
<BlFormRadio name={EmployType.All} text={EMPLOY_TYPE_TITLE_MAP[EmployType.All]} value={employType} />
|
||||||
</BlFormRadioGroup>
|
</BlFormRadioGroup>
|
||||||
</BlFormItem>
|
</BlFormItem>
|
||||||
{isFullTimePriceRequired(employType) &&
|
{isFullTimePriceRequired(employType) && (
|
||||||
(<BlFormItem title="期望全职薪资">
|
<BlFormItem title="期望全职薪资">
|
||||||
<BlFormSelect
|
<BlFormSelect
|
||||||
title="期望全职薪资"
|
title="期望全职薪资"
|
||||||
value={fullSalary}
|
value={fullSalary}
|
||||||
options={FULL_PRICE_OPTIONS}
|
options={FULL_PRICE_OPTIONS}
|
||||||
onSelect={handleSelectFullSalary}
|
onSelect={handleSelectFullSalary}
|
||||||
/>
|
/>
|
||||||
</BlFormItem>)}
|
</BlFormItem>
|
||||||
{isPartTimePriceRequired(employType) &&
|
)}
|
||||||
(<BlFormItem title="期望兼职薪资">
|
{isPartTimePriceRequired(employType) && (
|
||||||
|
<BlFormItem title="期望兼职薪资">
|
||||||
<BlFormSelect
|
<BlFormSelect
|
||||||
title="期望兼职薪资"
|
title="期望兼职薪资"
|
||||||
value={partSalary}
|
value={partSalary}
|
||||||
options={PART_PRICE_OPTIONS}
|
options={PART_PRICE_OPTIONS}
|
||||||
onSelect={handleSelectPartSalary}
|
onSelect={handleSelectPartSalary}
|
||||||
/>
|
/>
|
||||||
</BlFormItem>)}
|
</BlFormItem>
|
||||||
|
)}
|
||||||
<BlFormItem title="是否接受坐班">
|
<BlFormItem title="是否接受坐班">
|
||||||
<BlFormRadioGroup direction="horizontal" value={acceptWorkForSit} onChange={handleAcceptSittingChange}>
|
<BlFormRadioGroup direction="horizontal" value={acceptWorkForSit} onChange={handleAcceptSittingChange}>
|
||||||
<BlFormRadio name text="接受" value={acceptWorkForSit} />
|
<BlFormRadio name text="接受" value={acceptWorkForSit} />
|
||||||
|
|||||||
@ -48,7 +48,7 @@ const CompanyTabs: TabItemType[] = [
|
|||||||
{
|
{
|
||||||
type: PageType.BatchPublish,
|
type: PageType.BatchPublish,
|
||||||
pagePath: PageUrl.UserBatchPublish,
|
pagePath: PageUrl.UserBatchPublish,
|
||||||
text: '群代发',
|
text: '代招代发',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -1,123 +1,4 @@
|
|||||||
@import '@/styles/variables.less';
|
@import '@/styles/variables.less';
|
||||||
|
|
||||||
.search-city-profile {
|
.search-city-profile {
|
||||||
background: #FFF;
|
|
||||||
|
|
||||||
&__position-title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: @blColorG1;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__position-city {
|
|
||||||
font-size: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: @blColor;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-title {
|
|
||||||
height: 48px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 48px;
|
|
||||||
padding: 0 24px;
|
|
||||||
color: #999;
|
|
||||||
background: #f2f5f7;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: space-between;
|
|
||||||
width: 630px;
|
|
||||||
padding: 12px 90px 26px 30px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-item {
|
|
||||||
width: 140px;
|
|
||||||
height: 58px;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 58px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 58px;
|
|
||||||
border: 2px solid @blColorG1;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-list {
|
|
||||||
width: 100%;
|
|
||||||
/* 兼容 iOS < 11.2 */
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
/* 兼容 iOS >= 11.2 */
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-fragment {}
|
|
||||||
|
|
||||||
&__indexes-anchor {
|
|
||||||
height: 48px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 48px;
|
|
||||||
padding: 0 24px;
|
|
||||||
color: @blColorG1;
|
|
||||||
background: #f2f5f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-cell {
|
|
||||||
position: relative;
|
|
||||||
font-size: 28px;
|
|
||||||
padding: 30px 24px;
|
|
||||||
color: @blColor;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
border-bottom: 1rpx solid #eaeef1;
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-bar {
|
|
||||||
width: 44rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: fixed;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-bar-item {
|
|
||||||
font-size: 22px;
|
|
||||||
color: @blColor;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-index-alert {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 20;
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -80px;
|
|
||||||
margin-top: -80px;
|
|
||||||
border-radius: 80px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 160px;
|
|
||||||
font-size: 70px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,130 +1,29 @@
|
|||||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
|
||||||
import Taro, { useLoad } from '@tarojs/taro';
|
import Taro, { useLoad } from '@tarojs/taro';
|
||||||
|
|
||||||
import { Search } from '@taroify/core';
|
import { useCallback, useRef, useState } from 'react';
|
||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
|
|
||||||
|
import SearchCity from '@/components/search-city';
|
||||||
import { EventName, OpenSource } from '@/constants/app';
|
import { EventName, OpenSource } from '@/constants/app';
|
||||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST } from '@/constants/city';
|
|
||||||
import { logWithPrefix } from '@/utils/common';
|
import { logWithPrefix } from '@/utils/common';
|
||||||
import { getPageQuery, navigateBack } from '@/utils/route';
|
import { getPageQuery, navigateBack } from '@/utils/route';
|
||||||
|
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
interface Item {
|
|
||||||
cityCode: number | string;
|
|
||||||
cityName: string;
|
|
||||||
keyword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PREFIX = 'search-city-profile';
|
const PREFIX = 'search-city-profile';
|
||||||
const HOT_CITY = [
|
|
||||||
{ cityCode: 110100, cityName: '北京' },
|
|
||||||
{ cityCode: 310100, cityName: '上海' },
|
|
||||||
{ cityCode: 440100, cityName: '广州' },
|
|
||||||
{ cityCode: 440300, cityName: '深圳' },
|
|
||||||
{ cityCode: 330100, cityName: '杭州' },
|
|
||||||
{ cityCode: 430100, cityName: '长沙' },
|
|
||||||
{ cityCode: 420100, cityName: '武汉' },
|
|
||||||
{ cityCode: 350200, cityName: '厦门' },
|
|
||||||
{ cityCode: 610100, cityName: '西安' },
|
|
||||||
{ cityCode: 410100, cityName: '郑州' },
|
|
||||||
{ cityCode: 510100, cityName: '成都' },
|
|
||||||
{ cityCode: 340100, cityName: '合肥' },
|
|
||||||
];
|
|
||||||
const OFFSET_INDEX_SIZE = 2;
|
|
||||||
const log = logWithPrefix(PREFIX);
|
const log = logWithPrefix(PREFIX);
|
||||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||||
realtimeLogger.tag(PREFIX);
|
realtimeLogger.tag(PREFIX);
|
||||||
const useHeight = () => {
|
|
||||||
const [winHeight, setWinHeight] = useState(0);
|
|
||||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
export default function SearchCityProfilePage() {
|
||||||
const windowInfo = Taro.getWindowInfo();
|
|
||||||
const windowHeight = windowInfo.windowHeight;
|
|
||||||
setWinHeight(windowHeight);
|
|
||||||
// 上下预留两个选项高度的空白
|
|
||||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return [winHeight, indexItemHeight];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function SearchCity() {
|
|
||||||
const [winHeight, indexItemHeight] = useHeight();
|
|
||||||
const [currentCity, setCurrentCity] = useState<string>('');
|
const [currentCity, setCurrentCity] = useState<string>('');
|
||||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
|
||||||
const [touchMoving, setTouchMoving] = useState(false);
|
|
||||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
|
||||||
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
||||||
const showSearchList = searchResult.length > 0;
|
|
||||||
|
|
||||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
const handleSelectCity = useCallback(cityCode => {
|
||||||
const value = event.detail.value;
|
|
||||||
log('handleSearchChange', value);
|
|
||||||
if (!value) {
|
|
||||||
setSearchResult([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const result: Item[] = [];
|
|
||||||
CITY_INDEXES_LIST.forEach(obj => {
|
|
||||||
obj.data.forEach(city => {
|
|
||||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
|
||||||
result.push({ ...city });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
setSearchResult(result);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSelectCity = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
const cityCode = e.currentTarget.dataset.code;
|
|
||||||
realtimeLogger.info('handleSelectCity openSource', openSourceRef.current);
|
realtimeLogger.info('handleSelectCity openSource', openSourceRef.current);
|
||||||
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
||||||
navigateBack(1);
|
navigateBack(1);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleTouchStart = useCallback(
|
|
||||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
const pageY = e.touches[0].pageY;
|
|
||||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
|
||||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const item = CITY_INDEXES_LIST[index];
|
|
||||||
if (item) {
|
|
||||||
setTouchMoving(true);
|
|
||||||
setTouchAnchor(item.letter);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[indexItemHeight]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleTouchMove = useCallback(
|
|
||||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
const pageY = e.touches[0].pageY;
|
|
||||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
|
||||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const item = CITY_INDEXES_LIST[index];
|
|
||||||
item && setTouchAnchor(item.letter);
|
|
||||||
},
|
|
||||||
[indexItemHeight]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setTouchMoving(false);
|
|
||||||
log('touch end');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleClickAnchor = useCallback((anchor: string) => {
|
|
||||||
setTouchAnchor(anchor);
|
|
||||||
log('click anchor', anchor);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useLoad(() => {
|
useLoad(() => {
|
||||||
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
||||||
log('query', query);
|
log('query', query);
|
||||||
@ -139,94 +38,7 @@ export default function SearchCity() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={PREFIX}>
|
<div className={PREFIX}>
|
||||||
<ScrollView scrollY style={{ height: winHeight }} scrollIntoView={touchAnchor}>
|
<SearchCity onSelectCity={handleSelectCity} currentCity={currentCity} />
|
||||||
<Search
|
|
||||||
className={`${PREFIX}__search`}
|
|
||||||
placeholder="输入城市名称"
|
|
||||||
shape="rounded"
|
|
||||||
onChange={handleSearchChange}
|
|
||||||
/>
|
|
||||||
{showSearchList && (
|
|
||||||
<div className={`${PREFIX}__search-list`}>
|
|
||||||
{searchResult.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__indexes-cell`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!showSearchList && (
|
|
||||||
<div>
|
|
||||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
|
||||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
|
||||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
|
||||||
<div className={`${PREFIX}__hot-city-container`}>
|
|
||||||
{HOT_CITY.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__hot-city-item`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className={`${PREFIX}__indexes-list`}>
|
|
||||||
{CITY_INDEXES_LIST.map(item => {
|
|
||||||
return (
|
|
||||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
|
||||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
|
||||||
{item.letter}
|
|
||||||
</div>
|
|
||||||
{item.data.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__indexes-cell`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
<div>
|
|
||||||
{!showSearchList && (
|
|
||||||
<div
|
|
||||||
className={`${PREFIX}__indexes-bar`}
|
|
||||||
onTouchStart={handleTouchStart}
|
|
||||||
onTouchMove={handleTouchMove}
|
|
||||||
onTouchEnd={handleTouchEnd}
|
|
||||||
onTouchCancel={handleTouchEnd}
|
|
||||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
|
|
||||||
>
|
|
||||||
{CITY_INDEXES_LIST.map(item => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.letter}
|
|
||||||
className={`${PREFIX}__indexes-bar-item`}
|
|
||||||
style={{ height: indexItemHeight }}
|
|
||||||
onClick={() => handleClickAnchor(item.letter)}
|
|
||||||
>
|
|
||||||
{item.letter}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,123 +1,4 @@
|
|||||||
@import '@/styles/variables.less';
|
@import '@/styles/variables.less';
|
||||||
|
|
||||||
.search-city {
|
.page.search-city {
|
||||||
background: #FFF;
|
|
||||||
|
|
||||||
&__position-title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: @blColorG1;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__position-city {
|
|
||||||
font-size: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: @blColor;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-title {
|
|
||||||
height: 48px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 48px;
|
|
||||||
padding: 0 24px;
|
|
||||||
color: #999;
|
|
||||||
background: #f2f5f7;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: space-between;
|
|
||||||
width: 630px;
|
|
||||||
padding: 12px 90px 26px 30px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hot-city-item {
|
|
||||||
width: 140px;
|
|
||||||
height: 58px;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 58px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 58px;
|
|
||||||
border: 2px solid @blColorG1;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-list {
|
|
||||||
width: 100%;
|
|
||||||
/* 兼容 iOS < 11.2 */
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
/* 兼容 iOS >= 11.2 */
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-fragment {}
|
|
||||||
|
|
||||||
&__indexes-anchor {
|
|
||||||
height: 48px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 48px;
|
|
||||||
padding: 0 24px;
|
|
||||||
color: @blColorG1;
|
|
||||||
background: #f2f5f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-cell {
|
|
||||||
position: relative;
|
|
||||||
font-size: 28px;
|
|
||||||
padding: 30px 24px;
|
|
||||||
color: @blColor;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
border-bottom: 1rpx solid #eaeef1;
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-bar {
|
|
||||||
width: 44rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: fixed;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-bar-item {
|
|
||||||
font-size: 22px;
|
|
||||||
color: @blColor;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indexes-index-alert {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 20;
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -80px;
|
|
||||||
margin-top: -80px;
|
|
||||||
border-radius: 80px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 160px;
|
|
||||||
font-size: 70px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -1,129 +1,29 @@
|
|||||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
|
||||||
import Taro, { useLoad } from '@tarojs/taro';
|
import Taro, { useLoad } from '@tarojs/taro';
|
||||||
|
|
||||||
import { Search } from '@taroify/core';
|
import { useCallback, useRef, useState } from 'react';
|
||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
|
|
||||||
|
import SearchCity from '@/components/search-city';
|
||||||
import { EventName, OpenSource } from '@/constants/app';
|
import { EventName, OpenSource } from '@/constants/app';
|
||||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST } from '@/constants/city';
|
|
||||||
import { logWithPrefix } from '@/utils/common';
|
import { logWithPrefix } from '@/utils/common';
|
||||||
import { getPageQuery, navigateBack } from '@/utils/route';
|
import { getPageQuery, navigateBack } from '@/utils/route';
|
||||||
|
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
interface Item {
|
const PREFIX = 'page-search-city';
|
||||||
cityCode: number | string;
|
|
||||||
cityName: string;
|
|
||||||
keyword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PREFIX = 'search-city';
|
|
||||||
const HOT_CITY = [
|
|
||||||
{ cityCode: 110100, cityName: '北京' },
|
|
||||||
{ cityCode: 310100, cityName: '上海' },
|
|
||||||
{ cityCode: 440100, cityName: '广州' },
|
|
||||||
{ cityCode: 440300, cityName: '深圳' },
|
|
||||||
{ cityCode: 330100, cityName: '杭州' },
|
|
||||||
{ cityCode: 430100, cityName: '长沙' },
|
|
||||||
{ cityCode: 420100, cityName: '武汉' },
|
|
||||||
{ cityCode: 350200, cityName: '厦门' },
|
|
||||||
{ cityCode: 610100, cityName: '西安' },
|
|
||||||
{ cityCode: 410100, cityName: '郑州' },
|
|
||||||
{ cityCode: 510100, cityName: '成都' },
|
|
||||||
{ cityCode: 340100, cityName: '合肥' },
|
|
||||||
];
|
|
||||||
const OFFSET_INDEX_SIZE = 2;
|
|
||||||
const log = logWithPrefix(PREFIX);
|
const log = logWithPrefix(PREFIX);
|
||||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||||
realtimeLogger.tag(PREFIX);
|
realtimeLogger.tag(PREFIX);
|
||||||
const useHeight = () => {
|
|
||||||
const [winHeight, setWinHeight] = useState(0);
|
|
||||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
export default function SearchCityPage() {
|
||||||
const windowInfo = Taro.getWindowInfo();
|
|
||||||
const windowHeight = windowInfo.windowHeight;
|
|
||||||
setWinHeight(windowHeight);
|
|
||||||
// 上下预留两个选项高度的空白
|
|
||||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return [winHeight, indexItemHeight];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function SearchCity() {
|
|
||||||
const [winHeight, indexItemHeight] = useHeight();
|
|
||||||
const [currentCity, setCurrentCity] = useState<string>('');
|
const [currentCity, setCurrentCity] = useState<string>('');
|
||||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
|
||||||
const [touchMoving, setTouchMoving] = useState(false);
|
|
||||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
|
||||||
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
||||||
const showSearchList = searchResult.length > 0;
|
|
||||||
|
|
||||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
const handleSelectCity = useCallback(cityCode => {
|
||||||
const value = event.detail.value;
|
|
||||||
log('handleSearchChange', value);
|
|
||||||
if (!value) {
|
|
||||||
setSearchResult([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const result: Item[] = [];
|
|
||||||
CITY_INDEXES_LIST.forEach(obj => {
|
|
||||||
obj.data.forEach(city => {
|
|
||||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
|
||||||
result.push({ ...city });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
setSearchResult(result);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSelectCity = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
const cityCode = e.currentTarget.dataset.code;
|
|
||||||
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
||||||
navigateBack(1);
|
navigateBack(1);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleTouchStart = useCallback(
|
|
||||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
const pageY = e.touches[0].pageY;
|
|
||||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
|
||||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const item = CITY_INDEXES_LIST[index];
|
|
||||||
if (item) {
|
|
||||||
setTouchMoving(true);
|
|
||||||
setTouchAnchor(item.letter);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[indexItemHeight]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleTouchMove = useCallback(
|
|
||||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
const pageY = e.touches[0].pageY;
|
|
||||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
|
||||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const item = CITY_INDEXES_LIST[index];
|
|
||||||
item && setTouchAnchor(item.letter);
|
|
||||||
},
|
|
||||||
[indexItemHeight]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setTouchMoving(false);
|
|
||||||
log('touch end');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleClickAnchor = useCallback((anchor: string) => {
|
|
||||||
setTouchAnchor(anchor);
|
|
||||||
log('click anchor', anchor);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useLoad(() => {
|
useLoad(() => {
|
||||||
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
||||||
log('query', query);
|
log('query', query);
|
||||||
@ -138,94 +38,7 @@ export default function SearchCity() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={PREFIX}>
|
<div className={PREFIX}>
|
||||||
<ScrollView scrollY style={{ height: winHeight }} scrollIntoView={touchAnchor}>
|
<SearchCity onSelectCity={handleSelectCity} currentCity={currentCity} />
|
||||||
<Search
|
|
||||||
className={`${PREFIX}__search`}
|
|
||||||
placeholder="输入城市名称"
|
|
||||||
shape="rounded"
|
|
||||||
onChange={handleSearchChange}
|
|
||||||
/>
|
|
||||||
{showSearchList && (
|
|
||||||
<div className={`${PREFIX}__search-list`}>
|
|
||||||
{searchResult.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__indexes-cell`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!showSearchList && (
|
|
||||||
<div>
|
|
||||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
|
||||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
|
||||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
|
||||||
<div className={`${PREFIX}__hot-city-container`}>
|
|
||||||
{HOT_CITY.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__hot-city-item`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className={`${PREFIX}__indexes-list`}>
|
|
||||||
{CITY_INDEXES_LIST.map(item => {
|
|
||||||
return (
|
|
||||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
|
||||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
|
||||||
{item.letter}
|
|
||||||
</div>
|
|
||||||
{item.data.map(city => (
|
|
||||||
<div
|
|
||||||
key={city.cityCode}
|
|
||||||
className={`${PREFIX}__indexes-cell`}
|
|
||||||
data-code={city.cityCode}
|
|
||||||
onClick={handleSelectCity}
|
|
||||||
>
|
|
||||||
{city.cityName}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
<div>
|
|
||||||
{!showSearchList && (
|
|
||||||
<div
|
|
||||||
className={`${PREFIX}__indexes-bar`}
|
|
||||||
onTouchStart={handleTouchStart}
|
|
||||||
onTouchMove={handleTouchMove}
|
|
||||||
onTouchEnd={handleTouchEnd}
|
|
||||||
onTouchCancel={handleTouchEnd}
|
|
||||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
|
|
||||||
>
|
|
||||||
{CITY_INDEXES_LIST.map(item => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.letter}
|
|
||||||
className={`${PREFIX}__indexes-bar-item`}
|
|
||||||
style={{ height: indexItemHeight }}
|
|
||||||
onClick={() => handleClickAnchor(item.letter)}
|
|
||||||
>
|
|
||||||
{item.letter}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,6 +2,8 @@
|
|||||||
@import '@/styles/variables.less';
|
@import '@/styles/variables.less';
|
||||||
|
|
||||||
.page-biz-service {
|
.page-biz-service {
|
||||||
|
padding-bottom: 200px;
|
||||||
|
|
||||||
&__tabs {
|
&__tabs {
|
||||||
--tabs-active-color: @blHighlightColor;
|
--tabs-active-color: @blHighlightColor;
|
||||||
--tabs-nav-background-color: #fff;
|
--tabs-nav-background-color: #fff;
|
||||||
@ -48,5 +50,15 @@
|
|||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-btn-group {
|
||||||
|
.flex-row();
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-btn {
|
||||||
|
.button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,37 @@
|
|||||||
import { Tabs } from '@taroify/core';
|
import { useShareAppMessage } from '@tarojs/taro';
|
||||||
|
import { Button, Tabs } from '@taroify/core';
|
||||||
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
import HomePage from '@/components/home-page';
|
import HomePage from '@/components/home-page';
|
||||||
|
import SearchCity from '@/components/search-city';
|
||||||
import UserBatchPublish from '@/components/user-batch-publish';
|
import UserBatchPublish from '@/components/user-batch-publish';
|
||||||
import { logWithPrefix } from '@/utils/common';
|
import { GROUPS } from '@/constants/group';
|
||||||
|
import { openCustomerServiceChat } from '@/utils/common';
|
||||||
|
import { getCurrentCityCode } from '@/utils/location';
|
||||||
|
import { getCommonShareMessage } from '@/utils/share';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
const PREFIX = 'page-biz-service';
|
const PREFIX = 'page-biz-service';
|
||||||
const log = logWithPrefix(PREFIX);
|
|
||||||
|
|
||||||
export default function BizService() {
|
export default function BizService() {
|
||||||
|
const handleOpenService = useCallback(() => {
|
||||||
|
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
|
||||||
|
}, []);
|
||||||
|
const handleSelectCity = useCallback(cityCode => {
|
||||||
|
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
|
||||||
|
if (group) {
|
||||||
|
openCustomerServiceChat(group.serviceUrl);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
useShareAppMessage(() => getCommonShareMessage());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HomePage>
|
<HomePage>
|
||||||
<div className={PREFIX}>
|
<div className={PREFIX}>
|
||||||
<Tabs className={`${PREFIX}__tabs`} defaultValue={1}>
|
<Tabs className={`${PREFIX}__tabs`} defaultValue={1}>
|
||||||
<Tabs.TabPane value={0} title="主播群"></Tabs.TabPane>
|
<Tabs.TabPane value={0} title="主播群">
|
||||||
|
<SearchCity onSelectCity={handleSelectCity} currentCity={getCurrentCityCode()} forGroup offset={72} />
|
||||||
|
</Tabs.TabPane>
|
||||||
<Tabs.TabPane value={1} title="群代发">
|
<Tabs.TabPane value={1} title="群代发">
|
||||||
<UserBatchPublish />
|
<UserBatchPublish />
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
@ -35,6 +52,11 @@ export default function BizService() {
|
|||||||
<div className={`${PREFIX}__recruitment-body`}>
|
<div className={`${PREFIX}__recruitment-body`}>
|
||||||
我们在每个城市均有数量众多的主播群，少则几十个，多则上千个，有各种类型和层次的带货主播资源
|
我们在每个城市均有数量众多的主播群，少则几十个，多则上千个，有各种类型和层次的带货主播资源
|
||||||
</div>
|
</div>
|
||||||
|
<div className={`${PREFIX}__recruitment-btn-group`}>
|
||||||
|
<Button className={`${PREFIX}__recruitment-btn`} onClick={handleOpenService}>
|
||||||
|
点此咨询
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
|
|||||||
@ -51,5 +51,6 @@ export interface GetGroupDetailsRequest {
|
|||||||
}
|
}
|
||||||
export interface GroupItem {
|
export interface GroupItem {
|
||||||
title: string;
|
title: string;
|
||||||
|
cityCode: number;
|
||||||
serviceUrl: string;
|
serviceUrl: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -33,9 +33,12 @@ export const calcDistance = (distance: number, fractionDigits = 2) => {
|
|||||||
}
|
}
|
||||||
return '999km';
|
return '999km';
|
||||||
};
|
};
|
||||||
|
export const getCurrentCityCode = () => {
|
||||||
|
return selectLocation(store.getState()).cityCode;
|
||||||
|
};
|
||||||
|
|
||||||
export const getCurrentCity = () => {
|
export const getCurrentCity = () => {
|
||||||
const cityCode = selectLocation(store.getState()).cityCode;
|
const cityCode = getCurrentCityCode();
|
||||||
return CITY_CODE_TO_NAME_MAP.get(cityCode) || '';
|
return CITY_CODE_TO_NAME_MAP.get(cityCode) || '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user