property/user_ui/work/pages/visitor/vdetail.vue

<template>
	<view class="warrbox flexdc" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar title="访客信息" left-icon="left" @clickLeft="getBackFn"  color="#FFFFFF" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">	
			</uni-nav-bar>
		</view>
		<!-- <image :src="mbg" class="navbg"></image> -->
		<view class="vdmain flexdc">
			<view class="flex1">
				<view class="flexcc mb26">
					<view class="line lia"></view>
					<view class="vdtop">邀请详情</view>
					<view class="line lib"></view>
				</view>
				<view class="vdlist mb26">
					<view class="list"><text>访客姓名：</text>{{datainfo.name}}</view>
					<view class="list"><text>来访时间：</text>{{datainfo.visitorTime}}</view>
					<view class="flexc">
						<view class="list mw50"><text>来访人数：</text>{{datainfo.num}}人</view>
						<view class="list mw50"><text>来访事由：</text>{{datainfo.reason}}</view>
					</view>
					<view class="flexc">
						<view class="list mw50"><text>车牌号码：</text>{{datainfo.plateNumber||''}}</view>
						<view class="list mw50"><text>手机号码：</text>{{datainfo.mobileNumber}}</view>
					</view>	
				</view>
				<!-- 地图 -->
				<view class="mb22">
					<map
						id="container"
						class="map"
						:latitude="center.lat"
						:longitude="center.lng"
						@poitap="onClcikImgMap"
						@tap="onClcikImgMap"
						:markers="covers"
						scale="18"
						style="width: 638rpx;height:280rpx;"
					></map>
					<!-- <map
						id="container"
						class="map"
						:latitude="center.lat"
						:longitude="center.lng"
						@poitap="onClcikImgMap"
						@tap="onClcikImgMap"
						:markers="covers"
						scale="15"
						:style="'width: 750rpx;height:' + mapheight + 'px;'"
					></map> -->
				</view>
				<view class="adrbox mb16">
					<view class="tit mb10">房屋地址</view>
					<view class="txt">{{datainfo.detailAddress}}{{datainfo.houseAddress}}</view>
				</view>
				<view class="adrbox">
					<view class="flexc mb6">
						<view class="tit flex1">共享位置</view>
						<view class="flexc" @click="checkflag=!checkflag">
							<view class="flex1"></view>
							<image :src="check" v-if="checkflag" class="checkimg"></image>
							<image :src="ncheck" v-else class="checkimg"></image>
						</view>
					</view>
					
					<view class="txts">打开即确认将位置共享于被分享者</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="rhbtn mt30" @click="getShareFn">分享</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="rhbtn mt30">分享</button>
			<!-- #endif -->
			<!-- <button class="rhbtn mt30" @click="getShareFn">分享</button> -->
			<!-- <view class="rhbtn mt30" @click="getShareFn">分享</view> -->
