newEdition/pages/login/Verification.vue

<template>
	<view>
		<view class="head">
			<image class="head-immg" src="https://autoiot.oss-cn-beijing.aliyuncs.com/static/login.png" mode=""></image>
		</view>
		<view class="input">
			<view class="">
				<view class="text-1">
					您好，
				</view>
				<view class="text-2">
					欢迎登录AI销管～
				</view>
			</view>
			<view class="cwjs-cells item-flex" style="margin-top: 80rpx;">
				<view class="cwjs-item center" style="margin-left:30rpx;">
					<input type="text" v-model="username" placeholder="请输入手机号码" maxlength="11"
						placeholder-style='color:#AAAAAA;' />
				</view>
			</view>
			<view class="cwjs-cells item-flex" style="margin-top: 13rpx;">
				<view class="cwjs-item center" style="margin-left:30rpx;display: flex;">
					<input type="text" v-model="msg" placeholder="请输入验证码" maxlength="4"
						placeholder-style='color:#AAAAAA;' />
					<view class="mamay">
						<view class="sada" v-if="sendAuthCode" style="font-size: 30rpx;" @click="getAuthCode">获取验证码
						</view>
						<text class="sada" v-if="!sendAuthCode">
							重新发送({{ auth_time }})
							<!-- <text></text> -->
						</text>
					</view>
				</view>
			</view>
			<view class="textbox">
				<view class="textbox-1" @tap="bindVerification">密码登录</view>
				<view class="textbox-2"></view>
				<view class="textbox-11"></view>
			</view>
			<view class="button" @click="denglu"><text class="">登录</text></view>
		</view>

	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var config = require("../../config");
	var WXB_SESSION_LOGIN_DATA = 'weapp_session_login_data';
	var app = getApp();
	export default {
		data() {
			return {
				username: '',
				role: '',
				msg: '',
				sendAuthCode: true,
				auth_time: 0,
			};
		},
		onLoad: function(options) {
			this.role = options.role;
		},
		methods: {
			//账号密码登录
			bindVerification() {
				uni.navigateTo({
					url: '/pages/login/index',
				})
			},

			//登录
			denglu() {
				var that = this;
				if (this.msg == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return
				}
				if (this.msg.length == 4) {
					uni.request({
						url: config.service.plogin + '?mobile=SMS@' + this.username + '&code=' + this.msg +
							'&grant_type=mobile',
						method: "POST",
						header: {
							'Authorization': 'Basic cGlnOnBpZw=='
						},
						data: {
							mobile: 'SMS@' + this.username,
							code: this.msg,
							grant_type: 'mobile'
						},
						success: (result) => {
							var data = result.data; //console.log("登录信息", data);
							if (data) {
								var res = data;
								if (res.code != 1) {
									var data = {
										'token': res.access_token
									};
									uni.setStorageSync(WXB_SESSION_LOGIN_DATA, data); //写入缓存
									that.getMenu()
									that.getUser();
									util.showSuccess('登录成功');
								} else {
									util.showNone("账号名或密码错误，请重试");
									return false;
								}
							} else {
								util.showNone(data.msg);
								return false;
							}
						},
					})
				} else {
					uni.showToast({
						title: '验证码位数不正确',
						icon: 'none'
					});
				}
			},
			getUser(){
				util.getRequestPromise(config.service.getUser, {}, false, "GET").then(data => {
					if (data.user.total==0) {
						uni.showToast({
						    title: '暂无绑定项目',
						    duration: 2000,
							icon:"none"
						});
						return
					} else {
							let lopan = {
								id: data.houseList[0].id,
								name: data.houseList[0].propertyName
							}
							let users=data.user
							users.zkProperties=data.houseList
							uni.setStorageSync("fendianindex", 0); //写入缓存
							
							uni.setStorageSync("weapp_session_userInfo_data",users); //写入缓存
							
							uni.setStorageSync("buildingID", lopan); //项目id写入缓存
							uni.switchTab({
								url: '/pages/index/index'
							});
					}
				
				});
			},
			//获取权限
			getMenu(){
				uni.request({
					url: config.service.getMenu,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer '+uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						let rescor=data.data;
						if (rescor.code == 0) {
							uni.setStorageSync("weapp_session_Menu_data", rescor.data)
						}else{
							uni.showToast({
							    title: rescor.msg,
							    duration: 2000,
								icon:"none"
							});
							return
						}
					}
				})
			},

			//获取验证码
			getAuthCode() {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return
				}
				uni.request({
					url: config.service.sendCode + "/" + this.username,
					method: "GET",
					header: {
						'content-type': 'application/json',
					},
					success: (data) => {
						console.log(data)
						// 成功地响应会话信息
						if (data.data.code == 0) {
							util.showSuccess('发送成功');
							this.sendAuthCode = false;
							this.auth_time = 60;
							var auth_timetimer = setInterval(() => {
								this.auth_time--;
								if (this.auth_time <= 0) {
									this.sendAuthCode = true;
									clearInterval(auth_timetimer);
								}
							}, 1000);
						} else {
							util.showNone(data.data.msg);
							return false;
						}
					},
				})
			},

		}
	};
