chat聊天功能

This commit is contained in:
X1627315083
2025-05-20 16:47:27 +08:00
parent 8bc0a52ab8
commit c235d0de4a
50 changed files with 4902 additions and 2861 deletions

View File

@@ -58,15 +58,43 @@
</div> -->
</div>
<div class="password_input_block">
<div v-show="passwordConditionShow" class="conditionShow">
<div class="item">
<div class="icon">
<i v-show="!passwordCondition.length" class="fi fi-br-cross-small"></i>
<i v-show="passwordCondition.length" class="fi fi-br-check"></i>
</div>
<div class="text">At least 8 characters long</div>
</div>
<div class="item">
<div class="icon">
<i v-show="!passwordCondition.special" class="fi fi-br-cross-small"></i>
<i v-show="passwordCondition.special" class="fi fi-br-check"></i>
</div>
<div class="text">Must contain special characters</div>
</div>
<div class="item">
<div class="icon">
<i v-show="!passwordCondition.group" class="fi fi-br-cross-small"></i>
<i v-show="passwordCondition.group" class="fi fi-br-check"></i>
</div>
<div class="text">Mix of uppercase, lowercase and numbers</div>
</div>
</div>
<input
class="login_form_input"
:class="{active:Object.values(passwordCondition).filter(value => value === true).length<3}"
:type="passwordType"
placeholder="Enter your password"
v-model="password"
@keydown.enter="submitPerLogin()"
@input="passwordInput"
@focus="()=>passwordConditionShow = true"
@blur="()=>passwordConditionShow = false"
/>
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
</div>
<span style="font-weight: 400;opacity: .7;">You must satisfy ALL password conditions to register.</span>
<div class="login_form_title marign_top30">Email</div>
<input
class="login_form_input"
@@ -271,7 +299,13 @@ export default defineComponent({
let register = reactive({
registerModel:false,
registerModelMask:true,
pageWidth:'50%'
pageWidth:'50%',
passwordConditionShow:false,
passwordCondition:{
length:false,
special:false,
group:false,
},
})
return{
store,
@@ -406,7 +440,15 @@ export default defineComponent({
checkRobot() {
this.isCheckRobot = !this.isCheckRobot;
},
passwordInput(){
this.isPassword(this.password)
},
isPassword(password:any){
this.passwordCondition.length = /.{8,}/.test(password)
this.passwordCondition.special = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
this.passwordCondition.group = /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password)
return Object.values(this.passwordCondition).filter(value => value === true).length;
},
//提交账号密码预先登录
submitPerLogin() {
@@ -415,6 +457,9 @@ export default defineComponent({
if(this.emailStap>=2){
return;
}else{
if (/aida/i.test(this.username)) {
message.info('The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.');
}
if (!this.username || !this.password) {
message.info("Please enter your account number or password");
return;
@@ -434,6 +479,11 @@ export default defineComponent({
message.info("Agree to all terms, privacy fees and policies");
return;
}
if(this.isPassword(this.password) < 3){
message.info("You must satisfy ALL password conditions to register.");
return
}
let data = {
userPassword: md5(this.password + "abc"),
userName: this.username,
@@ -670,7 +720,7 @@ export default defineComponent({
// width: 80%;
background: #FFFFFF;
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
padding: 3rem 6rem 6.5rem;
padding: 2rem 6rem 2rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
@@ -766,6 +816,35 @@ export default defineComponent({
top:1.7rem;
cursor: pointer;
}
> .conditionShow{
bottom: 0;
position: absolute;
right: 0;
left: auto;
transform: translateY(-5rem);
background: #404040;
color: #FFF;
font-size: 1.4rem;
padding: 2rem;
border-radius: 2rem;
> .item{
display: flex;
align-items: center;
margin-bottom: .5rem;
&:last-child{
margin-bottom: 0;
}
> .icon{
margin-right: 1rem;
i{
display: flex;
// &.fi-br-cross-small{
// color: red;
// }
}
}
}
}
}
.login_form_input {
@@ -786,6 +865,9 @@ export default defineComponent({
&::placeholder {
color: #a5b0c2;
}
&.active{
border: 0.1rem solid red;
}
}
}