静态页面

src/components/AreaPickerView/index.jsx

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react'
+import { PickerView, PickerViewColumn } from '@tarojs/components'
+import { fetch } from '@/utils/request'
+import { API_AREA_LIST } from '@/constants/api'
+import './style.scss'
+
+export default (props) => {
+
+  const { show = false, Change = () => {}, Cancel = () => {} } = props
+  const [Value, setValue] = useState([0, 0, 0])
+  const [StateList, setStateList] = useState([])
+  const [CurrentState, setCurrentState] = useState({})
+  const [CityList, setCityList] = useState([])
+  const [CurrentCity, setCurrentCity] = useState({})
+  const [IntentAreaList, setIntentAreaList] = useState([])
+  const [CurrentIntentArea, setCurrentIntentArea] = useState({})
+
+  useEffect(() => {
+    GetAreaList()
+  }, [])
+
+  useEffect(() => {
+    if (StateList.length) {
+      if (StateList[Value[0]].id !== CurrentState.id) { // 省份更新
+        setCurrentState(StateList[Value[0]])
+      } else if (CityList[Value[1]].id !== CurrentCity.id) { // 城市更新
+        setCurrentCity(CityList[Value[1]])
+      } else if (IntentAreaList[Value[2]].id !== CurrentIntentArea.id) { // 区县更新
+        setCurrentIntentArea(IntentAreaList[Value[2]])
+      }
+    }
+  }, [Value])
+
+  useEffect(() => {
+    if (CurrentState.id) {
+      GetAreaList(CurrentState.id, 2)
+    }
+  }, [CurrentState])
+
+  useEffect(() => {
+    if (CurrentCity.id) {
+      GetAreaList(CurrentCity.id, 3)
+    }
+  }, [CurrentCity])
+
+  const Sure = () => {
+    Change([CurrentState, CurrentCity, CurrentIntentArea])
+  }
+
+  const PickerChange = (e) => {
+    setValue(e.detail.value)
+  }
+
+  const GetAreaList = (parentCity = 100000, levelType = 1) => {
+    fetch({ url: API_AREA_LIST, method: 'get', payload: { parentCity, levelType } }).then((res) => {
+      if (levelType === 1) { // 省份
+        setStateList(res || [])
+        setValue([0, 0, 0])
+      } else if (levelType === 2) { // 城市
+        setCityList(res || [])
+        setValue([Value[0], 0, 0])
+      } else { // 区县
+        setIntentAreaList(res || [])
+        setValue([Value[0], Value[1], 0])
+      }
+    })
+  }
+
+  return (
+    <view className='components AreaPickerView' style={{ display: show ? 'block' : 'none' }}>
+      <view className='flex-v'>
+        <view className='flex-h'>
+          <text onClick={Cancel}>取消</text>
+          <view className='flex-item'></view>
+          <text onClick={Sure}>确认</text>
+        </view>
+        <view className='flex-item'>
+          <PickerView value={Value} indicator-style='height: 50px;' style='width: 100%; height: 300px;' onChange={PickerChange}>
+            <PickerViewColumn>
+              {
+                StateList.map((item, index) => (
+                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
+                ))
+              }
+            </PickerViewColumn>
+            <PickerViewColumn>
+              {
+                CityList.map((item, index) => (
+                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
+                ))
+              }
+            </PickerViewColumn>
+            <PickerViewColumn>
+              {
+                IntentAreaList.map((item, index) => (
+                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
+                ))
+              }
+            </PickerViewColumn>
+          </PickerView>
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/AreaPickerView/style.scss

@@ -0,0 +1,30 @@
+.components.AreaPickerView {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.6);
+  > view {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 600px;
+    background: #fff;
+    >.flex-h {
+      align-items: center;
+      padding: 0 30px;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+      >text {
+        font-size: 28px;
+        line-height: 80px;
+        color: #193C83;
+        &:first-child {
+          color: #ccc;
+        }
+      }
+    }
+  }
+}

src/constants/api.js

@@ -33,6 +33,7 @@ export const API_PRELOAD = resolvePath('preload')
 export const API_QRCODE = resolvePath('qrcode')
 export const API_BANNER_LIST = resolvePath('extendContent')
 export const API_QUERY_CODE_SCENE = resolvePath('qrcode/scene')
+export const API_AREA_LIST = resolvePath('city/cascade')
 
 // user
 export const API_USER_LOGIN = resolvePath('login')

src/pages/index/addedValueService/index.jsx

@@ -48,7 +48,7 @@ export default function AddedValueService () {
     params.map((item) => {
       payload[item.key] = item.result || item.resultId
     })
-    fetch({ url: API_HELP_FIND_HOUSE_SUBMIT, method: 'post', payload: { ...payload, questionnaire: JSON.stringify(params) } }).then((res) => {
+    fetch({ url: API_HELP_FIND_HOUSE_SUBMIT, method: 'post', payload: { ...payload, questionnaire: JSON.stringify(params), type: 4 } }).then((res) => {
       setResultList(res.taBuildingList || [])
       setShowPopup(true)
     })

src/pages/index/helpToFindHouse/components/BuyHouse/index.jsx

@@ -1,20 +1,17 @@
 import { useState, useEffect } from 'react'
 import '@/assets/css/iconfont.css'
-import { Image, Slider, Textarea, Picker } from '@tarojs/components'
+import { Image, Slider, Textarea } from '@tarojs/components'
 import './index.scss'
 import questions from './formData'
 
 export default function BuyHouse (props) {
-  const { change = () => { }, toSubmit = () => { }, CityList = [] } = props
+  const { change = () => { }, toSubmit = () => { }, AreaInfo = {}, selectArea = () => {} } = props
 
   const [FormData, setFormData] = useState(questions)
 
   const [StepId, setStepId] = useState(1)
   const [StepRange, setStepRange] = useState([0, 4])
 
-  const [CityName, setCityName] = useState(null)
-  const [CityId, setCityId] = useState(null)
-
   useEffect(() => {
     if (StepId === 1) {
       setStepRange([0, 4])
@@ -59,7 +56,7 @@ export default function BuyHouse (props) {
     if (StepId < 4) {
       setStepId(StepId + 1)
     } else {
-      toSubmit(FormData.concat([{result: CityId, key: 'intentArea', question: '意向区域'}]))
+      toSubmit(FormData)
     }
   }
 
@@ -69,11 +66,6 @@ export default function BuyHouse (props) {
     }
   }
 
-  const PickerChange = (e) => {
-    setCityName(CityList[e.detail.value - 0].name)
-    setCityId(CityList[e.detail.value - 0].id)
-  }
-
   return (
     <view className='components BuyHouse'>
       {
@@ -114,17 +106,13 @@ export default function BuyHouse (props) {
                 {
                   item.type === 'select' &&
                   <view className='Area'>
-                    <view className='flex-h'>
+                    <view className='flex-h' onClick={selectArea}>
                       {
                         item.key === 'intentArea' &&
                         <text className='iconfont icon-dingwei'></text>
                       }
-                      {/* <text>不限</text> */}
-                      <view className='flex-item'>
-                        <Picker range-key='name' onChange={PickerChange} value={0} range={CityList}>
-                          <text>{CityName || '请选择'}</text>
-                        </Picker>
-                      </view>
+                      <text>{AreaInfo.name || '不限'}</text>
+                      <view className='flex-item'></view>
                       <text className='iconfont icon-jiantoudown'></text>
                     </view>
                   </view>

src/pages/index/helpToFindHouse/components/HousePurchasing/index.jsx

@@ -1,20 +1,17 @@
 import { useState, useEffect } from 'react'
 import '@/assets/css/iconfont.css'
-import { Image, Slider, Textarea, Picker } from '@tarojs/components'
+import { Image, Slider, Textarea } from '@tarojs/components'
 import './index.scss'
 import questions from './formData'
 
 export default function HousePurchasing (props) {
-  const { change = () => { }, toSubmit = () => {}, CityList = [] } = props
+  const { change = () => { }, toSubmit = () => {}, AreaInfo = {}, selectArea = () => {} } = props
 
   const [FormData, setFormData] = useState(questions)
 
   const [StepId, setStepId] = useState(1)
   const [StepRange, setStepRange] = useState([0, 5])
 
-  const [CityName, setCityName] = useState(null)
-  const [CityId, setCityId] = useState(null)
-
   useEffect(() => {
     if(StepId === 1) {
       setStepRange([0, 5])
@@ -53,7 +50,7 @@ export default function HousePurchasing (props) {
     if (StepId < 1) {
       setStepId(StepId + 1)
     } else {
-      toSubmit(FormData.concat([{result: CityId, key: 'intentArea', question: '意向区域'}]))
+      toSubmit(FormData)
     }
   }
 
@@ -63,11 +60,6 @@ export default function HousePurchasing (props) {
     }
   }
 
-  const PickerChange = (e) => {
-    setCityName(CityList[e.detail.value - 0].name)
-    setCityId(CityList[e.detail.value - 0].id)
-  }
-
   return (
     <view className='components BuyHouse'>
       {
@@ -108,17 +100,13 @@ export default function HousePurchasing (props) {
                 {
                   item.type === 'select' &&
                   <view className='Area'>
-                    <view className='flex-h'>
+                    <view className='flex-h' onClick={selectArea}>
                       {
                         item.key === 'district' &&
                         <text className='iconfont icon-dingwei'></text>
                       }
-                      {/* <text>不限</text> */}
-                      <view className='flex-item'>
-                        <Picker range-key='name' onChange={PickerChange} value={0} range={CityList}>
-                          <text>{CityName || '请选择'}</text>
-                        </Picker>
-                      </view>
+                      <text>{AreaInfo.name || '不限'}</text>
+                      <view className='flex-item'></view>
                       <text className='iconfont icon-jiantoudown'></text>
                     </view>
                   </view>

src/pages/index/helpToFindHouse/components/RentingHouse/index.jsx

@@ -1,20 +1,17 @@
 import { useState, useEffect } from 'react'
 import '@/assets/css/iconfont.css'
-import { Image, Slider, Textarea, Picker } from '@tarojs/components'
+import { Image, Slider, Textarea } from '@tarojs/components'
 import './index.scss'
 import questions from './formData'
 
 export default function RentingHouse (props) {
-  const { change = () => { }, toSubmit = () => {}, CityList = [] } = props
+  const { change = () => { }, toSubmit = () => {}, AreaInfo = {}, selectArea = () => {} } = props
 
   const [FormData, setFormData] = useState(questions)
 
   const [StepId, setStepId] = useState(1)
   const [StepRange, setStepRange] = useState([0, 4])
 
-  const [CityName, setCityName] = useState(null)
-  const [CityId, setCityId] = useState(null)
-
   useEffect(() => {
     if(StepId === 1) {
       setStepRange([0, 4])
@@ -55,7 +52,7 @@ export default function RentingHouse (props) {
     if (StepId < 2) {
       setStepId(StepId + 1)
     } else {
-      toSubmit(FormData.concat([{result: CityId, key: 'intentArea', question: '意向区域'}]))
+      toSubmit(FormData)
     }
   }
 
@@ -65,11 +62,6 @@ export default function RentingHouse (props) {
     }
   }
 
-  const PickerChange = (e) => {
-    setCityName(CityList[e.detail.value - 0].name)
-    setCityId(CityList[e.detail.value - 0].id)
-  }
-
   return (
     <view className='components BuyHouse'>
       {
@@ -110,17 +102,13 @@ export default function RentingHouse (props) {
                 {
                   item.type === 'select' &&
                   <view className='Area'>
-                    <view className='flex-h'>
+                    <view className='flex-h' onClick={selectArea}>
                       {
                         item.key === 'district' &&
                         <text className='iconfont icon-dingwei'></text>
                       }
-                      {/* <text>不限</text> */}
-                      <view className='flex-item'>
-                        <Picker range-key='name' onChange={PickerChange} value={0} range={CityList}>
-                          <text>{CityName || '请选择'}</text>
-                        </Picker>
-                      </view>
+                      <text>{AreaInfo.name || '不限'}</text>
+                      <view className='flex-item'></view>
                       <text className='iconfont icon-jiantoudown'></text>
                     </view>
                   </view>

src/pages/index/helpToFindHouse/components/SubmitBuyHouseResult/index.jsx

@@ -1,6 +1,7 @@
 
 import '@/assets/css/iconfont.css'
 import { Image, Block } from '@tarojs/components'
+import { getImgURL } from '@/utils/image'
 import Taro from '@tarojs/taro'
 import './index.scss'
 
@@ -44,7 +45,7 @@ export default function SubmitBuyHouseResult (props) {
                       <view className='RecommendBuildingItem' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${item.buildingId}` })}}>
                         <view>
                           <view className='Img'>
-                            <Image mode='aspectFill' src={item.poster} className='centerLabel'></Image>
+                            <Image mode='aspectFill' src={getImgURL(item.poster || item.preSalePermit)} className='centerLabel'></Image>
                           </view>
                           <view className='Title flex-h'>
                             <view className='flex-item'>

src/pages/index/helpToFindHouse/index.jsx

@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import withLayout from '@/layout'
 import { ScrollView, Image } from '@tarojs/components'
 import { fetch } from '@/utils/request'
-import { API_HELP_FIND_HOUSE_SUBMIT, API_CITY_AREA } from '@/constants/api'
+import { API_HELP_FIND_HOUSE_SUBMIT } from '@/constants/api'
 import '@/assets/css/iconfont.css'
 import { useSelector } from 'react-redux'
+import AreaPickerView from '@/components/AreaPickerView/index'
 import './index.scss'
 import BuyHouse from './components/BuyHouse/index'
 import RentingHouse from './components/RentingHouse/index'
@@ -14,7 +15,6 @@ import SubmitBuyHouseResult from './components/SubmitBuyHouseResult/index'
 export default withLayout(() => {
 
   const user = useSelector(state => state.user)
-  const city = useSelector(state => state.city)
   const [DemandList] = useState([
     { name: '我要买房', id: 1, icon: '', spell: 'MAI FANG' },
     { name: '我要租房', id: 2, icon: '', spell: 'ZU FANG' },
@@ -22,19 +22,10 @@ export default withLayout(() => {
   ])
   const [CurrentDemandId, setCurrentDemandId] = useState(1)
   const [ShowDemand, setShowDemand] = useState(true)
-  const [CityAreaList, setCityAreaList] = useState([])
   const [ResultList, setResultList] = useState([])
   const [ShowPopup, setShowPopup] = useState(false)
-
-  useEffect(() => {
-    CityArea()
-  }, [])
-
-  const CityArea = () => {
-    fetch({ url: API_CITY_AREA, method: 'get', payload: { cityId: city.curCity.id, leveltype: 3 } }).then((res) => {
-      setCityAreaList(res || [])
-    })
-  }
+  const [ShowCitysPopup, setShowCitysPopup] = useState(false)
+  const [AreaInfo, setAreaInfo] = useState({})
 
   const CutDemandId = (id) => {
     return () => {
@@ -46,6 +37,11 @@ export default withLayout(() => {
     setShowDemand(id === 1)
   }
 
+  const AreaChange = (e) => {
+    setAreaInfo(e[2])
+    setShowCitysPopup(false)
+  }
+
   const submitForm = (data) => {
     data = data || []
     let params = []
@@ -60,65 +56,69 @@ export default withLayout(() => {
       }
     })
     params.push({ question: '创建人小程序人员', result: user?.userInfo?.person?.personId, key: 'personId' })
+    params.push({ question: '意向区域', result: AreaInfo.id, key: 'intentArea' })
     let payload = {}
     params.map((item) => {
       payload[item.key] = item.result || item.resultId
     })
-    fetch({ url: API_HELP_FIND_HOUSE_SUBMIT, method: 'post', payload: { ...payload, questionnaire: JSON.stringify(params) } }).then((res) => {
+    fetch({ url: API_HELP_FIND_HOUSE_SUBMIT, method: 'post', payload: { ...payload, questionnaire: JSON.stringify(params), type: CurrentDemandId } }).then((res) => {
       setResultList(res.taBuildingList || [])
       setShowPopup(true)
     })
   }
 
-return (
-  <view className='Page helpToFindHouse'>
-    {
-      ShowPopup &&
-      <SubmitBuyHouseResult List={ResultList}></SubmitBuyHouseResult>
-    }
+  return (
+    <view className='Page helpToFindHouse'>
+
+      <AreaPickerView show={ShowCitysPopup} Change={AreaChange} Cancel={() => { setShowCitysPopup(false) }}></AreaPickerView>
 
-    <ScrollView scroll-y refresher-enabled={false}>
-      <view className='PageContent'>
-
-        {
-          ShowDemand &&
-          <view>
-            <text>选择您的需求</text>
-            <view className='Demand flex-h' style='margin-top: 10px;'>
-              {
-                DemandList.map((item, index) => (
-                  <view key={`DemandItem-${index}`} className={CurrentDemandId === item.id ? 'flex-item active' : 'flex-item'} onClick={CutDemandId(item.id)}>
-                    <Image mode='heightFix' src={item.icon || null}></Image>
-                    <text>{item.name}</text>
-                    <text>{item.spell}</text>
-                  </view>
-                ))
-              }
+      {
+        ShowPopup &&
+        <SubmitBuyHouseResult List={ResultList}></SubmitBuyHouseResult>
+      }
+
+      <ScrollView scroll-y refresher-enabled={false}>
+        <view className='PageContent'>
+
+          {
+            ShowDemand &&
+            <view>
+              <text>选择您的需求</text>
+              <view className='Demand flex-h' style='margin-top: 10px;'>
+                {
+                  DemandList.map((item, index) => (
+                    <view key={`DemandItem-${index}`} className={CurrentDemandId === item.id ? 'flex-item active' : 'flex-item'} onClick={CutDemandId(item.id)}>
+                      <Image mode='heightFix' src={item.icon || null}></Image>
+                      <text>{item.name}</text>
+                      <text>{item.spell}</text>
+                    </view>
+                  ))
+                }
+              </view>
             </view>
-          </view>
-        }
+          }
 
-        {/* 买房 */}
-        {
-          CurrentDemandId === 1 &&
-          <BuyHouse change={StepChange} toSubmit={submitForm} CityList={CityAreaList}></BuyHouse>
-        }
+          {/* 买房 */}
+          {
+            CurrentDemandId === 1 &&
+            <BuyHouse change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></BuyHouse>
+          }
 
-        {/* 租房 */}
-        {
-          CurrentDemandId === 2 &&
-          <RentingHouse change={StepChange} toSubmit={submitForm} CityList={CityAreaList}></RentingHouse>
-        }
+          {/* 租房 */}
+          {
+            CurrentDemandId === 2 &&
+            <RentingHouse change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></RentingHouse>
+          }
 
-        {/* 置业 */}
-        {
-          CurrentDemandId === 3 &&
-          <HousePurchasing change={StepChange} toSubmit={submitForm} CityList={CityAreaList}></HousePurchasing>
-        }
+          {/* 置业 */}
+          {
+            CurrentDemandId === 3 &&
+            <HousePurchasing change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></HousePurchasing>
+          }
 
-      </view>
-    </ScrollView>
+        </view>
+      </ScrollView>
 
-  </view>
-)
+    </view>
+  )
 })

src/pages/index/helpToFindHouse/index.scss

@@ -1,8 +1,14 @@
 .Page.helpToFindHouse {
   background: #fff;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
   > scroll-view {
     width: 100%;
     height: 100%;
+    position: relative;
+    z-index: 1;
     .PageContent {
       position: relative;
       overflow: hidden;