NurseStationPersonApp/pages/register/register.vue

<template>
	<view class="app">
		<view class="item">
			<view class="lefttext">
				姓名
			</view>
			<input class="righttext" type="text" placeholder="请输入" v-model="appPersonallist.nickName" maxlength="30"/>
		</view>
		<view class="item">
			<view class="lefttext">
				输入密码
			</view>
			<u-input class='righttext' style='left:30%' placeholder="请输入密码" maxlength="10"
				v-model="appPersonallist.password" type="password" :border="false" :password-icon="true" />
		</view>
		<view class="item">
			<view class="lefttext">
				重复密码
			</view>
			<u-input class='righttext' style='left:30%' placeholder="请再次输入密码" maxlength="10"
				v-model="appPersonallist.newpassword" type="password" :border="false" :password-icon="true" />
		</view>
		<view class="item">
			<view class="lefttext">
				手机号
			</view>
			<input class="righttext" style='left:23%' type="text" placeholder="请输入" maxlength="11"
				v-model="appPersonallist.phonenumber" />
		</view>
		<view class="item" @tap='show=true'>
			<span>护理站</span>
			<text class='addition'>{{nurseStationName}}</text>
			<u-select v-model="show" mode="single-column" :list="listinfo" @confirm="confirm"></u-select>
		</view>
		<view class="radio-content" @tap="changeRadio">
			<view class="radio-right">
				<view class="radio" :class="radio == 2 ? 'radio-default':''">
					<view :class="radio == 2 ? 'radio-active':''"></view>
				</view>
			</view>
			<text class="agreement">我已阅读并同意</text>
			<text @tap='maskshow=true;showRegectAgreeButton=false'>《用户协议》</text>
		</view>
		<view class="loginbtn" @tap='getInfo'>
			注册
		</view>
		<view class="switch" style="right:5%" @tap='gologin'>
			已有账号,去登录
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		nurseAppLoginSysUser,
		personNurseStationLists
	} from '../../api/register/index.js'
	export default {
		data() {
			return {
				listinfo: [],
				show: false,
				radio: 1, //用户协议
				nickName: '',
				userId: 13,
				userName: 123,
				nurseStationName: '',
				pageSize: 999,
				pageNum: 1,
				total: 0,
				appPersonallist: {
					nickName: '',
					newpassword: '',
					phonenumber: '',
					password: '',
					nurseStationIds: '',
				}

			};
		},
		onLoad() {
			this.info()
		},
		onReachBottom() { //下滑加载
			if (this.listinfo.length >= this.total) {} else {
				this.pageNum++
				personNurseStationLists(this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						this.list.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			personNurseStationLists(this.PageNum, this.pageSize).then(res => {
				this.listinfo = res.rows
				this.total = res.total
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			//护理站
			info() {
				personNurseStationLists(this.pageNum, this.pageSize).then(res => {
					console.log(res)
					this.total = res.total

					this.listinfo = res.rows.map((e) => {
						return {
							value: e.id,
							label: e.nurseStationName,
						}
					})
				})
			},
			confirm(e) {
				console.log(e);
				this.appPersonallist.nurseStationIds = e[0].value
				this.nurseStationName = e[0]['label']
				console.log(e[0]['label'])
			},

			//注册功能
			getInfo() {
				nurseAppLoginSysUser(this.appPersonallist).then(res => {
					console.log(res)
					if (this.password !== this.newpassword) {
						this.$refs.uToast.show({
							title: '密码输入不一致，请重新输入',
							type: 'error',
							duration: '1500'
						})
					} else if (res.code == 200) {
						this.$refs.uToast.show({
							title: '注册成功，前往登录',
							type: 'success',
							url: '/pages/login/login',
							duration: '1500'
						})
					} else if (this.radio == 1) {
						this.$refs.uToast.show({
							title: '请审核并同意用户协议',
							type: 'error'
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}

				})
			},
			//跳转登录页
			gologin() {
				uni.navigateTo({
					url: `/pages/login/login?phonenumber=${this.phonenumber}&password=${this.password}`
				})
			},

			changeRadio() {
				if (this.radio == 1) {
					this.radio = 2;
				} else {
					this.radio = 1;
				}
			},
		},
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		padding: 20rpx 0;

		.item {
			font-size: 34rpx;
			margin: 0 auto 20rpx;
			width: 94%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			position: relative;

			span {
				margin-left: 3%;
			}

			.addition {
				line-height: 100rpx;
				font-size: 34rpx;
				font-weight: 400;
				margin-left: 3%;
			}

			.lefttext {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 3%;
			}

			.righttext {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 18%;
				height: 100rpx;
			}

			.lefttext,
			.righttext {
				::v-deep .uni-input-input {
					font-size: 34rpx;
				}

				::v-deep .uni-input-wrapper {
					height: 100rpx;
					line-height: 100rpx;
				}

				::v-deep .uni-input-placeholder {
					line-height: 100rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #C3C1C1;
				}
			}


		}

		.radio-content {
			padding-top: 50rpx;
			height: 80rpx;
			line-height: 11rpx;
			font-size: 28rpx;

			.agreement {
				color: #878987;
				margin-left: 25%;
			}

			.radio-right {
				margin-left: 20%;

				.radio-default {
					border: 2rpx solid #0fbda6;
				}

				.radio {
					width: 30rpx;
					height: 30rpx;
					border-radius: 70%;
					border: 2rpx solid #178ffb;
					margin: 6px 25px -20rpx -5rpx;

					.radio-active {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #178ffb;
						margin-left: 22%;
						margin-top: 22%;
					}
				}
			}
		}

		.switch {
			text-align: center;
			line-height: 60rpx;
			color: #46ABD7;
			position: absolute;
			top: 70%;
		}

		.loginbtn {
			width: 70%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background: #4C7BC9;
			border-radius: 51rpx;
			font-size: 41rpx;
			color: #FFFFFF;
			position: absolute;
			top: 57%;
			left: 15%;
		}

	}
</style>