展开登录页面设计

pages/login/login.vue

@@ -17,15 +17,16 @@
 				<view class="phone-form" v-if="loginType=='phone'">、
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="phoneForm.shoujihao"
-							:border="true" class="form-item-input" type="number"/>
+							:border="true" class="form-item-input" type="number" @confirm="phoneLoginHandle" />
 					</view>
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="phoneForm.yanzhengma"
-							:border="true" class="form-item-input" />
-						<text class="form-item-text" v-if="!isCounting" @click="requestVerificationCode">
+							:border="true" class="form-item-input" @confirm="phoneLoginHandle" />
+						<text class="form-item-text" @click="getCode">{{tips}}</text>
+						<!-- <text class="form-item-text" v-if="!isCounting" @click="requestVerificationCode">
 							发送验证码</text>
 						<text class="form-item-text" v-else>
-							{{ `发送验证码(${countdown})` }}</text>
+							{{ `发送验证码(${countdown})` }}</text> -->
 					</view>
 					<view class="form-button" @click="phoneLoginHandle">
 						立即登录
@@ -34,11 +35,11 @@
 				<view class="phone-form" v-if="loginType=='username'">、
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入账号" border-color="#d0d0d0" v-model="usernameForm.zhanghao"
-							:border="true" class="form-item-input" />
+							:border="true" class="form-item-input" @confirm="usenameLoginHandle" />
 					</view>
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="usernameForm.mima"
-							:border="true" class="form-item-input" />
+							:border="true" class="form-item-input" @confirm="usenameLoginHandle" />
 					</view>
 					<view class="form-button" @click="usenameLoginHandle">
 						立即登录
@@ -57,25 +58,76 @@
 			<u-divider bg-color="transparent" margin-bottom="30" color="#010101" border-color="#010101"
 				half-width="200">使用第三方账号登录</u-divider>
 			<view class="app-icon mb-30">
-				<image src="/static/images/weixin.png" mode="aspectFit" style="height: 40px;"></image>
+				<u-button v-if="canIUseGetUserProfile" @click="getUserProfile" class="custom-button"
+					style="width: 40px;" plain :hair-line="false">
+					<image src="/static/images/weixin.png" mode="aspectFit" style="width: 40px;height: 40px;" />
+				</u-button>
+				<u-button v-else open-type="getPhoneNumber" @getuserinfo="decryptPhoneNumber" class="custom-button"
+					style="width: 40px;" plain :hair-line="false">
+					<image src="/static/images/weixin.png" mode="aspectFit" style="width: 40px;height: 40px;" />
+				</u-button>
+
+				<!-- <image src="/static/images/weixin.png" mode="aspectFit" style="height: 40px;"></image> -->
 			</view>
 		</view>
+		<u-verification-code :seconds="seconds" ref="uCode1" @change="codeChange"></u-verification-code>
+		<u-popup v-model="show" mode="center" border-radius="10">
+			<view class="popup">
+				<text class="popup-title">请输入验证码</text>
+				<view class="popup-content">
+					<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0"
+						v-model="shuzijiaoduimaForm.shuzijiaoduima" :border="true" class="form-item-input"
+						style="flex-grow: 1;" @confirm="submitCode" />
+					<image :src="shuzijiaoduimaSrc" mode="aspectFit"
+						style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;"></image>
+				</view>
+				<view class="popup-btn">
+					<u-button type="primary" @click="submitCode" style="width: 48%;flex: 0 0 auto;">提交</u-button>
+					<u-button type="default" @click="closePopup" style="width: 48%;flex: 0 0 auto;">取消</u-button>
+				</view>
+			</view>
+		</u-popup>
+		<u-modal v-model="userBookModal" mask-close-able class="modal" show-cancel-button
+			:title-style="{fontWeight: 'bold'}" @confirm="confirmModal">
+			<view class="modal-content">
+				为了更好地保障你的合法权益，进行下一步前，请阅读并同意
+				<text class="content-a">&#x300A;用户手册&#x300B;及隐私政策</text>
+			</view>
+		</u-modal>
 	</view>
 </template>
 
 <script>
