<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="userNameLoginHandle" />
</view>
<view class="form-item">
<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="userNameForm.miMa"
:border="true" class="form-item-input" @confirm="userNameLoginHandle" />
</view>
<view class="form-button" @click="userNameLoginHandle">
立即登录
</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">我已阅读《用户手册》及隐私政策</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">《用户手册》及隐私政策</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.userNameLoginHandle
};
// 调用相应的登录处理函数
(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.获取个人信息，保存个人新
msg("登录成功");
setTimeout(() => {
this.useAuthStore.setAuthToken("test")
uni.setStorageSync("userinfo", {
userId: "2121",
isMember: true
})
uni.switchTab({
url: "/pages/index/index"
})
}, 1000)
},
// 账号登录
async userNameLoginHandle() {
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.获取个人信息，保存个人新
msg("登录成功");
setTimeout(() => {
this.useAuthStore.setAuthToken("test")
uni.setStorageSync("userinfo", {
userId: "2121",
isMember: true
})
uni.switchTab({
url: "/pages/index/index"
})
}, 1000)
},
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: '正在获取图片'
})
console.log("获取数字验证码图片")
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 !== 4) {
uni.showToast({
title: '请输入4位验证码',
icon: 'none'
});
return;
}
console.log("联调：验证数字验证码是否正确")
console.log("联调：发送手机验证码")
// 联调 检验是否正确
// 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>