|
|
@@ -1,315 +1,301 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
+ <view class="container">
|
|
|
|
|
|
- <!-- 地图容器 -->
|
|
|
- <view class="map-wrap">
|
|
|
- <map style="width: 100%; height: 300px;"
|
|
|
- id="map"
|
|
|
- :latitude="latitude"
|
|
|
- :longitude="longitude"
|
|
|
- :scale="scale"
|
|
|
- :show-location="true"
|
|
|
- @markertap="handleMarkerTap"
|
|
|
- >
|
|
|
- </map>
|
|
|
- </view>
|
|
|
+ <!-- 地图容器 -->
|
|
|
+ <view class="map-wrap">
|
|
|
+ <map style="width: 100%; height: 300px;"
|
|
|
+ id="map"
|
|
|
+ :latitude="latitude"
|
|
|
+ :longitude="longitude"
|
|
|
+ :scale="scale"
|
|
|
+ :show-location="true"
|
|
|
+ :enable-building="true"
|
|
|
+ :markers="markers"
|
|
|
+ @markertap="handleMarkerTap"
|
|
|
+ >
|
|
|
+ </map>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 地区 -->
|
|
|
- <!-- <view class="h-area-wrap">
|
|
|
+ <!-- 地区 -->
|
|
|
+ <!-- <view class="h-area-wrap">
|
|
|
|
|
|
- <view class="h-search">
|
|
|
- <view class="h-time">
|
|
|
- <view class="time">{{areaName}}</view>
|
|
|
- <u-icon name="arrow-down" color="#000" size="18"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="h-name">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
+ <view class="h-search">
|
|
|
+ <view class="h-time">
|
|
|
+ <view class="time">{{areaName}}</view>
|
|
|
+ <u-icon name="arrow-down" color="#000" size="18"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="h-name">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
- <!-- 门店列表 -->
|
|
|
- <view class="h-store-wrap">
|
|
|
- <view v-for="(item,index) in storeList" class="h-store-content">
|
|
|
- <view @click="selectStore(item)" class="h-row">
|
|
|
- <view class="h-left-value">
|
|
|
- <text class="h-name">{{item.storeName}}</text>
|
|
|
- </view>
|
|
|
- <view class="h-right-value">
|
|
|
- <!-- <text class="h-text">4.2km</text> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="h-row" @click="selectStore(item)">
|
|
|
- <view class="h-left-value">
|
|
|
- <view class="h-text">
|
|
|
- <image src="../../static/goods/dingwei.png" mode=""></image>
|
|
|
- <text>地址：{{item.address}}</text>
|
|
|
- </view>
|
|
|
- <view class="h-text">
|
|
|
- <image src="../../static/goods/time.png" mode=""></image>
|
|
|
- 营业时间：<text>{{item.tradeTime}}~{{item.gooutTime}}</text>
|
|
|
- </view>
|
|
|
- <view class="h-text">
|
|
|
- <image src="../../static/goods/zixun.png" mode=""></image>
|
|
|
- 咨询热线：<text>{{item.phone || ''}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-<!-- <view class="h-right-value h-flex">-->
|
|
|
-<!-- <view class="phone">-->
|
|
|
-<!-- <image src="../../static/goods/u291.png" mode=""></image>-->
|
|
|
-<!-- </view>-->
|
|
|
-<!-- <view class="sure">-->
|
|
|
-<!-- <image src="../../static/goods/u292.png" mode=""></image>-->
|
|
|
-<!-- </view>-->
|
|
|
-<!-- </view>-->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- 门店列表 -->
|
|
|
+ <view class="h-store-wrap">
|
|
|
+ <view v-for="(item,index) in storeList" class="h-store-content">
|
|
|
+ <view @click="selectStore(item)" class="h-row">
|
|
|
+ <view class="h-left-value">
|
|
|
+ <text class="h-name">{{item.storeName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-right-value">
|
|
|
+ <!-- <text class="h-text">4.2km</text> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-row" @click="selectStore(item)">
|
|
|
+ <view class="h-left-value">
|
|
|
+ <view class="h-text">
|
|
|
+ <image src="../../static/goods/dingwei.png" mode=""></image>
|
|
|
+ <text>地址：{{item.address}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-text">
|
|
|
+ <image src="../../static/goods/time.png" mode=""></image>
|
|
|
+ 营业时间：
|
|
|
+ <text>{{item.tradeTime}}~{{item.gooutTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-text">
|
|
|
+ <image src="../../static/goods/zixun.png" mode=""></image>
|
|
|
+ 咨询热线：
|
|
|
+ <text>{{item.phone || ''}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="h-right-value h-flex">-->
|
|
|
+ <!-- <view class="phone">-->
|
|
|
+ <!-- <image src="../../static/goods/u291.png" mode=""></image>-->
|
|
|
+ <!-- </view>-->
|
|
|
+ <!-- <view class="sure">-->
|
|
|
+ <!-- <image src="../../static/goods/u292.png" mode=""></image>-->
|
|
|
+ <!-- </view>-->
|
|
|
+ <!-- </view>-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- areaName: '贵阳市',
|
|
|
- latitude: 26.5737,
|
|
|
- longitude: 106.7135,
|
|
|
- scale: 12,
|
|
|
- img: '/static/index/u55.png',
|
|
|
- reqParm: {
|
|
|
- auth: true,
|
|
|
- longitude: 0,
|
|
|
- latitude: 0
|
|
|
- },
|
|
|
- storeList: [
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ markers:[],
|
|
|
+ areaName: '贵阳市',
|
|
|
+ latitude: 26.5737,
|
|
|
+ longitude: 106.7135,
|
|
|
+ scale: 10,
|
|
|
+ img: '/static/index/u55.png',
|
|
|
+ reqParm: {
|
|
|
+ auth: true,
|
|
|
+ longitude: 0,
|
|
|
+ latitude: 0
|
|
|
+ },
|
|
|
+ storeList: [],
|
|
|
+ type: '1'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化地图
|
|
|
+ // this.initMap();
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
|
|
|
- ],
|
|
|
- type: '1'
|
|
|
- }
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 初始化地图
|
|
|
- this.initMap();
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
+ // 获取商店数据
|
|
|
+ this.getStoreListData();
|
|
|
|
|
|
- // 获取商店数据
|
|
|
- this.getStoreListData();
|
|
|
+ this.getLocation()
|
|
|
+ // 判断Openid是否为空
|
|
|
+ if (option.type) {
|
|
|
+ this.type = option.type;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLocation() {
|
|
|
+ let that = this
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: function (res) {
|
|
|
+ that.latitude = res.latitude; // 纬度
|
|
|
+ that.longitude = res.longitude; // 经度
|
|
|
+ let mapContext = uni.createMapContext("map", this);
|
|
|
+ mapContext.moveToLocation()
|
|
|
+ },
|
|
|
+ fail: function (fail) {
|
|
|
+ console.log('获取用户地址失败==》', fail)
|
|
|
|
|
|
- this.getLocation()
|
|
|
- // 判断Openid是否为空
|
|
|
- if(option.type){
|
|
|
- this.type = option.type;
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getLocation(){
|
|
|
- let that = this
|
|
|
- uni.getLocation({
|
|
|
- type:'gcj02',
|
|
|
- success:function () {
|
|
|
- that.latitude = res.latitude; // 纬度
|
|
|
- that.longitude = res.longitude; // 经度
|
|
|
- },
|
|
|
- fail:function (fail) {
|
|
|
- console.log('获取用户地址失败==》',fail)
|
|
|
+ },
|
|
|
+ complete: function (complete) {
|
|
|
+ console.log('获取用户地址失败or成功==》', complete)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择门店
|
|
|
+ selectStore(item) {
|
|
|
+ // 更新用户选择的门店信息
|
|
|
+ uni.setStorageSync('storeInfo', item);
|
|
|
|
|
|
- },
|
|
|
- complete:function (complete) {
|
|
|
- console.log('获取用户地址失败or成功==》',complete)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 选择门店
|
|
|
- selectStore(item){
|
|
|
- // 更新用户选择的门店信息
|
|
|
- uni.setStorageSync('storeInfo', item);
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取门店列表数据
|
|
|
+ getStoreListData() {
|
|
|
+ let that = this;
|
|
|
+ this.$api.storeList({
|
|
|
+ latitude: this.latitude,
|
|
|
+ longitude: this.longitude,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ that.storeList = res.data.data
|
|
|
+ // 添加坐标点
|
|
|
+ that.addMarkers();
|
|
|
+ }).catch(() => {
|
|
|
+ console.log("获取用户门店列表报错")
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index',
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取门店列表数据
|
|
|
- getStoreListData(){
|
|
|
- let that = this;
|
|
|
- this.$api.storeList({
|
|
|
- latitude:this.latitude,
|
|
|
- longitude:this.longitude,
|
|
|
- }).then((res)=>{
|
|
|
- console.log(res)
|
|
|
- that.storeList = res.data.data
|
|
|
- // 添加坐标点
|
|
|
- that.addMarkers();
|
|
|
- }).catch(() =>{
|
|
|
- console.log("获取用户门店列表报错")
|
|
|
- })
|
|
|
- },
|
|
|
- initMap(){
|
|
|
- this._mapContext = uni.createMapContext("map", this);
|
|
|
+ addMarkers() {
|
|
|
+ this.markers = []
|
|
|
+ // 处理点的数据
|
|
|
+ this.storeList.forEach((p, i) => {
|
|
|
+ this.markers.push(
|
|
|
+ {
|
|
|
+ id: i,
|
|
|
+ iconPath: '/static/index/u55.png',
|
|
|
+ width: 30,
|
|
|
+ height: 30,
|
|
|
+ latitude: p.latitude,
|
|
|
+ longitude: p.longitude,
|
|
|
+ // joinCluster: true, // 指定了该参数才会参与聚合
|
|
|
+ label: {
|
|
|
+ width: 150,
|
|
|
+ height: 30,
|
|
|
+ textAlign: 'center',
|
|
|
+ content: p.storeName
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
|
|
|
- this._mapContext.initMarkerCluster({
|
|
|
- enableDefaultStyle: false,
|
|
|
- zoomOnClick: true,
|
|
|
- gridSize: 60,
|
|
|
- complete(res) {
|
|
|
- console.log('initMarkerCluster', res)
|
|
|
- }
|
|
|
- });
|
|
|
+ // 点击地图上的点
|
|
|
+ handleMarkerTap(marker) {
|
|
|
+ console.log('Marker tapped:', marker);
|
|
|
+ console.log(this.storeList[marker.markerId])
|
|
|
+ },
|
|
|
+ // 打电话
|
|
|
+ makePhone(phoneNumber) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: phoneNumber
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 去下单页面
|
|
|
+ gotoOrder(item) {
|
|
|
+ this.type = '2';
|
|
|
+ this.selectStore(item);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
|
|
|
- this._mapContext.moveToLocation()
|
|
|
+<style scoped lang="scss">
|
|
|
+ .h-store-wrap {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 4px;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 12px;
|
|
|
+ border-radius: 12px;
|
|
|
|
|
|
- this._mapContext.on("markerClusterCreate", (e) => {
|
|
|
- console.log("markerClusterCreate", e);
|
|
|
- });
|
|
|
+ .h-store-content {
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ background: #fafafa;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
|
|
- },
|
|
|
- addMarkers() {
|
|
|
- const markers = []
|
|
|
- // 处理点的数据
|
|
|
- this.storeList.forEach((p, i) => {
|
|
|
- console.log(i)
|
|
|
- markers.push(
|
|
|
- Object.assign({},{
|
|
|
- id: i,
|
|
|
- iconPath: this.img,
|
|
|
- width: 30,
|
|
|
- height: 30,
|
|
|
- // joinCluster: true, // 指定了该参数才会参与聚合
|
|
|
- label: {
|
|
|
- width: 150,
|
|
|
- height: 30,
|
|
|
- // borderWidth: 1,
|
|
|
- // borderRadius: 10,
|
|
|
- // bgColor: 'red',
|
|
|
- textAlign: 'center',
|
|
|
- // anchorX: -40,
|
|
|
- // anchorY: -70,
|
|
|
- content: p.storeName
|
|
|
- }
|
|
|
- },p)
|
|
|
- )
|
|
|
- })
|
|
|
+ .h-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- // 添加点
|
|
|
- this._mapContext.addMarkers({
|
|
|
- markers,
|
|
|
- clear: false,
|
|
|
- complete(res) {
|
|
|
- console.log('addMarkers', res)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ .h-left-value {
|
|
|
+ .h-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
|
|
|
- // 点击地图上的点
|
|
|
- handleMarkerTap(marker){
|
|
|
- console.log('Marker tapped:', marker);
|
|
|
- console.log(this.storeList[marker.markerId])
|
|
|
- },
|
|
|
- // 打电话
|
|
|
- makePhone(phoneNumber){
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: phoneNumber
|
|
|
- });
|
|
|
- },
|
|
|
- // 去下单页面
|
|
|
- gotoOrder(item){
|
|
|
- this.type = '2';
|
|
|
- this.selectStore(item);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
+ .h-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
-.h-store-wrap{
|
|
|
- margin-top: 12px;
|
|
|
- background: #fff;
|
|
|
- padding-top:4px;
|
|
|
- padding-left: 12px;
|
|
|
- padding-right: 12px;
|
|
|
- border-radius: 12px;
|
|
|
- .h-store-content{
|
|
|
- margin-top: 12px;
|
|
|
- margin-bottom: 12px;
|
|
|
- background: #fafafa;
|
|
|
- padding: 12px;
|
|
|
- border-radius: 6px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- .h-row{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .h-left-value{
|
|
|
- .h-name{
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .h-text{
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 40rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- image{
|
|
|
- margin-right: 12rpx;
|
|
|
- height: 24rpx;
|
|
|
- width: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .h-right-value{
|
|
|
- .h-text{
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- .h-flex{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- image{
|
|
|
- height: 30px;
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ image {
|
|
|
+ margin-right: 12rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ width: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-right-value {
|
|
|
+ .h-text {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .h-area-wrap {
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-search {
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-right: 12px;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ .h-time {
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ padding-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .h-name {
|
|
|
+ width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
|
-.h-area-wrap{
|
|
|
- margin-right: 12px;
|
|
|
- margin-left: 12px;
|
|
|
- margin-top: 12px;
|
|
|
-}
|
|
|
-.h-search{
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- padding-left: 12px;
|
|
|
- padding-top: 8px;
|
|
|
- padding-right: 12px;
|
|
|
- background: #fff;
|
|
|
- padding-bottom: 8px;
|
|
|
- border-radius: 6px;
|
|
|
- .h-time{
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- .time{
|
|
|
- padding-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- .h-name{
|
|
|
- width: 70%;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- .name{
|
|
|
- padding-right: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .name {
|
|
|
+ padding-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
zhanghui