CommunityApp/pages/guest/guest_form.vue

<template>
	<view>
		<view class="card" >
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>访问小区</view>
				</view>
				<view class="bg-gray padding-20 "  >
					<input disabled type="text"  value="阅海万家D区" />
				</view>
			</view>
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>访问日期</view>
				</view>
				<view class="bg-gray padding-20 "  >
					<input disabled=""  type="text"  v-model="data.visitTime" />
				</view>
			</view>
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>接待人</view>
				</view>
				<view class="bg-gray padding-20 "  >
					<input  type="text" placeholder="请填写接待人"  v-model="data.receiver" />
				</view>
			</view>
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>来访者姓名:</view>
				</view>
				<view class="bg-gray padding-20 "  >
					<input  type="text" placeholder="请填写您的姓名" v-model="data.visitName" />
				</view>
			</view>
			<view class="form ">
				<view class="flex">
					<view class="need" >*</view>
					<view>来访者联系方式</view>
				</view>
				<view class="bg-gray padding-20 " >
					<input maxlength="11" type="number" placeholder="请输入您的联系方式" v-model="data.phone" />
				</view>
			</view>
		</view>
		
		<view class="card ">
			<view class="form" style="height: 320rpx;">
				<view class="flex">
					<view class="need" >*</view>
					<view>来访原因</view>
				</view>
				<view  class="bg-gray padding-10">
					<textarea @click="showMask"   v-model="data.visitReason" maxlength="100" style="width: 100%;height: 270rpx;line-height: 50rpx;"  placeholder="请填写来访原因"></textarea>
					<view  class="text-right text-df text-gray padding-top-10">
						{{data.visitReason.length}} / 100
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white" style="height: 160rpx;"></view>
		<view style="z-index: 999;" class=" footer-fixed" @click="submit">
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				确定提交
			</view>
		</view>
		<u-mask z-index="99999" :show="maskShow" @click="hideMask">
			<view style="margin: 20rpx;" @click.stop="">
				<textarea  @keyboardheightchange="keyboardheightchange" v-model="data.visitReason"  value="" style="background-color: #FFFFFF;width: 100%;padding: 20rpx;box-sizing: border-box;" placeholder="请填写来访原因" />
				<view  class="bg-white text-right text-df text-gray padding-10">
					{{data.visitReason.length}} / 100
				</view>
			</view>
		</u-mask>
		
	</view>
</template>

<script>
	var app=getApp()
	var that;
	export default {
		components:{
			
		},
		data() {
			return {
				data:{
					//访客联系方式
					phone:'19124812874',
					//访客姓名
					visitName:'黄明潘',
					//访问时间
					visitTime:this.$u.timeFormat(new Date(),'yyyy-mm-dd hh:MM:ss'),
					//访问原因
					visitReason:'看看小婉君',
					//接单人
					receiver:'小婉君'
				}
			}
		},
		onLoad() {
			that=this
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.bg-gray{
		background-color: #f7f7f7;
	}
	.card{
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.card .form{
		padding: 20rpx 40rpx;
	}
	.need{
		font-size: 38rpx;
		font-weight: 800;
		color: #ff0000;
		padding-right: 10rpx;
	}
</style>