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>
					</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>
					</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>
					</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);
	// 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 () => {
		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 isValidPhoneNumber = (phoneNumber) => {
		const regex = /^1[3456789]\d{9}$/;
		return regex.test(phoneNumber);
	}
	// 登录
	const toLogin = async () => {
		if (agree.value) {
			if (openid.value) {
				if (form.value.type) {
					if (form.value.phone) {
						if (isValidPhoneNumber(form.value.phone)) {
							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'
						})
					}
				} else {
					uni.showToast({
						title: '请选择用户身份!',
						icon: 'none'
					})
				}
			} 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%;
		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%;
				}
			}

			.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>