jje_uniapp/storePages/store/store-choose.vue

<template>
    <view class="container">

        <!-- 地图容器 -->
        <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-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>
</template>

<script>
    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) {

            // 获取商店数据
            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)

                    },
                    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("获取用户门店列表报错")
                })
            },

            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
                            }
                        }
                    )
                })
            },

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

            .name {
                padding-right: 6px;
            }
        }
    }
</style>