fix(h5): 优化 uni.chooseLocation 大屏显示效果

build/manifest.js

@@ -25,6 +25,10 @@ const TOAST_DEPS = [
 // TODO 暂不考虑 head,tabBar 的动态拆分
 const DEPS = {
   chooseLocation: [
+    ['/platforms/h5/view/components/map/index.vue', 'Map'],
+    ['/core/view/components/input/index.vue', 'Input'],
+    ['/core/view/components/scroll-view/index.vue', 'ScrollView'],
+    ['/platforms/h5/service/api/location/get-location.js', 'getLocation'],
     ['/platforms/h5/components/system-routes/choose-location/index.vue', 'ChooseLocation']
   ],
   openLocation: [

src/core/view/index.css

@@ -14,7 +14,7 @@
     font-weight: normal;
     font-style: normal;
     font-family: "unibtn";
-    src: url('data:application/octet-stream;base64,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') format('truetype')
+    src: url('data:application/octet-stream;base64,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') format('truetype')
 }
 
 html,

src/platforms/h5/components/system-routes/choose-location/index.vue

 <template>
   <div class="uni-system-choose-location">
-    <system-header
-      :confirm="!!data"
-      @back="_back"
-      @confirm="_choose"
+    <v-uni-map
+      v-if="latitude"
+      :latitude="latitude"
+      :longitude="longitude"
+      class="map"
+      show-location
+      @regionchange="_regionchange"
     >
-      选择位置
-    </system-header>
-    <div class="map-content">
-      <iframe
-        :src="src"
-        allow="geolocation"
-        seamless
-        sandbox="allow-scripts allow-same-origin allow-forms"
-        frameborder="0"
-      />
+      <div class="map-location" />
+      <div
+        class="map-move"
+        @click="_moveToLocation"
+      >
+        <i>&#xec32;</i>
+      </div>
+    </v-uni-map>
+    <div class="nav">
+      <div
+        class="nav-btn back"
+        @click="_back"
+      >
+        <i class="uni-btn-icon">&#xe650;</i>
+      </div>
+      <div
+        class="nav-btn confirm"
+        :class="{ disable: !selected }"
+        @click="_choose"
+      >
+        <i class="uni-btn-icon">&#xe651;</i>
+      </div>
+    </div>
+    <div class="menu">
+      <div class="search">
+        <v-uni-input
+          v-model="keyword"
+          class="search-input"
+          placeholder="搜索地点"
+          @focus="searching = true"
+          @input="_input"
+        />
+        <div
+          v-if="searching"
+          class="search-btn"
+          @click="
+            searching = false;
+            keyword = '';
+          "
+        >
+          取消
+        </div>
+      </div>
+      <v-uni-scroll-view
+        scroll-y
+        class="list"
+        @scrolltolower="_scrolltolower"
+      >
+        <div
+          v-if="loading"
+          class="list-loading"
+        >
+          <i class="uni-loading" />
+        </div>
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="list-item"
+          :class="{ selected: selectedIndex === index }"
+          @click="selectedIndex = index"
+        >
+          <div class="list-item-title">
+            {{ item.name }}
+          </div>
+          <div class="list-item-detail">
+            {{ item.distance ? item.distance + "米 | " : "" }}{{ item.address }}
+          </div>
+        </div>
+      </v-uni-scroll-view>
     </div>
   </div>
 </template>
 <script>
-import SystemHeader from '../system-header'
+import {
+  debounce
+} from 'uni-shared'
+import {
+  getJSONP
+} from 'uni-platform/helpers/get-jsonp'
+const key = __uniConfig.qqMapKey
 
 export default {
   name: 'SystemChooseLocation',
-  components: {
-    SystemHeader
-  },
   data () {
-    const key = __uniConfig.qqMapKey
     return {
-      src: `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=uniapp`,
-      data: null
+      latitude: 0,
+      longitude: 0,
+      pageSize: 15,
+      pageIndex: 1,
+      selectedIndex: -1,
+      list: [],
+      keyword: '',
+      searching: false,
+      loading: true
     }
   },
-  mounted () {
-    function handler (event) {
-      var loc = event.data
-      if (loc && loc.module === 'locationPicker') {
-        this.data = {
-          name: loc.poiname,
-          address: loc.poiaddress,
-          latitude: loc.latlng.lat,
-          longitude: loc.latlng.lng
-        }
-      }
+  computed: {
+    selected () {
+      return this.list[this.selectedIndex]
     }
-    this.__messageHandle = handler.bind(this)
-    window.addEventListener('message', this.__messageHandle, false)
+  },
+  created () {
+    this._moveToLocation()
+    this._search = debounce(() => {
+      this._reset()
+      if (this.keyword) {
+        this._getList()
+      }
+    }, 1000)
+    this.$watch(() => this.latitude + this.longitude, () => {
+      if (!this.searching) {
+        this._reset()
+        this._getList()
+      }
+    })
+    this.$watch('searching', val => {
+      this._reset()
+      if (!val) {
+        this._getList()
+      }
+    })
   },
   beforeDestroy () {
     window.removeEventListener('message', this.__messageHandle, false)
   },
   methods: {
     _choose () {
-      if (this.data) {
-        UniViewJSBridge.publishHandler('onChooseLocation', Object.assign({}, this.data))
+      if (this.selected) {
+        UniViewJSBridge.publishHandler('onChooseLocation', Object.assign({}, this.selected))
         getApp().$router.back()
       }
     },
     _back () {
       UniViewJSBridge.publishHandler('onChooseLocation', null)
       getApp().$router.back()
+    },
+    _moveToLocation () {
+      uni.getLocation({
+        type: 'gcj02',
+        success: ({ latitude, longitude }) => {
+          this.latitude = latitude
+          this.longitude = longitude
+        },
+        fail: () => {
+          this.latitude = 39.90960456049752
+          this.longitude = 116.3972282409668
+        }
+      })
+    },
+    _regionchange ({ detail: { centerLocation } }) {
+      if (centerLocation) {
+        // TODO 图钉 icon 动画
+        this.latitude = centerLocation.latitude
+        this.longitude = centerLocation.longitude
+      }
+    },
+    _pushData (array) {
+      array.forEach(item => {
+        this.list.push({
+          name: item.title,
+          address: item.address,
+          distance: item._distance,
+          latitude: item.location.lat,
+          longitude: item.location.lng
+        })
+      })
+    },
+    _getList () {
+      this.loading = true
+      const url = this.searching ? `https://apis.map.qq.com/ws/place/v1/search?output=jsonp&key=${key}&boundary=nearby(${this.latitude},${this.longitude},1000)&keyword=${this.keyword}&page_size=${this.pageSize}&page_index=${this.pageIndex}` : `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${key}&location=${this.latitude},${this.longitude}&get_poi=1&poi_options=page_size=${this.pageSize};page_index=${this.pageIndex}`
+      // TODO 列表加载失败提示
+      getJSONP(url, {
+        callback: 'callback'
+      }, (res) => {
+        this.loading = false
+        if (this.searching && 'data' in res && res.data.length) {
+          this._pushData(res.data)
+        } else if ('result' in res && res.result.pois) {
+          this._pushData(res.result.pois)
+        }
+      }, () => {
+        this.loading = false
+      })
+    },
+    _scrolltolower () {
+      if (!this.loading && this.list.length === this.pageSize * this.pageIndex) {
+        this.pageIndex++
+        this._getList()
+      }
+    },
+    _reset () {
+      this.selectedIndex = -1
+      this.pageIndex = 1
+      this.list = []
+    },
+    _input () {
+      this._search()
     }
   }
 }
 </script>
 <style>
-	.uni-system-choose-location {
-		display: block;
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background: #f8f8f8;
-	}
-
-	.map-content {
-		position: absolute;
-		left: 0;
-		top: 44px;
-		width: 100%;
-		bottom: 0;
-		overflow: hidden;
-	}
-
-	.map-content>iframe {
-		width: 100%;
-		height: 100%;
-	}
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: "unimapbtn";
+  src: url("data:application/octet-stream;base64,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")
+    format("truetype");
+}
+
+.uni-system-choose-location {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #f8f8f8;
+}
+
+.map {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  width: 100%;
+  height: 380px;
+}
+
+.map-location {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 32px;
+  height: 52px;
+  margin-left: -16px;
+  cursor: pointer;
+  background-image: url("data:image/png;base64,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");
+  background-size: 100%;
+}
+
+.map-move {
+  position: absolute;
+  bottom: 50px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  line-height: 40px;
+  background-color: white;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0px 0 5px 1px rgba(0, 0, 0, 0.3);
+}
+
+.map-move > i {
+  display: block;
+  width: 100%;
+  height: 100%;
+  font: normal normal normal 14px/1 "unimapbtn";
+  line-height: inherit;
+  text-align: center;
+  font-size: 24px;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  background-color: transparent;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.3),
+    rgba(0, 0, 0, 0)
+  );
+}
+
+.nav-btn {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 44px;
+  padding: 6px;
+  line-height: 32px;
+  font-size: 26px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
+
+.nav-btn.confirm {
+  left: auto;
+  right: 0;
+}
+
+.nav-btn.disable {
+  opacity: 0.4;
+}
+
+.nav-btn > .uni-btn-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  border-radius: 2px;
+}
+
+.nav-btn.confirm > .uni-btn-icon {
+  background-color: #007aff;
+}
+
+.menu {
+  position: absolute;
+  top: 300px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: white;
+}
+
+.search {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  padding: 8px;
+  line-height: 34px;
+  box-sizing: border-box;
+  background-color: white;
+}
+
+.search-input {
+  flex: 1;
+  height: 100%;
+  border-radius: 5px;
+  padding: 0 5px;
+  background: #ebebeb;
+}
+
+.search-btn {
+  width: 2.8em;
+  color: #007aff;
+  font-size: 17px;
+  text-align: center;
+}
+
+.list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  padding-bottom: 10px;
+  /* background-color: #f6f6f6; */
+}
+
+.list-loading {
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+}
+
+.list-item {
+  position: relative;
+  padding: 10px;
+  padding-right: 40px;
+}
+
+.list-item.selected::before {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  text-align: center;
+  content: "\e651";
+  font: normal normal normal 14px/1 "unibtn";
+  font-size: 24px;
+  line-height: 30px;
+  color: #007aff;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.list-item:not(:last-child)::after {
+  position: absolute;
+  content: "";
+  height: 1px;
+  left: 10px;
+  bottom: 0;
+  width: 100%;
+  background-color: #d3d3d3;
+}
+
+.list-item-title {
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.list-item-detail {
+  font-size: 12px;
+  color: #808080;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media screen and (min-width: 800px) {
+  .map {
+    top: 0;
+    height: 100%;
+  }
+  .map-move {
+    bottom: 10px;
+    right: 320px;
+  }
+  .menu {
+    top: 54px;
+    left: auto;
+    right: 10px;
+    width: 300px;
+    bottom: 10px;
+    max-height: 600px;
+    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+  }
+}
 </style>

src/platforms/h5/components/system-routes/system-header.vue

-<template>
-  <div class="system-header">
-    <div class="header-text">
-      <slot />
-    </div>
-    <div
-      class="header-btn header-back uni-btn-icon header-btn-icon"
-      @click="_back"
-    >
-      &#xe601;
-    </div>
-    <div
-      v-if="confirm"
-      class="header-btn header-confirm"
-      @click="_confirm"
-    >
-      <svg
-        class="header-btn-img"
-        width="200px"
-        height="200.00px"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M939.6960642844446 226.08613831111114c-14.635971697777777-13.725872355555557-37.719236835555556-13.070208568888889-51.445109191111115 1.6029502577777779L402.69993870222225 744.6571451733333 137.46159843555557 483.31364238222227c-14.344349013333334-14.12709944888889-37.392384-13.98030904888889-51.51948344888889 0.3640399644444444-14.12709944888889 14.30911886222222-13.945078897777778 37.392384 0.40122709333333334 51.482296319999996l291.8171704888889 287.48392106666665c0.10960327111111111 0.10960327111111111 0.2544366933333333 0.1448334222222222 0.3640399644444444 0.2544366933333333s0.1448334222222222 0.2544366933333333 0.2544366933333333 0.3640399644444444c2.293843057777778 2.1842397866666667 5.061329351111111 3.4231500799999997 7.719212373333333 4.879309937777777 1.3113264355555554 0.7652670577777777 2.43867648 1.8926159644444445 3.822419057777778 2.43867648 4.2960634311111106 1.6753664 8.846562417777779 2.548279751111111 13.361832391111111 2.548279751111111 4.769706666666666 0 9.539412195555554-0.9472864711111111 13.98030904888889-2.839903573333333 1.4933469866666664-0.6184766577777778 2.6578830222222223-1.8926159644444445 4.0416267377777775-2.6950701511111115 2.7302991644444448-1.6029502577777779 5.5702027377777785-2.9495068444444446 7.901232924444444-5.315766044444445 0.10960327111111111-0.10960327111111111 0.1448334222222222-0.2916238222222222 0.2544366933333333-0.40122709333333334 0.07241614222222222-0.10960327111111111 0.21920654222222222-0.1448334222222222 0.3268528355555555-0.2544366933333333L941.2579134577779 277.5273335466667C955.0953460622222 262.9305059555556 954.3320359822221 239.8844279466666 939.6960642844446 226.08613831111114z" />
-      </svg>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'SystemHeader',
-  props: {
-    confirm: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created () {
-    document.title = this.$slots.default[0].text
-    UniServiceJSBridge.emit('onNavigationBarChange', {
-      titleText: document.title,
-      textColor: '#fff',
-      backgroundColor: '#000'
-    })
-  },
-  methods: {
-    _back () {
-      this.$emit('back')
-    },
-    _confirm () {
-      this.$emit('confirm')
-    }
-  }
-}
-</script>
-
-<style>
-  .system-header {
-    position: relative;
-    width: 100%;
-    height: 44px;
-    color: #fff;
-    background-color: black;
-    padding: 0 44px;
-    text-align: center;
-    line-height: 44px;
-    font-size: 16px;
-    box-sizing: border-box;
-  }
-
-  .system-header * {
-    box-sizing: border-box;
-  }
-
-  .header-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .header-btn {
-    position: absolute;
-    width: 44px;
-    height: 44px;
-    top: 0;
-  }
-
-  .header-btn-img {
-    fill: #fff;
-    width: 50%;
-    height: 50%;
-    margin: 25%;
-  }
-
-  .header-back {
-    left: 0;
-  }
-
-  .header-confirm {
-    right: 0;
-  }
-
-  .header-btn-icon {
-    font-size: 27px;
-    line-height: 44px;
-  }
-</style>