cxyy-applet/pagesHome/register/index.vue

<template>
	<view class="main">
		<view class="overlay">
			<view class="one">
				<uni-forms ref="baseForm" :rules="rules" :modelValue="form" label-width="80px">
					<uni-forms-item label="账号" required name="account">
						<uni-easyinput v-model="form.account" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="password">
						<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" required name="ispassword">
						<uni-easyinput type="password" v-model="form.ispassword" placeholder="请输入确认密码" />
					</uni-forms-item>
					<uni-forms-item label="昵称" required name="nick_name">
						<uni-easyinput v-model="form.nick_name" placeholder="请输入昵称" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="gender">
						<uni-data-checkbox v-model="form.gender" :localdata="genderList"
							:map="{text:'label',value:'value'}" />
					</uni-forms-item>
					<uni-forms-item label="所属产业" required name="industry">
						<uni-data-select v-model="form.industry" :localdata="industryList"
							@change="industryChange"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="phone">
						<uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="电子邮箱">
						<uni-easyinput v-model="form.email" placeholder="请输入电子邮箱" />
					</uni-forms-item>
				</uni-forms>
				<button class="button_1" type="primary" @click="submit('baseForm')">注册</button>
			</view>
			<view class="two">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox color="#2979ff" :checked="agree" />
						<text @tap.stop="toAgree()">我已阅读并同意<text style="color: #2979ff;"
								@click="toAgree">《用户服务协议》</text>及
							<text style="color: #2979ff;" @click="toAgree">《隐私策略》</text>
						</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				openid: "",
				form: {
					openid: '',
					account: '',
					password: '',
					ispassword: '',
					nick_name: '',
					gender: '',
					industry: '',
					email: '',
					role: ['User']
				},
				// 校验规则
				rules: {
					account: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					nick_name: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					industry: {
						rules: [{
							required: true,
							errorMessage: '所属产业不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg =
									/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g
								if (!reg.test(value)) {
									callback('包含英文字母大小写、数字和特殊符号的 8-16 位组合')
								}
								return true
							}
						}]
					},
					ispassword: {
						rules: [{
								required: true,
								errorMessage: '确认密码不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value != data.password) {
										callback('两次输入的密码必须相同')
									}
									return true
								}
							}
						]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^1[3-9]\d{9}$/
								if (!reg.test(value)) {
									callback('请输入正确的手机号')
								}
								return true
							}
						}]
					},
				},
				// 字典表
				genderList: [],
				industryList: [],
			}
		},
		onLoad: async function(e) {
			const that = this;
			// 查询平台信息
			await that.searchOpenids();
			await that.searchOther();
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			async searchOpenids() {
				const that = this;
				uni.getStorage({
					key: 'openid',
					success: function(res) {
						that.$set(that, `openid`, res.data);
					},
					fail: function(err) {
						uni.login({
							success: async function(res) {
								if (res.code) {
									const aee = await that.$app('/wechat/api/login/app',
										'GET', {
											js_code: res.code,
											config: that.$config.wx_projectkey
										})
									if (aee.errcode == '0') {
										uni.setStorage({
											key: "openid",
											data: aee.data.openid
										})
										that.$set(that, `openid`, aee.data.openid);
									} else {
										uni.showToast({
											title: aee.errmsg,
											icon: 'none'
										})
									}
								} else {
									uni.showToast({
										title: res.errMsg,
										icon: 'none'
									})
								}
							}
						});
					}
				})
			},
			async searchOther() {
				const that = this;
				let res;
				// 查询性别
				res = await that.$api(`/dictData`, 'GET', {
					code: 'gender',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `genderList`, res.data);
				// 查询所属产业
				res = await that.$api(`/sector`, 'GET', {
					is_use: '0',
				})
				if (res.errcode == '0') {
					for (let val of res.data) {
						val.text = val.title
						val.value = val.id
					}
					that.$set(that, `industryList`, res.data);
				}
			},
			// 选择产业
			industryChange(e) {
				const that = this;
				let data = that.industryList.find(i => i.id == e);;
				if (data) {
					that.$set(that.form, `industry`, data.title)
				}
			},
			// 注册
			submit(ref) {
				const that = this;
				let agree = that.agree;
				let openid = that.openid;
				if (agree) {
					if (openid) {
						that.$refs[ref].validate().then(async res => {
							if (res.password == res.ispassword) {
								res.openid = openid
								const arr = await that.$api(`/user`, 'POST', res);
								if (arr.errcode == '0') {
									uni.showToast({
										title: '注册成功',
										icon: 'success'
									})
									uni.navigateBack({
										delta: 1
									})
								} else {
									uni.showToast({
										title: arr.errmsg,
										icon: 'none'
									})
								}
							} else {
								uni.showToast({
									title: `密码不一致`,
									icon: 'error'
								});
							}
						}).catch(err => {
							console.log('err', err);
						})
					} else {
						uni.showToast({
							title: '系统更新中，请稍后再试!',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				that.$set(that, `agree`, !that.agree);
			},
			// 查看协议
			toAgree() {
				uni.navigateTo({
					url: '/pagesMy/agree/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		position: relative;
		// background-image: url('../../static/loginbg.jpg');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: center;

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.5);

			/* 白色半透明背景 */
			.one {
				padding: 2vw 5vw;

				.uni-select {
					background: #fff !important;
				}

				.button_1 {
					color: var(--mainColor);
					background: linear-gradient(90deg, #1E83FF, #1071e6);
				}
			}

			.two {
				padding: 5vw;
				text-align: center;
				font-size: var(--font12Size);
			}
		}
	}
</style>