You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
4.2 KiB
208 lines
4.2 KiB
2 months ago
|
<template>
|
||
|
<view :style="colorStyle">
|
||
|
<map class="map-view" :key="mapKey" :scale="9" :latitude="latitudeStore" :longitude="longitudeStore" :markers="covers" @markertap="markertap">
|
||
|
<view v-if="markerIdTapped" class="cover-view">
|
||
|
<view class="cover-view-item">
|
||
|
<view class="cover-view-text title">{{ markertapped.name }}</view>
|
||
|
<view class="store" @tap="openStore(markertapped.id)">进店选购<view class="iconfont icon-xiangyou"></view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="cover-view-item">
|
||
|
<view class="cover-view-text address">{{ markertapped.detailed_address }}</view>
|
||
|
<view class="group-button">
|
||
|
<view class="button" @tap="makePhoneCall(markertapped.phone)">
|
||
|
<view class="iconfont icon-ic_phone"></view>
|
||
|
</view>
|
||
|
<view class="button" @tap="openLocation(markertapped)">
|
||
|
<view class="iconfont icon-ic_location"></view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</map>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import colors from "@/mixins/color";
|
||
|
import {
|
||
|
getList
|
||
|
} from '@/api/new_store.js';
|
||
|
|
||
|
export default {
|
||
|
mixins: [colors],
|
||
|
data() {
|
||
|
return {
|
||
|
latitudeStore: uni.getStorageSync('user_latitude'),
|
||
|
longitudeStore: uni.getStorageSync('user_longitude'),
|
||
|
content: {
|
||
|
latitude: uni.getStorageSync('user_latitude'),
|
||
|
longitude: uni.getStorageSync('user_longitude'),
|
||
|
store_type: 1,
|
||
|
},
|
||
|
storeList: [],
|
||
|
markerIdTapped: 0,
|
||
|
mapKey: ''
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
covers() {
|
||
|
return this.storeList.map(({
|
||
|
id,
|
||
|
latitude,
|
||
|
longitude,
|
||
|
image: iconPath
|
||
|
}) => ({
|
||
|
id,
|
||
|
latitude,
|
||
|
longitude,
|
||
|
iconPath,
|
||
|
width: 30,
|
||
|
height: 30
|
||
|
}));
|
||
|
},
|
||
|
markertapped() {
|
||
|
return this.storeList.find(item => item.id === this.markerIdTapped);
|
||
|
}
|
||
|
},
|
||
|
onLoad() {
|
||
|
this.getList();
|
||
|
},
|
||
|
methods: {
|
||
|
getList() {
|
||
|
getList(this.content).then(res => {
|
||
|
let storeList = res.data;
|
||
|
this.storeList = storeList;
|
||
|
console.log(this.storeList)
|
||
|
// for (let i = 0; i < this.storeList.length; i++) {
|
||
|
// this.downloadImage(i);
|
||
|
// }
|
||
|
});
|
||
|
},
|
||
|
downloadImage(index) {
|
||
|
uni.request({
|
||
|
url: this.storeList[index].image,
|
||
|
responseType:'arraybuffer',
|
||
|
success: (res) => {
|
||
|
const base64 = uni.arrayBufferToBase64(res.data);
|
||
|
this.$set(this.storeList[index], 'path', 'data:image/png;base64,' + base64);
|
||
|
this.mapKey = index;
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
markertap(e) {
|
||
|
this.markerIdTapped = e.detail.markerId;
|
||
|
},
|
||
|
openStore(id) {
|
||
|
uni.navigateTo({
|
||
|
url: '/pages/store/home/index?mapFrom=1&id=' + id
|
||
|
})
|
||
|
},
|
||
|
makePhoneCall(phoneNumber) {
|
||
|
uni.makePhoneCall({
|
||
|
phoneNumber
|
||
|
});
|
||
|
},
|
||
|
openLocation({
|
||
|
latitude,
|
||
|
longitude,
|
||
|
name,
|
||
|
address,
|
||
|
detailed_address
|
||
|
}) {
|
||
|
uni.openLocation({
|
||
|
latitude: Number(latitude),
|
||
|
longitude: Number(longitude),
|
||
|
name,
|
||
|
address: `${address}-${detailed_address}`
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.map-view {
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.cover-view {
|
||
|
position: absolute;
|
||
|
right: 48rpx;
|
||
|
bottom: 48rpx;
|
||
|
bottom: calc(48rpx + constant(safe-area-inset-bottom));
|
||
|
bottom: calc(48rpx + env(safe-area-inset-bottom));
|
||
|
left: 48rpx;
|
||
|
padding: 28rpx 28rpx 24rpx 30rpx;
|
||
|
border-radius: 12rpx;
|
||
|
background-color: #FFFFFF;
|
||
|
box-shadow: 0 0 28rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
|
}
|
||
|
|
||
|
.cover-view-item {
|
||
|
display: flex;
|
||
|
|
||
|
+.cover-view-item {
|
||
|
margin-top: 18rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.cover-view-text {
|
||
|
flex: 1;
|
||
|
min-width: 0;
|
||
|
padding-right: 50rpx;
|
||
|
}
|
||
|
|
||
|
.title {
|
||
|
font-weight: bold;
|
||
|
font-size: 28rpx;
|
||
|
color: #333333;
|
||
|
}
|
||
|
|
||
|
.store {
|
||
|
display: flex;
|
||
|
font-size: 22rpx;
|
||
|
line-height: 28rpx;
|
||
|
color: var(--view-theme);
|
||
|
|
||
|
.iconfont {
|
||
|
margin-left: 10rpx;
|
||
|
font-size: 22rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.address {
|
||
|
white-space: normal;
|
||
|
font-size: 22rpx;
|
||
|
line-height: 32rpx;
|
||
|
color: #888888;
|
||
|
}
|
||
|
|
||
|
.group-button {
|
||
|
align-self: center;
|
||
|
display: flex;
|
||
|
|
||
|
.button {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
width: 40rpx;
|
||
|
height: 40rpx;
|
||
|
border-radius: 50%;
|
||
|
background-color: var(--view-minorColorT);
|
||
|
|
||
|
+.button {
|
||
|
margin-left: 20rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.iconfont {
|
||
|
font-size: 20rpx;
|
||
|
color: var(--view-theme);
|
||
|
}
|
||
|
}
|
||
|
</style>
|