yogaApp/pages/login/login.vue

<template>
	<view class="loginBack">
		<view class="loginForm">
			<view class="welcomeLogin">欢迎登录</view>
			<view class="tip">yoga</view>
			<view class="formregion">
				<uni-forms :model="form" ref="uForm">
					
					<uni-forms-item prop="phonenumber" >
						<uni-easyinput type="number" placeholder="请输入手机号码"  v-model="form.phonenumber" @blur="zhhandleBlur" :inputBorder="false" :clearable="false"  :placeholderStyle="placeholderStyle"/>
					</uni-forms-item>
					
					<uni-forms-item prop="password" >
						<uni-easyinput type="password" placeholder="请输入密码" v-model="form.password" @blur="mmhandleBlur" maxlength="12"  :inputBorder="false" :clearable="false"  :placeholderStyle="placeholderStyle"/>
					</uni-forms-item>
					
					<uni-forms-item prop="code" >
						<uni-easyinput type="text" placeholder="请输入验证码" v-model.trim="form.code" :inputBorder="false" :clearable="false" :placeholderStyle="placeholderStyle"/>
						<image :src="checkimg" class="checkimg" mode="scaleToFill"></image>
						<view class="codebtn" @click="getcode">看不清?</view>
					</uni-forms-item>
					
					<button type="primary" class="logincla" @click="loginpwdDo">登录</button>
					<view v-if="iflogin" class="loginno">登录中..</view> 
					
					<view class="regcon">
						<!-- <view class="regtxt" @click="gotopwd">修改密码</view>
						<view class="regtxtl"></view> -->
						<view class="regtxtr" @click="gotoregister">注册账号 → </view>
					</view>
					
				</uni-forms>
				
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	// const jpushModule = uni.requireNativePlugin('JG-JPush');
	//#endif
	import {myCache} from '../../utils/utils.js';
	export default {
		data() {
			return {
				checkimg: require("@/static/image/check.jpg"),
				placeholderStyle:"font-size: 28rpx;color: #c3c4c6; text",
				form: {
					phonenumber:"",
					password:"",
					code:"",
					uuid:"",
					registerId:"", // 设备id
					position:"123.357586,41.862907", // 默认拾取 三朵兰瑜伽默认坐标
				},
				iflogin:false,
				gcj02:"1",
				address:'',
				longitude:'', // 经度
				latitude:'', // 维度
			}
		},
		onLoad(){
			this.getcheckImg();
			this.getsystemInfo();
			this.getPosition();
		},
		methods: {
			gotoregister() {
				// 注册账号
				uni.navigateTo({
					url: `/pages/login/register`
				});
			},
			gotopwd() {
				// 修改密码
				uni.navigateTo({
					url: `/pages/user/pwdset`
				});
			},
			// 获取定位
			getPosition(){
				const _this=this;
				uni.getLocation({
				    type:'gcj02',//'gcj02','wgs84', // 返回的坐标类型，wgs84 表示国际标准的经纬度
					geocode:true,
				    success: function (res) {
						console.log(res);
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.form.position=res.latitude+','+res.longitude;
						_this.$forceUpdate();
				    },
				    fail: function (err) {
				        console.log('获取位置失败：' + err.errMsg);
						uni.showModal({
							title: '提示',
						    content: '请在设置中开启定位服务，注册默认地址信息！',
						    showCancel: false,
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									
									// #ifdef APP-PLUS
						            // 跳转到设置页面
						            plus.device.vendor = 'apple'; // 如果是iOS系统
						            if (plus.os.name == 'iOS') {
						                plus.runtime.openURL('prefs:root=LOCATION_SERVICES');
						            } else {
						                plus.runtime.openURL('package:' + plus.android.runtimeMainActivity());
						            }
									// #endif
									
						        }
						    }
						});
						_this.form.position="123.357586,41.862907";
						_this.$forceUpdate();
				    }
				});
			},
			// 获取设备信息
			getsystemInfo(){
				const info = uni.getSystemInfoSync(); 
				const platform = info.platform; // 手机安卓还是苹果
				if (info.platform === 'ios') {
					// ios
					console.log('iOS 设备唯一标识:', info.deviceId);
				} 
				else{
					//安卓
					console.log('设备信息ID:',info.deviceId);
				}
				
				this.form.registerId=info.deviceId;
				this.$forceUpdate();
				
				// const iosApp =  info.platform;
				console.log('iOS 设备名称:', info.model);
				console.log('iOS 系统版本:', info.system);
				console.log('iOS 设备唯一标识:', info.deviceId);
				console.log('iOS 设备像素比:', info.devicePixelRatio);
				console.log('iOS 设备屏幕宽度:', info.screenWidth);
				console.log('iOS 设备屏幕高度:', info.screenHeight);
				console.log('iOS 设备方向:', info.deviceOrientation);
				// uni.showModal({
				//   title: '提示',
				//   content: info.deviceId,
				//   success(res) {
				//     if (res.confirm) {
				//       console.log('用户点击了确定');
				//     } else if (res.cancel) {
				//       console.log('用户点击了取消');
				//     }
				//   }
				// });
			},
			async getcheckImg(){
				// 验证图片信息
				const {data: res} = await uni.$http.get('/captchaImage');
				if (res&&res.img&&res.uuid) {
					this.checkimg= 'data:image/png;base64,'+res.img;
					this.form.uuid=res.uuid;
					this.$forceUpdate();
				}
			},
			// 判断密码是否合规
			mmhandleBlur(e){
				console.log(e)
				if(e.detail.value&&e.detail.value.length<6){
				// if(e.detail.value&&!this.checkMM(e.detail.value)){
					// '密码必须是由6-20位长度的字母、数字组成，请核实！',
					// '密码必须是8-20位字符至少包括大写字母、小写字母、数字、特殊符号中3种以上，请核实！'
					// this.$refs.uToast.show({
					// 	title: "密码必须是6-20位字符至少包括英文、数字、特殊符号中2种以上，请核实！",
					// 	type: 'error',
					// 	duration: 2000
					// });
				}
				
			},
			// 校验密码
			checkMM(mm) {
				// if (!(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/.test(mm))) {
				// // if (!(/((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,20}$))/.test(mm))) {
				//   return false;
				// }
				return true;
			},
			// 判断手机号码是否合法
			zhhandleBlur(e){
				console.log(e)
				// 判断手机号码是否合法
				if(!this.$u.test.mobile(e.detail.value)){
					this.$refs.uToast.show({
						title: '手机号码输入错误，请核实！',
						type: 'warning',
						duration: 2000
					});
				}
			},
			async getcode(){
				uni.showLoading({
					title: '验证码请求中...'
				});
				const {data: res} = await uni.$http.get('/captchaImage');
				console.log(res);
				if(res&&res.img&&res.uuid){
					this.checkimg= 'data:image/png;base64,'+res.img;
					this.form.uuid=res.uuid;
					this.$forceUpdate();
				}
				else{
					this.$refs.uToast.show({
						title: "验证码请求失败！请重试！",
						type: 'error',
						duration: 2000
					});
				}
			},
			// 校验手机号码
			checkPhone(phone) {
				if (!(/^1[3456789]\d{9}$/.test(phone))) {
				  return false;
				}
				return true;
			},
			 
			//地图选择地址
			chooseLocation(){
				var _this=this;
				uni.chooseLocation({
					success: (data)=> {
						console.log(data)
						_this.gcj02="1";
						var adrname = ((data.name===undefined||data.name===null)?'':data.name);
						_this.address = ((data.address===undefined||data.address===null)?'':data.address) + adrname;
						_this.latitude=data.latitude;
						_this.longitude=data.longitude;
						_this.form.position=_this.latitude+','+_this.longitude;
						_this.$forceUpdate();
					},
					fail:(Error)=> {
						_this.gcj02="1";
						_this.address = "";
						_this.latitude="";
						_this.longitude="";
						_this.form.position="";
						_this.$forceUpdate();
					}
				});
			},
			login() {
				// 测试
				// myCache('token', "12345678");
				// myCache('user', {
				// 	phonenumber:"测试人",
				// 	userid:"1",
				// 	userphone:"18900000001",
				// 	avatar:"/static/image/girl.jpg"
				// });
				// this.$refs.uToast.show({
				// 	title: '登录成功',
				// 	type: 'success',
				// 	isTab: true,
				// 	duration: 2000,
				// 	url: '/pages/index/index'
				// });
				// 正式
				this.loginpwdDo();
			},
			// 密码登录
			async loginpwdDo(){
				
				// 手机号码 密码是否输入
				if(!this.form.phonenumber){
					this.$refs.uToast.show({
						title: "请输入手机号码！",
						type: 'warn',
						duration: 2000
					});
					return false;
				}
				if(!this.form.password){
					this.$refs.uToast.show({
						title: "请输入密码！",
						type: 'warn',
						duration: 2000
					});
					return false;
				}
				if(!this.form.code){
					this.$refs.uToast.show({
						title: "请输入验证码！",
						type: 'warn',
						duration: 2000
					});
					return false;
				}
				uni.setStorageSync('iftoken', "1");
				uni.showLoading({
					title: '正在登录...'
				});
				const {data: res} = await uni.$http.post('/api/login',this.form);
				if(res&&res.code=="200"){
					uni.setStorageSync("loginindex", "1");
					uni.setStorageSync("token", res.token);
					// 保存用户登录信息
					this.getUserInfo();
					// 保护用户门店信息
					this.loadshop();
					this.$refs.uToast.show({
						title: '登录成功',
						type: 'success',
						isTab: true,
						duration: 2000,
						url: '/pages/index/index'
					});
				}
				else{
					if(res.msg=='验证码错误'){
						// 重新获取验证码
						this.getcode();
					}
					// uni.setStorageSync('token', this.form.uuid);
					this.$refs.uToast.show({
						title: res.msg?res.msg: "此账号登录失败！请重试！",
						type: 'error',
						duration: 2000
					});
				}
			},
			// 验证码登录
			async getUserInfo(){
				var _this=this;
				const {data: res} = await uni.$http.get('/api/getInfo');
				if(res&&res.appLoginUser){
					var user=res.appLoginUser;
					myCache('user',{
						userid:user.userId,
						nickName:user.nickName,
						username:user.userName,
						userphone:user.phoneNumber,
						avatar:user.avatar
					});
					myCache('userInfo',user);
					myCache('phone',user.phoneNumber);
				}
				if(res&&res.visitStore){
					var shop=res.visitStore;
					myCache('shop',shop);
					myCache('myshop',shop.storeName);
					myCache('myshopid',shop.id);
					// var shoplist=[shop]
					// myCache('shoplist',shoplist);
				}
			},
			async loadshop(){
				// 获取门店
				const {data: res} = await uni.$http.post('/api/index/getStores');
				if(res.data&&res.data.length>0){
					myCache('shoplist',res.data);
				}
			},
			async getUserShopList(){
				var _this=this;
				const {data: res} = await uni.$http.get('/api/getStoreList');
				console.log(res);
				if(res&&res.appLoginUser){
					var user=res.appLoginUser;
					myCache('user',{
						userid:user.userId,
						nickName:user.nickName,
						username:user.userName,
						userphone:user.phoneNumber,
						avatar:user.avatar
					});
					myCache('userInfo',user);
					myCache('phone',user.phoneNumber);
				}
				if(res&&res.visitStore){
					var shop=res.visitStore;
					myCache('shop',shop);
					myCache('myshop',shop.storeName);
					myCache('myshopid',shop.id);
					var shoplist=[shop]
					myCache('shoplist',shoplist);
				}
			},
		}

	}
