caimei-applets-caimei/pages/login/consult.vue

<template>
	<view class="container consult">
		<view class="consult-main">
			<text class="main-text">注:若暂不方便入驻机构或无法入驻，您可以留下您的姓名和联系方式，采美工作人员会第一时间联系您</text>
		</view>
		<view class="consult-input">
			<input type="text"  v-model="userName"  maxlength="6" class="input" placeholder="姓名"/>
		</view>
		<view class="consult-input">
			<input type="number"  v-model="mobile"  maxlength="11" class="input" placeholder="手机号"/>
		</view>
		<view class="consult-btn"  @click="goconsult">提交</view>
	</view>
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	import authorize from '@/common/config/authorize.js' 
	import { quickConsultation  } from '@/api/use.js'
	export default{
		data() {
			return{
				userName:'',
				mobile:''
			}
		},
		onLoad(option) {
			
		},
		methods:{
			goconsult(){
				if( this.userName == ''){
					this.$util.msg('请输入姓名',2000);
					return
				}
				if( this.mobile == ''){
					this.$util.msg('请输入手机号',2000);
					return
				}
				if(!this.$reg.isMobile(this.mobile)){
					this.$util.msg('手机号格式不正确',2000);
					return
				}
				quickConsultation({name:this.userName,mobile:this.mobile}).then(response=>{
					this.$util.modal('提交成功','您的信息已提交成功,采美工作人员会第一时间联系您','确定','',false,() =>{
						this.$api.switchTabTo('/pages/tabBar/home/home')
					})
				}).catch(error=>{
					this.$util.msg(error.msg,2000);
				})
			},
		}
	}
</script>

<style lang="scss">
	.consult{
		width: 100%;
		height: auto;
		.consult-main{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: auto;
			padding: 260rpx 0 60rpx 0;
			.main-text{
				width: 654rpx;
				display: block;
				font-size: $font-size-28;
				color: #999999;
			}
		}
		.consult-input{
			width: 654rpx;
			height: 40rpx;
			padding: 24rpx;
			margin: 0 auto;
			margin-bottom: 60rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			.input{
				width: 100%;
				height: 100%;
				background: #F7F7F7;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
		.consult-btn{
			width: 702rpx;
			height: 88rpx;
			border-radius: 14rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
			margin-top: 80rpx;
		}
		.model-authorization{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.authorization{
				width: 518rpx;
				height: 320rpx;
				position: absolute;
				background: rgba(255,255,255,.7);
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				.to-btn{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 70%;
					height: 88rpx;
					font-size: $font-size-28;
					line-height: 88rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 44rpx;
				}
			}
		}
	}
</style>