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;">速立保</text></view>
		</view>
		
		
		<uni-forms ref="baseForm" :modelValue="baseFormData">
			<uni-forms-item label="手机号" required>
				<uni-easyinput type="number" v-model="baseFormData.userName" :clearable="false" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码" required>
				<uni-easyinput v-model="baseFormData.code"  :clearable="false" placeholder="请输入验证码" >
					<template #right>
							<view @click="getCode" style="margin-right: 4px;background: #ddd;padding: 4px 10px;border-radius: 14px;">{{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;">
			请先阅读并同意协议
		</view>

		<view style="margin-top:4px">
			<tn-checkbox v-model="agreeValue" activeColor="#1d60b1" name="选项1">
				阅读并同意
			</tn-checkbox>
			<view style="display: inline;font-size: 15px;" @click="showInfo()">
				<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"
				@getphonenumber="getPhoneNumber">登录</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">登录</button>
		</view>
		
		<view @click="showLogin" style="text-align: center;margin-top: 24px;">微信一键登录</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,
			}
		},
		onLoad() {

			// this.getLxSessionKey()
		},
		onShow(){
			if(uni.getStorageSync('agreeInfo')){
				this.agreeValue = true;
			}
		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			this.clearTimer();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			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);
						 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'
					})
				}
				// uni.navigateTo({
				// 	url:'/pages/webview/web-view?url='+'https://test-oss.lx-device.com/userFeedback/1732866523422nfH.docx',
				// })
			},
			showInfo2() {
				uni.navigateTo({
				    url:'/pages/webview/web-view?url='+encodeURIComponent('http://slb-m.dev.ml1993.com/webview?title=隐私协议&url='+'https://test-oss.lx-device.com/userFeedback/1734308677563sj9.docx'),
				})
			},
			showLogin(){
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
			change(e) {
				this.value = e.detail.data.length == 0 ? [] : [0];
				console.warn(this.value);
				console.log('e:', e);
			},
			getLxSessionKey() {
				const that = this;
				uni.login({
					success(res) {
						console.error(res);
						that.getOpenId(res.code);
					},
					fail(res) {
						console.error(res);
						uni.hideLoading();
					}
				});
			},
			getOpenId(code) {
				const that = this;
				request.post('/wxma/code2Session', {
					code: code,
					platType: "slb",
					mpType: "engineer",
				}).then(res => {
					console.error(res);
					if (res.success) {
						that.lxSessionKey = res.resultMap.lxSessionKey;
						that.openId = res.resultMap.openId;
						that.unionid = res.resultMap.unionid;
					}

				})

			},
			getPhoneNumber(e) {
				if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
					// wx.showModal({
					// 	title: '提示',
					// 	content: e.detail.errMsg,
					// 	showCancel: false
					// })
					console.error(e)
					return;
				}
				this.getLxSessionKey();
				setTimeout(() => {
					this._getPhoneNumber(e)
				}, 1000)

			},




			_getPhoneNumber(e) {
				console.warn(e);
				let that = this;


				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					wx.getUserInfo({
						success: function(res) {
							console.error(res);
							res.encryptedData = encodeURIComponent(e.detail.encryptedData);
							res.iv = e.detail.iv;
							res.lxSessionKey = that.lxSessionKey;
							that.getPhone(res)


						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: e.detail.code ? '获取成功' : '拒绝了使用微信手机号'
					});
				}


				// if (res.code == 0) {
				// 	uni.showToast({
				// 		title: '绑定成功',
				// 		icon: 'success',
				// 		duration: 2000
				// 	})
				// 	this.$u.vuex('mobile', res.data)
				// 	this.form.mobile = res.data
				// } else {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: res.msg,
				// 		showCancel: false
				// 	})
				// }
			},

			getPhone(prarms) {
				let newParams = {};
				newParams.signature = prarms.signature;
				newParams.rawData = prarms.rawData;
				newParams.encryptedData = prarms.encryptedData;
				newParams.iv = prarms.iv;
				newParams.lxSessionKey = prarms.lxSessionKey;

				let that = this;

				request.post('/wxma/getWaUserPhone',
					newParams

				).then(res => {
					console.error(res);
					if (res.success) {
						this.ZhuceByPhone(res.resultMap.waUserPhoneInfo.phoneNumber);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			async ZhuceByPhone(phone) {
				const that = this;
				let params = {
					phone: phone,
					openid: that.openId,
					unionid: that.unionid,

				};
				that.canSave = false;
				const res = await request.post('/wxma/register',
					params, {
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							platType: "slb",
							mpType: "engineer",
						}
					}
				);

				if (res.success) {
					//当前页直接登录
					// uni.navigateTo({
					//     url:'/pages/index/auth'
					// })
					this.loginAgain();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

				console.warn(res);
			},
			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.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>