</script>
<style>

</style>
<style lang="scss" scoped>
		
	::v-deep .u-checkbox__label{
		color:#bdbfc1
	}
	::v-deep .uni-easyinput__content-input {
		width: 500rpx;
		height: 80rpx;
		background: #fff;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137, 150, 95, 0.3);
		border-radius: 254rpx 254rpx 254rpx 254rpx;
	}
	::v-deep .uni-easyinput__content{
		border-radius: 254rpx 254rpx 254rpx 254rpx;
		text-indent: 20rpx;
	}
	.lttxt{
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color:#333333;
		line-height: 38rpx;
		height: 45rpx;
		margin: 30rpx auto;
		text-align: center;
	}
	.timetxt{
		position: absolute;
		top:20rpx;
		right: 28rpx;
		display: block;
		font-size: 36rpx;
		color:#00a89b;
		line-height: 38rpx;
		height: 45rpx;
		margin-left: 50rpx;
	}
	.checkimg{
		position: absolute;
		top:14rpx;
		right: 130rpx;
		width: 150rpx;
		height: 50rpx;
	}
	.codebtn{
		position: absolute;
		top:12rpx;
		right: 20rpx;
		display: block;
		color:#00a89b;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		padding: 0 10rpx;
	}
	.regcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
		.regtxt{
			color:#00a89b;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		.regtxtl{
			color:#00a89b;
			width: 2rpx;
			height: 26rpx;
			font-size: 26rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			border-right: 1rpx solid #00a89b;
			display: flex;
			align-items: center;
		}
		.regtxtr{
			color:#00a89b;
			height: 28rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			margin-right: 10rpx;
		}
	}
	
	.loginno{
		display: block;
		background-color:rgba(137, 150, 95, 0.3);
		width: 100%;
		line-height: 2;
		margin-top: 30rpx;
		border-radius:12rpx;
		font-size: 30rpx;
		text-align: center;
		box-sizing:border-box;
	}
	.logincla{
		display: block;
		background-color:#00A99A;
		width: 100%;
		line-height: 2;
	}
	.loginBack {
		color: #fff;
		height: 100vh;
		padding:60rpx 50rpx 200rpx 50rpx;
		width: 100%;
		overflow: hidden;
		background-size: 100% 100%;
		background-image: url('../../static/image/lgbg.jpg');
		.inpuIcon {
			width: 46rpx;
			height: 46rpx;
			margin-right: 30rpx;
		}
		.formregion {
			width: 100%;
			padding: 30px 50rpx;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 20rpx;
			position: relative;
			display: block;
			overflow: hidden;
			.logo{
				position: absolute;
				top: -20rpx;
				left: 0;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.define {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.welcomeLogin {
		font-size: 30rpx;
		letter-spacing: 2rpx;
		padding: 20rpx 0 10rpx;
		margin: 0 auto;
		width: 100%;
	}
	.tip{
		font-weight: 600;
		font-size: 42rpx;
		letter-spacing: 4rpx;
		padding: 0 0 40rpx 0;
		 
	}
</style>