TMRAppBle/pages/login.stml

<template>
	<view class="login_wrap">
		<dxx-loading loadingtext="正在登录..." :show="isLoading"></dxx-loading>
		<view class="login_form" v-show="isLogin">
			<view class="login_form_title">
				<text class="login_title_text">TMR饲喂管理</text>
			</view>
			<view class="login_form_content">
				<view class="login_form_item">
					<text class="item_label">手机号: </text>
					<view class="item_input_content">
						<input type="text" keyboard-type="tel" class="input" name="name" v-model="phone" placeholder="请输入手机号"/>
					</view>
				</view>
				<view class="login_form_item">
					<text class="item_label">验证码: </text>
					<view class="item_input_content">
						<input type="text" keyboard-type="number" class="input2" name="psw" v-model="code" placeholder="请输入验证码"/>
						<button type="button" :class="isCodeClick?'disabled_yam':'login_yzm'" :disabled="isCodeClick" @click="handleGetCode">{msgNum}}</button>
					</view>
				</view>
				<button type="button" class="login_btn" @click="handeLogin">立即登录</button>
			</view>
		</view>
	</view>
</template>
<script>
import "../components/dxx-loading.stml"
import {GET,POST} from '../script/req.js'
import {Util} from '../script/util'
import { Permission } from '../script/permission.js'
export default {
	name: 'login',
	apiready(){
		
	},
	data() {
		return{
			//验证码文字
			isCodeClick:false,
			msgNum:"获取验证码",
			phone:null,
			code:null,
			resCode:null,
			codeSwitch:true,
			isLoading:false,
			isLogin:true
		}
	},
	methods: {
		apiready(){
			this.ifHasPhone()
			this.ifHasBle()
			this.ifHasBleCle()
			this.ifHasLocation()
			var token= api.getPrefs({sync: true,key: 'token'})
			var sourceCow= api.getPrefs({sync: true,key: 'sourceCow'})
			if(''!=token && ''!=sourceCow){
				api.openWin({
					name: 'index',
					reload:true,
					url:'../html/index.html'
				})
			}
		},
		ifHasLocation() {
			var statusJson = Permission.hasPermission('location');
			// console.log(('location'+JSON.stringify(statusJson)));
			if (statusJson[0].granted == true) {
			} else {
				api.confirm({
					title: '提醒',
					msg: '需要开启定位权限，去设置？',
					buttons: ['确认', '取消']
				}, function (ret, err) {
					if (1 == ret.buttonIndex) {
						Permission.reqPermission('location', function (ret, err) {
							if (ret) {
								if (ret.never == true) {
									return;
								} else {
									if (ret.list[0].granted == true) {
									} else {
										return;
									}
								}
							}
						});
					}
				});
			}
		},
		ifHasPhone(){
			var statusJson = Permission.hasPermission('phone');
			// console.log(('phone'+JSON.stringify(statusJson)));
			if (statusJson[0].granted == true) {
				// Util.appOpen()
			} else {
				api.confirm({
					title: '提醒',
					msg: '需要开设备权限，去设置？',
					buttons: ['确认', '取消']
				}, function (ret, err) {
					if (1 == ret.buttonIndex) {
						Permission.reqPermission('phone', function (ret, err) {
							if (ret) {
								if (ret.never == true) {
									return;
								} else {
									if (ret.list[0].granted == true) {
										// Util.appOpen()
									} else {
										return;
									}
								}
							}
						});
					}
				});
			}
		},
		ifHasBle(){
			var statusJson = Permission.hasPermission('ble-scan');
			// console.log(('ble-scan'+JSON.stringify(statusJson)));
			if (statusJson[0].granted == true) {
				// Util.appOpen()
			} else {
				api.confirm({
					title: '提醒',
					msg: '需要开蓝牙权限，去设置？',
					buttons: ['确认', '取消']
				}, function (ret, err) {
					if (1 == ret.buttonIndex) {
						Permission.reqPermission('ble-scan', function (ret, err) {
							if (ret) {
								if (ret.never == true) {
									return;
								} else {
									if (ret.list[0].granted == true) {
										// Util.appOpen()
									} else {
										return;
									}
								}
							}
						});
					}
				});
			}
		},
		ifHasBleCle(){
			var statusJson = Permission.hasPermission('ble-connect');
			// console.log(('ble-connect'+JSON.stringify(statusJson)));
			if (statusJson[0].granted == true) {
				// Util.appOpen()
			} else {
				api.confirm({
					title: '提醒',
					msg: '需要开蓝牙权限，去设置？',
					buttons: ['确认', '取消']
				}, function (ret, err) {
					if (1 == ret.buttonIndex) {
						Permission.reqPermission('ble-connect', function (ret, err) {
							if (ret) {
								if (ret.never == true) {
									return;
								} else {
									if (ret.list[0].granted == true) {
										// Util.appOpen()
									} else {
										return;
									}
								}
							}
						});
					}
				});
			}
		},
		//获取验证码，60秒倒计时
		handleGetCode(){
			let that = this;
			let _timeNum = 60;
			if(that.data.phone != null && '' != that.data.phone){
				GET('sendSms?phone='+that.data.phone).then(ret => {
					if(ret.code == 200){
						api.toast({
							msg:'短信发送成功，请注意查收',
							location:'middle'
						})
						that.data.resCode = ret.data.verificationCode
					}else{
						api.toast({
							msg:'短信发送成功，请稍后重试',
							location:'middle'
						})
					}
				}).catch(err => {
					api.toast({
						msg: JSON.stringify(err)
					})
				})
				that.data.isCodeClick = true;
				let _timer = setInterval(function () {
					setTimeout(function () {
						if(_timeNum === 0){
							that.data.msgNum = "获取验证码";
							that.data.isCodeClick = false;
							clearInterval(_timer);
							return false;
						}
						_timeNum--;
						that.data.msgNum = _timeNum+'s';
					},0)
				},1000)
			}else{
				api.toast({
					msg:'手机号不能为空',
					location:'middle'
				})
			}
		
		},
		//登录
		handeLogin(){
			let _this = this;
			if(!this.data.phone){
				api.toast({
					msg:'手机号不能为空',
					location:'middle'
				})
			}else if(!this.data.code && this.data.codeSwitch){
				api.toast({
					msg:'验证码不能为空',
					location:'middle'
				})
			}else if(this.data.code != this.data.resCode && this.data.codeSwitch){
				api.toast({
					msg:'验证码错误,请重新发送',
					location:'middle'
				})
			}else{
				_this.data.isLoading = true;
				GET('login?phonenumber='+this.data.phone).then(ret => {
					_this.data.isLoading = false;
					api.toast({
						msg:ret.msg,
						location:'middle'
					})
					if(ret.code == 200){
						api.setPrefs({
							key: 'token',
							value: ret.token
						});
						api.setPrefs({
							key: 'loginUser',
							value: ret.loginUser
						});
						api.setPrefs({
							key: 'sourceCow',
							value: ret.loginUser.sourceCow
						});
						api.openWin({
							name: 'index',
							reload:true,
							url:'../html/index.html'
						})
						// if (ret.loginUser.sourceCow !=2 ) {
						// 	api.openWin({
						// 		name: 'index',
						// 		reload:true,
						// 		url:'../html/index.html'
						// 	})
						// }else{
						// 	api.openWin({
						// 		name: 'index',
						// 		reload:true,
						// 		url:'./index.stml'
						// 	})
						// }
						var token= api.getPrefs({sync: true,key: 'token'})
						var sourceCow= api.getPrefs({sync: true,key: 'sourceCow'})
					}
				}).catch(err => {
					api.toast({
						msg: JSON.stringify(err)
					})
				})
			}
		}
	}
}
</script>
<style>
	.login_wrap {
		width:100%;
		height: 100%;
		background-size: 150%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		background-image: url("../image/bg_img.jpg");
	}
	.login_form{
		position: absolute;
		top: 45%;
		right: 10%;
		transform: translateY(-45%);
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 2%;
		border-radius: 10px;
		width: 50%;
	}
  	.login_form_title{
		width: 100%;
		text-align: center;
		margin: 10px 0;
    }
	.login_title_text{
		font-size: 20px;
	  	color: #000000;
	}
    .login_form_content{
      margin-top: 20px;
	  width: 100%;
    }
	.login_form_item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 10px 0;
		width: 100%;
	}
	.item_label{
		font-size: 16px;
		margin-right: 5px;
		width: 20%;
		text-align: right;
	}
	.item_input_content{
		width: 80%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.input{
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 5px 10px;
		border-radius: 8px;
	}
	.input2{
		height: 40px;
		box-sizing: border-box;
		padding: 5px 10px;
		border-radius: 8px;
	}
	.login_yzm{
		background-color: #407ae6;
		color: #ffffff;
		margin-left: 5px;
		font-size: 14px;
		opacity: 1;
	}
	.login_btn{
		width: 80%;
		height: 48px;
		line-height: 24px;
		margin: 30px auto 20px;
		background-color: #407ae6;
		color: #ffffff;
		font-size: 16px;
	}
	.disabled_yam{
		opacity: 0.7;
		background-color: #407ae6;
		color: #ffffff;
		margin-left: 5px;
		font-size: 14px;
	}
</style>