jje_uniapp/storePages/store/store-choose.vue

<template>
    <view class="container">

        <!-- 地图容器 -->
        <view class="map-wrap">
            <map class="tencent-map" style="width: 100%; height: 300px;"
                 id="map"
                 :latitude="latitude"
                 :longitude="longitude"
                 :scale="scale"
                 :enable-building="true"
                 :markers="markers"
                 :show-location="false"
                 @markertap="handleMarkerTap"
            >
            </map>
        </view>

        <!-- 地区 -->
        <!-- <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-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">{{item.distanceDesc}}</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>
                        <view class="h-right-value  flex-row justify-between">
                            <view  class="phone" @click.stop="makePhoneCall(item.phone)">
                                <image src="../../static/goods/phone.png" mode=""></image>
                            </view>
                            <view  class="sure" @click.stop="openmap(item)">
                                <image src="../../static/goods/daohang.png" mode=""></image>
                            </view>
                        </view>
                        <view class="juli">
                            {{item.distanceDesc}}
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isGetAddress:true, //是否获取到了经纬度
                markers:[],
                areaName: '贵阳市',
                latitude: 26.5737,
                longitude: 106.7135,
                scale: 12,
                img: '/static/index/u55.png',
                reqParm: {
                    auth: true,
                    longitude: 0,
                    latitude: 0
                },
                storeList: [],
                type: '1',
              navigateRouter:null

            }
        },
        onReady() {
            // 初始化地图
            // this.initMap();
        },
        onLoad(option) {


            this.getLocation()
            setTimeout(e=>{
                console.log('定时器要执行了 isGetAddress =>',this.isGetAddress)
                if (this.isGetAddress){
                    console.log('定时器执行了isGetAddress =>',this.isGetAddress)
                    this.isGetAddress = !this.isGetAddress
                    this.getStoreListData()
                }
            },5000)
            // 判断Openid是否为空
            if (option.type) {
                this.type = option.type;
            }
        },
      onShow(){
        this.navigateRouter = uni.getStorageSync('router');
      },
        methods: {

            openmap(selfTake) {
                uni.openLocation({
                    latitude: selfTake.latitude * 1,
                    longitude: selfTake.longitude * 1,
                    address: selfTake.address,
                    success: function () {
                        console.log('success');
                    },
                    fail(err){

                        console.log(err,"++++++++++++++++++++++++++++++")
                    },
                });
            },

            makePhoneCall(phone){
                if (!phone){
                    uni.$u.toast('该门店没有设置电话')
                    return
                }
                uni.makePhoneCall({
                    phoneNumber:phone
                })
            },
            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)

                    },
                    complete: function (complete) {
                        console.log('获取用户地址失败or成功==》', complete)
                        // 获取商店数据
                        if (that.isGetAddress){
                            console.log("根据位置获取门店执行了 isGetAddress =>",that.isGetAddress)
                            that.isGetAddress = !that.isGetAddress
                            that.getStoreListData()
                        }
                    }
                })
            },
            // 选择门店
            selectStore(item) {
                // 更新用户选择的门店信息
                uni.setStorageSync('storeInfo', item);
              console.log(this.navigateRouter)
                if(this.navigateRouter == 1){
                  uni.reLaunch({
                    url: '/orderPages/storeService/index'
                  })
                  uni.removeStorage({
                    key: 'router'
                  });
                }else if(this.navigateRouter == 2){
                  uni.reLaunch({
                    url: '/orderPages/bookService/index'
                  })
                  uni.removeStorage({
                    key: 'router'
                  });
                }else {
                  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.latitude = res.data.data[0].latitude
                    that.longitude = res.data.data[0].longitude
                    // 添加坐标点
                    that.addMarkers();
                }).catch(() => {
                    console.log("获取用户门店列表报错")
                })
            },

            addMarkers() {
                this.markers = []
                // 处理点的数据
                this.storeList.forEach((p, i) => {
                    this.markers.push(
                        {
                            id: i,
                            iconPath: '/static/index/address.png',
                            width: 28,
                            height: 35,
                            latitude: p.latitude,
                            longitude: p.longitude,
                            // joinCluster: true, // 指定了该参数才会参与聚合
                            // label: {
                            //     width: 150,
                            //     height: 30,
                            //     // display:'ALWAYS',
                            //     // borderWidth:200,
                            //     // bgColor:'#ffffff',
                            //     textAlign: 'center',
                            //     content: p.storeName
                            // },
                            callout: {
                                // width: 150,
                                // height: 30,
                                display:'ALWAYS',
                                borderWidth:6,
                                color:'#ffffff',//文字颜色
                                borderRadius:5,//边框圆角
                                fontSize:14,//文本大小
                                bgColor:'#645d57',//背景颜色
                                borderColor: '#645d57',
                                textAlign: 'center',
                                content: p.storeName
                            },
                            // callout:{//自定义标记点上方的气泡窗口 点击有效
                            //     content: p.storeName,//文本
                            //     color:'#000000',//文字颜色
                            //     // fontSize:14,//文本大小
                            //     borderRadius:15,//边框圆角
                            //     borderWidth:'5',
                            //     bgColor:'#ffffff',//背景颜色
                            //     display:'ALWAYS',//常显
                            // },
                        }
                    )
                })
            },

            // 点击地图上的点
            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>

<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 {
                    width: 100rpx;
                    .h-text {
                        font-size: 10px;
                        font-weight: 400;
                        color: #999999;
                        line-height: 18px;

                    }
                    image {
                        height: 40rpx;
                        width: 40rpx;
                    }
                }

                .h-flex {
                    display: flex;
                    justify-content: space-between;


                }
            }
        }
    }


    .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;
            }
        }
    }

    .juli{
        text-align: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
    }

    /* 隐藏腾讯地图版权标识 */
    .tencent-map .qq-map-copyright {
        display: none;
    }
</style>