izhaojia_h5/pages/index/index.vue

<template>
	<image class="topimg" mode="widthFix" src="../../static/logo1.png"></image>
	<view class="maxbox">
		<view class="xianbox">
			<view class="titl">项目类型</view>
			<picker @change="xzlx" range-key="name" :range="list">
				<view class="input">{{xzlistval==-1?'请选择项目类型':list[xzlistval]}}</view>
			</picker>
			<view class="titl">总建筑面积</view>
			<view class="shurukbox">
				<input v-model="area" placeholder="请输入总建筑面积(平米)"/>
			</view>
			<view class="titl">联系方式</view>
			<view class="shurukbox">
				<input v-model="phone" placeholder="请输入您的手机号"/>
			</view>
			<view class="titl">验证码</view>
			<view class="shurukbox">
				<input v-model="code" placeholder="请输入验证码"/>
				<view @click="huoqu">{{hqyzm}}</view>
			</view>
			<view class="xian"></view>
			<view class="wtyx" @click="fasonwt">发送委托意向</view>
			<view class="tis">提示：请确认您发布的是非测试项目,提交后项目经理会致电给您确认项目信息。</view>
		</view>
	</view>
</template>

<script>
	import { getconfig,sendcode,consultingservice } from '@/api/user.js'
	import { reactive, toRefs } from "vue"
	export default {
		setup(){
			let details=reactive({
				list:[],
				xzlistval:-1,
				hqyzm:'获取验证码',
				area:'',
				phone:'',
				code:''
			})
			getconfig({config:'projectType'}).then(res=>{
				console.log(res.data);
				details.list=res.data
			})
			function xzlx(e){
				details.xzlistval=e.detail.value
			}
			function huoqu(){
				let test=/^1[3-9][0-9]{9}$/
				if(!test.test(details.phone)){
					uni.showToast({
						title:'请正确输入手机号',
						icon:'none'
					})
					return
				}
				sendcode({phone:details.phone}).then(res=>{
					if(res.code==200){
						details.hqyzm=60
						let daojs=setInterval(()=>{
							if(details.hqyzm==0){
								details.hqyzm='获取验证码'
								clearInterval(daojs)
								return
							}
							details.hqyzm--
						},1000)
					}
				})
			}
			function fasonwt(){
				if(details.area==''||details.xzlistval==-1||details.code==''){
					uni.showToast({
						title:'请确认已经全部填写完成',
						icon:'none'
					})
					return
				}
				let test=/^1[3-9][0-9]{9}$/
				if(!test.test(details.phone)){
					uni.showToast({
						title:'请正确输入手机号',
						icon:'none'
					})
					return
				}
				let data={
					phone:details.phone,
					area:details.area,
					project_type:details.list[details.xzlistval],
					code:details.code
				}
				consultingservice(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
			return {
				fasonwt,
				huoqu,
				xzlx,
				...toRefs(details)
			}
		}
	}
</script>

<style lang="scss">
	// page{
	// 	background-color: #c1c1c1;
	// }
	.tis{
		padding: 30upx;
		color: #666;
		font-size: 24upx;
	}
	.xian{
		width: 680upx;
		height: 1upx;
		// background-color:rgba(0,0,0,0.1);
		margin-top: 20upx;
		margin-bottom: 50upx;
	}
	.wtyx{
		width: 560upx;
		padding: 20upx;
		box-sizing: border-box;
		margin: auto;
		text-align: center;
		background-color: #F06746;
		margin-top: 20upx;
		color: #ffffff;
		border-radius: 10upx;
	}
	.topimg{
		width: 100%;
	}
	.maxbox{
		width: 100%;
		height: 600upx;
		background-image: url('../../static/beijin.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 300upx;
	}
	.xianbox{
		width: 680upx;
		// padding: 30upx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin: auto;
		border-radius: 20upx;
		// margin-top: 100upx;
		padding-bottom: 20upx;
		>.titl{
			font-size: 32upx;
			// margin-bottom: 40upx;
			padding:30upx 30upx;
			padding-bottom: 15upx;
		}
		.input{
			font-size: 29upx;
			padding:20upx 30upx;
			padding-bottom: 15upx;
		}
		>.shurukbox{
			padding: 20upx 30upx;
			padding-bottom: 15upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>input{                                           
				flex: 1;
			}
			>view{
				color: #DC4732;
				font-size: 30upx;
				font-weight: bold;
			}
		}
	}
</style>