puqiang/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>
		
		<button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="verifyPass">提交</button>  
		<view class="clive" @click="save" v-else>提交</view>
		
		<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");
	let domain = require("@/utils/domain")
	export default {
		data() {
			return {
				Showhiddenunits: false,
				list: [{
						label: '自然到访',
						value: '自然到访'
					},
					{
						label: '渠道推荐',
						value: '渠道推荐'
					},
				],
				parames: {
					name: '',
					sex: 1,
					sourceName: null,
					howMany: 1,
					projectId: '',
					phone:'',
					projectId:'',
					projectName:'xxx'
				},
				daitiReceptionobj: {},
				verifyPass:false,
				qrCodeUrl:''
			};
		},
		onLoad(options){
			const sceneStr = decodeURIComponent(options.scene);
			console.log(options)
			this.parames.projectId = sceneStr
		},
		watch:{
			parames:{
				deep:true,
				handler(newV){
				    if (newV.name.length == 0) {
						this.verifyPass = false;
					}else{
						this.verifyPass = true;
					}
				}
			}
		},
		
		methods: {
			save() {
				if (this.parames.name.length == 0) {
					uni.showToast({
						icon: "none",
						title: "姓名不能为空"
					})
					return;
				}
			},
			getPhoneNumber(e){
				this.qrCodeUrl = domain.baseUrl
				if(e.detail.errMsg=="getPhoneNumber:ok"){
					let data = {
						code:e.detail.code,
						appid:uni.getAccountInfoSync().miniProgram.appId,
					}
					uni.request({
						url:this.qrCodeUrl + '/code/loginSessionKey',
						method:"GET",
						data,
						success:(res)=> {
							console.log(res.data.data)
							let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
							this.parames.phone = phoneNum
							if(this.parames.phone!=null && this.parames.phone!=""){
								if(this.parames.name.length>8){
									uni.showToast({
										icon: "none",
										title: "不能超过8个汉字"
									})
								}else{
									uni.request({
										url:this.qrCodeUrl + '/customer/codeAdd',
										method:"POST",
										data:this.parames,
										header: {
											'content-type': 'application/json',
											'Access-Token': uni.getStorageSync('weapp_session_login_data').token
										},
										success: (addres) => {
											if(addres.data.code == 10000){
												uni.reLaunch({
													url:'/pages/mine/registerResult'
												})
											}else{
												uni.showToast({
													icon: "none",
													title: addres.data.message
												})
											}
										}
									})
								
								}
							}
							
						}
					})
				}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>