market-app-ui/pages/login/register.vue

<template>
	<view>
		<navigation-bar background-color="#fff" front-color="#000000" />
		<view class="remain">
			<h1>欢迎注册</h1>
			<view class="wel">请注册您的账号</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="100px" label-position="top">
				<u-form-item label="手机号" prop="phone">
					<view class="form-input">
						<u-input v-model="form.phone" type="number" border="surround" maxlength='11'
							placeholder='请输入手机号码' :clearable='false' />
					</view>
				</u-form-item>
				<u-form-item label="选择你的身份" prop="type">
					<view class="form-input" @click="show=true" >
						<u-input v-model="form.type" type="text"
							placeholder='请选择你的身份' :clearable='false' disabled />
					<u-picker :show="show" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
					</view>
				</u-form-item>
				<u-form-item label="验证码" prop="smsCode">
					<view class="form-input">
						<view class="u-demo-block__content">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="请输入验证码">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入验证码">
									<!-- #endif -->
									<template slot="suffix">
										<u-code ref="uCode" @change="codeChange" seconds="20"
											changeText="X秒重新获取哈哈哈"></u-code>
										<u-button @tap="getCode" :text="tips" type="error" size="mini"></u-button>
									</template>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<view class="form-input">
						<u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
					</view>
				</u-form-item>
				<u-form-item label="确认密码" prop="rePassword">
					<view class="form-input">
						<u-input v-model="form.rePassword" type="password" placeholder='请输入密码' :clearable='false' />
					</view>
				</u-form-item>
			</u-form>
			<view style="font-size: 13px;">忘记密码？</view>
			<view class="btn">
				<view style="margin-bottom: 10px;">
					<u-radio-group v-model="value" :wrap="true">
						<u-radio :label="radioLabel"></u-radio>
					</u-radio-group>
				</view>
				<view>
					<u-button type="error" shape="circle" text="注册" @click="submit()"></u-button>
				</view>
				<view class="tip" @click="toLogin()">已有账号，去登录</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					smsCode: '',
					password: '',
					type: '',
					nickName:'',
					rePassword: '',
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur,change'
					}]
				},
				radioLabel: "登录同意《用户协议》和《隐私政策》",
				tips: '获取验证码',
				value: '',
				columns: [
					// ['边民', '经销商', '外籍商户','司机']
					[1,2,3,4]
				],
				show: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.$api.doRefister(this.form).then(res => {
						console.log(res)
						if(res.code==200){
							uni.$u.toast('注册成功')
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}).catch(err => {
						console.log(err)
					})
				}).catch(errors => {
					uni.$u.toast('注册失败')
				})
			},
			radioChange() {
				console.log("1111")
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			changeHandler(e){
				console.log(e)
				this.form.type=e.value[0]
			},
			confirm(e) {
				// console.log(e)
				this.show=false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 30px;
	}

	.remain {
		margin: 50px 100px 0;
		text-align: center;
	}

	.wel {
		margin-top: 10px;
	}

	.form {
		height: 200px;
	}

	.form-input {
		width: 100%;
		background-color: #E8E8E8;
		border-radius: 5px;
		margin-top: 5px;
	}

	.btn {
		margin: 25px 10px;
	}

	.tip {
		margin-top: 30px;
		text-align: center;
		font-size: 14px;
	}
</style>