-	import { usernameLogin } from "@/api/user.js"
-	import { msg } from "@/utils/common.js"
+	import {
+		usernameLogin
+	} from "@/api/user.js"
+	import {
+		msg
+	} from "@/utils/common.js"
+	import {
+		useAuthStore
+	} from '@/store/authStore'
 	export default {
 		data() {
 			return {
-				countdown: 60, // 倒计时初始值
-				isCounting: false, // 是否正在倒计时
-				timer: null, // 定义定时器
+				canIUseGetUserProfile: false,
+				loginCode: '',
+				userBookModal: false,
+				// ----验证码 start -----
+				shuzijiaoduimaForm: {
+					shuzijiaoduima: '',
+					shuzijiaoduimaUuid: ''
+				},
+				shuzijiaoduimaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
+				show: false,
+				tips: '',
+				seconds: 60,
+				// ----验证码 end -----
 				loginType: "phone",
 				phoneForm: {
-					shoujihao: "",
-					yanzhengma: ""
+					shoujihao: '15312341234',
+					yanzhengma: '123456',
+					yanzhengmaUuid: ''
 				},
 				usernameForm: {
 					zhanghao: 'zhangsan',
@@ -85,77 +137,228 @@
 			}
 		},
 		methods: {
+			// 检查用户手册是否勾选
+			checkUserBook() {
+				if (!this.userBook) {
+					this.userBookModal = true
+					return false;
+				}
+				return true
+			},
+			// 用户手册模拟态确认勾选
+			confirmModal() {
+				this.userBook = true;
+				const loginTypeHandler = {
+					phone: this.phoneLoginHandle,
+					username: this.usenameLoginHandle
+				};
+				// 调用相应的登录处理函数
+				(loginTypeHandler[this.loginType] || (() => {})).call(this);
+			},
 			// 手机登录
-			phoneLoginHandle() {
-				const regex = /^1[3-9]\d{9}$/;
-				if (!regex.test(this.phoneForm.shoujihao)) {
-					msg("请输入正确的手机号")
+			async phoneLoginHandle() {
+				const {
+					shoujihao,
+					yanzhengma
+				} = this.phoneForm;
+
+				// 手机号正则验证
+				if (!/^1[3-9]\d{9}$/.test(shoujihao)) {
+					msg("请输入正确的手机号");
 					return;
 				}
-				if (!this.phoneForm.yanzhengma) {
-					msg("请输入验证码")
+				// 验证码存在性检查
+				if (!yanzhengma) {
+					msg("请输入验证码");
 					return;
 				}
+				let checkUserBook = await this.checkUserBook()
+				if (!this.checkUserBook()) return;
 				console.log(this.phoneForm)
+				this.useAuthStore.setAuthToken("test")
+				uni.switchTab({
+					url: "/pages/index/index"
+				})
 			},
 			// 账号登录
-			usenameLoginHandle(){
-				if(!this.usernameForm.zhanghao){
+			async usenameLoginHandle() {
+				if (!this.usernameForm.zhanghao) {
 					msg("请输入账号")
 					return;
 				}
-				if(!this.usernameForm.mima){
+				if (!this.usernameForm.mima) {
 					msg("请输入密码")
 					return;
 				}
 				// usernameLogin(this.usernameForm).then(res=>{
 				// 	console.log(res,45699)
 				// })
+				let checkUserBook = await this.checkUserBook()
+				if (!this.checkUserBook()) return;
 				console.log(this.usernameForm)
+				this.useAuthStore.setAuthToken("test")
+				uni.switchTab({
+					url: "/pages/index/index"
+				})
 			},
-			toPage(url){
-				console.log(url)
+			toPage(url) {
 				uni.navigateTo({
-					url:url
+					url: url
 				})
 			},
-			// 点击获取验证码
-			requestVerificationCode() {
-				if (!this.isCounting) {
-					// console.log(2)
-					// 发起请求验证码的操作
-					console.log("请求验证码...");
-					// 开始倒计时
-					this.isCounting = true;
-					this.startCountdown();
+			// --------验证码 start---------
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				let {
+					shoujihao
+				} = this.phoneForm
+				if (!/^1[3-9]\d{9}$/.test(shoujihao)) {
+					msg("请输入正确的手机号");
+					return;
+				}
+				if (this.$refs.uCode1.canGetCode) {
+					this.showPopup()
+				} else {
+					msg('倒计时结束后再发送');
 				}
 			},
-			// 开始倒计时
-			startCountdown() {
-				// 每秒减少倒计时
-				this.timer = setInterval(() => {
-					this.countdown--;
-					if (this.countdown <= 0) {
-						clearInterval(this.timer);
-						this.countdown = 60; // 重置倒计时
-						this.isCounting = false; // 停止倒计时
-					}
-				}, 1000);
+			end() {
+				msg('倒计时结束');
+			},
+			start() {
+				msg('倒计时开始');
+			},
+			showPopup() {
+				// 模拟向后端请求验证码
+				// 1.获取数字校验码图片
+				// 2.显示弹窗
+				uni.showLoading({
+					title: '正在获取图片'
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					msg('获取成功');
+					// 显示模拟态，把获取过来的数字校对码的uuid赋给 shuzijiaoduimaForm.shuzijiaoduimaUuid
+					this.show = true;
+				}, 1500);
+				// 联调
+				// this.loadImage()
+				// this.show = true;
+			},
+			closePopup() {
+				this.show = false;
+				this.shuzijiaoduimaForm.shuzijiaoduima = ''; // 清空输入框
+			},
+			async submitCode() {
+				if (this.shuzijiaoduimaForm.shuzijiaoduima.length !== 6) {
+					uni.showToast({
+						title: '请输入6位验证码',
+						icon: 'none'
+					});
+					return;
+				}
+				// 联调 检验是否正确
+				// const checkRes = await checkShuzijiaoduima();
+				// if(!checkRes){
+				// 	uni.showToast({
+				// 		title: '验证码输入错误',
+				// 		icon: 'none'
+				// 	});
+				// 	return;
+				// }
+				// // 发送手机验证码
+				// const codeRes = await getCodeApi();
+				// if(codeRes && codeRes.yanzhengmaUuid){
+				// 	this.phoneForm.yanzhengmaUuid = codeRes.yanzhengmaUuid
+				// 	this.closePopup();
+				// 	this.$refs.uCode1.start()
+				// }
+
+				uni.showLoading({
+					title: '正在校验验证码'
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					msg('填写正确');
+					this.closePopup();
+					this.$refs.uCode1.start()
+				}, 1500);
+			},
+			// 加载验证码图片
+			async loadImage() {
+				// 联调
+				// const img = await loadShuzijiaoduima();
+				// this.shuzijiaoduimaForm.shuzijiaoduimaUuid = img.shuzijiaoduimaUuid
+				// this.shuzijiaoduimaSrc = img.shuzijiaoduimaSrc
+				console.log("加载图片")
+			},
+			// --------验证码 end---------
+			handleWxLogin() {
+				console.log("weixindenglu")
 			},
+			decryptPhoneNumber(e) {
+				console.log(e, 123456)
+			},
+			getUserProfile() {
+				let that = this;
+				// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
+				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+				uni.getUserProfile({
+					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+					success: (resp) => {
+						//登录远程服务器
+						if (that.loginCode) {
+							//登录远程服务器
+							console.log("登录远程服务器")
+							// that.loginByWeixin(resp)
+						} else {
+							uni.login({
+								success: function(resp) {
+									if (resp.code) {
+										that.code = resp.code
+										console.log(resp)
+										// that.loginByWeixin(resp)
+									}
+								}
+							});
+						}
+					}
+				})
+			}
 		},
 		// 在组件销毁时清理定时器
 		beforeDestroy() {
 			// 在组件销毁时清理定时器
-			if (this.timer) {
-				clearInterval(this.timer);
+		},
+		computed: {
+			useAuthStore() {
+				return useAuthStore(); // 获取 store 实例
 			}
 		},
+		onLoad() {
+			const that = this;
+			if (uni.getUserProfile) {
+				that.canIUseGetUserProfile = true
+			}
+			console.log(that.canIUseGetUserProfile, 456)
+		}
 	}
 </script>
 <style lang="scss">
-	.form-item .u-input--border{
+	.form-item .u-input--border {
 		border-radius: 16rpx !important;
 	}
+
+	.custom-button {
+		.u-btn {
+			display: block !important;
+			width: fit-content;
+			padding: 0 !important;
+			border-radius: 50rpx;
+		}
+	}
 </style>
 <style lang="scss" scoped>
 	.app-login-page {
@@ -225,7 +428,7 @@
 		}
 
 		.form-item-text {
-			width: 240rpx;
+			width: 200rpx;
 			flex: 0 0 auto;
 			text-align: center;
 			color: #000000;
@@ -247,4 +450,40 @@
 		display: flex;
 		justify-content: space-between;
 	}
-</style>
+
+	// 数字验证码
+	.popup {
+		padding: 40rpx;
+		border-radius: 20rpx;
+
+		.popup-title {
+			font-size: 18px;
+			text-align: center;
+			display: inline-block;
+			width: 100%;
+			// margin-bottom: 15px;
+		}
+
+		.popup-content {
+			display: flex;
+			align-items: center;
+			margin: 50rpx 0;
+		}
+
+		.popup-btn {
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+
+	// 用户手册模拟态
+	.modal {
+		.modal-content {
+			padding: 50rpx;
+
+			.content-a {
+				color: #2979ff;
+			}
+		}
+	}
+</style>