新增多角色登录页面和注册页面

pages.json

@@ -11,10 +11,25 @@
 			"style": {
 				"navigationBarTitleText": "注册"
 			}
+		},
+		{
+			"path": "pages/login/register",
+			"style": {
+				"navigationBarTitleText": "注册"
+			}
 		}
 	    ,{
+            "path" : "pages/login/multipleRoles",
+            "style" :
+            {
+                "navigationBarTitleText": "黄浦区中药云移动质控",
+                "enablePullDownRefresh": false
+            }
+
+        }
+	    ,{
             "path" : "pages/ypczk/index/leaderIndex",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "首页-组长",
                 "enablePullDownRefresh": true
@@ -22,7 +37,7 @@
         },
 		{
 		    "path" : "pages/ypczk/zkTask/zkTask",
-		    "style" :                                                                                    
+		    "style" :
 		    {
 		        "navigationBarTitleText": "质控作业",
 		        "enablePullDownRefresh": true

pages/login/multipleRoles.vue

@@ -0,0 +1,55 @@
+<template>
+	<view>
+		<view class="text-area">
+			<text>选择以下业务类型</text>
+		</view>
+		<view class="types">
+			<view class="icon">
+				<image src="./hospital.png" 
+					style="height: 25px;width: 25px;margin-right: 30px;"></image>
+			</view>
+			<view style="display: flex;flex-direction: column;">
+			<text style="font-size: 18px; " >行走药师</text>
+			<text style="font-size: 14px;color: rgba(153, 153, 153, 1);margin-top: 8px; ">适用于行走的药师业务页面</text>
+			</view>
+		</view>
+		<view class="types">
+			<view class="icon">
+				<image src="./check.png" 
+					style="height: 25px;width: 25px;margin-right: 30px;"></image>
+			</view>
+			<view style="display: flex;flex-direction: column;">
+			<text style="font-size: 18px; " >飞行检查</text>
+			<text style="font-size: 14px;color: rgba(153, 153, 153, 1);margin-top: 8px; ">适用于飞行检查业务页面</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+	.text-area {
+		margin-left: 20px;
+		margin-top: 20px;
+		font-size: 22px;
+	}
+	.types{
+		margin-left: 25px;
+		margin-top: 30px;
+		width: 300px;
+		height: 94px;
+		opacity: 1;
+		border-radius: 5px;
+		border: 0.5px solid rgba(221, 221, 221, 1);
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 0px 16px 0px 16px;
+		display: flex;
+		flex-direction: row;
+	}
+
+</style>

pages/login/register.vue

@@ -0,0 +1,331 @@
+<template>
+	<view class="content">
+		<!-- <image class="logo" src="/static/logo.png"></image> -->
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+		<view class="login_section" style="height:;width:320px;margin-top: 18px;">
+			<uni-forms class="form_section" ref="valiForm" :rules="rules" :modelValue="valiFormData">
+				<uni-forms-item label="注册类型" name="registType" labelWidth="80px" required>
+					<picker @change="bindTypeChange" :value="valiFormData.registTypeIndex"
+						:range="valiFormData.registType" range-key="name">
+						<view class="uni-input" :style="{color: valiFormData.registTypeId===''?'#8f8f94':'#000000'}" :class="valiFormData.registTypeId===''? 'not_selected': '' ">
+							{{valiFormData.registTypeId===''? '请选择注册类型'
+							: valiFormData.registType[valiFormData.registTypeIndex].name }}
+						</view>
+					</picker>
+				</uni-forms-item>
+
+				<uni-forms-item label="所属机构" name="institution" labelWidth="80px" required>
+					<!-- <uni-easyinput v-model="valiFormData.institution" type="" placeholder="请选择" :inputBorder="false" /> -->
+					<picker @change="bindJGChange" :value="valiFormData.institutionIndex"
+						:range="valiFormData.institution" range-key="name">
+						<view class="uni-input" :style="{color: valiFormData.institutionId===''?'#8f8f94':'#000000'}"  :class="valiFormData.institutionId===''? 'not_selected': '' ">
+							{{valiFormData.institutionId===''? '请选择所有机构'
+						:valiFormData.institution[valiFormData.institutionIndex].name }}
+						</view>
+					</picker>
+
+				</uni-forms-item>
+
+				<uni-forms-item label="用户姓名" name="name" labelWidth="80px" required>
+					<uni-easyinput v-model="valiFormData.name" type="" placeholder="请输入用户姓名" :inputBorder="false" />
+				</uni-forms-item>
+				<uni-forms-item label="手机号码" name="phone" labelWidth="80px" required>
+					<uni-easyinput v-model="valiFormData.phone" type="" placeholder="请输入手机号码" :inputBorder="false" />
+				</uni-forms-item>
+				<uni-forms-item label="验证码" name="code" labelWidth="80px" required>
+					<view style="display: flex;align-items: center;" class="bottom_tip">
+						<uni-easyinput v-model="valiFormData.code" type="" placeholder="请输入验证码" :inputBorder="false" />
+						<button
+							style="width: 240rpx; font-size: 15px; color: rgba(190, 163, 117, 1) ;background-color: rgb(255, 255, 255); ;"
+							class="btn_bottom" type="primary" :disabled="!codeSend.send"
+							@click="sendCode()">{{codeSend.send?'发送验证码':codeSend.second+'s重新发送'}}</button>
+					</view>
+				</uni-forms-item>
+				<uni-forms-item label="用户工号" name="id" labelWidth="80px" required>
+					<uni-easyinput v-model="valiFormData.id" type="" placeholder="请输入用户工号" :inputBorder="false" />
+				</uni-forms-item>
+				<uni-forms-item label="用户邮箱" name="email" labelWidth="80px">
+					<uni-easyinput v-model="valiFormData.email" type="" placeholder="请输入用户邮箱" :inputBorder="false" />
+				</uni-forms-item>
+
+				<view style="display: flex;align-items: center; margin-top: 7px;">
+					<checkbox value="valiFormData.access" style="transform:scale(0.7)" :checked="false"
+						@click="changeCheck()" /><text style="font-size: 12px;">我已阅读并同意</text>
+					<span @click="acceptMessage()" style="font-size: 12px;color: rgba(190, 163, 117, 1);">《守术台协议》</span>
+					<text style="font-size: 12px;">以及</text>
+					<span @click="acceptMessage()" style="font-size: 12px;color: rgba(190, 163, 117, 1);">《隐私政策》</span>
+				</view>
+
+				<button
+					style="font-size: 18px;background-color: rgb(190, 163, 117);height: 43px;width: 320px;margin-top: 28px;"
+					type="primary" @click="submit('valiForm')">注册</button>
+				<!-- :disabled="pageData.disabledBtn" -->
+			</uni-forms>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		onMounted,
+		ref,
+		watch,
+		defineComponent
+	} from 'vue';
+
+	const sendCodeData = reactive({
+		Mobile: '',
+		UserType: '2'
+	})
+
+	//手机号校验
+	var phoneRegs = /^(((1[3456789][0-9]{1})|(15[0-9]{1}))+\d{8})$/;
+
+	//邮箱校验
+	var emailRegs = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
+
+	//发送验证码倒计时
+	const codeSend = reactive({
+		//定义是否可以发送
+		send: true,
+		second: 0,
+		s: 60
+	})
+	// 表单数据
+	const valiFormData = reactive({
+		// registType: '',
+		registTypeId: '',
+		registTypeIndex: 0,
+		registType: [{
+			name: '飞行检查员',
+			value: 1
+		}, {
+			name: '行走药师',
+			value: 2
+		}, {
+			name: '代煎企业工作人员',
+			value: 3
+		}],
+		
+		// institution: '',
+		institutionId: '',
+		institutionIndex: 0,
+		institution: [{
+			name: '机构1',
+			value: 1
+		}, {
+			name: '机构2',
+			value: 2
+		}, {
+			name: '机构3',
+			value: 3
+		}],
+
+		name: '',
+		phone: '',
+		code: '',
+		id: '',
+		email: '',
+		access: false,
+
+	})
+
+	// 表单验证
+	const valiForm = ref(null)
+
+	const bindTypeChange = (e) => {
+		valiFormData.registTypeIndex = e.detail.value
+		valiFormData.registTypeId = e.detail.value
+	}
+	
+	const bindJGChange = (e) => {
+		valiFormData.institutionIndex = e.detail.value
+		valiFormData.institutionId = e.detail.value
+	}
+
+	const rules = reactive({
+		// registType: {
+		// 	rules: [{
+		// 		required: true,
+		// 		errorMessage: '注册类型不能为空'
+		// 	}]
+		// },
+		// institution: {
+		// 	rules: [{
+		// 		required: true,
+		// 		errorMessage: '所属机构不能为空'
+		// 	}]
+		// },
+		name: {
+			rules: [{
+				required: true,
+				errorMessage: '用户姓名不能为空'
+			}]
+		},
+		phone: {
+			rules: [{
+				required: true,
+				errorMessage: '手机号码不能为空'
+			}]
+		},
+		code: {
+			rules: [{
+				required: true,
+				errorMessage: '验证码不能为空'
+			}]
+		},
+		id: {
+			rules: [{
+				required: true,
+				errorMessage: '用户工号不能为空'
+			}]
+		},
+	})
+
+	//同意阅读
+	const changeCheck = () => {
+		if (valiFormData.access) {
+			valiFormData.access = false
+		} else {
+			valiFormData.access = true
+		}
+	}
+
+	//注册
+	const submit = () => {
+		if (valiFormData.registTypeId === '') {
+			uni.showToast({
+				title: '注册类型不能为空',
+				icon: 'none'
+			})
+		}else if(valiFormData.institutionId === ''){
+			uni.showToast({
+				title: '所属机构不能为空',
+				icon: 'none'
+			})
+		}else if(valiFormData.email !='' && !emailRegs.test(valiFormData.email)){
+			uni.showToast({
+				title: '邮箱格式不正确',
+				icon: 'none'
+			})
+		}else {
+			valiForm._value.validate().then(res => {
+				// console.log(!phoneRegs.test(valiFormData.phone));
+				if (valiFormData.access == false) {
+					uni.showToast({
+						title: '我已阅读不能为空',
+						icon: 'none'
+					})
+				} else if(!phoneRegs.test(valiFormData.phone)){
+					uni.showToast({
+						title: '手机号码格式不正确',
+						icon: 'none'
+					})
+				}else {}
+			}).catch(err => {
+				console.log('err', err);
+				// uni.showToast({
+				// 	title: err[0].errorMessage,
+				// 	icon: 'none'
+				// })
+			})
+		}
+
+	}
+	
+	
+	//发送验证码
+	const sendCode = () => {
+		sendCodeData.Mobile = valiFormData.Mobile
+		// http.post('up/Oauth/GetVerificationCode', sendCodeData).then(res => {
+		// 	console.log(res)
+		// 	if (res.code == 0) {
+		// 发送验证码
+		codeSend.send = false;
+		uni.showToast({
+			title: '发送成功',
+			icon: 'none',
+			success: () => {
+				time(); // 倒计时
+			}
+		})
+		// } else {
+		// 	Message.error(res.message)
+		// }
+		// })
+	}
+
+	// 倒计时
+	const time = () => {
+		codeSend.second = codeSend.s;
+		let interval = setInterval(function() {
+			if (codeSend.second == 1) {
+				codeSend.send = true;
+				codeSend.second = codeSend.s;
+				clearInterval(interval);
+			} else {
+				codeSend.second--;
+			}
+		}, 1000)
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin-top: 200rpx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50rpx;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+	}
+
+	::v-deep.uni-forms-item__label {
+		font-size: 15px !important;
+		color: rgba(51, 51, 51, 1)
+	}
+
+	::v-deep.uni-input-placeholder {
+		font-size: 15px;
+	}
+
+	.uni-forms-item {
+		margin-bottom: 2px;
+		height: 44px;
+		border-bottom: 1px solid #f7f7f7;
+	}
+
+	::v-deep.uni-forms-item__content {
+		font-size: 15px;
+		/* color: #8f8f94; */
+	}
+
+	uni-picker {
+		margin-top: 9px;
+		margin-left: 9px;
+	}
+
+	uni-button:after {
+		border: 0px solid rgba(0, 0, 0, 0.2);
+	}
+</style>