<template> <view class="app-login-page"> <u-toast ref="uToast" /> <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="#b1b1b1" v-model="phoneForm.shoujihao" :border="true" class="form-item-input" type="number"/> </view> <view class="form-item"> <u-input height="80" placeholder="请输入验证码" border-color="#b1b1b1" v-model="phoneForm.yanzhengma" :border="true" class="form-item-input" /> <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="#b1b1b1" v-model="phoneForm.shoujihao" :border="true" class="form-item-input" /> </view> <view class="form-item"> <u-input height="80" placeholder="请输入密码" border-color="#b1b1b1" v-model="phoneForm.yanzhengma" :border="true" class="form-item-input" /> </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">我已阅读《用户手册》及隐私政策</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"> <image src="/static/images/weixin.png" mode="aspectFit" style="height: 40px;"></image> </view> </view> </view> </template> <script> export default { data() { return { countdown: 60, // 倒计时初始值 isCounting: false, // 是否正在倒计时 timer: null, // 定义定时器 loginType: "phone", phoneForm: { shoujihao: "", yanzhengma: "" }, usernameForm: { zhanghao: 'zhangsan', mima: "12345678" }, userBook: false, } }, methods: { // 手机登录 phoneLoginHandle() { const regex = /^1[3-9]\d{9}$/; if (!regex.test(this.phoneForm.shoujihao)) { this.showToast("请输入正确的手机号") return; } if (!this.phoneForm.yanzhengma) { this.showToast("请输入验证码") return; } console.log(this.phoneForm) // this.showToast("密码错误") }, // 账号登录 usenameLoginHandle(){ if(!this.usernameForm.zhanghao){ this.showToast("请输入账号") return; } if(!this.usernameForm.mima){ this.showToast("请输入密码") return; } console.log(this.usernameForm) }, toPage(url){ console.log(url) uni.navigateTo({ url:url }) }, // 提示 showToast(msg, type) { this.$refs.uToast.show({ title: msg, type: type ? type : "error", position: "top" }) }, // 点击获取验证码 requestVerificationCode() { if (!this.isCounting) { console.log(2) // 发起请求验证码的操作 console.log("请求验证码..."); // 开始倒计时 this.isCounting = true; this.startCountdown(); } }, // 开始倒计时 startCountdown() { // 每秒减少倒计时 this.timer = setInterval(() => { this.countdown--; if (this.countdown <= 0) { clearInterval(this.timer); this.countdown = 60; // 重置倒计时 this.isCounting = false; // 停止倒计时 } }, 1000); }, }, // 在组件销毁时清理定时器 beforeDestroy() { // 在组件销毁时清理定时器 if (this.timer) { clearInterval(this.timer); } }, } </script> <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: 240rpx; 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; } </style>