material_applet/pages/register/index.vue

<template>
	<view class="content">
		<view class="one">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="form" labelWidth="80px">
				<uni-forms-item label="用户名" required name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入用户名(厂商可以填写工厂名称)" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="gender">
					<uni-data-checkbox v-model="form.gender" :localdata="genderList" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required name="tel">
					<uni-easyinput v-model="form.tel" 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="role">
					<uni-data-select v-model="form.role" :localdata="roleList" @change="rolechange"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item v-if="disabledOne" label="所属街道" required name="street">
					<uni-data-select v-model="form.street" :localdata="streetList" @change="streetchange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item v-if="disabledTwo" label="所属社区">
					<uni-data-select v-model="form.community" :localdata="commList" @change="commchange">
					</uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="submit('valiForm')">注册</button>
		</view>
		<view class="two">
			<checkbox-group @change="changeAgree">
				<label>
					<checkbox :checked="agree" />
					<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				disabledOne: true,
				disabledTwo: true,
				form: {},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}, {
							format: 'number',
							errorMessage: '联系电话只能输入数字'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					role: {
						rules: [{
							required: true,
							errorMessage: '角色不能为空'
						}]
					},
				},
				// 字典表
				roleList: [],
				genderList: [],
				streetList: [],
				commList: [],
				// 用户协议
				agree: false,
			}
		},
		async onLoad() {
			const that = this;
			await that.search();
			await that.searchOther();
		},
		methods: {
			async search() {
				const that = this;
				uni.getStorage({
					key: 'openid',
					success: function(res) {
						that.$set(that.form, `openid`, res.data);
						that.$set(that.form, `status`, '0');
					},
					fail: async function(err) {
						uni.showToast({
							title: '未获取到opneid',
							icon: 'none'
						})
					},
				})
			},
			// 角色选择
			rolechange(role) {
				const that = this;
				if (role == 'cs') {
					that.$set(that, `disabledOne`, false);
					that.$set(that, `disabledTwo`, false);
				} else if (role == 'sqry') {
					that.$set(that, `disabledOne`, true);
					that.$set(that, `disabledTwo`, true);
				} else {
					that.$set(that, `disabledOne`, true);
					that.$set(that, `disabledTwo`, false);
				}
			},
			// 所属街道选择
			async streetchange(belong) {
				const that = this;
				that.$set(that.form, `street`, belong);
				//所属社区
				const res = await that.$api('/Office', 'GET', {
					belong,
					type: '1',
					is_use: '0'
				})
				if (res.errcode == '0') {
					let commList = []
					for (let val of res.data) {
						commList.push({
							text: val.name,
							value: val._id
						})
					}
					that.$set(that, `commList`, commList);
				}
			},
			// 所属社区
			commchange(community) {
				const that = this;
				that.$set(that.form, `community`, community);
			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				let agree = !that.agree
				that.$set(that, `agree`, agree);
			},
			// 查看隐私协议
			toAgree() {
				const that = this;
				uni.navigateTo({
					url: `/pagesOther/other/agree`
				})
			},
			// 注册
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async params => {
					if (that.agree) {
						that.form.create_time = moment().format('YYYY-MM-DD HH:mm:ss');
						const res = await that.$api(`/User`, 'POST', that.form);
						if (res.errcode == '0') {
							uni.showToast({
								title: '注册信息成功',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请阅读并同意用户协议和隐私政策',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			async searchOther() {
				const that = this;
				let res;
				//性别
				res = await that.$api('/DictData', 'GET', {
					type: 'gender',
					is_use: '0'
				})
				if (res.errcode == '0') {
					let genderList = []
					for (let val of res.data) {
						genderList.push({
							text: val.label,
							value: val.value
						})
					}
					that.$set(that, `genderList`, genderList);
				}
				//角色
				res = await that.$api('/Role', 'GET', {
					is_use: '0'
				})
				if (res.errcode == '0') {
					let roleList = []
					for (let val of res.data) {
						roleList.push({
							text: val.name,
							value: val.code
						})
					}
					that.$set(that, `roleList`, roleList);
				}
				//所属街道
				res = await that.$api('/Office', 'GET', {
					type: '0',
					is_use: '0'
				})
				if (res.errcode == '0') {
					let streetList = []
					for (let val of res.data) {
						streetList.push({
							text: val.name,
							value: val._id
						})
					}
					that.$set(that, `streetList`, streetList);
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;

		.one {
			padding: 3vw;

			.button {
				background-color: var(--f3CColor);
				color: var(--mainColor);
				font-size: var(--font14Size);
			}
		}

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