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>王女士</view>
					<view class="list"><text>来访时间：</text>2024-11-20  10:00</view>
					<view class="flexc">
						<view class="list mw50"><text>来访人数：</text>1人</view>
						<view class="list mw50"><text>来访事由：</text>亲友</view>
					</view>
					<view class="flexc">
						<view class="list mw50"><text>车牌号码：</text>皖A B8888</view>
						<view class="list mw50"><text>手机号码：</text>1870566558</view>
					</view>	
				</view>
				<!-- 地图 -->
				<view class="mb22">
					<map
						id="container"
						class="map"
						:latitude="center.lat"
						:longitude="center.lng"
						@poitap="onClcikImgMap"
						@tap="onClcikImgMap"
						:markers="covers"
						scale="17"
						:style="'width: 638rpx;height:280rpx;'"
					></map>
				</view>
				<view class="adrbox mb16">
					<view class="tit mb10">房屋地址</view>
					<view class="txt">安徽省合肥市蜀山区高新技术产业开发区幸福大街88号
幸福小区5#1304</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>
			<view class="rhbtn mt30" @click="getShareFn">分享</view>
		</view>	
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				check: require('@/mine/static/check.png'),
				ncheck: require('@/mine/static/ncheck.png'),
				nvaHeight:44,
				checkflag:false,
				backgroundColor: "transparent",
				baseUrl:config.baseUrl,
				type:'',
				finshtype:3,
				center:{
					lng:'117.211954',
					lat:'31.839676',
				},
				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}
				}],
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
		},
		onReady() {
			this.getcreateMap()
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0256FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods:{
			checkPermi, checkRole,
			getcreateMap(){
				//mapId 就是你在 map 标签中定义的 id
				this.mapContext = uni.createMapContext('container', this);
			},
			getShareFn(){
				this.$tab.navigateTo("/work/pages/visitor/vshare")
			},
			getAssignFn(){
				this.type='assign'
			},
			getCheckFn(){
				this.type='assigncheck'
			},
			getOpenFn(){
				
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getClose(){
				this.type='';
			},
			getSure(){
				this.type='';
			},
			getPhoneFn(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			getPreviewImage(arr,idx){
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
		}
	}
</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>