|
|
@@ -0,0 +1,321 @@
|
|
|
+<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"
|
|
|
+ @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">
|
|
|
+ <view @click="selectStore(item)" class="h-left-value">
|
|
|
+ <view class="h-text">
|
|
|
+ <image src="../../static/index/u55.png" mode=""></image>
|
|
|
+ <text>地址：{{item.address}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-text">
|
|
|
+ <image src="../../static/me/u1796.png" mode=""></image>
|
|
|
+ 营业时间：<text>{{item.tradeTime}}~{{item.gooutTime}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-right-value h-flex">
|
|
|
+ <view @click="makePhone(item)" class="phone">
|
|
|
+ <image src="../../static/goods/u291.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view @click="gotoOrder(item)" class="sure">
|
|
|
+ <image src="../../static/goods/u292.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {storeList} from '/src/api/goods/goods.js';
|
|
|
+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: [
|
|
|
+ {
|
|
|
+ latitude: 26.5737,
|
|
|
+ longitude: 106.7135,
|
|
|
+ abcname: '123',
|
|
|
+ idx: 0
|
|
|
+ }, {
|
|
|
+ latitude: 23.099994,
|
|
|
+ longitude: 113.322520,
|
|
|
+ abcname: '123',
|
|
|
+ idx: 1
|
|
|
+ }, {
|
|
|
+ latitude: 23.099994,
|
|
|
+ longitude: 113.326520,
|
|
|
+ abcname: '123',
|
|
|
+ idx: 2
|
|
|
+ }, {
|
|
|
+ latitude: 23.096994,
|
|
|
+ longitude: 113.329520,
|
|
|
+ abcname: '123',
|
|
|
+ idx: 3
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ type: '1'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化地图
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ // 获取商店数据
|
|
|
+ this.getStoreListData();
|
|
|
+
|
|
|
+ // 判断Openid是否为空
|
|
|
+ if(!this.$isDataEmpty(option.type)){
|
|
|
+ this.type = option.type;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择门店
|
|
|
+ selectStore(item){
|
|
|
+ // 更新用户选择的门店信息
|
|
|
+ this.$store.commit('updateStoreInfo', item);
|
|
|
+ let pageCur = 'index';
|
|
|
+ if(this.type == '2'){
|
|
|
+ pageCur = 'goods';
|
|
|
+ }
|
|
|
+ uni.$u.route({
|
|
|
+ url: '/pages/index/tabbar',
|
|
|
+ params: {
|
|
|
+ PageCur: pageCur
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取门店列表数据
|
|
|
+ getStoreListData(){
|
|
|
+ let that = this;
|
|
|
+ storeList({data:this.reqParm}).then((res)=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.length>0){
|
|
|
+ that.storeList = res
|
|
|
+ // 添加坐标点
|
|
|
+ // that.addMarkers();
|
|
|
+ }
|
|
|
+ }).catch(() =>{
|
|
|
+ console.log("获取用户门店列表报错")
|
|
|
+ // uni.showToast({
|
|
|
+ // title: "操作失败"
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initMap(){
|
|
|
+ this._mapContext = uni.createMapContext("map", this);
|
|
|
+
|
|
|
+ // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
|
|
|
+ this._mapContext.initMarkerCluster({
|
|
|
+ enableDefaultStyle: false,
|
|
|
+ zoomOnClick: true,
|
|
|
+ gridSize: 60,
|
|
|
+ complete(res) {
|
|
|
+ console.log('initMarkerCluster', res)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this._mapContext.on("markerClusterCreate", (e) => {
|
|
|
+ console.log("markerClusterCreate", e);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ addMarkers() {
|
|
|
+ const markers = []
|
|
|
+ // 处理点的数据
|
|
|
+ this.storeList.forEach((p, i) => {
|
|
|
+ console.log(i)
|
|
|
+ markers.push(
|
|
|
+ Object.assign({},{
|
|
|
+ id: i,
|
|
|
+ iconPath: this.img,
|
|
|
+ width: 50,
|
|
|
+ height: 50,
|
|
|
+ // joinCluster: true, // 指定了该参数才会参与聚合
|
|
|
+ label: {
|
|
|
+ width: 150,
|
|
|
+ height: 30,
|
|
|
+ // borderWidth: 1,
|
|
|
+ // borderRadius: 10,
|
|
|
+ // bgColor: 'red',
|
|
|
+ textAlign: 'center',
|
|
|
+ // anchorX: -40,
|
|
|
+ // anchorY: -70,
|
|
|
+ content: p.storeName
|
|
|
+ }
|
|
|
+ },p)
|
|
|
+ )
|
|
|
+ })
|
|
|
+
|
|
|
+ // 添加点
|
|
|
+ this._mapContext.addMarkers({
|
|
|
+ markers,
|
|
|
+ clear: false,
|
|
|
+ complete(res) {
|
|
|
+ console.log('addMarkers', 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>
|
|
|
+
|
|
|
+<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{
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .h-text{
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ margin-right: 6px;
|
|
|
+ height: 12px;
|
|
|
+ width: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
zhanghui