zhxf-app/pages/login/login.vue

<template>
	<view class="section">

		<view class="text-area content">
			<text class="title">智慧消防</text>
		</view>

		<form class="padding-lg flex flex-direction">
			<view class="login-box shadow ">
				<view class="phone-box">
					<input type="text" placeholder="请输入手机号码" onfocus="this.placeholder=''" v-model="phone">
					<span class="icon iconfont left-icon">&#xe64f;</span>
					<span class="icon iconfont right-icon">&#xe610;</span>
				</view>
				<view class="password-box">
					<input type="text" placeholder="请输入验证码" v-model="verify">
					<text class="icon iconfont left-icon">&#xe86a;</text>
					<view @click="getVerifyCode">
						<text class="right-icon verify">{{!codeTime?'获取验证码':codeTime+'s'}}</text>
					</view>
				</view>
				<view class="btn-area">
					<button class="submit" @click="submitRes">提 交 </button>
				</view>
			</view>
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTime: 0,
				phone: '',
				verify: '',
				// VerificationCodeOne: ''
			}
		},
		
		onLoad(option) {
			if(option.flag){
				// alert(1)
				
				
			}else{
				// alert(2)
				this.init()
				
			}
			
			
			

			// this.init()

			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#4866DF", //底部背景色
			})
			
		},
		methods: {
			
			// 初始化 start
			// getUrlCode() {
			// 	var url = location.search
			// 	this.winUrl = url
			// 	var theRequest = new Object()
			// 	if (url.indexOf("?") != -1) {
			// 		var str = url.substr(1)
			// 		var strs = str.split("&")
			// 		for (var i = 0; i < strs.length; i++) {
			// 			theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
			// 		}
			// 	}
			// 	return theRequest
			// },
			
			
			async init(){
				window.location.href=this.$BASE_URL+"Login/getFirst1"
			},
			
			
			
			// async init() {
			// 	let ua = navigator.userAgent.toLowerCase();
			// 	if (ua.match(/MicroMessenger/i) == "micromessenger") {
			// 		var curl2 = window.location.href;
			// 		//是
			// 		var appId = "wx4eab2e3b5531d58b";
			// 		var params = {};
			// 		var CODE = this.getUrlCode();
			// 		var code = CODE['code'];
			// 		if (code) {
			// 			params.code = code;
			// 			const res = await this.$myRequest({
			// 				url: 'Login/getLoginAuthorize',
			// 				data: params
			// 			})
			// 			code = '';
			// 			return "ok";
			// 		}
			// 		var cs = {};
			// 		var curl = window.location.href;
			// 		cs.curl = curl;
			// 		const res1 = await this.$myRequest({
			// 			url: 'Login/getLoginAuthorize',
			// 			data: cs
			// 		})
			// 		var turl = res1.data.turl;
			// 		window.location.href =
			// 			'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4eab2e3b5531d58b&redirect_uri=' + turl +
			// 			'&response_type=code&scope=snsapi_base&state=abc123#wechat_redirect';
			// 	} else {
			// 		const res = await this.$myRequest({
			// 			url: 'Login/getLoginAuthorize',
			// 			data: params
			// 		})
			// 	}
			// },
			// 初始化 end

			//点击获取验证码
			getVerifyCode() {
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码...",
						icon: "none"
					});
					return
				}
				if (!/^1[345678]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号码...",
						icon: "none"
					});
					return
				}
				this.getVerifyData({
					"phone": this.phone
				})
				
				//
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				} else {
					this.codeTime = 60
					let timer = setInterval(() => {
						this.codeTime--;
						if (this.codeTime < 1) {
							clearInterval(timer);
							this.codeTime = 0
						}
					}, 1000)
				}
			},
			
			//点击提交按钮
			submitRes() {
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码...",
						icon: "none"
					});
					return
				}
				if (!/^1[345678]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号码...",
						icon: "none"
					});
					return
				}
				if (!this.verify) {
					uni.showToast({
						title: "请输入验证码...",
						icon: "none"
					});
					return
				}
				this.getData({
					"phone": this.phone,
					"VerificationCode": this.verify,  
					// "VerificationCodeOne": this.VerificationCodeOne
				})

			},
			
			async getVerifyData(params = {}) {
				// alert(1)
				const res = await this.$myRequest({
					url: 'Login/getVerificationCode',   
					data: params
				})
				// this.VerificationCodeOne = eval('(' + res.data + ')').data[0].VerificationCode
			},
			
			async getData(params = {}) {
				const res = await this.$myRequest({
					url: 'Login/setSignUp',  	
					data: params
				})
				if (res.data.flag == true) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {

				}
			},

		}
	}
</script>

<style>
	.section {
		height: 400rpx;
		background-image: url(/static/login-bg.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.content {
		height: 434rpx;
		text-align: center;
		position: relative;
	}

	.login-box {
		height: 600rpx;
		position: relative;
		top: -150rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 100rpx 20rpx;
	}

	.shadow {
		box-shadow: 0px 2px 4px rgb(26 26 26 / 10%);
	}

	.title {
		position: absolute;
		color: #fff;
		font-size: 60rpx;
		bottom: 180rpx;
		display: block;
		width: 100%;

	}

	input,
	button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 1;
		border: 1px solid #dbdbdb;
		border-radius: 100rpx;
		background: #fff;
		coloe: #333;
		margin: 40rpx 0;
		font-size: 34rpx;

	}

	input {
		text-indent: 100rpx;
	}
	.submit {
		background: #4074E7;
		color: #fff
	}
	.phone-box,
	.password-box {
		position: relative;
	}
	.password-box .verify {
		font-size: 30rpx;
		color: #999999
	}
	.left-icon {
		position: absolute;
		left: 48rpx;
		top: 50%;
		margin-top: -20rpx;
		line-height: 100%;
		font-size: 40rpx;
		color: #7A7A7A
	}
	.right-icon {
		position: absolute;
		right: 48rpx;
		top: 50%;
		margin-top: -20rpx;
		line-height: 100%;
		font-size: 40rpx;
	}
	.right-icon.verify {
		margin-top: -10rpx;
		color: #4074E7
	}
	.iconfont {
		color: #999
	}

</style>