From 95459b659a786f23c2905a4cfc9b1b2dd253779f Mon Sep 17 00:00:00 2001
From: HuaYu <15600557119@163.com>
Date: Sat, 28 Jan 2023 20:04:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=8E=E5=B8=82=E7=B4=A2=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CityList/index.css | 26 ++++++++++++++++++++++++++
 src/pages/CityList/index.js  | 19 ++++++++++++++-----
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/pages/CityList/index.css b/src/pages/CityList/index.css
index 4fe60d7..e5d8ab4 100644
--- a/src/pages/CityList/index.css
+++ b/src/pages/CityList/index.css
@@ -10,3 +10,29 @@ ul{
     list-style: none;
     margin: 0;
 }
+
+.city-index {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 5px;
+  z-index: 1;
+  height: 90%;
+  box-sizing: border-box;
+  padding-top: 20px;
+  text-align: center;
+}
+.city-index .city-index-item {
+    flex: 1;
+  }
+
+.city-index .index-active {
+    color: #fff;
+    background-color: #21b97a;
+    border-radius: 100%;
+    display: inline-block;
+    font-size: 12px;
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+  }
diff --git a/src/pages/CityList/index.js b/src/pages/CityList/index.js
index 6e019a6..01decba 100644
--- a/src/pages/CityList/index.js
+++ b/src/pages/CityList/index.js
@@ -37,6 +37,7 @@ const formatCityData = (list) => {
     }
 }
 
+const HOUSE_CITY= ['北京','上海','广州','深圳']
 // const right = (
 //     <div style={{ fontSize: 24 }}>
 //         <Space style={{ '--gap': '16px' }}>
@@ -79,7 +80,7 @@ export default class CityList extends React.Component {
             cityIndex: [],
             activeIndex: 0
         }
-        const cityListComponent = React.createRef()
+        this.cityListComponent = React.createRef()
     }
     async componentDidMount() {
         await this.getCityList()
@@ -100,7 +101,6 @@ export default class CityList extends React.Component {
         cityList['#'] = [curCity]
         cityIndex.unshift('#')
 
-        console.info('shezhi zhuangtai')
         this.setState({
             cityList,
             cityIndex
@@ -127,7 +127,7 @@ export default class CityList extends React.Component {
                 <div className="title">{formatCityIndex(letter)}</div>
                 {
                     this.state.cityList[letter].map(item => (
-                        <div className="name" key={item.value}>{item.label}</div>
+                        <div className="name" key={item.value} onClick={()=>this.changeCity(item)}>{item.label}</div>
                     ))
                 }
             </div>
@@ -139,11 +139,11 @@ export default class CityList extends React.Component {
 
     renderCityIndex() {
         const { cityIndex, activeIndex } = this.state
-        return cityIndex.map((item, index) => {
+        return cityIndex.map((item, index) => (
             <li className="city-index-item" key={item} onClick={()=>{this.cityListComponent.current.scrollToRow(index)}}>
                 <span className={activeIndex === index ? "index-active" : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
             </li>
-        })
+        ))
     }
     // 用户获取list组件渲染行数据
     onRowsRendered=({startIndex})=>{
@@ -151,6 +151,15 @@ export default class CityList extends React.Component {
             this.setState({
                 activeIndex:startIndex
             })
+        } 
+    }
+    changeCity({label,value}){
+        if(HOUSE_CITY.indexOf(label)>-1){
+            localStorage.setItem('hkzf_city',JSON.stringify({label,value}))
+            // 返回上一个页面
+            
+        }else{
+            Toast.show('该城市暂无房源数据') 
         }
     }