倒计时修改

zhangmeng
Showing 2 changed files with 67 additions and 37 deletions
src/viewsPc/match/components/affix-invitation.vue
src/viewsPc/register/components/utype3.vue
--- a/src/viewsPc/match/components/affix-invitation.vue
View file @eb62b28
+++ b/src/viewsPc/match/components/affix-invitation.vue
View file @eb62b28
--- a/src/viewsPc/register/components/utype3.vue
View file @eb62b28
+++ b/src/viewsPc/register/components/utype3.vue
View file @eb62b28
 <template>
-  <el-dialog v-model="show" :title="language==0?'注册':'Login'"  close-icon="CircleClose"
+  <el-dialog v-model="show" :append-to-body="true" :title="language==0?'注册':'Login'"
-            width="480" :append-to-body="true"  destroy-on-close @close="close" center>
+             center close-icon="CircleClose" destroy-on-close width="480" @close="close">
    <div>
-      <el-form class="d-form" size="large" :label-width="language==0?80:150" :label-position="language==0?'right':'top'" style="max-width: 500px;margin: auto">
+      <el-form :label-position="language==0?'right':'top'" :label-width="language==0?80:150" class="d-form" size="large"
-<!--        <div style="display: flex;gap: 20px;">-->
+               style="max-width: 500px;margin: auto">
-          <el-form-item :label="language==0?'姓':'Last Name'" required style="width: 100%;">
+        <!--        <div style="display: flex;gap: 20px;">-->
-            <el-input type="text" v-model="form.lastName" :placeholder="language==0?'请输入您的姓':'Please enter your last name'"/>
+        <el-form-item :label="language==0?'姓':'Last Name'" required style="width: 100%;">
-          </el-form-item>
+          <el-input v-model="form.lastName" :placeholder="language==0?'请输入您的姓':'Please enter your last name'"
-          <el-form-item :label="language==0?'名':'First Name'" required style="width: 100%;">
+                    type="text"/>
-            <el-input type="text" v-model="form.firstName" :placeholder="language==0?'请输入您的名':'Please enter your first name'"/>
+        </el-form-item>
-          </el-form-item>
+        <el-form-item :label="language==0?'名':'First Name'" required style="width: 100%;">
-<!--        </div>-->
+          <el-input v-model="form.firstName" :placeholder="language==0?'请输入您的名':'Please enter your first name'"
+                    type="text"/>
+        </el-form-item>
+        <!--        </div>-->
        <el-form-item :label="language==0?'邮箱':'E-mail'" required>
-          <el-input type="text" v-model="form.account" @change="resetCode" @blur="verifyCode"
+          <el-input v-model="form.account" type="text" @blur="verifyCode" @change="resetCode"
          />
-          <div class="tip" v-if="language==0">
+          <div v-if="language==0" class="tip">
            （请填写正确的邮箱信息，邮箱信息在注册完成后无法修改。
            该邮箱后续会作为您登录的账户，
            并接收报名审核结果、支付账单、签证邀请函等相关信息。）
          </div>
          <div v-else class="tip">
-            Please fill in the correct email, which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc.
+            Please fill in the correct email, which cannot be changed after the registration is completed. The email
+            will be used as your login account and to receive relevant information including results of registration
+            review, payment bills, visa invitation letters, etc.
          </div>
        </el-form-item>
        <el-form-item :label="language==0?'验证码':'Code'" required>
          <el-input v-model="form.code">
            <template #append>
-              <el-button type="primary" plain style="width: 110px" @click="sendsmsMsg">
+              <el-button class="codeBtn" plain style="width: 110px" type="primary" @click="sendsmsMsg">
                <count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false">
                  {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }}
                </count-down>
@@ -36,8 +41,8 @@
              </el-button>
            </template>
          </el-input>
-          <div class="vcodeBox" :style="isShow?'height:240px':'height:0'">
+          <div :style="isShow?'height:240px':'height:0'" class="vcodeBox">
-            <Vcode :show="isShow" :successText="successVcode" :failText="failVcode" :slider-text="sliderText"
+            <Vcode :failText="failVcode" :show="isShow" :slider-text="sliderText" :successText="successVcode"
                   type="inside" @success="codeSuccess"></Vcode>
          </div>
        </el-form-item>
