sulibao-mini/pages/login/loginByCode.vue

<template>
	<view style="padding: 16px;font-size: 14px;">
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>

			</view>
		</tn-nav-bar>
		<view style="text-align: center;padding: 80px 0">
			<image src="../../static/logo.png" style="width: 110px; height: 100px;"></image>
			<view style="margin: 8px 0;"><text style="font-size: 22px;font-weight: bold;" :style="{fontSize:(wxFontSize+5)+'px'}">速立保</text></view>
		</view>
		
		
		<uni-forms ref="baseForm" :modelValue="baseFormData" :label-width="wxFontSize+70">
			<uni-forms-item label="手机号" required :labelFontSize="wxFontSize-2">
				<uni-easyinput type="number" :inputSize="wxFontSize-3" :placeholder-style="styleString" v-model="baseFormData.userName" :clearable="false" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码" required :labelFontSize="wxFontSize-2">
				<uni-easyinput v-model="baseFormData.code" :inputSize="wxFontSize-3" :placeholder-style="styleString" :clearable="false" placeholder="请输入验证码" >
					<template #right>
							<view @click="getCode" style="margin-right: 4px;background: #ddd;padding: 4px 10px;border-radius: 14px;" :style="{fontSize:(wxFontSize-3)+'px'}">{{seconds?seconds+'s后重新获取':'获取验证码'}}</view>
						</template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		

		<view :class="!agreeValue?'':'isHidden'" style="background: #00000088;
    display: inline;
    padding: 4px 10px;
    border-radius: 12px;
    border-bottom-left-radius: 0;
    color: #fff;font-size: 12px;margin-left: 12px;" :style="{fontSize:(wxFontSize-5)+'px'}">
			请先阅读并同意协议
		</view>

		<view style="margin-top:4px">
			<tn-checkbox v-model="agreeValue" activeColor="#1d60b1" name="选项1" :size="wxFontSize+17">
				<text :style="{fontSize:(wxFontSize-2)+'px'}">阅读并同意</text>
			</tn-checkbox>
			<view style="display: inline;font-size: 15px;margin-left: -12px;vertical-align: middle;" @click="showInfo()" :style="{fontSize:(wxFontSize-2)+'px'}">
				<view style="color: #1d60b1;display: inline;">《用户服务协议》</view>
				和
				<view style="display: inline;color: #1d60b1;" @click="showInfo2()">《隐私政策》</view>
			</view>

		</view>

		<view class="" hover-class="button-hover" style="margin-top: 24px;" v-if="agreeValue">
			<button :disabled="!canSave" style="border-radius: 50rpx;width: 100%;background-color: #1d60b1;" type="primary" @click="saveForm" :style="{fontSize:(wxFontSize-2)+'px'}">登录</button>
		</view>
		<view class=""  hover-class="button-hover" style="margin-top: 24px;" v-if="!agreeValue">
			<button :disabled="!canSave" style="border-radius: 50rpx;width: 100%;background-color: #1d60b1;" type="primary" @click="showToast" :style="{fontSize:(wxFontSize-2)+'px'}">登录</button>
		</view>
		
		<view @click="showLogin" style="text-align: center;margin-top: 24px;" :style="{fontSize:(wxFontSize-4)+'px'}">手机号快捷登录</view>


	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {

		data() {
			return {
				agreeValue: false,
				value: [],
				range: [{
					"value": 0,
					"text": ""
				}],
				baseFormData:{
					userName:'',
					code:''
				},
				lxSessionKey: '',
				openId: '',
				unionid: '',
				canSave:true,
				seconds:0,
				tryTime:0,
				wxFontSize: 17,
				styleString:'font-size:'+14+'px'
			}
		},
		onLoad() {
			const appBaseInfo = wx.getAppBaseInfo();
			this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
			this.styleString='font-size:'+(this.wxFontSize-3)+'px';
		},
		onShow(){
			if(uni.getStorageSync('agreeInfo')){
				this.agreeValue = true;
			}
		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			this.clearTimer();
		},
		methods: {
			goBack() {
				const pages = getCurrentPages()
				// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack()
					return;
				}else{
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			getCode(){
				if(!this.baseFormData.userName){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false;
				}
				 
				if(this.seconds>0){
					return false;
				}else{
					// if(!this.agreeValue){
					// 	uni.showToast({
					// 		title: '请先阅读并同意协议',
					// 		icon: 'none'
					// 	})
					// 	wx.vibrateShort();
					// 	return false;
					// }
					this.seconds = 60;
					this.getCodeByPhone();
					 
				}
			},
			getCodeByPhone(){
				let params = {
					mobile: this.baseFormData.userName,
					platType: "slb",
					mpType: "engineer",
					smsType:'Login'
				}
				const that = this;
				request.post('/smsSend/sendSMS', {bean:JSON.stringify(params)}).then(res => {
					console.error(res);
					if (res&&res.success) {
						 that.startCountdown();
					}else{
						uni.showToast({
							title: res.msg||'获取失败,请稍后再试',
							icon: 'none'
						})
					}
				
				})
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.seconds > 0) {
						this.seconds--;
					} else {
						// 倒计时结束，清除定时器
						this.clearTimer();
						// 执行倒计时结束后的操作
						 
					}
				}, 1000);
			},
			// 清除定时器
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			showToast() {
				uni.showToast({
					title: '请先阅读并同意协议',
					icon: 'none'
				})
				wx.vibrateShort();
				return false;
			},
			saveForm(){
				if(!this.baseFormData.userName){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false;
				}
				if(!this.baseFormData.code){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return false;
				}
				let params = {
					userName:this.baseFormData.userName,
					smCode: this.baseFormData.code,
					mpType: "engineer",
				}
				const that = this;
				request.post('/slbSmLogin', params).then(res => {
					console.error(res);
					if (res&&res.success) {
						 uni.showToast({
						 	title: '登录成功',
						 	icon: 'none'
						 })
						 uni.setStorageSync('loginStatus', 'true');
						 uni.setStorageSync('userMap', JSON.stringify(res.resultMap));
						 uni.setStorageSync('userNo', res.resultMap.accountName);
						 uni.removeStorageSync('loginOut');
						 that.getUserInfo();
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				
				})
			},
			showInfo() {
				if(uni.getStorageSync('agreeInfo')){
					uni.navigateTo({
					  url: '/pages/login/info?counted=1'
					})
					return false;
				}else{
					uni.navigateTo({
					  url: '/pages/login/info'
					})
				}
			},
			showInfo2() {
				uni.navigateTo({
				    url:'/pages/webview/web-view?url='+encodeURIComponent('https://slb-m.lx-device.com/webview?title=隐私协议&url='+'https://oss.lx-device.com/userFeedback/1735201139460G1J.docx'),
				})
			},
			showLogin(){
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
 
			loginAgain() {
				let that = this;
				uni.login({
					success(res) {
						that.loginByCode(res.code);
					},
					fail(res) {

						uni.hideLoading();
					}
				});
			},
			loginByCode(frontId) {
				const that = this;
				uni.setStorageSync('loginStatus', 'false');
				wx.getUserInfo({
					success: function(res) {
						console.error(res);
						request.post("/slbMpAutoLogin", {
							code: frontId,
							appType: 'ma',
							encryptedData: res.encryptedData,
							iv: res.iv
						}, {
							login: false,
							warn: false,
							loading: false
						}).then(res2 => {
							console.error(res2);
							if (res2.success) {
								//登录成功
								uni.setStorageSync('loginStatus', 'true');
								uni.setStorageSync('userMap', JSON.stringify(res2.resultMap));
								uni.setStorageSync('userNo', res2.resultMap.accountName);
								that.getUserInfo();
								
							} else {
								uni.showToast({
									title: res2.msg,
									icon: 'none'
								})
								that.canSave = true;
								//登录失败,


							}
							console.error(res2);
						});


					}
				})
			},
			getUserInfo() {
				let that = this;
				request.post('/slbWxma/getPersonlInfo', {

				}).then(res => {
					that.canSave = true;
					if (res&&res.success) {
						that.tryTime = 0;
						that.personInfo = res.resultMap.userInfo || {};
						uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
						that.goBack();
					}else{
						that.tryTime++;
						if(that.tryTime<5){
							setTimeout(()=>{
								that.loginAgain()
							},500)
						}else{
							uni.showToast({
								title: '登录超时,请再试一次',
								icon: 'none'
							})
						}
					}
					// if (res.success) {
					// 	that.personInfo = res.resultMap.userInfo || {};
					// 	uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
					// }
					// uni.navigateBack();
					// console.warn(res);
				})

			},
			}
		}
</script>

<style lang="scss" scoped>
	.isHidden {
		visibility: hidden;
	}

	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		// background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		// color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
</style>