special/pages/subpack/login-pwd/login-pwd.vue

<template>
	<view class="flex-column" style="height: 100vh;">
		<up-navbar title="特困户看护" bgColor="transparent" leftIcon='' :title-style="{fontWeight:'bold'}">
		</up-navbar>
		<image src="/pages/subpack/static/images/logo-header-bg.png" style="width: 750rpx;height: 510rpx;"
			mode="aspectFill"></image>
		<view class="flex-column flex-1 bg-white px-5"
			style="margin-top: -50rpx;z-index: 9;border-radius: 48rpx 48rpx 0rpx 0rpx;padding-top: 48rpx;">

			<view class="flex-row align-center" style="margin-left: 18rpx;">
				<image src="/pages/subpack/static/images/login-phone-icon.png" style="width: 36rpx;height: 36rpx;"
					mode="aspectFill">
				</image>
				<text class="font-md ml-08" style="color: #002F61;">用户名</text>
			</view>
			<view class="flex-column justify-center mt-08 px-4"
				style="height: 88rpx;border-radius: 50rpx;background: rgba(215, 231, 255, 0.3);">
				<u-input placeholder="请输入用户名" v-model.trim="phone" border="none" :maxlength="11"
					:fontSize="16" clearable></u-input>
			</view>

			<view class="flex-row align-center" style="margin-left: 18rpx;margin-top: 36rpx;">
				<image class="ml-08" src="/pages/subpack/static/images/login-pwd-icon.png"
					style="width: 36rpx;height: 36rpx;" mode="aspectFill">
				</image>
				<text class="font-md ml-08" style="color: #002F61;">密码</text>
			</view>
			<view class="flex-row align-center justify-between mt-08 px-4"
				style="height: 88rpx;border-radius: 50rpx;background: rgba(215, 231, 255, 0.3);">
				<u-input placeholder="请输入密码" v-model.trim="password" :maxlength="16" border="none" :fontSize="16"
					:password="sawPwd"></u-input>
				<image
					:src="sawPwd?'/pages/subpack/static/images/eye-close.png':'/pages/subpack/static/images/saw-pwd.png'"
					style="width: 48rpx;height: 48rpx;margin-left: 20rpx;" mode="aspectFill" @click="sawPwd = !sawPwd">
				</image>
			</view>
			<view v-if="formType === 1" class="flex-row align-center" style="margin-top: 6rpx;">
				<image src="/pages/subpack/static/images/login-warn.png" style="width: 36rpx;height: 36rpx;"
					mode="aspectFill">
				</image>
				<text style="font-size: 22rpx;margin-left: 8rpx;">8-16位字符，必须包含大写字母、小写字母、数字以及特殊字符</text>
			</view>

			<view class="flex-column align-center" style="margin-top: 220rpx;">
				<view class="flex-row align-center justify-center w-100p"
					style="height: 88rpx;background: linear-gradient(100deg, #477EFF 11%, #3CE5FF 92%);box-shadow: 0px 6px 16px 0px rgba(71, 197, 255, 0.5);border-radius: 56px;"
					@click="checkForm">
					<text class="font-md text-white">{{formType === 1?'注册':'登录'}}</text>
				</view>
				<!-- <text class="font-md" style="margin-top: 68rpx;color: #4794FF;"
					@click="goRegister">{{formType === 1?'我有账号,去登录':'还没有账号,去注册'}}</text> -->
			</view>

		</view>
	</view>
</template>

<script>
	import {
		loginByPwdUrl,
		getUserInfoUrl
	} from '@/common/config/api.js'
	// import {
	// 	checkPwdPattern
	// } from '@/utils/common-utils.js'
	export default {
		data() {
			return {
				phone: '',
				sawPwd: true,
				password: '',
				// 0-登录 1-注册
				formType: 0
			}
		},
		methods: {
			checkForm() {
				if (!this.phone) {
					return uni.$u.toast('请输入用户名')
				}
				// if (!uni.$u.test.mobile(this.phone)) {
				// 	return uni.$u.toast('请输入正确的手机号码')
				// }
				// if (this.password.length < 8) {
				// 	return uni.$u.toast('请输入8-16位的密码')
				// }

				if (this.formType === 0) {
					return this.startLogin()
				}

				// if (!checkPwdPattern(this.password)) {
				// 	return uni.$u.toast('密码必须包含大写字母、小写字母、数字以及特殊字符')
				// }
				this.startRegister();
			},
			// 注册
			startRegister() {
				uni.showLoading({
					title: '注册中...'
				})
				registerUrl({
						// nickName: '用户' + this.phone.slice(-4),
						phoneNumber: this.phone,
						password: this.password
					})
					.then(res => {
						console.log('注册: ', res);
						uni.hideLoading();
						uni.$u.toast('注册成功，请登录');
						this.goRegister();
					})
					.catch(err => {
						console.log('err: ', err);
						uni.hideLoading();
					})
			},
			// 登录
			startLogin() {
				uni.showLoading({
					title: '登录中'
				})
				loginByPwdUrl({
						username: this.phone,
						password: this.password
					})
					.then(res => {
						console.log('登录: ', res);
						// proxy.$u.vuex('vuex_userId', res)
						// 获取用户信息
						this.$u.vuex('vuex_token', res.token);
						this.getUserInfo(res.token);
					})
					.catch(err => {
						uni.hideLoading();
						console.log('err: ', err);
					})
			},
			// 获取用户信息
			getUserInfo(userId) {
				getUserInfoUrl()
					.then(res => {
						console.log('用户信息: ', res);
						uni.hideLoading();
						let user = {
							avatar: '',
							nickName: res.user.nickName,
							phonenumber: res.user.phonenumber,
							roles: res.roles
						}
						this.$u.vuex('vuex_user', user);
						uni.switchTab({
							url: '/pages/tabbar/application/application'
						})
					})
					.catch(err => {
						console.log('err: ', err);
						uni.hideLoading();
					})
			},
			// 改变成注册
			goRegister() {
				if (this.formType === 0) {
					this.formType = 1;
				} else {
					this.formType = 0;
				}
				// 重置表单
				this.phone = '';
				this.password = '';
				this.sawPwd = true;
			}
		}
	}
</script>

<style>

</style>