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";
	import util from "@/util/index.js"
	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.userInfo.password;
							},
							message: "两次密码不一致",
							trigger: ["change", "blur"],
						},
					],
				},
			};
		},
		computed:{
			...mapGetters(["config"]),
		},
		onLoad(options) {
			const {userInfo,codeValue} = options;
			if(userInfo){
				this.userInfo = {
					...this.userInfo,
					...util.aesdecode(userInfo),
				};
			}
			this.codeValue = codeValue;
			if(process.env.NODE_ENV == 'development'){
				//this.userInfo.email = "commiu@outlook.com";
				this.userInfo.nickname = "";
				this.userInfo.password = "qwe1231";
				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();
					}
				});
			},
			doRegister() {
				const _this = this;
				this.$refs.loginForm.validate().then(async (res) => {
					_this.loading = true;
					console.log(res);
					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/common/login/index")
					} catch (err) {
						console.log(err);
						if(err.msg=="验证码过期" || err.msg=="验证码错误"){
							const s = util.aesencode(_this.userInfo);
							uni.$u.route("/pages/common/verifyCode/index", {
								userInfo: s,
								isRegister: true,
								resend: 1,
							})
							return ;
						}
						// uni.$u.toast('注册失败')
					} finally {
						_this.loading = false;
					}
					uni.$u.toast('校验通过')
				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('校验失败')
				});
				return ;
			},
			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 {
		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>