im/pages/common/setSelfInfo/index.vue

<template>
	<view class="set_info_container content_with_back">
		<view class="title">设置信息</view>
		<u-form class="loginForm commonPage-form" labelPosition="top" :model="userInfo" :rules="rules" :labelStyle="{
        fontSize: '14px',
        marginTop: '20rpx',
        minWidth: '200rpx',
      }" ref="loginForm">
			<u-form-item label="昵称" prop="nickname">
				<u-input v-model="userInfo.nickname" border="surround" placeholder="请输入您的昵称" clearable>
				</u-input>
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="userInfo.password" border="surround" placeholder="请输入密码" :password="!passwordEying">
					<u-icon @click="updateEye('passwordEying')" slot="suffix"
						:name="passwordEying ? 'eye-off' : 'eye'"></u-icon>
				</u-input>
			</u-form-item>
			<view class="feild_desc">6～20位，至少包含数字、字母</view>
			<u-form-item label="确认密码" prop="confirmPassword">
				<u-input v-model="userInfo.confirmPassword" border="surround" placeholder="请输入密码"
					:password="!comfirmEying">
					<u-icon @click="updateEye('comfirmEying')" slot="suffix"
						:name="comfirmEying ? 'eye-off' : 'eye'"></u-icon>
				</u-input>
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button :loading="loading" type="primary" @click="doNext">
				进入{{config.name}}
			</u-button>
		</view>
	</view>
</template>

<script>
	import md5 from "md5";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import { mapGetters } from "vuex";
	import {		businessRegister	} from "@/api/login";
	import {		checkLoginError	} from "@/util/common";
	export default {
		components: {
			MyAvatar,
		},
		data() {
			return {
				loading: false,
				passwordEying: false,
				comfirmEying: false,
				codeValue: "",
				userInfo: {
					mobile: "",
					email: "",
					region: "",
					nickname: "",
					password: "",
					confirmPassword: "",
				},
				rules: {
					nickname: [{
						type: "string",
						required: true,
						message: "请填写真实姓名",
						trigger: ["blur", "change"],
					}, ],
					password: [{
							type: "string",
							required: true,
							message: "请输入密码",
							trigger: ["blur", "change"],
							pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{6,}$/,
						},
						{
							validator: (rule, value, callback) => {
								return value.length >= 6;
							},
							message: "密码太短",
							trigger: ["change", "blur"],
						},
					],
					confirmPassword: [{
							type: "string",
							required: true,
							message: "请输入确认密码",
							trigger: ["blur", "change"],
							pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{6,}$/,
						},
						{
							validator: (rule, value, callback) => {
								return value === this.formData.password;
							},
							message: "两次密码不一致",
							trigger: ["change", "blur"],
						},
					],
				},
			};
		},
		computed:{
			...mapGetters(["config"]),
		},
		onLoad(options) {
			const {userInfo,codeValue} = options;
			this.userInfo = {
				...this.userInfo,
				...JSON.parse(userInfo),
			};
			this.codeValue = codeValue;
			if(process.env.NODE_ENV == 'development'){
				//this.userInfo.email = "commiu@outlook.com";
				this.userInfo.nickname = "";
				this.userInfo.password = "qwe123";
				this.userInfo.confirmPassword = "qwe123";
			}
		},
		onBackPress() {
			return true;
		},
		methods: {
			updateEye(key) {
				this[key] = !this[key];
			},
			doNext() {
				this.$refs.loginForm.validate().then((valid) => {
					if (valid) {
						this.doRegister();
					}
				});
			},
			async doRegister() {
				this.loading = true;
				const options = {
					code: this.codeValue,
					platform: uni.$u.os(),
					autoLogin: true,
					...this.userInfo,
					region: `+${this.userInfo.region}`,
					password: md5(this.userInfo.password),
					mobile: this.userInfo.mobile
				};
				try {
					await businessRegister(options);
					this.saveLoginInfo();
					uni.$u.toast('注册成功')
					uni.$u.route("/pages/login/index")
				} catch (err) {
					console.log(err);
					if(err.msg=="验证码过期" || err.msg=="验证码错误"){
						uni.$u.route("/pages/common/verifyCode/index", {
							userInfo: JSON.stringify(this.userInfo),
							isRegister: true,
							resend: 1,
						})
						return ;
					}
					// uni.$u.toast('注册失败')
				} finally {
					this.loading = false;
				}
			},
			saveLoginInfo() {
				uni.setStorage({
					key: "lastPhoneNumber",
					data: this.userInfo.mobile,
				});
				uni.setStorage({
					key: "lastAreaCode",
					data: this.userInfo.region,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.set_info_container {
		margin-top: var(--status-bar-height);
		background: linear-gradient(180deg,
				rgba(0, 137, 255, 0.1) 0%,
				rgba(255, 255, 255, 0) 100%);
		padding-top: 150rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 116rpx;
			padding-bottom: 8rpx;
			color: $u-primary;
		}

		.feild_desc {
			font-size: 24rpx;
			color: $u-tips-color;
			margin-top: 4rpx;
		}

		.btn {
			margin-top: 200rpx;
		}
	}
</style>