newEdition/pages/mine/registerForm.vue

<template>
	<view class="cented-box">
		<view class="chented" style="margin-bottom: 26rpx;">
			<view class="title" style="border: none;">
				<view class="titletext">姓名</view>
				<view class="titletext2">
					<input maxlength="10" class="titletext-input" style="color: #333333;" v-model="parames.name"
						placeholder-class="titletext-input" placeholder-style="color:#B2B2B2;" type="text"
						placeholder="请输入客户姓名（必填）" />
				</view>
				<view class="titleimg">
					<!-- <image class="titleimg1" src="../../../static/images/arrow.png" mode=""></image> -->
				</view>
			</view>
		</view>
		
		<view class="chented">
			
			<view class="title">
				<view class="titletext">性别</view>
				<view class="titletext2 displayclick" style="display: flex;align-items: center;padding-left: 10rpx;">
					<view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view>
					<view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view>
				</view>
			</view>

			<view class="title">
				<view class="titletext">到访人数</view>
				<view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;">
					<view class="num" v-for="i in 6" :key="i" :class="{active:parames.howMany == i+1}"
						@click="changeHowMany(i+1)">
						{{i + 1}}
					</view>
				</view>
			</view>

			<view class="title" @click="Buildingselection()">
				<view class="titletext">到访途径</view>
				<view class="titletext2"
					style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
					<!-- {{parames.sourceName||'请选择客户来源'}} -->
					<text v-if="parames.sourceName" style="color: #333333;">{{parames.sourceName}}</text>
					<text v-else>请选择客户来源</text>
				</view>
				<view class="titleimg">
					<image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="title" style="border: none;" @click="Buildingselection()">
				<view class="titletext">咨询业务</view>
				<view class="titletext2"
					style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
					
					<text v-if="parames.sourceName" style="color: #333333;">{{parames.sourceName}}</text>
					<text v-else>请选择咨询业务</text>
				</view>
				<view class="titleimg">
					<image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
				</view>
			</view> -->
		</view>
		

		<!-- <view class="clive" @click="save">提交</view> -->
		<button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @click="save">提交</button>  

		<view v-if="Showhiddenunits">
			<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list"
				@cancel="cancel" @confirm="confirm"></u-select>
		</view>
		
	</view>
</template>

<script>
	var app = getApp();
	var config = require("@/config");

	export default {
		data() {
			return {
				Showhiddenunits: false,
				list: [{
						label: '自然到访',
						value: '自然到访'
					},
					{
						label: '渠道推荐',
						value: '渠道推荐'
					},
				],
				parames: {
					name: '',
					// 性别1男 2女
					sex: 1,
					sourceName: null,
					howMany: 1,
					agentId: null,
					projectId: '',
					phone:''
				},
				daitiReceptionobj: {},
			};
		},
		onShow() {
			this.parames.projectId = uni.getStorageSync('buildingID').id;
		},
		// agentId: null
		// howMany: 1
		// name: "1111"
		// phone: "17622221111"
		// projectId: "256142e1e2cb47b4a979d56ec9644545"
		// sex: 1
		// sourceName: "自然到访"
		methods: {
			save() {
				if (this.parames.name.length == 0) {
					uni.showToast({
						icon: "none",
						title: "姓名不能为空"
					})
					return;
				}
				// uni.getUserInfo({
				// 	success(e) {
				// 		console.log(e)
				// 	}
				// })
			},
			getPhoneNumber(e){
				if (this.parames.name.length == 0) {
					uni.showToast({
						icon: "none",
						title: "姓名不能为空",
					})
					return;
				}else{
					if(e.detail.errMsg=="getPhoneNumber:ok"){
						this.parames.phone = e.detail.errMsg
						this.$u.post("/customer/add", this.parames).then(res => {
							if(res.code == 10000){
								uni.navigateTo({
									url:'/pages/mine/registerResult'
								})
							}
						})
					}else{
						return;
					}
				}
				
			},  
			changeSex(sex) {
				this.parames.sex = sex;
			},
			changeHowMany(num) {
				this.parames.howMany = num;
			},
			
			Buildingselection() {
				this.Showhiddenunits = true;
			},
			cancel() {
				this.Showhiddenunits = false;
			},
			confirm(e) {
				this.parames.sourceName = e[0].value;
				this.Showhiddenunits = false;
			},
			
		}
	};
</script>
<style lang="scss" scoped>
	.sexRadio {
		color: #BFBFBF;
		border: 1rpx solid #BFBFBF;
		font-size: 24upx;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		&:last-child {
			margin-left: 20rpx;
		}

		&.active {
			background: #2B6FFF;
			color: #fff;
			border-color: #2B6FFF;
		}
	}

	.num {
		width: 50rpx;
		height: 50rpx;
		background: rgba(43, 110, 253, 0.1);
		color: #2B6EFD;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&.active {
			background: #2B6EFD;
			color: #FFFFFF;
		}
	}

	.cented-box {
		background: #F8F8F8;
		width: 100%;
		height: 100vh;
	}

	.Pinspeak {
		width: 100%;
		height: 92rpx;
		border-bottom: 1rpx solid #E0E0E0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-indent: 30rpx;
		line-height: 92rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-left: 10rpx;
	}

	.chented {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #FFFFFF;

		.title {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			align-items: center;

			.titletext {
				width: 21%;
				height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				text-indent: 10rpx;
			}

			.titletext2 {
				width: 71%;
				height: 110rpx;
			}

			.titletext-input {
				width: 100%;
				height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #B2B2B2;
				line-height: 110rpx;
				padding-left: 10rpx;
			}

			.titleimg {
				width: 8%;
				text-align: right;

				.titleimg1 {
					width: 16rpx;
					height: 36rpx;
				}
			}
		}
	}

	.clive {
		position: absolute;
		bottom: 32rpx;
		left: 30rpx;
		right: 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #2671E2;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		border-radius: 8rpx;
		font-size: 32rpx;
	}
</style>