124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
<template>
|
|
<view class="service">
|
|
<view class="map-cont">
|
|
<map
|
|
:longitude="info.longitude"
|
|
:latitude="info.latitude"
|
|
:markers="[{latitude: info.latitude,longitude: info.longitude,width: 20, height: 25, iconPath: webUrl + '/page/qianxian/icon-location.png'}]"
|
|
style="width: 100%;height: 100%; border-radius: 20rpx;"
|
|
/>
|
|
</view>
|
|
<view class="v12-mt-3 info-wrap">
|
|
<view>
|
|
<view class="v12-font-32 v12-font-bold v12-mb-2">{{ info.name || '' }}</view>
|
|
<view class="v12-font-24 v12-mb-1 v12-dark1-text">办公时间:{{ info.officeTime || '' }}</view>
|
|
<view class="v12-font-24 v12-mb-1 v12-dark1-text">{{ info.address || '' }}</view>
|
|
</view>
|
|
<view class="action-wrap">
|
|
<view @click="showLocation">
|
|
<view>
|
|
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
|
|
</view>
|
|
<view class="text-center">导航</view>
|
|
</view>
|
|
<view @click="call">
|
|
<view>
|
|
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
|
|
</view>
|
|
<view class="text-center">咨询</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 0 20rpx;"><u-divider></u-divider></view>
|
|
<view class="intro-wrap">
|
|
<view class="v12-dark-text v12-font-bold">
|
|
简介
|
|
</view>
|
|
<view class="intro-text">
|
|
{{ info.intro || '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
info: {
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.info);
|
|
},
|
|
methods: {
|
|
showLocation() {
|
|
console.log(this.info);
|
|
|
|
if (!this.info.latitude || !this.info.longitude) {
|
|
this.$dialog.error('暂无位置信息')
|
|
} else {
|
|
uni.openLocation({
|
|
latitude: this.info.latitude,
|
|
longitude: this.info.longitude
|
|
})
|
|
}
|
|
},
|
|
call() {
|
|
if (this.info.tel) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.info.tel
|
|
})
|
|
} else {
|
|
this.$dialog.error('电话为空')
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.intro-text{
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.intro-wrap{
|
|
padding: 0 20rpx 20rpx;
|
|
}
|
|
.action-wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
.text-center{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
.info-wrap{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 40rpx 20rpx 0;
|
|
}
|
|
.service{
|
|
position: relative;
|
|
}
|
|
.map-cont {
|
|
height: 400rpx;
|
|
border-radius: 20rpx;
|
|
background: #f2f1ed;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.img{
|
|
display: block;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin: 0 0 16rpx 16rpx;
|
|
}
|
|
</style> |