Merge branch 'develop/3.1.5' into test

package-lock.json

@@ -8,6 +8,7 @@
       "name": "h5",
       "version": "0.1.0",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@dcloudio/uni-app-plus": "^2.0.1-34920220630001",
         "@dcloudio/uni-h5": "^2.0.1-34920220630001",
         "@dcloudio/uni-helper-json": "*",
@@ -30,6 +31,7 @@
         "@lucky-canvas/vue": "^0.1.11",
         "@vue/shared": "^3.0.0",
         "@zebra-ui/swiper": "^2.2.2",
+        "axios": "^1.4.0",
         "core-js": "^3.6.5",
         "flyio": "^0.6.2",
         "js-base64": "^3.7.5",
@@ -76,6 +78,11 @@
         "node": "8 || 10 || 12 || 14 || 16 || 17"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -5686,6 +5693,29 @@
       "resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "25.5.1",
       "resolved": "https://registry.npmmirror.com/babel-jest/-/babel-jest-25.5.1.tgz",
@@ -9722,7 +9752,6 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -16772,9 +16801,7 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/prr": {
       "version": "1.0.1",
@@ -21603,6 +21630,11 @@
         "js-message": "1.0.7"
       }
     },
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -26012,6 +26044,28 @@
       "resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-jest": {
       "version": "25.5.1",
       "resolved": "https://registry.npmmirror.com/babel-jest/-/babel-jest-25.5.1.tgz",
@@ -29340,8 +29394,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -35046,9 +35099,7 @@
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "prr": {
       "version": "1.0.1",

package.json

@@ -49,6 +49,7 @@
     "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@dcloudio/uni-app-plus": "^2.0.1-34920220630001",
     "@dcloudio/uni-h5": "^2.0.1-34920220630001",
     "@dcloudio/uni-helper-json": "*",
@@ -113,4 +114,4 @@
   "uni-app": {
     "scripts": {}
   }
-}
+}

src/api/map.js

@@ -0,0 +1,26 @@
+import request from "../utils/request";
+
+// 省市区
+export function options() {
+  return request({
+    url: `/province/city/area`,
+    method: 'get'
+  })
+}
+
+// 线下店铺
+export function list(data) {
+  return request({
+    url: `/offline/store/list`,
+    method: 'get',
+    data
+  })
+}
+
+// 第三方店铺
+export function storeList() {
+  return request({
+    url: `/offline/store/recommendList`,
+    method: 'get'
+  })
+}

src/components/uni-popup/uni-popup.vue

