<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="门店列表" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="content">
|
<view class="map-body">
|
<map style="width: 100%;height: 100%;" id="map"
|
:scale="11"
|
:enable-3D="true"
|
:show-compass="true"
|
:enable-overlooking="true"
|
:enable-traffic="true"
|
:latitude="latitude"
|
:longitude="longitude"
|
:markers="covers">
|
</map>
|
</view>
|
<scroll-view class="store-list" scroll-y>
|
<view class="coreshop-margin-top-15" v-if="storeList.length>0">
|
<view class="coreshop-list menu-avatar" v-for="(item, key) in storeList" :key="key">
|
<view class="coreshop-list-item">
|
<image class="coreshop-avatar lg radius" :src="item.logoImage" mode="aspectFill"></image>
|
<view class="content">
|
<view class="coreshop-text-grey coreshop-padding-bottom-5">{{item.storeName|| ''}}</view>
|
<u-icon name="phone" size="16" :label="item.mobile" @tap="doPhoneCall(item.mobile)"></u-icon>
|
<view class="u-line-2 coreshop-font-xs coreshop-padding-top-5">
|
地址：{{item.address}}
|
</view>
|
</view>
|
<view class="action" @click="goMarkers(item.latitude,item.longitude)">
|
<view class="coreshop-text-grey coreshop-font-xs coreshop-margin-bottom-10">{{item.distanceStr|| ''}}</view>
|
<view class="coreshop-width-fit-content coreshop-margin-bottom-10">
|
<u-button text="上图定位" type="success" size="mini" />
|
</view>
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="coreshop-width-fit-content" @tap="goShopMap(item.address,item.latitude,item.longitude)">
|
<u-button text="地图导航" type="success" size="mini" />
|
</view>
|
<!-- #endif -->
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/history.png'" icon-size="150" text="暂无门店列表" mode="list"></u-empty>
|
</view>
|
|
</scroll-view>
|
</view>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
storeList: [],
|
longitude: 0,
|
latitude: 0,
|
covers: [{
|
'longitude': 0,
|
'latitude': 0
|
}],
|
page: 1,
|
limit: 30,
|
};
|
},
|
onLoad() {
|
this.getMyLocation();
|
},
|
methods: {
|
// 获取自己的位置信息
|
getMyLocation() {
|
let _this = this;
|
// #ifdef MP-WEIXIN
|
wx.getFuzzyLocation({
|
type: 'wgs84',
|
success(res) {
|
_this.longitude = res.longitude;
|
_this.latitude = res.latitude;
|
_this.getStoreList();
|
},
|
fail: function () {
|
_this.$u.toast("获取您的经纬度坐标失败")
|
},
|
complete: function (res) {
|
if (!_this.longitude || !_this.latitude) {
|
_this.longitude = '0';
|
_this.latitude = '0';
|
}
|
_this.getStoreList();
|
}
|
})
|
// #endif
|
// #ifndef MP-WEIXIN
|
uni.getLocation({
|
type: 'wgs84',
|
success: function (res) {
|
_this.longitude = res.longitude;
|
_this.latitude = res.latitude;
|
_this.getStoreList();
|
},
|
fail: function () {
|
_this.$u.toast("获取您的经纬度坐标失败")
|
},
|
complete: function (res) {
|
if (!_this.longitude || !_this.latitude) {
|
_this.longitude = '0';
|
_this.latitude = '0';
|
}
|
_this.getStoreList();
|
}
|
});
|
// #endif
|
},
|
// 获取店铺列表信息
|
getStoreList() {
|
let _this = this;
|
let data = {
|
'longitude': _this.longitude,
|
'latitude': _this.latitude,
|
'page': _this.page,
|
'limit': _this.limit,
|
}
|
_this.$u.api.storeList(data).then(res => {
|
if (res.status) {
|
_this.storeList = res.data;
|
let storeList = res.data;
|
if (storeList.length > 0) {
|
_this.longitude = storeList[0].longitude;
|
_this.latitude = storeList[0].latitude;
|
for (let i = 0; i < storeList.length; i++) {
|
let mark = {
|
id: storeList[i].id,
|
latitude: storeList[i].latitude,
|
longitude: storeList[i].longitude,
|
iconPath: '/static/images/map/location.png',
|
width: 15,
|
height: 23,
|
}
|
_this.covers.push(mark);
|
}
|
}
|
} else {
|
_this.$u.toast("门店信息获取失败")
|
}
|
});
|
},
|
//查看所在坐标地图位置
|
goShopMap(address,latitude, longitude) {
|
let plugin = requirePlugin('routePlan');
|
|
// #ifdef MP-WEIXIN
|
const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
|
const referer = this.$store.state.config.shopName; //调用插件的app的名称
|
let endPoint = JSON.stringify({ //终点
|
'name': address,
|
'latitude': latitude,
|
'longitude': longitude
|
});
|
|
wx.navigateTo({
|
url: 'plugin://routePlan/index?key=' + txMapkey + '&referer=' + referer + '&endPoint=' + endPoint
|
|
});
|
// #endif
|
},
|
doPhoneCall(phome) {
|
if (phome != 0) {
|
uni.makePhoneCall({
|
phoneNumber: phome
|
});
|
}
|
},
|
goMarkers(latitude, longitude) {
|
this.longitude = longitude;
|
this.latitude = latitude;
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@import "storeMap.scss";
|
</style>
|
