Skip to content

Commit 8e91e2e

Browse files
xiaoyatongxiaoyatong
committed
feat: 热门城市反选
1 parent 0fdc603 commit 8e91e2e

File tree

6 files changed

+300
-44
lines changed

6 files changed

+300
-44
lines changed

‎src/packages/address/demos/h5/demo11.tsx‎

Lines changed: 104 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import { Address, Cell } from '@nutui/nutui-react'
33

44
const Demo1 = () => {
55
const [text, setText] = useState<string>('选择地址')
6-
const [hotList, setHotList] = useState([
7-
{ id: '1', name: '北京' },
8-
{ id: '2', name: '上海' },
9-
{ id: '1601', name: '广州' },
10-
{ id: '1607', name: '深圳' },
11-
{ id: '1213', name: '杭州' },
12-
{ id: '904', name: '南京' },
13-
{ id: '988', name: '苏州' },
14-
{ id: '3', name: '天津' },
15-
{ id: '3', name: '天津' },
16-
{ id: '3', name: '天津' },
6+
const [hotList] = useState([
7+
{ name: '北京' },
8+
{ name: '上海' },
9+
{ name: '广州' },
10+
{ name: '深圳' },
11+
{ name: '杭州' },
12+
{ name: '南京' },
13+
{ name: '苏州' },
14+
{ name: '天津' },
15+
{ name: '武汉' },
16+
{ name: '长沙' },
1717
])
1818
const [options, setOptions] = useState<any>([])
1919
useEffect(() => {
@@ -132,6 +132,62 @@ const Demo1 = () => {
132132
value: '广东',
133133
text: '广东',
134134
wordCode: 'G',
135+
children: [
136+
{
137+
value: '广州市',
138+
text: '广州市',
139+
wordCode: 'G',
140+
children: [
141+
{
142+
value: '白云区',
143+
text: '白云区',
144+
wordCode: 'B',
145+
},
146+
{
147+
value: '黄埔区',
148+
text: '黄埔区',
149+
wordCode: 'H',
150+
},
151+
{
152+
value: '花都区',
153+
text: '花都区',
154+
wordCode: 'H',
155+
},
156+
{
157+
value: '海珠区',
158+
text: '海珠区',
159+
wordCode: 'H',
160+
},
161+
],
162+
},
163+
{
164+
value: '深圳市',
165+
text: '深圳市',
166+
wordCode: 'S',
167+
children: [
168+
{
169+
value: '宝安区',
170+
text: '宝安区',
171+
wordCode: 'B',
172+
},
173+
{
174+
value: '罗湖区',
175+
text: '罗湖区',
176+
wordCode: 'L',
177+
},
178+
{
179+
value: '龙岗区',
180+
text: '龙岗区',
181+
wordCode: 'L',
182+
},
183+
{
184+
value: '龙华区',
185+
text: '龙华区',
186+
wordCode: 'L',
187+
},
188+
],
189+
},
190+
],
135191
},
136192
{
137193
value: '广西',
@@ -167,6 +223,43 @@ const Demo1 = () => {
167223
wordCode: 'H',
168224
disabled: true,
169225
},
226+
{
227+
value: '上海',
228+
text: '上海',
229+
wordCode: 'S',
230+
children: [
231+
{
232+
value: '宝山区',
233+
text: '宝山区',
234+
wordCode: 'B',
235+
},
236+
{
237+
value: '黄埔区',
238+
text: '黄埔区',
239+
wordCode: 'H',
240+
},
241+
{
242+
value: '虹口区',
243+
text: '虹口区',
244+
wordCode: 'H',
245+
},
246+
{
247+
value: '嘉定区',
248+
text: '嘉定区',
249+
wordCode: 'J',
250+
},
251+
{
252+
value: '静安区',
253+
text: '静安区',
254+
wordCode: 'J',
255+
},
256+
{
257+
value: '金山区',
258+
text: '金山区',
259+
wordCode: 'J',
260+
},
261+
],
262+
},
170263
{
171264
value: '浙江',
172265
text: '浙江',

‎src/packages/address/demos/taro/demo11.tsx‎

Lines changed: 105 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import { Address, Cell } from '@nutui/nutui-react-taro'
33

44
const Demo1 = () => {
55
const [text, setText] = useState<string>('选择地址')
6-
const [hotList, setHotList] = useState([
7-
{ id: '1', name: '北京' },
8-
{ id: '2', name: '上海' },
9-
{ id: '1601', name: '广州' },
10-
{ id: '1607', name: '深圳' },
11-
{ id: '1213', name: '杭州' },
12-
{ id: '904', name: '南京' },
13-
{ id: '988', name: '苏州' },
14-
{ id: '3', name: '天津' },
15-
{ id: '3', name: '天津' },
16-
{ id: '3', name: '天津' },
6+
const [hotList] = useState([
7+
{ name: '北京' },
8+
{ name: '上海' },
9+
{ name: '广州' },
10+
{ name: '深圳' },
11+
{ name: '杭州' },
12+
{ name: '南京' },
13+
{ name: '苏州' },
14+
{ name: '天津' },
15+
{ name: '武汉' },
16+
{ name: '长沙' },
1717
])
1818
const [options, setOptions] = useState<any>([])
1919
useEffect(() => {
@@ -132,6 +132,62 @@ const Demo1 = () => {
132132
value: '广东',
133133
text: '广东',
134134
wordCode: 'G',
135+
children: [
136+
{
137+
value: '广州市',
138+
text: '广州市',
139+
wordCode: 'G',
140+
children: [
141+
{
142+
value: '白云区',
143+
text: '白云区',
144+
wordCode: 'B',
145+
},
146+
{
147+
value: '黄埔区',
148+
text: '黄埔区',
149+
wordCode: 'H',
150+
},
151+
{
152+
value: '花都区',
153+
text: '花都区',
154+
wordCode: 'H',
155+
},
156+
{
157+
value: '海珠区',
158+
text: '海珠区',
159+
wordCode: 'H',
160+
},
161+
],
162+
},
163+
{
164+
value: '深圳市',
165+
text: '深圳市',
166+
wordCode: 'S',
167+
children: [
168+
{
169+
value: '宝安区',
170+
text: '宝安区',
171+
wordCode: 'B',
172+
},
173+
{
174+
value: '罗湖区',
175+
text: '罗湖区',
176+
wordCode: 'L',
177+
},
178+
{
179+
value: '龙岗区',
180+
text: '龙岗区',
181+
wordCode: 'L',
182+
},
183+
{
184+
value: '龙华区',
185+
text: '龙华区',
186+
wordCode: 'L',
187+
},
188+
],
189+
},
190+
],
135191
},
136192
{
137193
value: '广西',
@@ -167,6 +223,43 @@ const Demo1 = () => {
167223
wordCode: 'H',
168224
disabled: true,
169225
},
226+
{
227+
value: '上海',
228+
text: '上海',
229+
wordCode: 'S',
230+
children: [
231+
{
232+
value: '宝山区',
233+
text: '宝山区',
234+
wordCode: 'B',
235+
},
236+
{
237+
value: '黄埔区',
238+
text: '黄埔区',
239+
wordCode: 'H',
240+
},
241+
{
242+
value: '虹口区',
243+
text: '虹口区',
244+
wordCode: 'H',
245+
},
246+
{
247+
value: '嘉定区',
248+
text: '嘉定区',
249+
wordCode: 'J',
250+
},
251+
{
252+
value: '静安区',
253+
text: '静安区',
254+
wordCode: 'J',
255+
},
256+
{
257+
value: '金山区',
258+
text: '金山区',
259+
wordCode: 'J',
260+
},
261+
],
262+
},
170263
{
171264
value: '浙江',
172265
text: '浙江',
@@ -179,7 +272,7 @@ const Demo1 = () => {
179272
return (
180273
<>
181274
<Cell
182-
title="选择自定义地址"
275+
title="使用电梯地址"
183276
description={text}
184277
onClick={() => setVisible(true)}
185278
/>

‎src/packages/address/elevatorRender.taro.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
normalizeListOptions,
1313
normalizeOptions,
1414
} from '@/packages/cascader/utils'
15-
import { transformData } from './utils'
15+
import { transformData, findDataByName } from './utils'
1616
import {
1717
CascaderOption,
1818
WebCascaderProps,
@@ -146,10 +146,12 @@ export const ElevatorRender: FunctionComponent<
146146
let end = false
147147
let currentOptions = options
148148
for (const [index, val] of innerValue.entries()) {
149-
const opt = currentOptions?.flatMap((o: any) => {
150-
const foundItem = o.list.find((item: any) => item.name === val)
151-
return foundItem
152-
})[0]
149+
const opt = currentOptions
150+
?.flatMap((o: any) => {
151+
const foundItem = o.list.find((item: any) => item.name === val)
152+
return foundItem
153+
})
154+
.filter((item) => item !== undefined)[0]
153155

154156
next.push({
155157
name: val,
@@ -201,6 +203,7 @@ export const ElevatorRender: FunctionComponent<
201203

202204
const renderTab = () => {
203205
if (!levels[0].name) return
206+
// console.log('tabs', levels)
204207
return (
205208
<div className={`${classPrefix}-selected`}>
206209
{levels.map((item, index) => (
@@ -237,7 +240,6 @@ export const ElevatorRender: FunctionComponent<
237240
} else {
238241
console.log('close popup')
239242
}
240-
241243
const nextValue = innerValue.slice(0, levelIndex)
242244
if (elevatorItem.name) {
243245
setLoading(!!onLoad && { [levelIndex]: elevatorItem.name })
@@ -248,7 +250,20 @@ export const ElevatorRender: FunctionComponent<
248250
setValue(nextValue)
249251
}
250252
setInnerValue(nextValue)
251-
setLoading({})
253+
}
254+
255+
const onHotItemClick = (hotItem: any) => {
256+
// 通过修改 innerValue 构造 level 数据
257+
const distData = findDataByName(options, hotItem.name)
258+
// 热门城市主要是一级城市和二级城市，可以扩展。TODO
259+
if (distData) {
260+
const innerValue = [distData.pName, distData.name].filter(
261+
(item) => item !== ''
262+
)
263+
setInnerValue(innerValue)
264+
setElevatorOptions(distData.children)
265+
setLevelIndex(innerValue.length)
266+
}
252267
}
253268

254269
const renderHotArea = () => {
@@ -259,7 +274,11 @@ export const ElevatorRender: FunctionComponent<
259274
<div className={`${classPrefix}-title`}>热门城市</div>
260275
<div className={`${classPrefix}-hotlist`}>
261276
{hotList.map((item, index) => (
262-
<div className={`${classPrefix}-hotlist-item`} key={`hot-${index}`}>
277+
<div
278+
className={`${classPrefix}-hotlist-item`}
279+
key={`hot-${index}`}
280+
onClick={() => onHotItemClick(item)}
281+
>
263282
{item.name}
264283
</div>
265284
))}

0 commit comments

Comments
 (0)