menber-center/pages/login/login.vue

<template>
	<view class="app-login-page">
		<view class="app-login">
			<view class="app-icon mb-30">
				<image src="/static/images/login-icon.png" mode="aspectFit" style="height: 40px;"></image>
			</view>
			<view class="app-title mb-30">
				欢迎使用会员中心系统小程序
			</view>
			<view class="mb-30 login-form">
				<view class="loginType">
					<text :class="[loginType=='phone'? 'loginType-text-active': 'loginType-text']"
						@click="loginType = 'phone'">手机登录</text>
					<text :class="[loginType=='username'? 'loginType-text-active': 'loginType-text']"
						@click="loginType = 'username'">账号登录</text>
				</view>
				<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" @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" @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> -->
					</view>
					<view class="form-button" @click="phoneLoginHandle">
						立即登录
					</view>
				</view>
				<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" @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" @confirm="usenameLoginHandle" />
					</view>
					<view class="form-button" @click="usenameLoginHandle">
						立即登录
					</view>
				</view>
				<view class="risgiter-forget">
					<view @click="toPage('/pages/forget/forget')">忘记密码？</view>
					<view @click="toPage('/pages/register/register')">无账号？<text class="text-red">立即注册</text></view>
				</view>
			</view>
			<view class="app-user-book  mb-30">
				<u-checkbox-group style="display: flex;justify-content: center;">
					<u-checkbox v-model="userBook" name="yes" shape="circle">我已阅读&#x300A;用户手册&#x300B;及隐私政策</u-checkbox>
				</u-checkbox-group>
			</view>
			<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"
					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>
				<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</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 {
		useAuthStore
	} from '@/store/authStore'
	export default {
		data() {
			return {
				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: '15312341234',
					yanzhengma: '123456',
					yanzhengmaUuid: ''
				},
				usernameForm: {
					zhanghao: 'zhangsan',
					mima: "12345678"
				},
				userBook: false,
			}
		},
		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);
			},
			// 手机登录
			async phoneLoginHandle() {
				const {
					shoujihao,
					yanzhengma
				} = this.phoneForm;

				// 手机号正则验证
				if (!/^1[3-9]\d{9}$/.test(shoujihao)) {
					msg("请输入正确的手机号");
					return;
				}
				// 验证码存在性检查
				if (!yanzhengma) {
					msg("请输入验证码");
					return;
				}
				let checkUserBook = await this.checkUserBook()
				if (!this.checkUserBook()) return;
				console.log(this.phoneForm)
				// 联调
				// 1.登录 发送请求
				// 2.保存 token
				// 3.获取个人信息，保存个人新
				this.useAuthStore.setAuthToken("test")
				uni.setStorageSync("userinfo", {
					userId: "2121"
				})
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 账号登录
			async usenameLoginHandle() {
				if (!this.usernameForm.zhanghao) {
					msg("请输入账号")
					return;
				}
				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)
				// 联调
				// 1.登录 发送请求
				// 2.保存 token
				// 3.获取个人信息，保存个人新
				this.useAuthStore.setAuthToken("test")
				uni.setStorageSync("userinfo", {
					userId: "2121",
					isMember: true
				})
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// --------验证码 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('倒计时结束后再发送');
				}
			},
			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) {
				if (e.detail.encryptedData) {
					const {
						encryptedData,
						iv
					} = e.detail;
					// 将 encryptedData 和 iv 发送到后端进行解密
				} else {
					msg('取消授权手机号');
				}
			},
			getUserProfile() {
				this.toPage("/pages/wxLogin/wxLogin")
				// 用户微信登录
				// 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)
				// 					}
				// 				}
				// 			});
				// 		}
				// 	}
				// })
			}
		},
		// 在组件销毁时清理定时器
		beforeDestroy() {
			// 在组件销毁时清理定时器
		},
		computed: {
			useAuthStore() {
				return useAuthStore(); // 获取 store 实例
			}
		},
		onLoad() {
			const that = this;
			if (uni.getUserProfile) {
				that.canIUseGetUserProfile = true
			}
		}
	}
</script>
<style lang="scss">
	.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 {
		background-color: #f7f7f7;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.app-login {
		width: 90%;
	}

	.app-icon {
		text-align: center;
	}

	.app-title {
		text-align: center;
		font-size: 44rpx;
		letter-spacing: 2px;
		font-weight: 700;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}

	.text-red {
		color: #df0505;
	}

	.login-form {
		background-color: #ffffff;
		width: 100%;
		padding: 50rpx 40rpx;
		border-radius: 15rpx;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
		border: 1px solid #036df6;
	}

	.loginType {
		color: #000000;
		margin-bottom: 15rpx;

		.loginType-text {
			font-size: 30rpx;
			margin-right: 30rpx;
		}

		.loginType-text-active {
			font-size: 40rpx;
			margin-right: 30rpx;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;

		.form-item-input {
			width: 100%;
			background-color: #f7f7f7 !important;
		}

		.form-item-text {
			width: 200rpx;
			flex: 0 0 auto;
			text-align: center;
			color: #000000;
			// margin: 0 20px;
		}
	}

	.form-button {
		background: linear-gradient(90deg, #006af5, #21b0fc);
		border-radius: 20rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin-bottom: 50rpx;
	}

	.risgiter-forget {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	// 数字验证码
	.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>