|  |  | 
 |  |  |         <div class="city-btn-wrapper"> | 
 |  |  |           <div class="city-btn"> | 
 |  |  |             <img :src="IconLocaltion" class="city-btn-icon" /> | 
 |  |  |             <div class="city-btn-text">{{ locationCity }}</div> | 
 |  |  |             <div class="city-btn-text">当前定位:{{ locationCity }}</div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="reset-localtion">重新定位</div> | 
 |  |  |         <div class="reset-localtion" @click="resetLocation">重新定位</div> | 
 |  |  |       </div> | 
 |  |  |       <Elevator :index-list="elevatorData" :height="'100%'" @click-item="clickItem" /> | 
 |  |  |     </ContentView> | 
 |  |  | 
 |  |  | import { groupBy, sortBy } from 'lodash'; | 
 |  |  | import { useUserStore } from '@/stores/modules/user'; | 
 |  |  | import { Elevator } from '@12333/components'; | 
 |  |  | import IconLocaltion from '@/assets/home/icon-localtion.png'; | 
 |  |  | import IconLocaltion from '@/assets/task/icon-localtion.png'; | 
 |  |  | import { setLocationCity } from '@/utils'; | 
 |  |  |  | 
 |  |  | defineOptions({ | 
 |  |  |   name: 'citySelect', | 
 |  |  | 
 |  |  |       list: cityGroups[key].map((x) => ({ | 
 |  |  |         name: x.areaName, | 
 |  |  |         id: x.areaCode, | 
 |  |  |         parentId: x.parentId, | 
 |  |  |         parentId: x.parentCode, | 
 |  |  |       })), | 
 |  |  |     }); | 
 |  |  |   } | 
 |  |  |   return _elevatorData; | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | console.log('elevatorData: ', elevatorData); | 
 |  |  |  | 
 |  |  | const clickItem = (key: string, item: any) => { | 
 |  |  |   console.log('item: ', item, getAreaByAreaCode(item.parentId).areaName); | 
 |  |  |   userStore.setLocationCity(item.name, getAreaByAreaCode(item.parentId).areaName); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | async function resetLocation() { | 
 |  |  |   try { | 
 |  |  |     await setLocationCity(); | 
 |  |  |   } catch (error) {} | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  | @import '@/styles/common.scss'; | 
 |  |  |  | 
 |  |  | .citySelect-page-wrapper { | 
 |  |  |   .home-searchbar-wrapper { | 
 |  |  |     padding: 32px 0 28px; | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |  | 
 |  |  |     .city-btn-wrapper { | 
 |  |  |       flex: 1; | 
 |  |  |       min-width: 0; | 
 |  |  |  | 
 |  |  |       .city-btn { | 
 |  |  |         display: flex; | 
 |  |  |         align-items: center; | 
 |  |  |         padding-right: 36px; | 
 |  |  |         color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |  | 
 |  |  |         .city-btn-icon { | 
 |  |  |           width: 40px; | 
 |  |  |           height: 40px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .city-btn-text { | 
 |  |  |           @include ellipsis; | 
 |  |  |           margin-left: 12px; | 
 |  |  |           font-size: 30px; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .reset-localtion { | 
 |  |  |       font-weight: 400; | 
 |  |  |       font-size: 24px; | 
 |  |  |       color: boleGetCssVar('color', 'primary'); | 
 |  |  |       line-height: 28px; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .current-city { | 
 |  |  |     padding: 20px 0; | 
 |  |  |     color: boleGetCssVar('text-color', 'primary'); |