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