admin

12_vuecli/mediaapp/src/views/mine/MineAddress.vue

@@ -12,31 +12,55 @@
       <van-cell
         center
         size="large"
-        label="详细信息"
-        title="地址"
+        :label="addressObj.address"
+        :title="addressObj.name"
         icon="location-o"
       >
         <!-- 使用 right-icon 插槽来自定义右侧图标 -->
         <template #right-icon>
-          <van-icon name="edit" size=".6rem" class="search-icon" />
+          <van-icon name="edit" size=".6rem" />
         </template>
       </van-cell>
     </div>
-    <baidu-map
-      class="bm-view"
-      :center="{ lng: 116.404, lat: 39.915 }"
-      :zoom="15"
-    >
-      <bm-marker
-        :position="{ lng: 116.404, lat: 39.915 }"
-        :dragging="true"
-        animation="BMAP_ANIMATION_BOUNCE"
+    <div class="map-content" v-if="showMap">
+      <baidu-map
+        class="bm-view"
+        :center="{ lng: 116.404, lat: 39.915 }"
+        :zoom="15"
       >
-      </bm-marker>
-    </baidu-map>
+        <bm-marker
+          :position="{ lng: 116.404, lat: 39.915 }"
+          :dragging="true"
+          animation="BMAP_ANIMATION_BOUNCE"
+        >
+        </bm-marker>
+      </baidu-map>
+    </div>
+    <div class="map-search" v-else>
+      <van-search
+        v-model="searchVal"
+        label="地址"
+        placeholder="请输入搜索关键词"
+        @input="searchHandle"
+      >
+      </van-search>
+      <div class="addressList">
+        <van-cell-group v-if="addressList.length > 0">
+          <van-cell @click="checkAddress(item)" v-for="item in addressList" :key="item.uid" center :title="item.name" value="选择" :label="item.address" />
+        </van-cell-group>
+        <van-empty description="暂无数据" v-else/>
+      </div>
+    </div>
   </div>
 </template>
 <style scoped>
+.addressList{
+    max-height: 70vh;
+    overflow: scroll;
+}
+.map-search {
+  margin-top: 0.2rem;
+}
 .nav-content {
   position: fixed;
   top: 0;
@@ -58,20 +82,39 @@ Vue.use(BaiduMap, {
   ak: "kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I",
 });
 export default {
-    methods: {
-      getAddress(){
-        axios.get("/map/search",{
-            params:{
-                output:"json",
-                query:"黑龙江大学",
-                region:"哈尔滨",
-                ak:"kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I"
-            }
-        }).then(res=>{
-            console.log(res)
+  data() {
+    return {
+      addressObj:{
+        name:"黑龙江大学",
+        address:"哈尔滨市南岗区学府路74号"
+      },
+      addressList: [],
+      showMap: true,
+      searchVal: "",
+    };
+  },
+  methods: {
+    checkAddress(item){
+        this.addressObj = item;
+    },
+    searchHandle(){
+        this.getAddress();
+    },
+    getAddress() {
+      axios
+        .get("/map/search", {
+          params: {
+            output: "json",
+            query: this.searchVal,
+            region: "中国",
+            ak: "kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I",
+          },
         })
-      }  
+        .then((res) => {
+          this.addressList = res.data.results;
+        });
     },
+  },
   created() {
     this.$emit("changeNav", false);
     this.getAddress();