@@ -48,22 +53,24 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'密码':'Password'" required>
-          <el-input type="password" show-password v-model="form.password"
+          <el-input v-model="form.password" :placeholder="language==0?'6-16位密码。区分大小写':''" show-password
-                    :placeholder="language==0?'6-16位密码。区分大小写':''"/>
+                    type="password"/>
        </el-form-item>
        <el-form-item :label="language==0?'确认密码':'Confirm Password'" required>
-          <el-input type="password" show-password v-model="form.password2" @blur="vconfirmPassword"
+          <el-input v-model="form.password2" :placeholder="language==0?'再次输入密码':''" show-password type="password"
-                    :placeholder="language==0?'再次输入密码':''"/>
+                    @blur="vconfirmPassword"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer text-center">
-        <a class="btn-black w200px" @click="register">{{language==0?'登录':'Confirm'}}</a>
+        <a class="btn-black w200px" @click="register">{{ language == 0 ? '登录' : 'Confirm' }}</a>
-        <div class="text-primary underline mt20 pointer" @click="goLogin">{{language==0?'已有账号去登录':'Already have an account? Login'}}</div>
+        <div class="text-primary underline mt20 pointer" @click="goLogin">
+          {{ language == 0 ? '已有账号去登录' : 'Already have an account? Login' }}
+        </div>
      </div>
    </template>
  </el-dialog>
@@ -92,10 +99,21 @@ const data = reactive({
  failVcode: '验证失败，请重试',
  successVcode: '验证通过！',
  sliderText: '拖动滑块完成拼图',
-  show:false,
+  show: false,
-  associationList:[]
+  associationList: []
 })
-const {isShow, isCodeTrue, counting, form, activeStep, failVcode, successVcode, sliderText,show,associationList} = toRefs(data)
+const {
+  isShow,
+  isCodeTrue,
+  counting,
+  form,
+  activeStep,
+  failVcode,
+  successVcode,
+  sliderText,
+  show,
+  associationList
+} = toRefs(data)
 const emit = defineEmits(['submit'])
 onMounted(() => {
  if (language.value == 1) {
@@ -106,7 +124,7 @@ onMounted(() => {
  getAssociationList()
 })
 const getAssociationList = () => {
-  getAssociation().then(res=>{
+  getAssociation().then(res => {
    associationList.value = res.data
  })
 }
@@ -136,7 +154,7 @@ function sendsmsMsg() {
    return
  }
  if (counting.value) {
-    return
  } else {
    isShow.value = true
  }
@@ -157,17 +175,19 @@ function codeSuccess(msg) {
  getCaptchaSms({account: form.value.account}).then(res => {
    counting.value = true
    isCodeTrue.value = true
-    ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' :'Send success, please check your email')
+    ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' : 'Send success, please check your email')
  })
 }
 function resetCode() {
  isCodeTrue.value = false
 }
 function goLogin() {
  show.value = false
  useUserStore().setReLogin()
 }
 function register() {
  //游客注册
  if (!form.value.account) {
@@ -187,29 +207,39 @@ function register() {
    return
  }
  if (!form.value.password) {
-    ElMessage.warning(language.value == 0?'请输入密码':'Please enter password')
+    ElMessage.warning(language.value == 0 ? '请输入密码' : 'Please enter password')
    return
  }
  if (!form.value.password2) {
-    ElMessage.warning(language.value == 0?'请再次输入密码':'Please enter password')
+    ElMessage.warning(language.value == 0 ? '请再次输入密码' : 'Please enter password')
    return
  }
  delete form.value.password2
-  vistorRegister(form.value).then(res=>{
+  vistorRegister(form.value).then(res => {
    setToken(res.data.token)
    emit('submitForm')
  })
 }
 const vconfirmPassword = () => {
  if (form.value.password !== form.value.password2) {
-    ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' :'The two passwords entered are inconsistent')
+    ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' : 'The two passwords entered are inconsistent')
  }
 }
 function close() {
  show.value = false
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.tip{line-height: 1.6}
+.tip {
+  line-height: 1.6
+}
+.codeBtn {
+  background-color: #0540EC !important;
+  color: #fff !important;
+}
 </style>