lh-mobile/pages/login/login.vue

<template>
	<view class="zai-box">
		<scroll-view scroll-y class="page">
			<view class="flex-center-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image src="../login/luohuLogo.png" mode='aspectFit' class="zai-logo "
					style="position: relative;top: 16rpx;margin-right: 5rpx;"></image>
				<view class="zai-title text-shadow logonTitle" style="font-size: 45rpx">深圳市罗湖医院集团</view>
			</view>
			<view class="flex-center-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<view class="zai-title text-shadow logonTitle">细胞质量检测服务平台</view>
			</view>
			<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block v-if="loginWay==1">
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
						<view class="action text-lg">
							<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
								@click="changePassword"></text>
						</view>
					</view>

					<view class="cu-form-group margin-top shadow-warp yanzhenma" v-if="iscaptcha"
						:class="[shape=='round'?'round':'']" style="padding: 0;">
						<view class="code-second">
							<input class="code-yanzheng" style="width: 220rpx;padding-left: 20rpx;" placeholder="请输入验证码"
								v-model="captcha" />
						</view>
						<view class="image-code" @click="refrsh">
							<image :src="image" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
					<view class="m-t-100">
						<u-button type="primary" :loading="loading" @click="onLogin" iconColor="#3396d1">
							{{loading ? "登录中...":" 登录 "}}
						</u-button>
					</view>
				</block>
				<block v-else>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
						<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
						<input class="uni-input" placeholder="请输入验证码" v-model="smsCode" />
						<view class="action">
							<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend">
								{{ getSendBtnText }}</button>
						</view>
					</view>

					<view @tap="zhuce()"> <text style="color: #E04B28;float: right; margin-right: 20rpx; ">
							还未注册?请注册</text> </view>
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
							:class="[shape=='round'?'round':'']" @tap="onSMSLogin"><text
								space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<!--    		<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@tap="loginWay=1">账户登录
                		</button> -->
					</view>
				</block>


				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->

			</view>
		</scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round"></image>
			 -->
			<view class="gray-text">登录中...</view>
		</view>
	</view>

</template>

<script>
	import Ids from 'ids'
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js';
	import md5 from "@/common/util/md5.js"

	export default {
		data() {
			return {
				iscaptcha: false,
				captcha: '',
				requestId: '',
				image: '',
				shape: '', //round 圆形
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				//第三方登录相关信息
				thirdType: "",
				thirdLoginInfo: "",
				thirdLoginState: false,
				bindingPhoneModal: false,
				thirdUserUuid: '',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				}
			};
		},
		onLoad: function() {
			//检测需要开启验证码
			// this.isCaptcha();
			this.Captcha()

			// #ifdef APP-PLUS
			var that = this

			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});

			// #endif
		},
		created() {
			let loginMessage2 = uni.getStorageSync('login-message')
			if (loginMessage2) {
				this.userName = loginMessage2.username
			}
		},
		computed: {

			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.phoneNo.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后发送';
				} else {
					return '发送验证码';
				}
			},
			canSMSLogin() {
				return this.userName.length > 4 && this.smsCode.length > 4;
			},
			canPwdLogin() {
				return this.userName.length > 4 && this.password.length > 4;
			},
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin", "mSign", "ThirdLogin"]),
			onLogin() {

				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password,
					captcha: this.captcha,
					requestId: this.requestId
				}
				this.loading = true;
				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					if (res.data.state == 200) {
						this.$tip.success('登录成功!', 'none')
						this.$Router.replaceAll({
							name: 'index'
						})
						//账号保存到缓存中
						let userName = {
							username: this.userName
						}
						uni.setStorageSync('login-message', userName)
					} else {
						if (res.data.state == 500) {
							this.$tip.alert(res.data.message);
						} else {
							this.$tip.alert(res.data.cause);
						}
					}
				}).catch((err) => {
					this.loading = false;
				})
			},
			zhuce() {
				this.$Router.push({
					name: "zhuce"
				})
			},
			refrsh() {
				this.Captcha();
			},
			Captcha() {
				this.$http.get("ibps/oauth2/v3/user/captcha?requestId=" + this.requestId + "&_t=0xxsb87").then(
					res => {
						this.iscaptcha = true
						this.requestId = res.data.variables.requestId;
						if (res.data.state == 200) {
							this.image = res.data.data;
							this.iscaptcha = true
						} else if (res.data.state == 501) {
							this.iscaptcha = false
						}
					})
			},
			//是否开启验证码 ibps/oauth2/v3/user/captcha/open  是否开始注册
			isCaptcha() {
				this.$http.get(`ibps/oauth2/v3/user/open?_t=${Ids([32, 36, 1]).next()}`).then(res => {
					if (res.data.state == 200) {
						this.requestId = res.data.variables.requestId;
						this.iscaptcha = res.data.data;
						if (this.iscaptcha) {
							this.Captcha();
						}
					}
				})
			},
			saveClientId() {
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: cid
					}
				}).then(res => {
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.phone = this.phoneNo;
				smsParams.smsmode = "0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if (!smsParams.phone || smsParams.phone.length == 0) {
					this.$tip.toast('请输入手机号');
					return false
				}
				if (!checkPhone.test(smsParams.phone)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/ibps/business/v3/mobile/sys/verification", smsParams).then(res => {
					if (res.data.state == 200) {
						this.smsCountDown = 60;
						this.startSMSTimer();
					} else {
						this.smsCountDown = 0;
						this.$tip.toast(res.data.message);
					}
				});
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
			sig(sql) {
				let rul = (sql.length + 9) * 12 * 3 + 168
				let salt = "JinYuanXinTong"
				return md5(rul + '' + salt)
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请填写手机号');
					return;
				}
				if (!checkPhone.test(this.phoneNo)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if (!this.smsCode || this.smsCode.length == 0) {
					this.$tip.toast('请填短信验证码');
					return;
				}
				let loginParams = {
					mobile: this.phoneNo,
					captcha: this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
					if (res.data.state == 200) {
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index'
						})
					} else if (res.data.state == 500) {
						this.$tip.error(res.data.message);
					} else {
						this.$tip.error(res.data.message);
					}
				}).catch((err) => {
					let msg = ((err.response || {}).data || {}).message || err.data.message ||
						"请求出现错误，请稍后再试"
					this.$tip.error(msg);
				});
			},
			loginSuccess() {
				// 登陆成功，重定向到主页
				this.$Router.replace({
					name: 'index'
				})
			},
			requestFailed(err) {
				this.$message.warning("登录失败")
			},
		},
		beforeDestroy() {
			if (this.smsCountInterval) {
				clearInterval(this.smsCountInterval);
			}
		},
	}
</script>

<style>
	.login-paddingtop {
		padding-top: 100upx;
	}

	.zai-box {
		padding: 0 20upx;
		padding-top: 100upx;
		position: relative;
	}

	.zai-logo {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 30rpx;
	}

	.zai-title {
		font-size: 58rpx;
		color: #000000;
		/* text-align: center; */
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.yanzhenma {
		display: flex;
		justify-content: space-between;

	}

	.code-second {
		width: 100rpx;

	}

	.image-code {
		width: 283rpx;
		height: 80rpx;
		margin-right: 10rpx;
	}

	.logonTitle {
		color: #01a39e;
	}

	/deep/ .u-btn--primary {
		background-color: #3396d1;
	}
</style>