WebDevelopmentFramework/pages/login/login.vue

<template>
	<view class="container">
		<!-- <view class="title">登录</view> -->
		<input class="input-phone" placeholder="请输入手机号码" type='number' maxlength="11" :value="phone" 
		@input="phone_input" @blur="yz_phone"/>
		<view style="margin-top: 20px;margin-left: 30px;width: 290px;">
			<input class="input-yanzhen" placeholder="请输入验证码" @input="yan_input" type='number' :value="yanzhen"/>
			<view class="send" @click="sendCode" v-if="disabled==false">发送验证码</view>
			<view class="send" style="background-color: #CCCCCC;" v-else>{{codeMsg}}</view>
		</view>
		
		<view class="login" @click="login">登录</view>
	</view>
</template>

<script>
	import until from '../../common/jiaoyan.js'
	import { JSEncrypt } from 'jsencrypt';
	export default {
		data() {
			return {
				phone:'',//手机号
				yanzhen:'',//验证码
				numbercode:60,//倒计时时间
				codeMsg:'',//倒计时验证码内容
				disabled:false,
				name:'',//同户名
				// RSA加密结果
				resultEncodeP: '',//加密手机号
				resultEncodeY: '',//加密验证码
				// RSA解密结果
				resultDecodeN: '',//解密
				resultDecodeY: '',
				list:[]
			}
		},
		onReady() {
			this.codeMsg = '重发（'+this.numbercode+'）';
		},
		onLoad() {
			
			// let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			// let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let url=location.href
			uni.setStorageSync('url',url)
		},
		methods: {
			// // 加密
			// export function encrypt (txt: string): string {
			//   let cryptFirst = new JSEncryptWX()
			//   cryptFirst.setPublicKey(publicKey)
			//   return cryptFirst.encrypt(txt) || ''
			// },
			 
			// // 解密
			// export function decrypt (txt: string): string {
			//   let cryptFirst = new JSEncryptWX()
			//   cryptFirst.setPrivateKey(privateKey)
			//   return cryptFirst.decrypt(txt) || ''
			// },
			//登录
			login(){
				// 开始加密
				this.resultEncodeP = this.$fns.rsaEncode(this.phone)
				console.log(this.resultEncodeP);
				// 开始解密
				this.resultDecodeY = this.$fns.rsaDecode(this.resultEncodeP)
				console.log(this.resultDecodeY);
				this.resultEncodeY = this.$fns.rsaEncode(this.yanzhen)
				this.$axios.post('/shareVideo/api/logInfo/logIn?phone='+this.resultEncodeP+'&code='+this.resultEncodeY,
				
				{
				  headers:{
				  }
				}).then(res => {
					if (res.data.success) {
						console.log(res.data.data)
						var shu=res.data.data
						// for(var i=0;i<shu.length;i++){
						// 	var jiemi=this.$fns.rsaDecode(shu[i])
						// 	this.resultDecodeN=jiemi
						// 	console.log(this.resultDecodeN);
						// }
						// 开始解密
						this.resultDecodeN = this.$fns.rsaDecode(shu[0])+
						this.$fns.rsaDecode(shu[1])+this.$fns.rsaDecode(shu[2])+
						this.$fns.rsaDecode(shu[3])+this.$fns.rsaDecode(shu[4])+
						this.$fns.rsaDecode(shu[5])+this.$fns.rsaDecode(shu[6])
						console.log(JSON.parse(this.resultDecodeN));
						console.log(JSON.parse(this.resultDecodeN).token)
						uni.setStorageSync('token',JSON.parse(this.resultDecodeN).token)
						uni.setStorageSync('userName',JSON.parse(this.resultDecodeN).userName)
						uni.setStorageSync('telPhone',JSON.parse(this.resultDecodeN).telPhone)
						// this.name=JSON.parse(this.resultDecodeN).userName
						uni.navigateTo({
							url:'/pages/index/index'
						})
					} else {
						uni.showToast({ title: res.data.message, icon: 'none' });
					}
				}).catch(res =>{
				});
				
			},
			// 输入手机号
			phone_input(e) {
				this.phone = e.detail.value;
			},
			// 验证手机号
			yz_phone() {
				if (this.phone == '') {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!until.checkMobile(this.phone)) {
					uni.showToast({ title: '手机号格式错误', icon: 'none' });
					return;
				}
			},
			//输入验证码
			yan_input(e){
				this.yanzhen=e.detail.value;
			},
			//点击验证码发送
			sendCode(){
				//验证手机号是否存在
				this.$axios.get('/shareVideo/api/logInfo/verify?phone='+parseInt(this.phone),
				).then(res => {
					if (res.data.success) {
						this.disabled = true;
						let timer = setInterval(()=>{
							--this.numbercode;
							this.codeMsg = '重发（'+this.numbercode+'）';
						},1000);
						setTimeout(()=>{
							clearInterval(timer);
							this.numbercode=60;
							this.disabled = false;
						},60000)
					} else {
						uni.showToast({ title: '手机号无权限', icon: 'none' });
					}
				}).catch(res =>{
				});
				
			},
		}
	}
</script>

<style>
	.container {
		padding: 80px 20px 0 20px;
		background-image: url('../../static/login-bg.png');
		width: 749rpx;
		height: 1211rpx;
		background-size: 100%;
		font-size: 14px;
		line-height: 24px;
	}
	.title{
		font-size: 27px;
		text-align: center;
	}
	.input-phone{
		position: absolute;
		padding-left: 50rpx;
		margin-top: 264rpx;
		margin-left: 30px;
		width: 540rpx;
		height: 90rpx;
		opacity: 1;
		opacity: 1;
		border-radius: 15rpx;
		border: 1rpx solid rgba(128, 128, 128, 1);      
	}
	.input-yanzhen{
		position: absolute;
		padding-left: 50rpx;
		margin-top: 354rpx;
		width: 180px;
		height: 90rpx;
		opacity: 1;
		border-radius: 15rpx;
		border: 1rpx solid rgba(128, 128, 128, 1);
		float: left;
	}
	.send{
		position: absolute;
		margin-left: 414rpx;
		margin-top: 354rpx;
		width: 175rpx;
		height: 90rpx;
		opacity: 1;
		border-radius: 15rpx;
		background: #00A0E9;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 78rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		float: right;
	}
	.login{
		position: absolute;
		margin-left: 30rpx;
		margin-top: 524rpx;
		width: 589rpx;
		height: 90rpx;
		margin-left: 30px;
		opacity: 1;
		border-radius: 6rpx;
		background: #00A0E9;
		box-shadow: 0px -5rpx 13rpx 0px rgba(0, 0, 0, 0.25);
		font-size: 32rpx;
		font-weight: 400;
		line-height: 90rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>