|
@@ -1,106 +1,205 @@
|
1
|
|
-import { useState, useEffect, useRef } from 'react'
|
2
|
|
-import { Swiper, SwiperItem, Image } from '@tarojs/components'
|
3
|
|
-import Taro from '@tarojs/taro'
|
4
|
|
-import { useSelector } from 'react-redux'
|
5
|
|
-import { getSystemParsm } from '@/services/common'
|
6
|
|
-import './index.scss'
|
7
|
|
-import { ROLE_CODE } from '@/constants/user'
|
|
1
|
+import { useState, useEffect, useRef } from "react";
|
|
2
|
+import { Swiper, SwiperItem, Image } from "@tarojs/components";
|
|
3
|
+import Taro from "@tarojs/taro";
|
|
4
|
+import { useSelector } from "react-redux";
|
|
5
|
+import { getSystemParsm } from "@/services/common";
|
|
6
|
+import "./index.scss";
|
|
7
|
+import { ROLE_CODE } from "@/constants/user";
|
|
8
|
+import { useMemo } from "react";
|
8
|
9
|
|
9
|
|
-const MINI_KANGYANG = 'MINI_KANGYANG'
|
|
10
|
+const MINI_KANGYANG = "MINI_KANGYANG";
|
10
|
11
|
|
11
|
|
-export default function Menu () {
|
12
|
|
- const kangyangRef = useRef()
|
13
|
|
- const person = useSelector(({user})=>user.userInfo?.person)
|
14
|
|
- console.log('=person=',person)
|
|
12
|
+const list = [
|
|
13
|
+ {
|
|
14
|
+ name: "全部楼盘",
|
|
15
|
+ id: 1,
|
|
16
|
+ icon: require("@/assets/index-icon9.png"),
|
|
17
|
+ router: "/pages/index/buildingList/index",
|
|
18
|
+ },
|
|
19
|
+ {
|
|
20
|
+ name: "品牌地产",
|
|
21
|
+ id: 2,
|
|
22
|
+ icon: require("@/assets/index-icon8.png"),
|
|
23
|
+ router: "/pages/index/brandList/index",
|
|
24
|
+ },
|
|
25
|
+ {
|
|
26
|
+ name: "近期开盘",
|
|
27
|
+ id: 3,
|
|
28
|
+ icon: require("@/assets/index-icon6.png"),
|
|
29
|
+ router: `/pages/index/buildingList/index?isRecentOpening=1`,
|
|
30
|
+ },
|
|
31
|
+ {
|
|
32
|
+ name: "帮我找房",
|
|
33
|
+ id: 4,
|
|
34
|
+ icon: require("@/assets/index-icon1.png"),
|
|
35
|
+ router: "/pages/index/helpToFindHouse/index",
|
|
36
|
+ },
|
|
37
|
+ {
|
|
38
|
+ name: "增值服务",
|
|
39
|
+ id: 5,
|
|
40
|
+ icon: require("@/assets/index-icon16.png"),
|
|
41
|
+ router: "/pages/index/addedValueService/index",
|
|
42
|
+ },
|
|
43
|
+ {
|
|
44
|
+ name: "地图找房",
|
|
45
|
+ id: 6,
|
|
46
|
+ icon: require("@/assets/index-icon2.png"),
|
|
47
|
+ router: "/pages/index/findHouseFromMap/index",
|
|
48
|
+ },
|
|
49
|
+ {
|
|
50
|
+ name: "活动信息",
|
|
51
|
+ id: 7,
|
|
52
|
+ icon: require("@/assets/index-icon5.png"),
|
|
53
|
+ router: "/pages/index/activityList/index?type=dymic",
|
|
54
|
+ },
|
|
55
|
+ {
|
|
56
|
+ name: "团房信息",
|
|
57
|
+ id: 8,
|
|
58
|
+ icon: require("@/assets/index-icon12.png"),
|
|
59
|
+ router: "/pages/index/activityList/index?type=house",
|
|
60
|
+ },
|
|
61
|
+ {
|
|
62
|
+ name: "特价房",
|
|
63
|
+ id: 9,
|
|
64
|
+ icon: require("@/assets/index-icon11.png"),
|
|
65
|
+ router: "/pages/index/specialPriceHouse/index",
|
|
66
|
+ },
|
|
67
|
+ {
|
|
68
|
+ name: "康养",
|
|
69
|
+ id: 10,
|
|
70
|
+ icon: require("@/assets/index-icon7.png"),
|
|
71
|
+ miniapp: MINI_KANGYANG,
|
|
72
|
+ },
|
|
73
|
+ {
|
|
74
|
+ name: "文旅商办",
|
|
75
|
+ id: 11,
|
|
76
|
+ icon: require("@/assets/index-icon13.png"),
|
|
77
|
+ router: `/pages/index/buildingList/index?isCommerce=1`,
|
|
78
|
+ },
|
|
79
|
+ {
|
|
80
|
+ name: "资讯",
|
|
81
|
+ id: 12,
|
|
82
|
+ icon: require("@/assets/index-icon15.png"),
|
|
83
|
+ router: "/pages/index/newsList/index",
|
|
84
|
+ },
|
|
85
|
+ {
|
|
86
|
+ name: "购房百科",
|
|
87
|
+ id: 13,
|
|
88
|
+ icon: require("@/assets/index-icon4.png"),
|
|
89
|
+ router: "/pages/index/encyclopediasOfBuyHouse/index",
|
|
90
|
+ },
|
|
91
|
+ {
|
|
92
|
+ name: "房贷计算",
|
|
93
|
+ id: 14,
|
|
94
|
+ icon: require("@/assets/index-icon3.png"),
|
|
95
|
+ router: "/pages/mine/mortgageCalc/index",
|
|
96
|
+ },
|
|
97
|
+];
|
15
|
98
|
|
16
|
|
- const brokerList = [
|
17
|
|
- { name: '我要推荐', id: 25, icon: require('@/assets/index-icon25.png'), router: '/pages/mine/addCustomer/index' },
|
18
|
|
- { name: '我的客户', id: 23, icon: require('@/assets/index-icon23.png'), router: '/pages/mine/myCustomer/index' },
|
19
|
|
- { name: '邀请好友', id: 26, icon: require('@/assets/index-icon26.png'), router: '/subpackages/pages/broker/invitation/index' },
|
20
|
|
- { name: '我的钱包', id: 24, icon: require('@/assets/index-icon24.png'), router: '/subpackages/pages/broker/myWallet/index' },
|
21
|
|
- ]
|
|
99
|
+const brokerList = [
|
|
100
|
+ {
|
|
101
|
+ name: "我要推荐",
|
|
102
|
+ id: 25,
|
|
103
|
+ icon: require("@/assets/index-icon25.png"),
|
|
104
|
+ router: "/pages/mine/addCustomer/index",
|
|
105
|
+ },
|
|
106
|
+ {
|
|
107
|
+ name: "我的客户",
|
|
108
|
+ id: 23,
|
|
109
|
+ icon: require("@/assets/index-icon23.png"),
|
|
110
|
+ router: "/pages/mine/myCustomer/index",
|
|
111
|
+ },
|
|
112
|
+ {
|
|
113
|
+ name: "邀请好友",
|
|
114
|
+ id: 26,
|
|
115
|
+ icon: require("@/assets/index-icon26.png"),
|
|
116
|
+ router: "/subpackages/pages/broker/invitation/index",
|
|
117
|
+ },
|
|
118
|
+ {
|
|
119
|
+ name: "我的钱包",
|
|
120
|
+ id: 24,
|
|
121
|
+ icon: require("@/assets/index-icon24.png"),
|
|
122
|
+ router: "/subpackages/pages/broker/myWallet/index",
|
|
123
|
+ },
|
|
124
|
+];
|
22
|
125
|
|
23
|
|
- const List = [
|
24
|
|
- { name: '全部楼盘', id: 1, icon: require('@/assets/index-icon9.png'), router: '/pages/index/buildingList/index' },
|
25
|
|
- { name: '品牌地产', id: 2, icon: require('@/assets/index-icon8.png'), router: '/pages/index/brandList/index' },
|
26
|
|
- { name: '近期开盘', id: 3, icon: require('@/assets/index-icon6.png'), router: `/pages/index/buildingList/index?isRecentOpening=1` },
|
27
|
|
- { name: '帮我找房', id: 4, icon: require('@/assets/index-icon1.png'), router: '/pages/index/helpToFindHouse/index' },
|
28
|
|
- { name: '增值服务', id: 5, icon: require('@/assets/index-icon16.png'), router: '/pages/index/addedValueService/index' },
|
29
|
|
- { name: '地图找房', id: 6, icon: require('@/assets/index-icon2.png'), router: '/pages/index/findHouseFromMap/index' },
|
30
|
|
- { name: '活动信息', id: 7, icon: require('@/assets/index-icon5.png'), router: '/pages/index/activityList/index?type=dymic' },
|
31
|
|
- { name: '团房信息', id: 8, icon: require('@/assets/index-icon12.png'), router: '/pages/index/activityList/index?type=house' },
|
32
|
|
- { name: '特价房', id: 9, icon: require('@/assets/index-icon11.png'), router: '/pages/index/specialPriceHouse/index' },
|
33
|
|
- { name: '康养', id: 10, icon: require('@/assets/index-icon7.png'), miniapp: MINI_KANGYANG },
|
34
|
|
- { name: '文旅商办', id: 11, icon: require('@/assets/index-icon13.png'), router: `/pages/index/buildingList/index?isCommerce=1` },
|
35
|
|
- { name: '资讯', id: 12, icon: require('@/assets/index-icon15.png'), router: '/pages/index/newsList/index' },
|
36
|
|
- { name: '购房百科', id: 13, icon: require('@/assets/index-icon4.png'), router: '/pages/index/encyclopediasOfBuyHouse/index' },
|
37
|
|
- { name: '房贷计算', id: 14, icon: require('@/assets/index-icon3.png'), router: '/pages/mine/mortgageCalc/index' }
|
38
|
|
- ]
|
|
126
|
+export default function Menu() {
|
|
127
|
+ const kangyangRef = useRef();
|
|
128
|
+ const city = useSelector((state) => state.city);
|
39
|
129
|
|
40
|
|
- // 如果是全民经纪人添加专属菜单
|
41
|
|
- if(person.personType===ROLE_CODE.BROKER){
|
42
|
|
- List.unshift(...brokerList)
|
43
|
|
- }
|
44
|
|
- let Arr = []
|
45
|
|
- List.map((item) => {
|
46
|
|
- if (Arr.length) {
|
47
|
|
- if (Arr[Arr.length - 1].length < 10) {
|
48
|
|
- Arr[Arr.length - 1].push({ ...item })
|
49
|
|
- } else {
|
50
|
|
- Arr.push([{ ...item }])
|
51
|
|
- }
|
|
130
|
+ const [List, setList] = useState(list);
|
|
131
|
+
|
|
132
|
+ useEffect(() => {
|
|
133
|
+ // 如果是全民经纪人添加专属菜单
|
|
134
|
+ if (city.curCity.shortname === BROKER_CITY) {
|
|
135
|
+ setList([...brokerList, ...list]);
|
52
|
136
|
} else {
|
53
|
|
- Arr.push([{ ...item }])
|
|
137
|
+ setList(list);
|
54
|
138
|
}
|
55
|
|
- })
|
56
|
|
- const [MenuList] = useState(Arr)
|
|
139
|
+ }, [city.curCity.shortname]);
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+ const MenuList = useMemo(() => {
|
|
143
|
+ let Arr = [];
|
|
144
|
+ List.map((item) => {
|
|
145
|
+ if (Arr.length) {
|
|
146
|
+ if (Arr[Arr.length - 1].length < 10) {
|
|
147
|
+ Arr[Arr.length - 1].push({ ...item });
|
|
148
|
+ } else {
|
|
149
|
+ Arr.push([{ ...item }]);
|
|
150
|
+ }
|
|
151
|
+ } else {
|
|
152
|
+ Arr.push([{ ...item }]);
|
|
153
|
+ }
|
|
154
|
+ });
|
|
155
|
+ return Arr
|
|
156
|
+ }, [List]);
|
57
|
157
|
|
58
|
158
|
const MenuClick = (item) => {
|
59
|
159
|
return () => {
|
60
|
160
|
if (item.router) {
|
61
|
|
- Taro.navigateTo({ url: item.router })
|
|
161
|
+ Taro.navigateTo({ url: item.router });
|
62
|
162
|
} else if (item.miniapp === MINI_KANGYANG) {
|
63
|
163
|
if (kangyangRef.current) {
|
64
|
164
|
// 跳转到康养小程序
|
65
|
|
- Taro.navigateToMiniProgram(kangyangRef.current)
|
|
165
|
+ Taro.navigateToMiniProgram(kangyangRef.current);
|
66
|
166
|
}
|
67
|
167
|
}
|
68
|
|
- }
|
69
|
|
- }
|
70
|
|
-
|
|
168
|
+ };
|
|
169
|
+ };
|
|
170
|
+
|
71
|
171
|
useEffect(() => {
|
72
|
172
|
// 获取康养小程序相关
|
73
|
173
|
getSystemParsm(MINI_KANGYANG).then((res) => {
|
74
|
174
|
if (res && res.paramValue) {
|
75
|
|
- kangyangRef.current = JSON.parse(res.paramValue)
|
|
175
|
+ kangyangRef.current = JSON.parse(res.paramValue);
|
76
|
176
|
}
|
77
|
|
- })
|
78
|
|
- }, [])
|
|
177
|
+ });
|
|
178
|
+ }, []);
|
79
|
179
|
|
80
|
180
|
return (
|
81
|
|
- <view className='components Menu'>
|
|
181
|
+ <view className="components Menu">
|
82
|
182
|
<view>
|
83
|
183
|
<view>
|
84
|
184
|
<Swiper autoplay={false} indicator-dots>
|
85
|
|
- {
|
86
|
|
- MenuList.map((item, index) => (
|
87
|
|
- <SwiperItem key={`Banner-${index}`}>
|
88
|
|
- <view className='swiper-item'>
|
89
|
|
- {
|
90
|
|
- item.map((subItem, subIndex) => (
|
91
|
|
- <view key={`BannerItem-${subIndex}`} onClick={MenuClick(subItem)}>
|
92
|
|
- <Image mode='heightFix' src={subItem.icon || null} />
|
93
|
|
- <text>{subItem.name}</text>
|
94
|
|
- </view>
|
95
|
|
- ))
|
96
|
|
- }
|
97
|
|
- </view>
|
98
|
|
- </SwiperItem>
|
99
|
|
- ))
|
100
|
|
- }
|
|
185
|
+ {MenuList.map((item, index) => (
|
|
186
|
+ <SwiperItem key={`Banner-${index}`}>
|
|
187
|
+ <view className="swiper-item">
|
|
188
|
+ {item.map((subItem, subIndex) => (
|
|
189
|
+ <view
|
|
190
|
+ key={`BannerItem-${subIndex}`}
|
|
191
|
+ onClick={MenuClick(subItem)}
|
|
192
|
+ >
|
|
193
|
+ <Image mode="heightFix" src={subItem.icon || null} />
|
|
194
|
+ <text>{subItem.name}</text>
|
|
195
|
+ </view>
|
|
196
|
+ ))}
|
|
197
|
+ </view>
|
|
198
|
+ </SwiperItem>
|
|
199
|
+ ))}
|
101
|
200
|
</Swiper>
|
102
|
201
|
</view>
|
103
|
202
|
</view>
|
104
|
203
|
</view>
|
105
|
|
- )
|
|
204
|
+ );
|
106
|
205
|
}
|