127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
Vue
<template>
|
||
<view class="avaout">
|
||
<page-head text="关于我们" brF="true" navState="true" ></page-head>
|
||
<view class="mapCon">
|
||
<map id="map" class="map" :show-location="true" scale="9" :latitude="aboutData.lat" :longitude="aboutData.lon"></map>
|
||
</view>
|
||
<view class="daohang" @click="daohang()">
|
||
导航到我们
|
||
</view>
|
||
<view class="title">
|
||
关于我们
|
||
</view>
|
||
<view class="text" v-html="aboutData.content">
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const img = '/static/logo.png';
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: 23.099994,
|
||
aboutData: {},
|
||
longitude: 113.324520,
|
||
}
|
||
},
|
||
created() {
|
||
this.getabout()
|
||
},
|
||
onReady() {
|
||
this._mapContext = uni.createMapContext("map", this);
|
||
this._mapContext.initMarkerCluster({
|
||
enableDefaultStyle: false,
|
||
zoomOnClick: true,
|
||
gridSize: 60,
|
||
complete(res) {
|
||
console.log('initMarkerCluster', res)
|
||
}
|
||
});
|
||
this._mapContext.on("markerClusterCreate", (e) => {
|
||
console.log("markerClusterCreate", e);
|
||
});
|
||
|
||
},
|
||
methods: {
|
||
getabout() {
|
||
this.requestToken({
|
||
url: this.host + "/api/index/about",
|
||
type: "post",
|
||
data: {
|
||
is_gome: 0,
|
||
},
|
||
success: (res) => {
|
||
this.aboutData = res.data.data
|
||
}
|
||
})
|
||
},
|
||
daohang() {
|
||
|
||
uni.getLocation({ //获取当前经纬度
|
||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||
success: (res) => {
|
||
wx.openLocation({ //使用微信内置地图查看位置。
|
||
address:this.aboutData.address,
|
||
latitude: this.aboutData.lat * 1, //要去的纬度-地址
|
||
longitude: this.aboutData.lon * 1, //要去的经度-地址
|
||
fail: err => {
|
||
this.$toolAll.tools.showToast('地址信息错误');
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.avaout {
|
||
padding: 0rpx 40rpx 40rpx 40rpx;
|
||
}
|
||
|
||
.mapCon {
|
||
width: 100%;
|
||
height: 390rpx;
|
||
border-radius: 25rpx;
|
||
margin-top: 40rpx;
|
||
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
|
||
overflow: hidden;
|
||
border: 2rpx solid #DDDDDD;
|
||
|
||
}
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
.daohang{
|
||
width: 667rpx;
|
||
height: 98rpx;
|
||
text-align: center;
|
||
line-height: 98rpx;
|
||
background-color: #000;
|
||
color: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
margin-top: 30rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.title{
|
||
font-size: 48rpx;
|
||
padding: 85rpx 0rpx;
|
||
font-weight: bold;
|
||
}
|
||
.text{
|
||
font-size: 30rpx;
|
||
color: #8c8c9b;
|
||
}
|
||
|
||
.text img{
|
||
width: 100%;
|
||
}
|
||
</style>
|