Files
soulspace/pages/user/forget.vue
2025-03-05 15:16:45 +08:00

876 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="page commonPage">
<view class="logo_bg">
<z-nav-bar title="" bgColor="none" fontColor="#fff"></z-nav-bar>
<view class="title PM_font">忘记密码</view>
</view>
<!-- 验证码登录 -->
<view class="register_page">
<input type="password" style="width: 0; height: 0; min-height: 0" />
<input
type="text"
autocomplete="off"
style="width: 0; height: 0; min-height: 0"
/>
<view class="flexbox" style="margin-top: 50rpx">
<view
class="input_tit emaPho"
style="margin-top: 0; margin-right: 20rpx"
>
<view
@click="handleChangeIsPassWordPhone"
:class="{ active: isPassWordPhone }"
>手机号</view
>
<span>/</span>
<view
@click="handleChangeIsPassWordPhone"
:class="{ active: !isPassWordPhone }"
>邮箱</view
>
</view>
</view>
<!-- 带区号手机号 -->
<view
class="flexbox"
v-if="isPassWordPhone"
style="margin: 36rpx 0; justify-content: space-between"
>
<view class="quhao">
<uni-data-select
class="myselect"
placeholder="请选择区号"
v-model="resetForm.quCode"
:localdata="quCodeList"
style="height: 30rpx !important"
@change="quChange"
></uni-data-select>
</view>
<view
class="triangle borderBottom phoneNumberInput"
:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']"
>
<u--input
class="form_input_box"
type="number"
v-model="resetForm.phone"
placeholder="请输入您的手机号"
placeholder-class="grey"
/>
</view>
</view>
<view class="input_box" v-else>
<u--input
class="form_input_box"
v-model="resetForm.phone"
placeholder="请输入您的邮箱"
placeholder-class="grey"
/>
</view>
<view class="input_tit">验证码</view>
<view class="input_box">
<u--input
type="number"
class="form_input_box"
v-model="resetForm.code"
placeholder="请输入验证码"
placeholder-class="grey"
maxlength="6"
/>
<button class="sendCode" @click="getCode" size="mini">
{{ codeText }}
</button>
</view>
<view class="input_tit">密码</view>
<view class="input_box">
<u--input
class="form_input_box"
type="password"
maxlength="8"
v-model="resetForm.password"
placeholder="请输入密码"
@input="inputMethod(resetForm.password)"
/>
</view>
<view class="input_tit">确认密码</view>
<view class="input_box">
<u--input
type="password"
class="form_input_box"
maxlength="8"
v-model="resetForm.confirmPassword"
placeholder="请确认密码"
/>
</view>
<view class="btn_box">
<button @click="onSubmit"> </button>
</view>
</view>
</view>
</template>
<script>
import md5 from "@/plugins/md5";
// 密码验证的正则
//1、密码为八位及以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp(
"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
"g"
);
//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项强度是中等
var mediumRegex = new RegExp(
"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
"g"
);
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
var clear;
export default {
data() {
return {
quCodeList: [], // 国家区域码
isPassWordPhone: true,
resetForm: {},
playData: {},
type: '',
codeText: "获取验证码",
//验证码已发
readonly: false,
passwordOk: false,
note: "",
str2: "",
urlList: {
sendcode: "common/user/sms/sendcode", //密码登录
sendEmailcode: "common/user/getMailCaptcha", //密码登录
setPassword: "common/user/setPasswordByCode", //重置密码
},
};
},
//第一次加载
onLoad(e) {
this.getCountyCode();
},
//页面显示
onShow() {},
//方法
methods: {
// 获取国家区域编码
getCountyCode() {
this.$http
.request({
url: "book/baseArea/getAllBaseArea",
method: "POST",
data: {},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
if (res.code == 0 && res.baseAreas.length > 0) {
this.quCodeList = res.baseAreas.map((item) => {
let obj = {
text: item.title + " (+" + item.code + ")",
value: item.code,
};
return obj;
});
this.resetForm.quCode = this.quCodeList[0].value;
this.$forceUpdate();
} else {
this.quCodeList = [];
}
})
.catch((e) => {
console.log(e, "e");
});
},
handleChangeIsPassWordPhone() {
this.resetForm = {};
this.note = null;
this.isPassWordPhone = !this.isPassWordPhone;
this.resetForm.quCode = this.quCodeList[0].value;
this.OpenClear();
},
// 密码验证
inputMethod(value) {
this.passwordOk = false;
if (strongRegex.test(value)) {
this.str2 = "<span style='color:#18bc37'>密码强度很不错哦!</span>";
this.note = "";
this.passwordOk = true;
} else if (mediumRegex.test(value)) {
this.note =
"请至少使用大小写字母、数字、符号两种类型组合的密码长度为8位。";
this.str2 = "<span style='color:#2979ff'>密码强度中等!</span>";
this.passwordOk = true;
} else if (enoughRegex.test(value)) {
this.note =
"请至少使用大小写字母、数字、符号两种类型组合的密码长度为8位。";
} else {
this.passwordOk = false;
this.note =
"请至少使用大小写字母、数字、符号两种类型组合的密码长度为8位。";
this.str2 = "";
}
},
//获取验证码
async getCode() {
var data = {};
if (this.readonly) {
this.$commonJS.showToast("验证码已发送");
return;
}
if (this.isPassWordPhone) {
data.phone = this.resetForm.phone;
if (!this.resetForm.phone) {
this.$commonJS.showToast("请输入手机号");
return;
}
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
this.$commonJS.showToast("手机号格式不正确");
return;
}
} else {
data.email = this.resetForm.phone;
if (!this.resetForm.phone) {
this.$commonJS.showToast("请输入邮箱");
return;
}
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
this.$commonJS.showToast("邮箱格式不正确");
return;
}
}
await this.$http
.post(
this.isPassWordPhone
? this.urlList.sendcode
: this.urlList.sendEmailcode,
data
)
.then((res) => {
this.getCodeState();
});
},
//验证码按钮文字状态
getCodeState() {
const _this = this;
this.readonly = true;
this.codeText = "60S后重新获取";
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + "S后重新获取";
if (s <= 0) {
clearInterval(clear);
_this.codeText = "获取验证码";
_this.readonly = false;
}
}, 1000);
},
// 清除验证码
OpenClear() {
clearInterval(clear);
this.codeText = "获取验证码";
this.readonly = false;
},
onSubmit() {
var data = {};
if (this.isPassWordPhone) {
data.phone = this.resetForm.phone;
if (!this.resetForm.phone) {
this.$commonJS.showToast("请输入手机号");
return;
}
if (this.resetForm.quCode == null || this.resetForm.quCode == 86) {
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
this.$commonJS.showToast("手机号格式不正确");
return;
}
}
} else {
data.email = this.resetForm.phone;
if (!this.resetForm.phone) {
this.$commonJS.showToast("请输入邮箱");
return;
}
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
this.$commonJS.showToast("邮箱格式不正确");
return;
}
}
if (!this.resetForm.code) {
this.$commonJS.showToast("请输入验证码");
return;
}
if (!this.resetForm.password) {
this.$commonJS.showToast("请输入密码");
return;
}
if (!this.resetForm.confirmPassword) {
this.$commonJS.showToast("请输入确认密码");
return;
}
if (this.resetForm.confirmPassword != this.resetForm.password) {
this.$commonJS.showToast("两次密码不一致");
return;
}
if (!this.$base.passwordRegular.test(this.resetForm.password)) {
this.$commonJS.showToast("请输入不少于6位且包含数字和字母的密码");
return;
}
if (!this.passwordOk) {
this.$commonJS.showToast(this.note);
return;
}
this.$http
.post(this.urlList.setPassword, {
phone: this.resetForm.phone,
code: this.resetForm.code,
password: this.resetForm.password,
})
.then((res) => {
if (res.code == 0) {
this.$commonJS.showToast("密码修改成功!");
setTimeout(() => {
uni.navigateBack();
}, 1000);
}
});
},
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {}
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.page {
.title {
padding: 60rpx 0 80rpx 0;
font-size: 80rpx;
color: #fff;
}
.input_box {
display: flex;
justify-content: space-between;
height: 100rpx;
padding-top: 0rpx;
border-bottom: 1rpx solid #eeeeee;
align-items: center;
text {
font-size: 30rpx;
width: 180rpx;
}
input {
flex: 1;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
}
button {
height: 78rpx;
line-height: 78rpx;
font-size: 30rpx;
color: $themeColor;
&:active {
background-color: transparent;
}
}
}
.btn_box {
width: calc(100% - 100rpx);
left: 50rpx;
position: absolute;
bottom: 8vh;
button {
font-size: 32rpx;
background: #7dc1f0;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.protocol {
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 20rpx;
text {
color: $themeColor;
}
}
}
.commonPage {
padding: 0;
background: #fff;
}
.forget_box {
padding: 0 40rpx;
background: #fff;
padding-bottom: 40rpx;
}
.logo_bg {
background-image: url("@/static/login_bg.png");
padding: 0 40rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25vh;
position: relative;
text {
font-size: 45upx;
line-height: 65rpx;
position: absolute;
bottom: 110rpx;
left: 60rpx;
color: #fff;
letter-spacing: 6rpx;
}
.icon_hua_1 {
position: absolute;
bottom: 60rpx;
left: 245rpx;
width: 150rpx;
height: 150rpx;
opacity: 0.08;
}
.icon_hua_2 {
position: absolute;
bottom: 10rpx;
right: 30rpx;
width: 250rpx;
height: 250rpx;
opacity: 0.15;
}
}
.phoneNumberInput {
width: calc(100% - 160rpx);
height: 67rpx;
input {
font-size: 28rpx;
margin: 20rpx 0;
}
}
.borderBottom {
border-bottom: 1px solid #efeef4;
}
.flexbox {
display: flex;
}
.quhao {
height: 50rpx;
width: 290rpx;
margin: 12rpx 15rpx 0 0;
}
.myselect {
width: 240rpx;
height: 50rpx !important;
/deep/.uni-select {
font-size: 24rpx;
}
/deep/.uni-select__selector-item {
font-size: 24rpx;
}
}
.highlight {
color: $themeColor;
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
}
.logo_bg {
background-image: url("@/static/login_bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25vh;
position: relative;
text {
font-size: 45upx;
line-height: 65rpx;
position: absolute;
bottom: 110rpx;
left: 60rpx;
color: #fff;
letter-spacing: 6rpx;
}
.icon_hua_1 {
position: absolute;
bottom: 60rpx;
left: 245rpx;
width: 150rpx;
height: 150rpx;
opacity: 0.08;
}
.icon_hua_2 {
position: absolute;
bottom: 10rpx;
right: 30rpx;
width: 250rpx;
height: 250rpx;
opacity: 0.15;
}
}
.register_page {
padding: calc(var(--status-bar-height)) 50rpx 40rpx;
background-color: #fff;
min-height: 75vh;
.login_method {
justify-content: space-between;
padding: 0 96rpx;
text-align: center;
.title {
margin: 0 auto;
font-size: 40rpx;
letter-spacing: 3rpx;
color: #666;
&.active {
position: relative;
color: $themeColor;
padding-bottom: 35rpx;
font-weight: bold;
}
&.active::after {
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
content: "";
width: 150rpx;
height: 6rpx;
background-color: $themeColor;
}
}
}
.left_triangle {
&::before {
left: 140rpx;
}
&::after {
left: 140rpx;
}
}
.right_triangle {
&::before {
left: 470rpx;
}
&::after {
left: 470rpx;
}
}
.input_tit {
margin-top: 40rpx;
font-size: 34rpx;
font-weight: bold;
color: $themeColor;
}
.emaPho {
}
.emaPho > view {
display: inline-block;
padding: 10rpx 0;
color: #888;
}
.emaPho > view.active {
color: $themeColor;
padding: 10rpx 10rpx;
border-bottom: 2px solid $themeColor;
font-weight: bold;
}
.emaPho > span {
display: inline-block;
margin: 0 30rpx;
color: #ccc;
}
.input_box {
display: flex;
align-items: center;
border-radius: 8rpx;
border-bottom: solid 2rpx #efeef4;
image {
width: 36rpx;
height: 24rpx;
}
input {
flex: 1;
font-size: 28rpx;
color: #333;
height: 70rpx;
}
.input_item {
font-size: 28rpx;
border: 0px;
flex: 1;
height: 70rpx;
width: 100%;
outline: none;
}
button {
height: 60rpx;
background-color: #f8f9fb;
font-size: 28rpx;
padding: 0 14rpx;
color: $themeColor;
line-height: 60rpx;
margin-left: 20rpx;
}
.grey {
color: #999999;
}
}
.password_register {
margin-top: 40rpx;
display: flex;
justify-content: space-between;
text {
font-size: 28rpx;
color: #333333;
}
}
.protocol_box {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 28rpx;
color: #333333;
.select {
width: 36rpx;
height: 36rpx;
background-image: url("@/static/icon/ic_gender_unselected.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-right: 15rpx;
&.active {
background-image: url("@/static/icon/ic_agreed.png");
}
}
> text {
color: $themeColor;
}
}
}
.station {
height: 230rpx;
}
.third_party_login_box {
position: fixed;
bottom: 60rpx;
width: 100%;
left: 0;
padding: 0 30rpx;
.third_party_title {
display: flex;
align-items: center;
&:before,
&:after {
content: "";
flex: 1;
height: 2rpx;
background-color: #f5f5f5;
}
text {
font-size: 24rpx;
color: #999999;
flex-shrink: 0;
padding: 0 20rpx;
}
}
.third_party_content {
margin-top: 60rpx;
display: flex;
justify-content: center;
align-items: center;
image {
width: 80upx;
height: 80upx;
margin: 0 20rpx;
}
}
}
.popup_box {
width: 600upx;
border-radius: 10rpx;
.popup_title {
display: flex;
justify-content: center;
height: 88upx;
line-height: 88upx;
view {
align-items: center;
font-size: 30upx;
display: flex;
image {
width: 50upx;
height: 50upx;
margin: 0 20rpx 0 0;
}
}
}
.popup_content {
padding: 30rpx 40rpx;
}
.popup_footer {
display: flex;
justify-content: center;
view {
width: 45%;
flex-shrink: 0;
text-align: center;
font-size: 28upx;
color: #999;
line-height: 70upx;
margin: 0 0 30rpx 0;
}
view:last-child {
background-color: $themeColor;
color: #fff;
border-radius: 50rpx;
}
}
}
.dp_title {
font-size: 36rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_content {
max-height: 1000rpx;
overflow-y: scroll;
font-size: 28rpx;
color: #555;
line-height: 45rpx;
.dp_con1 {
font-weight: bold;
font-size: 32rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
}
.qie_huan {
font-size: 26rpx;
margin: 20rpx 0 0 0;
text-align: center;
}
.comTy {
font-size: 28rpx;
line-height: 46rpx;
text-align: left;
}
.youKeL {
display: flex;
justify-content: center;
margin: 30rpx 0 0 0;
font-size: 26rpx;
color: $themeColor;
view {
font-weight: bold;
border: 1px solid $themeColor;
border-radius: 10rpx;
padding: 5rpx 15rpx;
}
}
</style>