smartFactory/pages/consult/apply.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/imgs/icon_left_jt.png" @click="back"></image>
			<text>申请专项演示方案</text>
		</view>
		<view class="contact">
			<view class="title">请留下您的联系方式</view>
			<view class="item first">
				<view class="name"><span>*</span>公司名称</view>
				<view class="inp">
					<input type="text" placeholder="请输入公司名称" v-model="info.companyName">
				</view>
			</view>
			<view class="item">
				<view class="name"><span>*</span>联系电话</view>
				<view class="inp">
					<input type="tel" placeholder="请输入联系电话" v-model="info.linkPhone">
				</view>
			</view>
			<view class="item">
				<view class="name"><span>*</span>姓名</view>
				<view class="inp">
					<input type="text" placeholder="请输入您的姓名" v-model="info.realName">
				</view>
			</view>
			<view class="item last">
				<view class="name"><span>*</span>企业需求</view>
				<view class="inp">
					<textarea maxlength="-1" placeholder="请输入企业需求" v-model="info.requirement"></textarea>
				</view>
			</view>
		</view>
		<view class="apply" @click="apply">立即申请</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				info:{
					companyName:'',
					linkPhone:'',
					realName:'',
					requirement:''
				},
				canApply:true,
			}
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			apply(){
				if(!this.canApply) return;
				if(!this.info.companyName) return this.$showToast('请输入公司名称');
				if(!this.$reg.mobile(this.info.linkPhone)) return this.$showToast('请输入正确的联系电话');
				if(!this.info.realName) return this.$showToast('请输入您的姓名');
				if(!this.info.requirement) return this.$showToast('请输入企业需求');
				
				this.canApply = false;
				this.$api.post('/specialcrowd-admin/contactus',this.info).then(res=>{
					this.canApply = true;
					if(res.data.code===0){
						this.$showToast('申请成功');
					}else this.$showToast(res.data.msg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		background: #fff;
		
		.top{
			margin-top: 24rpx;
			width: 100%;
			height: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				line-height: 42rpx;
			}
			image{
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				top: 0;
				left: 30rpx;
			}
		}
	
		.contact{
			width: calc(100% - 48rpx);
			margin: 44rpx 24rpx 0;
			padding: 36rpx 0 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 12rpx;
			
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				line-height: 45rpx;
				padding-left: 28rpx;
				position: relative;
				&:before{
					content: '';
					width: 12rpx;
					height: 24rpx;
					background: #1460CA;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -12rpx;
				}
			}
			
			.item{
				width: calc(100% - 60rpx);
				height: 90rpx;
				box-shadow: inset 0rpx -2rpx 0rpx 0rpx #F0F1F4;
				margin: 0 30rpx 0;
				display: flex;
				align-items: center;
				&.first{
					margin-top: 63rpx;
				}
				&.last{
					height: 300rpx;
					align-items: flex-start;
					padding: 25rpx 0;
					box-sizing: border-box;
				}
				
				.name{
					width: 176rpx;
					padding-left: 22rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					position: relative;
					span{
						width: 24rpx;
						height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #F61B1B;
						line-height: 40rpx;
						position: absolute;
						left: 0;
					}
				}
				
				.inp{
					width: calc(100% - 176rpx);
					height: 100%;
					input,textarea{
						width: 100%;
						height: 100%;
						border: none;
						outline: none;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 37rpx;
						&::placeholder{
							color: #CCCCCC;
						}
					}
				}
			}
		}
	
		.apply{
			width: calc(100% - 80rpx);
			height: 80rpx;
			background: #1460CA;
			border-radius: 12rpx;
			margin: 194rpx 40rpx 0;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}
	}
</style>