</script>

<style lang="scss">
	.cwjs-logo {
		display: block;
		width: 219rpx;
		height: 158rpx;
		margin: 54rpx auto 66rpx;
	}

	.cwjs-tips {
		font-size: 24rpx;
		padding: 80rpx 0;
		color: #8a8a8a;
	}

	.cwjs-form {
		position: relative;
		margin: 0;
		background-color: #fff;
		border-radius: 10px;
		padding: 20rpx 40rpx 113rpx;
	}

	.cwjs-cells {
		width: 510rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		height: 88rpx;
		overflow: hidden;
		border: 1rpx solid #BFC7D3;
		position: relative;
		border-radius: 12rpx;
	}

	.center {
		flex: 1;
	}

	.cwjs-input {
		height: 48rpx;
		line-height: 48rpx;
		padding: 23rpx 23rpx 23rpx 78rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #000;
	}

	.images {
		display: block;
		width: 40rpx;
		height: 21rpx;
		margin-right: 30rpx;
		margin-top: 33.5rpx;
	}

	.mod-btn {
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		margin-left: -80rpx;
	}

	.sada {
		font-size: 30rpx;
		color: #2B6EFF;
		width: 200rpx;
		display: flex;
	}


	/* 头部 */

	.head {
		width: 750rpx;
		height: 500rpx;
		position: relative;

		.head-immg {
			width: 750rpx;
			height: 778rpx;
			position: absolute;
		}
	}


	.logo {
		width: 248rpx;
		height: 248rpx;
		display: block;
		position: absolute;
		top: 134rpx;
		left: 240.5rpx;
	}


	/* 输入框 */
	.input {
		width: 630rpx;
		height: 824rpx;
		padding: 60rpx 60rpx 80rpx 60rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 14px 20px -6px rgba(6, 16, 88, 0.1);
		border-radius: 20px;
		position: absolute;
		top: 107rpx;
		left: 60rpx;
	}

	.text-1 {
		font-size: 44rpx;
		line-height: 62rpx;
	}

	.text-2 {
		margin-top: 16rpx;
		font-size: 36rpx;
		line-height: 50rpx;
	}

	.logo_input {
		width: 34rpx;
		height: 38rpx;
		position: absolute;
		top: 25rpx;
		left: 30rpx;
	}

	/* 登录 */
	.button {
		width: 510rpx;
		height: 86rpx;
		background: #2671E2;
		box-shadow: 0px 2px 20px 0px rgba(38, 113, 226, 0.5);
		border-radius: 12rpx;
		text-align: center;
		line-height: 89rpx;
		color: #fff;
		margin: 0 auto;
		margin-top: 120rpx;
		font-size: 34rpx;

	}

	.footer {
		width: 100%;
		height: 157rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.imagesBox {
		width: 80rpx;
		height: 88rpx;
	}



	.login {
		text-decoration: underline;
		text-align: center;
		margin-top: 40px;
		color: #88909E;
		font-size: 28rpx;
	}

	.textbox {
		width: 569rpx;
		display: flex;
		margin-top: 40rpx;
	}

	.textbox-1 {
		width: 30%;
		font-size: 30rpx;
		color: #999999;
	}

	.textbox-11 {
		width: 30%;
		text-align: right;
		font-size: 30rpx;
		color: #999999;
	}

	.textbox-2 {
		width: 30%;
	}
</style>