【验证码优化】等待时按钮需要置为灰色
continuous-integration/drone/push Build is passing Details

main
wangxiaoshuang 2025-11-14 17:17:16 +08:00
parent b55245a83a
commit 9de73b9d44
4 changed files with 62 additions and 107 deletions

View File

@ -186,8 +186,8 @@ export default {
}
.codeBtn.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
.codeBtn.is-disabled:focus,
.codeBtn.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;

View File

@ -391,6 +391,17 @@ export default {
color: #409EFF;
border-color: #409EFF;
}
.codeBtn.is-disabled,
.codeBtn.is-disabled:focus,
.codeBtn.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
.is-error.my_new_pwd {
margin-bottom: 45px;
}

View File

@ -349,8 +349,8 @@ export default {
}
.codeBtn.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
.codeBtn.is-disabled:focus,
.codeBtn.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;

View File

@ -5,134 +5,61 @@
<!-- 账号信息 -->
{{ $t('trials:trials-myinfo:title:accountInfo') }}
</div>
<el-form
label-position="right"
label-width="100px"
:rules="rule"
:model="userForm"
ref="userFormRef"
>
<el-form label-position="right" label-width="100px" :rules="rule" :model="userForm" ref="userFormRef">
<!-- 用户名 -->
<el-form-item
:label="$t('trials:trials-myinfo:form:userName')"
style="margin-bottom: 5px"
>
<el-form-item :label="$t('trials:trials-myinfo:form:userName')" style="margin-bottom: 5px">
<span>{{ user.UserName }}</span>
</el-form-item>
<el-form-item label="" style="position: relative" prop="UserName">
<el-input
v-model="userForm.UserName"
:placeholder="$t('trials:trials-myinfo:form:userName')"
/>
<el-input v-model="userForm.UserName" :placeholder="$t('trials:trials-myinfo:form:userName')" />
<!-- 修改 -->
<el-button
:disabled="!userForm.UserName"
class="saveBtn"
type="primary"
size="small"
@click="setNewUserName"
>
<el-button :disabled="!userForm.UserName" class="saveBtn" type="primary" size="small" @click="setNewUserName">
{{ $t('trials:trials-myinfo:button:update') }}
</el-button>
</el-form-item>
<!-- 电话 -->
<el-form-item
:label="$t('trials:trials-myinfo:form:phone')"
style="margin-bottom: 5px"
prop="Phone"
>
<el-form-item :label="$t('trials:trials-myinfo:form:phone')" style="margin-bottom: 5px" prop="Phone">
<span>{{ user.Phone }}</span>
</el-form-item>
<el-form-item label="" style="position: relative" prop="Phone">
<el-input
v-model="userForm.Phone"
:placeholder="$t('trials:trials-myinfo:form:phone')"
/>
<el-input v-model="userForm.Phone" :placeholder="$t('trials:trials-myinfo:form:phone')" />
<!-- 修改 -->
<el-button
:disabled="!userForm.Phone"
class="saveBtn"
type="primary"
size="small"
@click="setNewPhone"
>
<el-button :disabled="!userForm.Phone" class="saveBtn" type="primary" size="small" @click="setNewPhone">
{{ $t('trials:trials-myinfo:button:update') }}
</el-button>
</el-form-item>
<!-- 邮箱 -->
<el-form-item
:label="$t('trials:trials-myinfo:form:email')"
style="margin-bottom: 5px"
prop="EMail"
>
<el-form-item :label="$t('trials:trials-myinfo:form:email')" style="margin-bottom: 5px" prop="EMail">
<span>{{ user.EMail }}</span>
</el-form-item>
<el-form-item
label=""
style="margin-bottom: 10px; position: relative"
prop="EMail"
v-if="IsCanConnectInternet"
>
<el-input
v-model="userForm.EMail"
@input="handleEmailChange"
:placeholder="$t('trials:trials-myinfo:form:email')"
/>
<el-button
class="sendCode"
:disabled="sendDisabled"
size="mini"
@click="sendVerificationCode"
>{{ sendTitle }}</el-button
>
<el-form-item label="" style="margin-bottom: 10px; position: relative" prop="EMail" v-if="IsCanConnectInternet">
<el-input v-model="userForm.EMail" @input="handleEmailChange"
:placeholder="$t('trials:trials-myinfo:form:email')" />
</el-form-item>
<el-form-item
label=""
style="position: relative"
prop="VerificationCode"
v-if="IsCanConnectInternet"
>
<el-input
v-model="userForm.VerificationCode"
:placeholder="$t('trials:researchForm:form:verifyCode')"
/>
<el-form-item label="" style="position: relative" prop="VerificationCode" v-if="IsCanConnectInternet">
<div style="display: flex;justify-content: space-between;width: 100%;">
<el-input v-model="userForm.VerificationCode" :placeholder="$t('trials:researchForm:form:verifyCode')" />
<el-button class="codeBtn" :disabled="sendDisabled" size="mini" @click="sendVerificationCode">{{
sendTitle
}}</el-button>
</div>
<!-- 修改 -->
<el-button
:disabled="!userForm.EMail || !userForm.VerificationCode"
class="saveBtn"
type="primary"
size="small"
@click="setNewEmail"
>
<el-button :disabled="!userForm.EMail || !userForm.VerificationCode" class="saveBtn" type="primary"
size="small" @click="setNewEmail">
{{ $t('trials:trials-myinfo:button:update') }}
</el-button>
</el-form-item>
<el-form-item
:label="$t('trials:trials-myinfo:form:toggleRole')"
style="position: relative"
prop="VerificationCode"
v-if="hasRole"
>
<el-form-item :label="$t('trials:trials-myinfo:form:toggleRole')" style="position: relative"
prop="VerificationCode" v-if="hasRole">
<el-radio-group v-model="userRoleId" class="roles" v-if="hasRole">
<el-radio
v-for="item in roles"
:key="item.Id"
:label="item.Id"
:disabled="item.IsUserRoleDisabled"
style="margin-bottom: 10px"
>
<el-radio v-for="item in roles" :key="item.Id" :label="item.Id" :disabled="item.IsUserRoleDisabled"
style="margin-bottom: 10px">
{{ item.UserTypeShortName }}
</el-radio>
</el-radio-group>
<!-- 修改 -->
<el-button
:disabled="!userRoleId || saveDisabled"
class="saveBtn"
:loading="toggleRoleLoading"
type="primary"
size="small"
@click="toggleRole"
>
<el-button :disabled="!userRoleId || saveDisabled" class="saveBtn" :loading="toggleRoleLoading" type="primary"
size="small" @click="toggleRole">
{{ $t('trials:trials-myinfo:button:toggleRole') }}
</el-button>
</el-form-item>
@ -188,11 +115,11 @@ export default {
callback(
lang === 'zh'
? new Error(
'1用户名字符长度最小为4个字符最大为16个字符只可使用字母、数字、下划线'
)
'1用户名字符长度最小为4个字符最大为16个字符只可使用字母、数字、下划线'
)
: new Error(
'the username must have:1) At least 4 characters;2) At most 16 characters;3)Only letters, numbers, and underscores are allowed.'
)
'the username must have:1) At least 4 characters;2) At most 16 characters;3)Only letters, numbers, and underscores are allowed.'
)
)
} else {
callback()
@ -344,9 +271,26 @@ export default {
}
</script>
<style lang="scss" scoped>
.codeBtn {
color: #409EFF;
border-color: #409EFF;
margin-left: 10px;
}
.codeBtn.is-disabled,
.codeBtn.is-disabled:focus,
.codeBtn.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
.el-radio-group {
margin-top: 12px;
}
.el-radio {
width: 60px;
}