learn_applet/components/login.vue

<template>
	<view class="warp">
		<view class="rect" @tap.stop>
			<view class="rectOne">Hi~欢迎来到{{config.title||'学吧'}}</view>
			<view class="rectTwo">
				<view class="icon">
					<view class="left">头像</view>
					<view class="right">
						<up-upload :fileList="form.icon" @afterRead="afterRead" @delete="deletePic" name="icon" multiple
							:maxCount="1"></up-upload>
					</view>
				</view>
				<view class="other">
					<view class="left">身份</view>
					<view class="right">
						<up-radio-group v-model="form.type" placement="row">
							<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in roleList"
								:key="index" :label="item.label" :name="item.value">
							</up-radio>
						</up-radio-group>
						<span v-if="errors.type" class="error-message">{{ errors.type }}</span>
					</view>
				</view>
				<view class="other">
					<view class="left">昵称</view>
					<view class="right">
						<up-input v-model="form.nick_name" placeholder="请输入昵称" border="surround"
							shape="circle"></up-input>
						<span v-if="errors.nick_name" class="error-message">{{ errors.nick_name }}</span>
					</view>
				</view>
				<view class="other">
					<view class="left">手机号</view>
					<view class="right">
						<up-input v-model="form.phone" placeholder="请输入手机号" border="surround" shape="circle"></up-input>
						<span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
					</view>
				</view>
				<view class="agree">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox color="#3c9cff" :checked="agree" />
							<text @tap.stop="toAgree()">我同意使用我所提交的信息用于{{config.title||'学吧'}}程序使用<text
									style="color: #2979ff;">《软件使用许可协议》</text>和 <text
									style="color: #2979ff;">《隐私协议》</text></text>
						</label>
					</checkbox-group>
				</view>
				<view class="button">
					<button class="button_1" size="default" type="default" @click="toCancel">取消</button>
					<button class="button_2" size="default" type="default" @click="toLogin">注册并登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const emit = defineEmits(["showChange"])
	import moment from 'moment';
	import { inject, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	const $apifile = inject('$apifile');
	// 遮罩层
	const showType = ref(false);
	// 表单
	const form = ref({});
	//字典表
	const roleList = ref([]);
	// 用户协议
	const agree = ref(false);
	const errors = ref({});
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	const config = computed(() => {
		return uni.getStorageSync('config');
	})
	onShow(async () => {
		if (!user.value) await searchOther();
	})
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 角色
		res = await $api(`dictData`, 'GET', { code: 'role', is_use: '0' });
		if (res.errcode === 0) roleList.value = res.data;
	};

	// 删除图片
	const deletePic = (event) => {
		form.value.icon = []
	};
	// 新增图片
	const afterRead = async (event) => {
		const url = event.file[0].url
		const result = await $apifile(`/web/learn_user/upload`, 'file', url, 'file');
		if (result.errcode === 0) form.value.icon = [result]
	};
	// 选择身份
	const typeSelect = async (event) => {
		console.log(event);
	}
	// 取消
	const toCancel = async () => {
		form.value = { icon: [] }
		showType.value = false
		agree.value = false
		emit("showChange", false);
	}
	// 自定义的验证函数
	const validateObject = (obj : any) => {
		const errors : any = {};
		if (!obj.type || obj.type.trim() === '') {
			errors.type = '请选择身份类型！';
		}
		// 检查name属性是否填写
		if (!obj.nick_name || obj.nick_name.trim() === '') {
			errors.nick_name = '请填写昵称！';
		}
		// 检查email属性是否填写
		if (!obj.phone || obj.phone.trim() === '') {
			errors.phone = '请填写手机号！';
		} else {
			const regex = /^1[3456789]\d{9}$/;
			if (!regex.test(obj.phone)) errors.phone = '请填写正确的手机号码！';
		}
		// 如果有错误，返回错误对象
		if (Object.keys(errors).length > 0) {
			return errors;
		}
		// 如果没有错误，返回null或undefined
		return null;
	}
	// 登录
	const toLogin = async () => {
		if (agree.value) {
			if (openid.value) {
				// 调用验证函数
				const errorsInfo = await validateObject(form.value);
				// 检查是否有错误
				if (errorsInfo) {
					errors.value = errorsInfo
					// 遍历错误对象并显示错误信息
					for (const key in errorsInfo) {
						if (errorsInfo.hasOwnProperty(key)) {
							console.error(`${key} 错误: ${errorsInfo[key]}`);
						}
					}
				} else {
					uni.getUserProfile({
						desc: '用于展示',
						success: async function (res) {
							const type = form.value.type
							delete form.value.type
							let parmas = {
								openid: openid.value,
								status: '1',
							}
							if (!form.value.nick_name) parmas.nick_name = res.userInfo.nickName + moment().valueOf()
							if (!form.value.icon || form.value.icon.length === 0) parmas.icon = config.value.icon
							let arr;
							if (type == '0') arr = await $api(`teacher`, 'POST', { ...form.value, ...parmas, is_show: '1' });
							else arr = await $api(`student`, 'POST', { ...form.value, ...parmas });
							if (arr.errcode == '0') {
								let role_type;
								if (type == '0') role_type = 'Teacher'
								else role_type = 'Student'
								uni.setStorageSync('user', { ...arr.data, role_type });
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});
								await toCancel()
							} else {
								uni.showToast({
									title: arr.errmsg,
									icon: 'error'
								});
							}
						},
						fail: function (err) {
							console.log(err);
						}
					})
				}
			} else {
				uni.showToast({
					title: '系统更新中，请稍后再试!',
					icon: 'none'
				})
			}
		} else {
			uni.showToast({
				title: '请阅读并同意软件使用许可协议和隐私协议',
				icon: 'none'
			})
		}
	}
	// 查看隐私协议
	const toAgree = () => {
		uni.navigateTo({
			url: `/pagesHome/agree/index`
		})
	};
	// 同意隐私协议
	const changeAgree = () => {
		agree.value = !agree.value;
	};
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90%;
		min-height: 380px;
		border-radius: 5px;
		padding: 3vw;
		background-color: #fff;

		.rectOne {
			padding: 2vw 0;
			text-align: center;
			font-size: var(--font16Size);
		}

		.rectTwo {
			.icon {
				width: 100%;
				display: flex;
				align-items: center;
				margin: 2vw 0;

				.left {
					width: 40%;
					font-size: var(--font14Size);
				}

				.right {
					width: 60%;
				}
			}

			.other {
				width: 100%;
				display: flex;
				align-items: center;
				margin: 3vw 0 0 0;

				.left {
					width: 15%;
					font-size: var(--font14Size);
				}

				.right {
					width: 85%;

					.error-message {
						margin: 5px 0 0 0;
						color: var(--ff0Color);
						font-size: var(--font12Size);
					}
				}
			}

			.agree {
				padding: 2vw;
				text-align: center;
				font-size: var(--font12Size);
			}

			.button {
				display: flex;
				justify-content: space-between;
				margin: 5vw 0 0 0;

				.button_1 {
					font-size: var(--font14Size);
					border-radius: 10vw;
					margin: 0 2vw;
					width: 35%;
				}

				.button_2 {
					font-size: var(--font14Size);
					color: var(--mainColor);
					background-color: var(--3c9Color);
					border-radius: 10vw;
					margin: 0 2vw;
					width: 55%;
				}
			}
		}
	}
</style>