refactor: 删除登录弹窗组件 indexV1.vue
This commit is contained in:
parent
13291799f9
commit
b5c6256ed2
|
|
@ -1,276 +0,0 @@
|
|||
<template>
|
||||
<!-- <view class="loginPopup"> -->
|
||||
<u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
|
||||
@close="handlePopupClose">
|
||||
<view class="loginPopupContent">
|
||||
<view class="loginTitle">登录后掌握更多优质财经内容</view>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<view class="loginForm">
|
||||
<u--form :model="state.loginForm" ref="uForm">
|
||||
<u-form-item style="padding: 0" class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
|
||||
border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
|
||||
border="none"></u--input>
|
||||
<view class="getCode" @click="captcha">{{ codeText }}</view>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-button class="loginFormBtn" text="登录" @click="Login"></u-button>
|
||||
</view>
|
||||
<!-- 用户协议 -->
|
||||
<view class="tips">登录即代表已经阅读并同意
|
||||
<view class="userAgreement">《用户协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- </view> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { getCaptcha, login } from "@/api";
|
||||
import { validatePhoneNumber } from "@/utils/util";
|
||||
import { Session } from "@/utils/storage";
|
||||
const emit = defineEmits([
|
||||
"handlePopupClose",
|
||||
"handlePopupSuccessCallback",
|
||||
"handlePopupErrorCallback",
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
// 列表内容
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => "bottom",
|
||||
},
|
||||
});
|
||||
const codeText = ref("获取验证码");
|
||||
const isDisabled = ref(false);
|
||||
const state = reactive({
|
||||
loginForm: {
|
||||
phone: "",
|
||||
code: "",
|
||||
},
|
||||
});
|
||||
|
||||
const captcha = async () => {
|
||||
if (!validatePhoneNumber(state.loginForm.phone)) {
|
||||
return uni.showToast({
|
||||
title: "请输入正确的手机号",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
const res = await getCaptcha({
|
||||
phone: state.loginForm.phone,
|
||||
});
|
||||
|
||||
if (res.code == 200) {
|
||||
let countdown = 60;
|
||||
if (!isDisabled.value) {
|
||||
isDisabled.value = true;
|
||||
codeText.value = `${countdown}秒后重新获取`;
|
||||
const intervalId = setInterval(() => {
|
||||
countdown--;
|
||||
codeText.value = `${countdown}秒后重新获取`;
|
||||
if (countdown <= 0) {
|
||||
clearInterval(intervalId);
|
||||
isDisabled.value = false;
|
||||
codeText.value = "获取验证码";
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请等待 60s 后重试",
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 登录成功之后的回调
|
||||
const handlePopupSuccessCallback = () => {
|
||||
emit("handlePopupSuccessCallback");
|
||||
};
|
||||
// 登录失败之后的回调
|
||||
const handlePopupErrorCallback = () => {
|
||||
emit("handlePopupErrorCallback");
|
||||
};
|
||||
const { aplus_queue } = window;
|
||||
|
||||
// 登录
|
||||
const Login = async () => {
|
||||
if (!validatePhoneNumber(state.loginForm.phone)) {
|
||||
return uni.showToast({
|
||||
title: "请输入正确的手机号",
|
||||
icon: "none",
|
||||
});
|
||||
} else if (state.loginForm.code.length !== 6) {
|
||||
return uni.showToast({
|
||||
title: "请输入正确的验证码",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
const { code, data, msg } = await login({
|
||||
phone: state.loginForm.phone,
|
||||
smsCode: state.loginForm.code,
|
||||
});
|
||||
console.log(code, "<=== code");
|
||||
if (code === 200) {
|
||||
aplus_queue.push({
|
||||
action: 'aplus.record',
|
||||
arguments: ['login', 'CLK', {
|
||||
phone: data.phone,
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
uni.hideLoading();
|
||||
Session.set("token", data.token);
|
||||
Session.set("userPhone", data.phone);
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
icon: "success",
|
||||
});
|
||||
handlePopupSuccessCallback();
|
||||
|
||||
} else {
|
||||
console.log(msg, "<=== msg");
|
||||
handlePopupErrorCallback();
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
emit("handlePopupClose");
|
||||
};
|
||||
|
||||
// 关闭弹框
|
||||
const handlePopupClose = () => {
|
||||
emit("handlePopupClose");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loginPopup {
|
||||
::v-deep {
|
||||
.u-slide-up-enter-active {
|
||||
width: 100%;
|
||||
height: 786rpx;
|
||||
}
|
||||
|
||||
.u-popup__content__close {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loginPopupContent {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.loginTitle {
|
||||
// font-size: 32rpx;
|
||||
font-size: var(--h1-font-size);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.loginForm {
|
||||
width: 600rpx;
|
||||
// border: 1px solid;
|
||||
margin: 60rpx auto;
|
||||
|
||||
.loginFormItem {
|
||||
width: 600rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #b9b9b9;
|
||||
// padding: 0 !important;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 32rpx 0;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.u-form-item__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loginFormInput {
|
||||
width: 100%;
|
||||
height: 100rpx !important;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
.getCode {
|
||||
height: 100rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--h1-font-size);
|
||||
color: rgba(51, 51, 51, 0.6);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2rpx;
|
||||
height: 52rpx;
|
||||
background-color: rgba(51, 51, 51, 0.1);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginFormBtn {
|
||||
width: 600rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
background-color: #e7303f;
|
||||
color: #fff;
|
||||
|
||||
::v-deep {
|
||||
.u-button__text {
|
||||
font-size: var(--h1-font-size) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
// font-size: 24rpx;
|
||||
font-size: var(--h4-font-size);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #717171;
|
||||
|
||||
.userAgreement {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue