fix: 定位搜索地区体验优化

Author: mutoe

resources/spa/src/page/Location.vue

@@ -5,10 +5,7 @@
     leave-active-class="animated slideOutRight"
   >
     <div class="m-box-model m-pos-f p-location">
-      <SearchBar
-        v-model="keyword"
-        :back="goBack"
-      />
+      <SearchBar v-model="keyword" :back="goBack" />
 
       <main>
         <div v-if="showHot">
@@ -44,10 +41,7 @@
             </ul>
           </div>
         </div>
-        <div
-          v-else
-          class="m-box-model"
-        >
+        <div v-else class="m-box-model">
           <div
             v-for="(city, index) in cities"
             :key="`search-${city}-${index}`"
@@ -63,22 +57,16 @@
 </template>
 
 <script>
-import SearchBar from '@/components/common/SearchBar.vue'
-import _ from 'lodash'
+import { parseSearchTree } from '@/util/location'
 import * as api from '@/api/bootstrappers.js'
+import SearchBar from '@/components/common/SearchBar.vue'
 
 export default {
   name: 'Location',
   components: { SearchBar },
   props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
-    isComponent: {
-      type: Boolean,
-      default: false,
-    },
+    show: { type: Boolean, default: true },
+    isComponent: { type: Boolean, default: false },
   },
   data () {
     return {
@@ -142,6 +130,7 @@ export default {
   },
   methods: {
     goBack () {
+      this.keyword = ''
       this.isComponent
         ? this.$emit('close', this.currentPos)
         : this.$router.go(-1)
@@ -165,12 +154,12 @@ export default {
         })
         : []
     },
-    searchCityByName: _.debounce(function () {
+    searchCityByName () {
       api.searchCityByName(this.keyword).then(({ data = [] }) => {
         this.originCities = data
         this.cities = this.formatCities(data)
       })
-    }, 450),
+    },
     getCurrentPosition () {
       this.loading = true
       this.hotPos = null
@@ -204,7 +193,7 @@ export default {
       const city = this.cities[index].split('，').pop()
       api.getGeo(city.replace(/[\s\uFEFF\xA0]+/g, '')).then(data => {
         this.loading = false
-        data.label = this.originCities[index].tree.name
+        data.label = parseSearchTree(this.originCities[index].tree)
         this.currentPos = data
         this.$nextTick(this.goBack)
       })

resources/spa/src/util/location.js

@@ -21,6 +21,21 @@ function switchError (error) {
   return message
 }
 
+/**
+ * 将搜索结果的树结构展平
+ * @param {Object} tree 地区搜索树
+ * @param {number} level 展平级别 如 level = 2 搜索成都市时返回 “四川省 成都市”
+ */
+export const parseSearchTree = (tree = {}, level = 2) => {
+  let result = tree.name
+  let p = tree.parent
+  while (p) {
+    result = `${p.name} ${result}`
+    p = p.parent
+  }
+  return result.split(' ').slice(0, level).join(' ')
+}
+
 export default {
   getCurrentPosition () {
     return new Promise((resolve, reject) => {