<!-- 			<view class="rhbtn mt30" @click="getPutFn">修改</view> -->
		</view>	
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {geocodeAddress} from '@/utils/common.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {reservDet} from "@/api/work/people.js"
	var key='';
	// #ifdef H5
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	// #ifdef APP-PLUS
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	// #ifdef MP-WEIXIN
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	export default{
		components:{},
		data(){
			return{
				check: require('@/mine/static/check.png'),
				ncheck: require('@/mine/static/ncheck.png'),
				mapimg: require("@/work/static/visitor/adr.png"),
				nvaHeight:44,
				checkflag:false,
				backgroundColor: "transparent",
				baseUrl:config.baseUrl,
				baseUrlimg:config.baseUrlimg,
				mapContext:'',
				center:{
					lng:'',
					lat:'',
				},
				covers:[],
				// covers: [{
				// 	id:0,
				// 	latitude: '31.839676',
				// 	longitude: '117.211954',
				// 	width:18,   //宽
				// 	height:19,   //高
				// 	iconPath: require("@/work/static/visitor/adr.png"),
				// 	anchor:{x: 0.5, y: 0.5}
				// }],
				id:'',
				datainfo:{}
			}
		},
		onLoad: function(e) {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
			if(e.id){
				this.id=e.id;
				this.getDetail()
			}
		},
		onReady() {
			this.getcreateMap()
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0256FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onShareAppMessage(res) {
			this.comflag=false;
			if (res.from === 'button') {// 来自页面内分享按钮
			    var data=res.target.dataset;
				var newobj={
					title: "邀请你来我家",
					path: 'http://192.168.101.147:9091'
				}
				// if(data.img){
				// 	newobj.imageUrl=this.baseUrl+data.img
				// }
				return newobj
			}else{
				return {
				  title: '智能校管家',
				  path: '/pages/trends/index'
				}
			}
		},
		methods:{
			checkPermi, checkRole,
			getcreateMap(){
				//mapId 就是你在 map 标签中定义的 id
				this.mapContext = uni.createMapContext('container', this);
			},
			onClcikImgMap(){
				
			},
			getShareFn(){
				 // this.$tab.navigateTo(`/work/pages/visitor/vshare?id=${this.id}&cflag=${this.checkflag}`)
				// #ifdef APP-PLUS
					uni.shareWithSystem({
					  summary: '',
					  href: 'http://47.99.82.249:5011/work/pages/visitor/vshare/id='+this.id+'&cflag'+this.checkflag,
					  success(){
					    // 分享完成，请注意此时不一定是成功分享
					  },
					  fail(){
					    // 分享失败
					  }
					})
				// #endif
			},
			getPutFn(){
				this.$tab.navigateTo("/work/pages/visitor/vadd?id="+this.id)
			},
			getOpenFn(){
				
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getPhoneFn(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			async getLocation(address) {
				console.log(address,111)
				var that=this;
			      if (!address) {
			        uni.showToast({ title: '请输入地址', icon: 'none' });
			        return;
			      }
			
			      try { 
			        const { latitude, longitude } = await geocodeAddress(address, key);
			        this.center.lat = latitude;
			        this.center.lng = longitude;
					console.log(latitude,longitude)
					that.covers = [];
					that.covers = [{
						id:3,
						width:18,   //宽
						height:19,   //高
						latitude: latitude,
						longitude: longitude,
						iconPath: that.mapimg,
						anchor:{x: 0.5, y: 0.5}
					}]
			      } catch (error) {
			        // uni.showToast({ title: '获取经纬度失败', icon: 'none' });
			      }
			},
			getDetail(){
				reservDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.chooseValue=res.data.portalId;
						if(res.data.detailAddress){
							this.getLocation(res.data.detailAddress)
						}
					}
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.warrbox{min-height: 100vh;background: linear-gradient(180deg, #0256FD 0%,#528AF9 60%, rgba(255,255,255,0) 100%) no-repeat;background-size: 100% 722rpx;padding:0 30rpx 26rpx;}
.rfbga{background: #2ACA8E !important;}
.navbg{width: 100%;height: 722rpx;z-index: 0;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}

.vdmain{z-index: 2;position: relative;background: #FFFFFF;border-radius: 20rpx;flex: 1;padding: 60rpx 26rpx 98rpx;
	.line{width: 168rpx;height: 2rpx;
		&.lia{background: linear-gradient(270deg, #0256FD 0%, rgba(2,86,253,0) 100%);}
		&.lib{background: linear-gradient(90deg, #0256FD 0%, rgba(2,86,253,0) 100%);}
	}
	.vdtop{font-weight: bold;font-size: 26rpx;color: #272727;margin: 0 32rpx;}
	.vdlist{
		.list{font-weight: 500;font-size: 26rpx;color: #272727;margin-bottom: 24rpx;}
	}
	.adrbox{
		.tit{font-weight: bold;font-size: 26rpx;color: #272727;}
		.txt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;}
		.txts{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
		.checkimg{width: 80rpx;height: 40rpx;margin-left: 8rpx;}
	}
}


</style>