TalentService-mobile/pages/home/component/message.vue

<!-- 人才留言版 -->
<template>
	<view class="message">
		<form @submit="submit">
			<view class="blocks">
				<view class="block_input">
					<view><text>*</text>姓名：</view>
					<input type="text" name="name" v-model="form.name" placeholder="请输入您的姓名"/>
					<view class="tip" v-show="tip.name">请输入您的姓名</view>
				</view>
				
				<view class="block_input">
					<view><text>*</text>联系方式：</view>
					<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
					<view class="tip" v-show="tip.phone">请输入您的联系方式</view>
				</view>
				
				<view class="block_input">
					<view><text>*</text>类型：</view>
					<picker @change="bindTypeChange" :value="messageType" :range="typeList">
						<view>
							<input disabled type="text" name="type" :value="typeList[messageType]" placeholder="请选择类型"/>
							<u-icon class="type-icon" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
						</view>
					</picker>
				</view>
				
				<view class="block_input">
					<view><text>*</text>留言：</view>
					<view class="message-textarea">
						<textarea name="note" v-model="form.note" placeholder="请输入留言内容"  :maxlength="messageMaxlength"></textarea>
						<view class="mt-tip">
							{{ form.note.length }} / {{ messageMaxlength }}
						</view>
					</view>
					<view class="tip" v-show="tip.note">请输入留言内容</view>
				</view>
				<button class="messageSubmit" form-type="submit">提交</button>
			</view>
		</form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				form:{
					name: '',// 姓名
					phone: '',// 联系方式
					type: '',// 类别
					note: ''// 留言
				},
				tip: {
					name: false,
					phone: false,
					note: false
				},
				messageType: 0, //类型
				typeList: [
					"场地咨询",
					"政策咨询",
					"人才服务",
					"赛事咨询",
					"其他"
				],
				messageMaxlength: 300// 留言最长字数
			}
		},
		methods:{
			// 提交申请
			async submit(){
				const { name, phone, type, note } = this.form;
				this.tip = {
					name: name==='',
					phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
					note:note===''
				}
				
				if(name===''){
					this.$refs.uToast.show({type:'warning',title: "请输入姓名!"});
					return;
				}else if(!(/^1[345789]\d{9}$/.test(phone))){
					this.$refs.uToast.show({type:'warning',title: "联系方式不正确!"});
					return;
				}else if(note===''){
					this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
					return;
				}
				
				this.$refs.uToast.show({type:'success',title: "提交成功!"});
				this.clear();
			},
			// 清空
			clear(){
				this.form= {
					name: '',// 姓名
					phone: '',// 联系方式
					type: '',// 类别
					note: ''// 留言
				};
				this.messageType = 0;
				this.tip={
					name: false,
					phone: false,
					note: false
				};
			},
			// 选择类型
			bindTypeChange(e) {
				this.messageType = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
.message{
	padding:0 32rpx;
}
.blocks{
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 60rpx;
	.block_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.block_input{
		border-radius: 4rpx;
		margin-bottom: 32rpx;
		.tip{
			color: #FE020E;
			margin-top: 4rpx;
			font-size: small;
		}
		view{
			font-family: PingFang SC, PingFang SC;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 16rpx;
			text{
				vertical-align: middle;
				color: #FE020E;
				font-weight: bold;
				margin-right: 8rpx;
			}
		}
		input{
			height: 92rpx;
			background: #F8F9FB;
			border-radius: 4rpx;
			color: rgba(0,0,0,0.8);
			padding:0 32rpx;
			font-size: 32rpx;
		}
		.message-textarea{
			width: 100%;
			position: relative;
			textarea{
				padding: 32rpx;
				width: 100%;
				height: 400rpx;
				background: #F8F9FB;
				border-radius: 4rpx;
				color: rgba(0,0,0,0.8);
				font-size: 32rpx;
			}
			.mt-tip{
				position: absolute;
				font-size: 28rpx;
				right: 32rpx;
				bottom: 10rpx;
				z-index: 2;
				background-color: #f8f9fb;
				padding: 5rpx;
				border-radius: 8rpx;
			}
		}
	}
}
.messageSubmit{
	width: 100%;
	background: -webkit-linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
	background: linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
	height: 100rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	border-radius: 56rpx;
	margin-top: 40rpx;
	margin-bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	&::after{
		display: none;
	}
}
.type-icon{
	z-index:90;
	position: absolute;
	right: 50rpx;
	margin-top: -60rpx;
}
</style>