|
|
@@ -1,12 +1,251 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
+ <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 setup>
|
|
|
+<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>
|
littleblue55
