Merge pull request #4 from wpgodforever/dev-address

Dev address
wpgodforever · Jan 16, 2023 · 6831540 · 6831540
2 parents 21bac9d + 54243da
commit 6831540
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 23 deletions.
diff --git a/src/api/address/index.js b/src/api/address/index.js
@@ -12,7 +12,17 @@ const getCurrentCity = (data) => {
   })
 }
 
+// 获取搜索地址
+const getSearchCity = (data) => {
+  return request({
+    url: `/v1/pois`,
+    method: 'get',
+    params: data
+  })
+}
+
 export {
   SUCCESS_CODE,
   getCurrentCity,
+  getSearchCity,
 }
diff --git a/src/components/common/adressSelectPop.vue b/src/components/common/adressSelectPop.vue
@@ -1,40 +1,90 @@
 <template>
-  <van-popup :value="show" position="top" @click-overlay="clickOverlay" :style="{ height: '100%' }">
-    <div class="popContainer">
-      <van-cell-group>
-        <van-cell icon="location-o" title="当前城市" :value="addressInfo.name || '尚未选择'" />
-      </van-cell-group>
-      <div class="popContainer-hot">热门城市</div>
-      <van-grid>
-        <van-grid-item icon="fire-o" @click="onHotCityClick" :text="item.name" v-for="(item, index) in hotCitys" :key="index"/>
-      </van-grid>
-      <!-- 全部城市 -->
-      <van-index-bar :index-list="indexList">
-        <div v-for="(item, index) in allCitys" :key="index">
-          <van-index-anchor :index="item.char" />
-          <van-cell :title="cityItem.name" v-for="(cityItem, cityIndex) in item.data" :key="cityIndex"/>
-        </div>
-      </van-index-bar>
+  <van-popup :value="show" position="top" :style="{ height: '100%' }">
+    <div style="z-index: 99999;">
+      <div class="navHeader flex-align">
+        <van-icon name="arrow-left" @click="onLeftClick"/>
+        <span>{{ cityName }}</span>
+      </div>
+      <!-- 地区选择第一层----城市选择 -->
+      <div class="popContainer" v-show="mode === 1">
+        <van-cell-group>
+          <van-cell icon="location-o" title="当前城市" :value="addressInfo.name || '尚未选择'" />
+        </van-cell-group>
+        <div class="popContainer-hot">热门城市</div>
+        <van-grid>
+          <van-grid-item icon="fire-o" @click="onHotCityClick(item)" :text="item.name" v-for="(item, index) in hotCitys" :key="index"/>
+        </van-grid>
+        <!-- 全部城市 -->
+        <van-index-bar :index-list="indexList">
+          <div v-for="(item, index) in allCitys" :key="index">
+            <van-index-anchor :index="item.char" />
+            <van-cell :title="cityItem.name" v-for="(cityItem, cityIndex) in item.data" :key="cityIndex"/>
+          </div>
+        </van-index-bar>
+      </div>
+      <div class="secondContainer flex-col">
+        <van-search v-model="searchVal" placeholder="请输入具体地址" @search="onSearch"/>
+        <van-button type="info" @click="onSearch" round :disabled="searchVal === ''">搜索</van-button>
+        <van-cell @click="onAddressClick(item)" :title="item.name" :label="item.address" v-for="(item,index) in searchList" :key="index"/>
+      </div>
     </div>
   </van-popup>
 </template>
 
 <script>
 import { mapActions, mapState } from 'vuex'
+import { getSearchCity } from '@/api/address/index.js'
 export default {
   props:['show'],
   data(){
     return {
+      mode:1,//1选择城市   2选择具体地区
+      cityId:'',
+      cityName:'',
+      searchVal:'',
+      searchList:[],
     }
   },
   created(){
   },
   methods:{
-    clickOverlay () {
-      this.$emit('update:show',false)
+    onHotCityClick(item){
+      this.cityId = item.id
+      this.cityName = item.name
+      this.mode = 2
+    },
+    onLeftClick(){
+      // 在第一层就收起弹框，第二层就返回第一层
+      if(this.mode === 1){
+        this.$emit('update:show',false)
+      }else{
+        this.cityName = ''
+        this.mode = 1
+      }
+
+    },
+    // 具体地址搜索
+    onSearch(){
+      if(this.searchVal === '') {
+        this.$toast.fail('请输入具体地址');
+        return
+      }
+      getSearchCity({
+      	type: 'search',
+      	city_id: this.cityId,
+      	keyword: this.searchVal
+      }).then(res => {
+        if(res.length === 0){
+          this.$toast.fail('暂无搜索结果');
+          this.searchList = []
+          return
+        }
+        this.searchList = res
+      })
     },
-    onHotCityClick(){
-      console.log(this.allCitys,'allCitys')
+    onAddressClick(item){
+      this.$store.commit('address/setCurrentCity',item)
+      this.$emit('update:show',false)
     }
   },
   computed:{
@@ -56,10 +106,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.navHeader{
+  position: relative;
+  height: 80px;
+  font-size: 30px;
+  padding: 0px 30px;
+  span{
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%);
+  }
+}
 .popContainer{
+
   .popContainer-hot{
     font-size: 30px;
-    padding: 20px 10px;
+    padding: 20px 40px;
   }
   .van-cell{
     font-size: 36px;
@@ -74,7 +137,5 @@ export default {
       color: red!important;
     }
   }
-
-  z-index: 999999;
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -3,6 +3,12 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
+// 解决路由重定向报错问题
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
 const router = new VueRouter({
   routes: [
     {