@@ -341,7 +341,7 @@
 			 */
 			bottom(type) {
 				this.popupstyle = 'bottom'
-				this.ani = ['slide-bottom']
+				this.ani = ['fade', 'slide-bottom']
 				this.transClass = {
 					position: 'fixed',
 					left: 0,

src/components/uni-segmented-control/uni-segmented-control.vue

@@ -1,148 +0,0 @@
-<template>
-  <view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
-    :style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
-    <view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
-		index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
-		index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
-			index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]"
-      :key="index"
-      :style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
-      class="segmented-control__item" @click="_onClick(index)">
-      <view>
-        <text :style="{color:
-				    index === currentIndex
-				      ? styleType === 'text'
-				        ? activeColor
-				        : '#fff'
-				      : styleType === 'text'
-				        ? '#FFFFFFB3'
-				        : activeColor}" class="segmented-control__text"
-          :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-/**
- * SegmentedControl 分段器
- * @description 用作不同视图的显示
- * @tutorial https://ext.dcloud.net.cn/plugin?id=54
- * @property {Number} current 当前选中的tab索引值，从0计数
- * @property {String} styleType = [button|text] 分段器样式类型
- * 	@value button 按钮类型
- * 	@value text 文字类型
- * @property {String} activeColor 选中的标签背景色与边框颜色
- * @property {Array} values 选项数组
- * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
- */
-
-export default {
-  name: 'UniSegmentedControl',
-  emits: ['clickItem'],
-  props: {
-    current: {
-      type: Number,
-      default: 0
-    },
-    values: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    activeColor: {
-      type: String,
-      default: '#2979FF'
-    },
-    styleType: {
-      type: String,
-      default: 'button'
-    }
-  },
-  data() {
-    return {
-      currentIndex: 0
-    }
-  },
-  watch: {
-    current(val) {
-      if (val !== this.currentIndex) {
-        this.currentIndex = val
-      }
-    }
-  },
-  created() {
-    this.currentIndex = this.current
-  },
-  methods: {
-    _onClick(index) {
-      if (this.currentIndex !== index) {
-        this.currentIndex = index
-        this.$emit('clickItem', {
-          currentIndex: index
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.segmented-control {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  box-sizing: border-box;
-  /* #endif */
-  flex-direction: row;
-  height: 36px;
-  overflow: hidden;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.segmented-control__item {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  box-sizing: border-box;
-  /* #endif */
-  position: relative;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-}
-
-.segmented-control__item--button {
-  border-style: solid;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-right-width: 1px;
-  border-left-width: 0;
-}
-
-.segmented-control__item--button--first {
-  border-left-width: 1px;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-
-.segmented-control__item--button--last {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.segmented-control__item--text {
-  border-bottom-style: solid;
-  border-bottom-width: 2px;
-  font-size: 36rpx !important;
-  font-weight: bold;
-  padding: 6px 0;
-}
-
-.segmented-control__text {
-  font-size: 32rpx;
-  line-height: 20px;
-  text-align: center;
-}
-</style>

src/manifest.json

@@ -1,88 +1,85 @@
 {
-	"name": "",
-	"appid": "",
-	"description": "",
-	"versionName": "1.0.0",
-	"versionCode": "100",
-	"transformPx": false,
-	"app-plus": {
-		/* 5+App特有相关 */
-		"usingComponents": true,
-		"splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		"modules": {
-			/* 模块配置 */
-
-		},
-		"distribute": {
-			/* 应用发布信息 */
-			"android": {
-				/* android打包配置 */
-				"permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
-					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
-					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
-					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
-					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-				]
-			},
-			"ios": {
-				/* ios打包配置 */
-
-			},
-			"sdkConfigs": {
-				/* SDK配置 */
-
-			}
-		}
-	},
-	"quickapp": {
-		/* 快应用特有相关 */
-
-	},
-	"mp-weixin": {
-		/* 微信小程序特有相关 */
-		"appid": "",
-		"setting": {
-			"urlCheck": false
-		},
-		"usingComponents": true
-	},
-	"mp-alipay": {
-		"usingComponents": true
-	},
-	"mp-baidu": {
-		"usingComponents": true
-	},
-	"mp-toutiao": {
-		"usingComponents": true
-	},
-	"mp-qq": {
-		"usingComponents": true
-	},
-	"h5": {
-		"router": {
-			"mode": "history"
-		}
-	}
+    "name": "",
+    "appid": "",
+    "description": "",
+    "versionName": "1.0.0",
+    "versionCode": "100",
+    "transformPx": false,
+    "app-plus": {
+        "webView": {},
+        /* 5+App特有相关 */
+        "usingComponents": true,
+        "splashscreen": {
+            "alwaysShowBeforeRender": true,
+            "waiting": true,
+            "autoclose": true,
+            "delay": 0
+        },
+        "modules": {},
+        /* 模块配置 */
+        "distribute": {
+            /* 应用发布信息 */
+            "android": {
+                /* android打包配置 */
+                "permissions": [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            "ios": {
+                /* ios打包配置 */
+            },
+            "sdkConfigs": {
+                /* SDK配置 */
+            }
+        }
+    },
+    /* SDK配置 */
+    "quickapp": {},
+    /* 快应用特有相关 */
+    "mp-weixin": {
+        /* 微信小程序特有相关 */
+        "appid": "",
+        "setting": {
+            "urlCheck": false
+        },
+        "usingComponents": true
+    },
+    "mp-alipay": {
+        "usingComponents": true
+    },
+    "mp-baidu": {
+        "usingComponents": true
+    },
+    "mp-toutiao": {
+        "usingComponents": true
+    },
+    "mp-qq": {
+        "usingComponents": true
+    },
+    "h5": {
+        "router": {
+            "mode": "history"
+        }
+    }
 }

src/pages.json

@@ -145,6 +145,14 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			// 门店列表
+			"path": "pages/map/index",
+			"style": {
+				"navigationBarTitleText": "附近门店",
+				"navigationStyle": "custom"
+			}
 		}
 	]
 }

src/pages/map/index.vue

@@ -0,0 +1,562 @@
+<template>
+  <view class='app-container'>
+    <!-- 定位 + 城市选择器 -->
+    <view class="tab" flex between>
+      <view class="address" @click="getRep">
+        <uni-icons :type="location === '定位中...' ? 'spinner-cycle' : 'location'" />
+        <text>{{ location }}</text>
+      </view>
+      <picker class="list" mode="multiSelector" :range="locationList" range-key="name" :value="pickerValue"
+        @columnchange="handleColumn" @change="handleChange">
+        <view flex style="width: 100%">
+          <view class="item" flex>
+            <view class="name">{{ province }}</view>
+            <uni-icons type="bottom" />
+          </view>
+          <view class="item" flex>
+            <view class="name">{{ city }}</view>
+            <uni-icons type="bottom" />
+          </view>
+          <view class="item" flex>
+            <view class="name">{{ district }}</view>
+            <uni-icons type="bottom" />
+          </view>
+        </view>
+      </picker>
+    </view>
+    <!-- 地图 -->
+    <view id="container" />
+    <!-- 范围内的门店 -->
+    <scroll-view scroll-y class="poi" @scrolltolower="scrollTolower">
+      <view v-if="list.length > 0" style="height: 100%; padding: 16px">
+        <view :class="['list', active === index ? 'active' : '']" flex center v-for="(item, index) in list" :key="item.id"
+          @click="changeActive(item, index)">
+          <img :src="item.icon" width="80" height="80" />
+          <view class="info">
+            <view class="name">{{ item.name }}</view>
+            <view class="distance">距离：{{ item.distance / 1000 }}KM</view>
+            <view class="address">地址：{{ item.address }}</view>
+          </view>
+          <view class="button" flex around>
+            <img class="icon" v-show="item.linkPhone" src="../../static/phone.png" @click="getPhone(item.linkPhone)" />
+            <img class="icon" src="../../static/address.png" @click="getMap(item)" />
+          </view>
+        </view>
+      </view>
+      <view v-else style="height: 100%;  padding: 0 16px">
+        <view class="storeList" v-for="item in storeList" :key="item.id" flex between>
+          <img :src="item.icon" width="56" height="56" />
+          <view class="info">
+            <view class="name">{{ item.name }}</view>
+          </view>
+          <button type="submit" @click="getStore(item.url)">进店逛逛</button>
+        </view>
+      </view>
+    </scroll-view>
+    <!-- 打开地图app弹窗 -->
+    <uni-popup ref="popup" type="bottom">
+      <view class="popup">
+        <view class="title" flex center>请选择地图</view>
+        <view class="item" flex center v-for="item in mapList" :key="item.value" @click="openMap(item.value)">
+          {{ item.name }}
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+// 安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: 'fd78b73eba80ab3f887c9ba60744048f'
+}
+import { options, list, storeList } from '@/api/map'
+export default {
+  data() {
+    return {
+      // 定位
+      location: '定位中...',
+      // 省市区列表
+      locationList: [],
+      // 选中焦点 
+      pickerValue: [18, 0, 0],
+      province: '',
+      city: '',
+      district: '',
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10,
+        longitude: 116.397428,
+        latitude: 39.90923
+      },
+      // 线下店铺
+      list: [],
+      // 默认选中第一家店铺
+      active: 0,
+      // 第三方店铺
+      storeList: [],
+      // 店铺坐标
+      toLng: '',
+      toLat: '',
+      toName: '',
+
+      // 地图
+      AMap: null,
+      map: null,
+      geolocation: null,
+      // 地图App
+      mapList: [{
+        value: 1,
+        name: '腾讯地图'
+      }, {
+        value: 2,
+        name: '百度地图'
+      }, {
+        value: 3,
+        name: '高德地图'
+      }],
+      // 只触发一次
+      only: true
+    }
+  },
+  onLoad() {
+    this.initAMap()
+  },
+  methods: {
+    async initAMap() {
+      // 调用高德
+      this.AMap = await this.getMapLoader()
+      // 自定义定位按钮
+      this.geolocation = new AMap.Geolocation({
+        enableHighAccuracy: true, // 高精度定位
+        timeout: 3000, // 定位超时时间
+        // zoomToAccuracy: true, // 定位成功后再调整视野
+        showCircle: false, // 定位成功有个圆形范围
+        showButton: false // 是否显示按钮
+      })
+      const locationRes = await this.getLocation(this.geolocation)
+      // 当前定位
+      if (locationRes.status === 'complete') {
+        this.form.longitude = locationRes.data.position.lng
+        this.form.latitude = locationRes.data.position.lat
+      }
+      // 获取城市信息
+      this.getGeocoder([this.form.longitude, this.form.latitude], locationRes.status)
+      // 绘制地图
+      this.map = new AMap.Map('container', {
+        zoom: 16,
+        center: [this.form.longitude, this.form.latitude]
+      })
+      // 调用插件
+      this.map.addControl(this.geolocation)
+      // 地图加载完
+      this.map.on('complete', () => {
+        // 自动定位一次
+        this.geolocation.getCurrentPosition()
+      })
+      // this.map.on('dragend', this.moveMapHandler)
+    },
+
+    // 调用高德
+    getMapLoader() {
+      return new Promise((resolve, reject) => {
+        AMapLoader.load({
+          key: '5dcf4cf0260059dade51d0d9b5e3c1ef',
+          version: '2.0',
+          plugins: ['AMap.Geolocation', 'AMap.Geocoder']
+        }).then((AMap) => {
+          resolve(AMap)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+
+    // 获取定位
+    getLocation(geolocation) {
+      return new Promise((resolve, reject) => {
+        this.AMap.plugin('AMap.Geolocation', function () {
+          geolocation.getCurrentPosition(function (status, res) {
+            resolve({
+              status: status,
+              data: res
+            })
+          })
+        })
+      })
+    },
+
+    // 获取城市信息
+    async getGeocoder(lnglat, locationStatus) {
+      const that = this
+      this.AMap.plugin('AMap.Geocoder', function () {
+        var geocoder = new AMap.Geocoder()
+        geocoder.getAddress(lnglat, function (status, resolve) {
+          if (status === 'complete' && resolve.info === 'OK' && resolve.regeocode.formattedAddress !== '中华人民共和国') {
+            let e = resolve.regeocode.addressComponent
+            that.location = locationStatus === 'complete' ? `${e.city ? e.city : e.province}${e.district}` : that.location = '重新定位'
+            that.form.city = null
+            that.city = '全部'
+            that.form.area = null
+            that.district = '全部'
+            that.locationList = []
+            options().then(res => {
+              if (res.data.code === 0) {
+                let value = []
+                // 市
+                that.locationList[0] = res.data.data
+                value[0] = that.locationList[0].findIndex(i => e.province.includes(i.name))
+                that.form.province = that.locationList[0][value[0]].id
+                that.province = that.locationList[0][value[0]].name
+                that.locationList[1] = that.locationList[0][value[0]].childList
+                value[1] = that.locationList[1].findIndex(i => i.citycode === e.citycode)
+                // 省
+                if (value[1] !== -1) {
+                  that.form.city = that.locationList[1][value[1]].id
+                  that.city = that.locationList[1][value[1]].name
+                  // 区
+                  that.locationList[2] = that.locationList[1][value[1]].childList
+                  value[2] = that.locationList[2].findIndex(i => i.adcode === e.adcode)
+                  if (value[2] !== -1) {
+                    that.form.area = that.locationList[2][value[2]].id
+                    that.district = that.locationList[2][value[2]].name
+                  }
+                }
+                that.pickerValue = value
+                that.getList()
+              }
+            })
+          }
+        })
+      })
+    },
+
+    // // 移动地图 中心坐标
+    // moveMapHandler() {
+    //   const center = this.map.getCenter()
+    //   this.form.longitude = center.lng
+    //   this.form.latitude = center.lat
+    //   this.getGeocoder([center.lng, center.lat], 'complete')
+    // },
+
+    // 添加标点
+    getMarker(lng, lat) {
+      const icon = new AMap.Icon({
+        size: new AMap.Size(30, 30),
+        imageSize: new AMap.Size(30, 30),
+        image: '../../static/location.png'
+      })
+      const marker = new AMap.Marker({
+        position: new AMap.LngLat(lng, lat),
+        offset: new AMap.Pixel(-5, -25),
+        icon: icon,
+        zoom: 16
+      })
+      marker.setMap(this.map)
+    },
+
+    // 打开地图
+    openMap(e) {
+      this.$refs.popup.close()
+      let url = ''
+      // 腾讯地图
+      if (e === 1) {
+        url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.form.latitude},${this.form.longitude}&to=${this.toName}&tocoord=${this.toLat},${this.toLng}&coord_type=2&referer=猫王妙播Pro}`
+      }
+
+      // 百度地图
+      if (e === 2) {
+        url = `http://api.map.baidu.com/direction?origin=latlng:${this.form.latitude},${this.form.longitude}|name:我的位置&destination=latlng:${this.toLat},${this.toLng}|name:${this.toName}&mode=driving&region=${this.province}&output=html&coord_type=gcj02&src=webapp.airsmart.猫王妙播Pro`
+      }
+
+      // 高德地图
+      if (e === 3) {
+        url = `https://uri.amap.com/navigation?from=${this.form.longitude},${this.form.latitude},我的位置&to=${this.toLng},${this.toLat},${this.toName}&callnative=1`
+      }
+      window.location.href = url
+    },
+
+    // 重新定位
+    getRep() {
+      this.location = '定位中...'
+      this.initAMap()
+    },
+
+    // 选择省
+    handleColumn(e) {
+      let column = e.detail.column
+      let index = e.detail.value
+      if (column === 0) {
+        this.pickerValue = [index, 0, 0]
+        this.locationList[1] = this.locationList[0][index].childList
+        this.locationList[2] = this.locationList[1].length > 0 ? this.locationList[1][0].childList : []
+      }
+      if (column === 1) {
+        this.pickerValue = [this.pickerValue[0], index, 0]
+        this.locationList[2] = this.locationList[1][index].childList
+      }
+    },
+
+    // 确定
+    handleChange(e) {
+      this.form.province = ''
+      this.form.city = ''
+      this.city = '全部'
+      this.form.area = ''
+      this.district = '全部'
+      let index = e.detail.value
+      this.form.province = this.locationList[0][index[0]].id
+      this.province = this.locationList[0][index[0]].name
+      if (this.locationList[1].length > 0) {
+        this.form.city = this.locationList[1][index[1]].id
+        this.city = this.locationList[1][index[1]].name
+      }
+      if (this.locationList[2].length > 0) {
+        this.form.area = this.locationList[2][index[2]].id
+        this.district = this.locationList[2][index[2]].name
+      }
+      this.getList()
+    },
+
+    // 线下店铺
+    getList() {
+      this.list = []
+      this.storeList = []
+      this.map.clearMap()
+      list(this.form).then(res => {
+        if (res.data.code === 0) {
+          if (res.data.data.records.length > 0) {
+            res.data.data.records.map(i => {
+              this.list.push(i)
+              this.getMarker(i.longitude, i.latitude)
+            })
+            this.hasMore = res.data.data.hasMore
+            this.map.setCenter([this.list[0].longitude, this.list[0].latitude])
+          } else {
+            this.getStoreList()
+          }
+        }
+      })
+    },
+
+    // 切换店铺
+    changeActive(item, index) {
+      this.active = index
+      this.map.setCenter([item.longitude, item.latitude])
+    },
+
+
+    // 第三方店铺
+    getStoreList() {
+      storeList().then(res => {
+        if (res.data.code === 0) {
+          this.storeList = res.data.data
+        }
+      })
+    },
+
+    // 跳转第三方店铺
+    getStore(url) {
+      window.location.href = url
+    },
+
+    // 拨打电话
+    getPhone(e) {
+      uni.makePhoneCall({
+        phoneNumber: e
+      })
+    },
+
+    // 打开地图
+    getMap(e) {
+      this.$refs.popup.open()
+      // 店铺坐标
+      this.toLng = e.longitude
+      this.toLat = e.latitude
+      this.toName = e.name
+    },
+
+    // 触底
+    scrollTolower() {
+      if (this.hasMore) {
+        this.form.pageNum++
+        this.getList()
+      } else {
+        if (this.only) {
+          uni.showToast({
+            icon: 'none',
+            title: '暂无更多店铺'
+          })
+          this.only = false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  position: relative;
+  color: #000;
+  font-size: 28rpx;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .tab {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    padding: 0 12px;
+    background-color: #FFF;
+    white-space: nowrap;
+
+    .address {
+      width: 100px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    uni-picker {
+      width: calc(100% - 100px);
+
+      .item {
+        width: calc(100% / 3);
+        margin: 0 5px;
+
+        .name {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  #container {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+
+  .poi {
+    width: 100%;
+    height: 270px;
+    overflow-y: auto;
+    z-index: 99;
+    background-color: #FFF;
+
+    .list,
+    .storeList {
+      width: 100%;
+      height: 104px;
+      padding: 12px;
+      border-bottom: 1px solid #e8e8e8;
+
+      img {
+        border-radius: 8px;
+      }
+
+      button {
+        height: auto;
+        line-height: 1;
+        font-size: 12px;
+        padding: 8px 10px;
+        border-radius: 8px;
+        margin: 0;
+      }
+
+      .info {
+        flex: 1;
+        padding: 0 8px;
+        overflow: hidden;
+
+        .name {
+          font-weight: bold;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .distance,
+        .address {
+          font-size: 10px;
+          color: #999;
+        }
+      }
+
+      .button {
+        flex-direction: column;
+
+        .icon:first-child {
+          margin-bottom: 20px;
+        }
+
+        .icon {
+          width: 24px;
+          background-color: #a4d099;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .list {
+      border-radius: 16px;
+      margin-bottom: 12px;
+    }
+
+    .storeList:last-child {
+      border: none;
+    }
+
+    .active {
+      background-color: #F2F5F7;
+    }
+  }
+
+  .uni-icons {
+    vertical-align: bottom;
+  }
+}
+
+.uni-popup {
+  z-index: 999;
+
+  .popup {
+    width: 90%;
+    background-color: #FFF;
+    border-radius: 16px;
+    margin: 0 auto;
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%);
+
+    .title {
+      height: 40px;
+      font-size: 12px;
+      border-bottom: 1px solid #e8e8e8;
+    }
+
+    .item {
+      width: 100%;
+      height: 60px;
+      border-bottom: 1px solid #e8e8e8;
+      font-size: 18px;
+    }
+
+    .item:last-child {
+      border: none;
+    }
+  }
+}
+</style>