联调获取数字验证码，校验数字验证码

api/user.js

@@ -25,6 +25,29 @@ export function register (data) {
 	})
 }
 
+
+// 加载数字校验码图片
+export function getCaptchaImage(){
+	return request({
+		'url': '/user/captcha/image',
+		headers: {
+			isToken: false
+		},
+		'method': 'get'
+	})
+}
+// 校验数字校验码
+export function checknumberCaptcha(data){
+	return request({
+		'url': '/user/captcha/verify',
+		headers: {
+			isToken: false
+		},
+		'method': 'post',
+		data: data
+	})
+}
+
 // 发送手机验证码
 export function smsSend (data) {
 	return request({
@@ -35,4 +58,15 @@ export function smsSend (data) {
 		'method': 'post',
 		'data': data
 	})
+}
+// 手机号码验证登录
+export function loginPhone(data){
+	return request({
+		'url': '/user/login/phone',
+		headers: {
+			isToken: false
+		},
+		'method': 'post',
+		'data': data
+	})
 }

pages/login/login.vue

@@ -40,7 +40,7 @@
 					</view>
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="userNameForm.password"
-							:border="true" class="form-item-input" @confirm="userNameLoginHandle" />
+							:border="true" class="form-item-input" @confirm="userNameLoginHandle" type="password" password-icon/>
 					</view>
 					<view class="form-button" @click="userNameLoginHandle">
 						立即登录
@@ -59,12 +59,19 @@
 			<u-divider bg-color="transparent" margin-bottom="30" color="#010101" border-color="#010101"
 				half-width="200">使用第三方账号登录</u-divider>
 			<view class="app-icon mb-30">
-				<u-button v-if="canIUseGetUserProfile" @click="getUserProfile" class="custom-button"
+				<!-- v-if="canIUseGetUserProfile" -->
+				<u-button  @click="getUserProfile" class="custom-button"
+					style="width: 40px;" plain :hair-line="false">
+					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
+						mode="aspectFit" style="width: 40px;height: 40px;" />
+				</u-button>
+				<!-- v-else -->
+				<u-button  open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="custom-button"
 					style="width: 40px;" plain :hair-line="false">
 					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
 						mode="aspectFit" style="width: 40px;height: 40px;" />
 				</u-button>
-				<u-button v-else open-type="getPhoneNumber" @getuserinfo="decryptPhoneNumber" class="custom-button"
+				<u-button  @click="handleWxLogin()" class="custom-button"
 					style="width: 40px;" plain :hair-line="false">
 					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
 						mode="aspectFit" style="width: 40px;height: 40px;" />
@@ -82,7 +89,7 @@
 						v-model="numberCaptchaForm.numberCaptcha" :border="true" class="form-item-input"
 						style="flex-grow: 1;" @confirm="submitCode" />
 					<image :src="numberCaptchaSrc" mode="aspectFit"
-						style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;"></image>
+						style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;" @click="loadImage"></image>
 				</view>
 				<view class="popup-btn">
 					<u-button type="primary" @click="submitCode" style="width: 48%;flex: 0 0 auto;">提交</u-button>
@@ -102,7 +109,11 @@
 
 <script>
 	import {
-		usernameLogin
+		usernameLogin,
+		getCaptchaImage,
+		checknumberCaptcha,
+		smsSend,
+		loginPhone
 	} from "@/api/user.js"
 	import {
 		msg,
@@ -117,6 +128,7 @@
 	export default {
 		data() {
 			return {
+				getPhoneCapt: 0,
 				canIUseGetUserProfile: false,
 				loginCode: '',
 				userBookModal: false,
@@ -125,15 +137,15 @@
 					numberCaptcha: '',
 					numberCaptchaUuid: ''
 				},
-				numberCaptchaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
+				numberCaptchaSrc: '',
 				show: false,
 				tips: '',
 				seconds: 60,
 				// ----验证码 end -----
 				loginType: "phone",
 				phoneForm: {
-					phone: '15312341234',
-					captcha: '123456',
+					phone: '18320082803',
+					captcha: '',
 					captchaUuid: ''
 				},
 				userNameForm: {
@@ -168,35 +180,49 @@
 					phone,
 					captcha
 				} = this.phoneForm;
-
+				
 				// 手机号正则验证
 				if (!/^1[3-9]\d{9}$/.test(phone)) {
 					msg("请输入正确的手机号");
 					return;
 				}
+				
+				if(this.getPhoneCapt <= 0){
+					msg("请先获取手机验证码");
+					return;
+				}
+				
 				// 验证码存在性检查
 				if (!captcha) {
 					msg("请输入验证码");
 					return;
 				}
+				
 				let checkUserBook = await this.checkUserBook()
 				if (!this.checkUserBook()) return;
-				console.log(this.phoneForm)
+				// console.log(this.phoneForm)
+				uni.showLoading({
+					title: '正在登录...'
+				})
+				loginPhone(this.phoneForm).then(res=>{
+					// msg("登录成功");
+					console.log(res);
+				})
 				// 联调
 				// 1.登录 发送请求
 				// 2.保存 token
 				// 3.获取个人信息，保存个人新
 				msg("登录成功");
-				setTimeout(() => {
-					this.useAuthStore.setAuthToken("test")
-					uni.setStorageSync("userinfo", {
-						userId: "2121",
-						isMember: true
-					})
-					uni.switchTab({
-						url: "/pages/index/index"
-					})
-				}, 1000)
+				// setTimeout(() => {
+				// 	this.useAuthStore.setAuthToken("test")
+				// 	uni.setStorageSync("userinfo", {
+				// 		userId: "2121",
+				// 		isMember: true
+				// 	})
+				// 	uni.switchTab({
+				// 		url: "/pages/index/index"
+				// 	})
+				// }, 1000)
 
 			},
 			// 账号登录
@@ -218,9 +244,10 @@
 				}
 				form.password = encryptAESCBC(form.password);
 				usernameLogin(form).then(res => {
-					if (res?.token) {
+					// console.log(res, "登录")
+					if (res.data.token) {
 						msgSuccess("登录成功！")
-						this.useAuthStore.setAuthToken(res.token)
+						this.useAuthStore.setAuthToken(res.data.token)
 						setTimeout(() => {
 							uni.switchTab({
 								url: "/pages/index/index"
@@ -258,23 +285,13 @@
 			start() {
 				msg('倒计时开始');
 			},
+			// 数字校验码
 			showPopup() {
 				// 模拟向后端请求验证码
 				// 1.获取数字校验码图片
 				// 2.显示弹窗
-				uni.showLoading({
-					title: '正在获取图片'
-				})
-				console.log("获取数字验证码图片")
-				setTimeout(() => {
-					uni.hideLoading();
-					msg('获取成功');
-					// 显示模拟态，把获取过来的数字校对码的uuid赋给 numberCaptchaForm.numberCaptchaUuid
-					this.show = true;
-				}, 1500);
-				// 联调
-				// this.loadImage()
-				// this.show = true;
+				this.loadImage()
+				this.show = true;
 			},
 			closePopup() {
 				this.show = false;
@@ -288,86 +305,103 @@
 					});
 					return;
 				}
-				console.log("联调：验证数字验证码是否正确")
-				console.log("联调：发送手机验证码")
 				// 联调 检验是否正确
-				// const checkRes = await checknumberCaptcha();
-				// if(!checkRes){
-				// 	uni.showToast({
-				// 		title: '验证码输入错误',
-				// 		icon: 'none'
-				// 	});
-				// 	return;
-				// }
-				// // 发送手机验证码
-				// const codeRes = await getCodeApi();
-				// if(codeRes && codeRes.captchaUuid){
-				// 	this.phoneForm.captchaUuid = codeRes.captchaUuid
-				// 	this.closePopup();
-				// 	this.$refs.uCode1.start()
-				// }
-
 				uni.showLoading({
 					title: '正在校验验证码'
 				})
-				setTimeout(() => {
-					uni.hideLoading();
-					msg('填写正确');
+				
+				const checkRes = await checknumberCaptcha(this.numberCaptchaForm);
+				if(!checkRes.data.valid){
+					uni.showToast({
+						title: '验证码输入错误',
+						icon: 'none'
+					});
+					return;
+				}
+				// // 发送手机验证码
+				const codeRes = await smsSend({
+					phone: this.phoneForm.phone
+				});
+				
+				if(codeRes && codeResdata.captchaUuid){
+					this.getPhoneCapt++;
+					this.phoneForm.captchaUuid = codeRes.captchaUuid
 					this.closePopup();
 					this.$refs.uCode1.start()
-				}, 1500);
+				}
+
+				uni.hideLoading();
 			},
 			// 加载验证码图片
 			async loadImage() {
 				// 联调
-				// const img = await loadnumberCaptcha();
-				// this.numberCaptchaForm.numberCaptchaUuid = img.numberCaptchaUuid
-				// this.numberCaptchaSrc = img.numberCaptchaSrc
-				console.log("加载图片")
+				uni.showLoading({
+					title: '正在获取图片'
+				})
+				const img = await getCaptchaImage();
+				if(!img.data.numberCaptchaSrc){
+					return
+				}
+				this.numberCaptchaForm.numberCaptchaUuid = img.data.numberCaptchaUuid
+				this.numberCaptchaSrc = img.data.numberCaptchaSrc;
+				uni.hideLoading();
 			},
+			
 			// --------验证码 end---------
-			handleWxLogin() {
-				console.log("weixindenglu")
+			async handleWxLogin() {
+				try {
+				    // 获取code
+				    const loginRes = await uni.login({
+				      provider: 'weixin'
+				    });
+				    const code = loginRes.code;
+					console.log(11, loginRes);
+				  } catch (error) {
+				    console.error('微信登录失败:', error);
+				  }
 			},
 			decryptPhoneNumber(e) {
+				console.log(1111,e)
 				if (e.detail.encryptedData) {
 					const {
 						encryptedData,
-						iv
+						iv,
+						code
 					} = e.detail;
+					console.log(code)
 					// 将 encryptedData 和 iv 发送到后端进行解密
 				} else {
 					msg('取消授权手机号');
 				}
 			},
 			getUserProfile() {
-				this.toPage("/pages/wxLogin/wxLogin")
+				// this.toPage("/pages/wxLogin/wxLogin")
 				// 用户微信登录
-				// let that = this;
+				let that = this;
 				// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
 				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-				// uni.getUserProfile({
-				// 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-				// 	success: (resp) => {
-				// 		//登录远程服务器
-				// 		console.log(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)
-				// 					}
-				// 				}
-				// 			});
-				// 		}
-				// 	}
-				// })
+				uni.getUserProfile({
+					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+					success: (resp) => {
+						//登录远程服务器
+						console.log(2222, 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)
+						// 			}
+						// 		}
+						// 	});
+						// }
+					}
+				})
 			}
 		},
 		// 在组件销毁时清理定时器
@@ -382,6 +416,7 @@
 		onLoad() {
 			const that = this;
 			if (uni.getUserProfile) {
+				console.log(1)
 				that.canIUseGetUserProfile = true
 			}
 		}