【验证码优化】等待时按钮需要置为灰色

src/components/MFA/index.vue

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

src/views/forgetpassword/index.vue

@@ -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;
 }

src/views/research/login.vue

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

src/views/trials/trials-myinfo/account.vue

@@ -5,134 +5,61 @@
         <!-- 账号信息 -->
         {{ $t('trials:trials-myinfo:title:accountInfo') }}
       </div>
-      <el-form
+      <el-form label-position="right" label-width="100px" :rules="rule" :model="userForm" ref="userFormRef">
-        label-position="right"
-        label-width="100px"
-        :rules="rule"
-        :model="userForm"
-        ref="userFormRef"
-      >
         <!-- 用户名 -->
-        <el-form-item
+        <el-form-item :label="$t('trials:trials-myinfo:form:userName')" style="margin-bottom: 5px">
-          :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
+          <el-input v-model="userForm.UserName" :placeholder="$t('trials:trials-myinfo:form:userName')" />
-            v-model="userForm.UserName"
-            :placeholder="$t('trials:trials-myinfo:form:userName')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.UserName" class="saveBtn" type="primary" size="small" @click="setNewUserName">
-            :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
+        <el-form-item :label="$t('trials:trials-myinfo:form:phone')" style="margin-bottom: 5px" prop="Phone">
-          :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
+          <el-input v-model="userForm.Phone" :placeholder="$t('trials:trials-myinfo:form:phone')" />
-            v-model="userForm.Phone"
-            :placeholder="$t('trials:trials-myinfo:form:phone')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.Phone" class="saveBtn" type="primary" size="small" @click="setNewPhone">
-            :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
+        <el-form-item :label="$t('trials:trials-myinfo:form:email')" style="margin-bottom: 5px" prop="EMail">
-          :label="$t('trials:trials-myinfo:form:email')"
-          style="margin-bottom: 5px"
-          prop="EMail"
-        >
           <span>{{ user.EMail }}</span>
         </el-form-item>
-        <el-form-item
+        <el-form-item label="" style="margin-bottom: 10px; position: relative" prop="EMail" v-if="IsCanConnectInternet">
-          label=""
+          <el-input v-model="userForm.EMail" @input="handleEmailChange"
-          style="margin-bottom: 10px; position: relative"
+            :placeholder="$t('trials:trials-myinfo:form:email')" />
-          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>
-        <el-form-item
+        <el-form-item label="" style="position: relative" prop="VerificationCode" v-if="IsCanConnectInternet">
-          label=""
+          <div style="display: flex;justify-content: space-between;width: 100%;">
-          style="position: relative"
+            <el-input v-model="userForm.VerificationCode" :placeholder="$t('trials:researchForm:form:verifyCode')" />
-          prop="VerificationCode"
+            <el-button class="codeBtn" :disabled="sendDisabled" size="mini" @click="sendVerificationCode">{{
-          v-if="IsCanConnectInternet"
+              sendTitle
-        >
+            }}</el-button>
-          <el-input
+          </div>
-            v-model="userForm.VerificationCode"
-            :placeholder="$t('trials:researchForm:form:verifyCode')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.EMail || !userForm.VerificationCode" class="saveBtn" type="primary"
-            :disabled="!userForm.EMail || !userForm.VerificationCode"
+            size="small" @click="setNewEmail">
-            class="saveBtn"
-            type="primary"
-            size="small"
-            @click="setNewEmail"
-          >
             {{ $t('trials:trials-myinfo:button:update') }}
           </el-button>
         </el-form-item>
-        <el-form-item
+        <el-form-item :label="$t('trials:trials-myinfo:form:toggleRole')" style="position: relative"
-          :label="$t('trials:trials-myinfo:form:toggleRole')"
+          prop="VerificationCode" v-if="hasRole">
-          style="position: relative"
-          prop="VerificationCode"
-          v-if="hasRole"
-        >
           <el-radio-group v-model="userRoleId" class="roles" v-if="hasRole">
-            <el-radio
+            <el-radio v-for="item in roles" :key="item.Id" :label="item.Id" :disabled="item.IsUserRoleDisabled"
-              v-for="item in roles"
+              style="margin-bottom: 10px">
-              :key="item.Id"
-              :label="item.Id"
-              :disabled="item.IsUserRoleDisabled"
-              style="margin-bottom: 10px"
-            >
               {{ item.UserTypeShortName }}
             </el-radio>
           </el-radio-group>
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userRoleId || saveDisabled" class="saveBtn" :loading="toggleRoleLoading" type="primary"
-            :disabled="!userRoleId || saveDisabled"
+            size="small" @click="toggleRole">
-            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;
 }