修改校区选择列表按字母排序

src/api/area.ts

-import { baseFetch } from './index';
+import { baseFetch, ResponseDataEntity } from './index';
 
-export const fetchAllArea = () =>
+export type Area = {
+  id: number;
+  areaName: string;
+  initial?: string;
+};
+
+export const fetchAllArea = (): Promise<ResponseDataEntity<Area[]>> =>
   baseFetch({
     url: '/area/queryAreaList',
   });

src/pages/SelectCampus/SelectCampus.scss

@@ -88,4 +88,7 @@
     border-bottom: 2px solid #ebebeb;
     word-break: break-all;
   }
+  .locationItem:last-child {
+    border-bottom: none;
+  }
 }

src/pages/SelectCampus/SelectCampus.tsx

@@ -5,17 +5,11 @@ import { connect } from '@tarojs/redux';
 import { View, Text, Input, Image, ScrollView } from '@tarojs/components';
 import SearchIcon from '../../images/login/icon_search@2x.png';
 
-import { fetchAllArea } from '../../api/area';
+import { fetchAllArea, Area } from '../../api/area';
 import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
 
 import './SelectCampus.scss';
 
-type Area = {
-  id: number;
-  areaName: string;
-  initial?: string;
-};
-
 type AreaList = Array<{
   firstPin: string;
   children: Array<Area>;
@@ -80,6 +74,34 @@ class SelectCampus extends Component {
     fetchAllArea()
       .then(res => {
         console.log(res);
+        let initialList = [
+          'A',
+          'B',
+          'C',
+          'D',
+          'E',
+          'F',
+          'G',
+          'H',
+          'I',
+          'J',
+          'K',
+          'L',
+          'M',
+          'N',
+          'O',
+          'P',
+          'Q',
+          'R',
+          'S',
+          'T',
+          'U',
+          'V',
+          'W',
+          'X',
+          'Y',
+          'Z',
+        ];
         let campusIndexArr: Array<string> = [];
         let campusList: AreaList = [];
         res.data.map((area: Area) => {
@@ -89,11 +111,12 @@ class SelectCampus extends Component {
             if (index > -1) {
               campusList[index].children.push(area);
             } else {
-              campusIndexArr.push(firstPin);
-              campusList.push({
+              let index = initialList.indexOf(firstPin);
+              campusIndexArr[index] = firstPin;
+              campusList[index] = {
                 firstPin: firstPin,
                 children: [area],
-              });
+              };
             }
           }
         });
@@ -190,14 +213,16 @@ class SelectCampus extends Component {
           </View>
         </View>
         <View className='infoBar'>
-          {pinList.map(item => (
-            <View
-              key={item}
-              className='infoItem'
-              onClick={() => this.showToastHandle(item)}>
-              {item}
-            </View>
-          ))}
+          {pinList.map(item =>
+            item ? (
+              <View
+                key={item}
+                className='infoItem'
+                onClick={() => this.showToastHandle(item)}>
+                {item}
+              </View>
+            ) : null,
+          )}
         </View>
         <View className={showToast ? 'show br8 infoToast' : 'br8 infoToast'}>
           {localText}
@@ -207,22 +232,24 @@ class SelectCampus extends Component {
           className='locationList'
           scrollIntoView={localText}
           scrollWithAnimation>
-          {filterList.map(campusItem => (
-            <View key={campusItem.firstPin} className='locationArea'>
-              <View id={campusItem.firstPin} className='locationTitle'>
-                {campusItem.firstPin}
-              </View>
-              {campusItem.children.map(campus => (
-                <View
-                  key={campus.id}
-                  className='locationItem'
-                  data-campus={campus}
-                  onClick={this.bindCampus}>
-                  {campus.areaName}
+          {filterList.map(campusItem =>
+            campusItem ? (
+              <View key={campusItem.firstPin} className='locationArea'>
+                <View id={campusItem.firstPin} className='locationTitle'>
+                  {campusItem.firstPin}
                 </View>
-              ))}
-            </View>
-          ))}
+                {campusItem.children.map(campus => (
+                  <View
+                    key={campus.id}
+                    className='locationItem'
+                    data-campus={campus}
+                    onClick={this.bindCampus}>
+                    {campus.areaName}
+                  </View>
+                ))}
+              </View>
+            ) : null,
+          )}
         </ScrollView>
       </View>
     );