Эх сурвалжийг харах

'feat:侧边栏注册模块重构'

yangfeng 2 жил өмнө
parent
commit
0c484419ff

+ 150 - 6
src/web/staticres/tags/css/login-card.css

@@ -1,14 +1,21 @@
 [v-cloak] {
     display: none!important;
 }
+
+.is-stop {
+  cursor: not-allowed!important;
+}
+
 .login-card{
   border: 1px solid #2ABED1;
   border-radius: 4px;
 }
+
 .login-card-header {
     padding: 10px 20px;
     background: linear-gradient(90deg, #10D3D3 1.56%, #2CB7CA 57.59%, #0CA1F5 100%);
 }
+
 .login-card-header .h-title {
     color: #fff;
     font-size: 18px;
@@ -19,34 +26,171 @@
   padding: 24px 20px 24px;
 }
 
-.login-card-main .login-dig-input-box {
+.login-card-main .login-card-item {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   width: 100%;
-  border-radius: 4px;
+  height: 44px;
+  padding: 0 16px;
   margin-bottom: 20px;
   margin-top: 0;
+  color: #1D1D1D;
+  font-size: 14px;
+  background: #F3F6F7;
+  box-sizing: border-box;
+  border: 1px solid #F3F6F7;
+  border-radius: 4px;
+}
+
+.login-card-main .login-card-item.is-focus {
+  border-color: #2CB7CA;
+}
+
+.login-card-main .login-card-item.is-error {
+  border-color: #FF3A20;
+  margin-bottom: 20px;
+}
+
+.login-card-main .login-card-item.is-error::after {
+  content: attr(data-error);
+  position: absolute;
+  bottom: -20px;
+  left: 8px;
+  color: #FF3A20;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@keyframes resetBg {
+  to {
+    background: transparent;
+  }
+}
+
+.login-card-main .login-card-item input {
+  width: 100%;
+  height: 90%;
+  margin-left: 8px;
+  background: inherit;
+  color: #1D1D1D;
+  font-size: inherit;
+  border: none;
+  outline: none;
+  animation: resetBg .1s forwards;
+  box-shadow: none !important;
+  padding: 0px;
+}
+
+.login-card-item input::placeholder,
+.login-card-item input::-webkit-input-placeholder
+ {
+  color: #999!important;
+}
+
+.login-card-item input::-moz-placeholder,
+.login-card-main .login-card-item input:-ms-input-placeholder
+ {
+  color: #999 !important;
+}
+
+.login-card-main .login-card-item input:focus {
+  border: none;
+}
+
+.login-card-main .login-card-item .after-input-box {
+  position: absolute;
+  cursor: pointer;
+  height: 100%;
+  top: 0;
+  right: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #999999;
 }
 
-.login-card-main .login-dig-submit-button{
+.login-card-main .login-card-item .after-input-box .verify-img {
+  border-radius: 20px;
+  margin-right: -14px;
+}
+
+/* .login-dig-footer-box {
+  font-size: 12px;
+  line-height: 20px;
+  color: #999999;
+}
+
+.login-dig-footer-box p {
+  margin-top: 32px;
+} */
+
+.login-card-main .login-card-button {
   width: 100%;
+  height: 44px;
+  margin-top: 12px;
   background: #2ABED1;
   border-radius: 4px;
+  font-size: 16px;
+  line-height: 24px;
+  color: #fff;
+  outline: none;
+  border: 1px solid #2CB7CA;
+  cursor: pointer;
+}
+
+.login-card-main .login-card-button:disabled {
+  cursor: not-allowed;
 }
+
 .login-card-main .reg-tips{
   font-size: 12px;
   line-height: 18px;
   color: #686868;
   text-align: justify;
 }
+
 .login-card-main .l-get-sms{
   color: #2ABED1;
 }
+
 .login-card-main .l-get-sms.is-stop{
   color: #999999;
 }
+
 .login-card-main  .service-name {
   color: #686868;
 }
 
-.login-dig-input-box.is-error::after{
-  bottom: -20px;
-}
+.login-dig-icon-phone {
+  background: url("/images/phonelogin/icon-phone.png");
+  background-size: 18px 18px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.login-dig-icon-email {
+  background: url("/images/phonelogin/icon-email.png");
+  background-size: 18px 18px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.login-dig-icon-pass {
+  background: url("/images/phonelogin/icon-pass.png");
+  background-size: 18px 18px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.login-dig-icon-guard {
+  background: url("/images/phonelogin/icon-guard.png");
+  background-size: 18px 18px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}

+ 140 - 9
src/web/staticres/tags/js/login-card.js

@@ -1,15 +1,146 @@
 var loginCard = new Vue({
-    el: '#login-card-container',
-    delimiters: ['${', '}'],
-    data: function () {
-        return {}
+  el: '#login-card-container',
+  delimiters: ['${', '}'],
+  data: function () {
+    return {
+      phoneVal: '',
+      captchaVal: '',
+      codeVal: '',
+      focus: {
+        phone: false,
+        captcha: false,
+        code: false
+      },
+      error: {
+        phone: false,
+        captcha: false,
+        code: false
+      },
+      imgCaptcha: '/front/landpage/captcha',
+      smsText: '获取验证码',
+      phoneErrorText: '手机号码输入错误',
+      captchaErrorText: '图形验证码输入错误',
+      codeErrorText: '短信验证码输入错误',
+      countdown: 0,
+      beforeTime: -1,
+      sendCodeStatus: true
+    }
+  },
+  computed: {
+    stopClickCode: function () {
+      var phonePass = !this.error.phone && this.phoneVal && this.phoneVal.length === 11
+      var captchaPass = !this.error.captcha && this.captchaVal && this.captchaVal.length === 4
+      return !(phonePass && captchaPass)
+    },
+    submitStatus: function () {
+      var phonePass = !this.error.phone && this.phoneVal && this.phoneVal.length === 11
+      var captchaPass = !this.error.captcha && this.captchaVal && this.captchaVal.length === 4
+      var codePass = !this.error.code && this.codeVal && this.codeVal.length === 6
+      return phonePass && captchaPass && codePass
+    }
+  },
+  created: function () {
+    this.checkLogin()
+  },
+  methods: {
+    checkLogin: function () {
+      console.log('checkLogin')
+    },
+    onFocus: function (item) {
+      this.focus[item] = true
+      this.error[item] = false
+    },
+    onBlur: function (item) {
+      this.focus[item] = false
+      this.error[item] = !this.ruleFormItem(item)
+    },
+    onPhoneInput: function (val) {
+      if (val.length >= 11) {
+        this.ruleFormItem('phone')
+        this.error.phone = !this.ruleFormItem('phone')
+      }
+    },
+    changeCaptcha: function() {
+      this.imgCaptcha = '/front/landpage/captcha?v=' + Date.now()
     },
-    created: function () {
-        this.checkLogin()
+    ruleFormItem (type) {
+      if (type === 'phone') {
+        var phoneReg = /^[1][3-9][0-9]{9}$/.test(this.phoneVal)
+        var createPhoneReg = /^[1][0][0][0-9]{8}$/.test(this.phoneVal)
+        var checkStatus = phoneReg || createPhoneReg
+        return this.phoneVal.length ? checkStatus : true
+      } else if (type === 'captcha') {
+        var checkStatus = this.captchaVal.length === 4
+        return this.captchaVal.length ? checkStatus : true
+      } else if (type === 'code') {
+        var checkStatus = this.codeVal.length === 6
+        return this.codeVal.length ? checkStatus : true
+      }
+    },
+    ajaxSendCode: function (type, code) {
+      var _this = this
+      $.post("/phone/login",{
+        reqType: type,
+        register: 'true',
+        phone: _this.phoneVal,
+        code: code
+      },function(r){
+        if (r.status==-1) {
+          _this.error.phone = true
+          _this.phoneErrorText = '手机号格式错误'
+        } else if (r.status== -2){
+          //图形验证码错误
+          _this.error.captcha = true
+          _this.captchaErrorText = '图形验证码输入错误'
+          _this.changeCaptcha()
+        } else if (r.status==-3){
+          _this.error.phone = true
+          _this.phoneErrorText = '手机号已被注册'
+          _this.changeCaptcha()
+        } else {
+          sessionStorage.setItem('login-verify-start-time', new Date().getTime())
+          _this.startTimeDown()
+        }
+      });
+    },
+    getCodeFn: function () {
+      if (this.stopClickCode) return
+      this.ajaxSendCode('sendIdentCode', this.captchaVal)
+    },
+    startTimeDown: function () {
+      this.sendCodeStatus = false
+      this.countdown = 60
+      this.beforeTime = new Date().getTime()
+      var _this = this
+      var timeInt = setInterval(function() {
+        if (_this.beforeTime !== -1) {
+          var nowCount = 60 - Math.ceil((new Date().getTime() - _this.beforeTime) / 1000)
+          if (nowCount < _this.countdown) {
+            _this.countdown = nowCount
+          }
+        }
+        _this.countdown--
+        if (_this.countdown <= 0) {
+          _this.sendCodeStatus = true
+          _this.beforeTime = -1
+          window.clearInterval(timeInt)
+        }
+      }, 1000)
     },
-    methods: {
-        checkLogin: function () {
-            console.log('checkLogin')
+    onSubmitReg: function () {
+      var _this = this
+      $.post("/phone/login",{
+        reqType:"identCodeLogin",
+        identCode: _this.codeVal, 
+        source:'' 
+      },function(r){
+        if(r.status==1){
+          logic(r.userInfo, mynum);
+        }else if(r.status==-1){
+          _this.error.code = true
+          _this.codeErrorText = '短信验证码输入错误'
         }
+      });
     }
+  }
 })

+ 60 - 32
src/web/templates/pc/tags/template/login-card.html

@@ -1,37 +1,65 @@
 <link href='{{Msg "seo" "cdn"}}/tags/css/login-card.css?v={{Msg "seo" "version"}}' rel="stylesheet" />
 <section class="login-card-container" v-cloak id="login-card-container">
-    <section class="login-card">
-        <header class="login-card-header">
-            <span class="h-title">注册</span>
-        </header>
-        <main class="login-card-main">
-          <div class="register-form-box">
-            <div class="login-dig-input-box" data-error="手机号码输入错误">
-                <i class="login-dig-icon-phone"></i>
-                <input autocomplete="off" name="register_phone" type="tel" placeholder="输入手机号码" maxlength="11">
-            </div>
-            <div class="login-dig-input-box" data-error="图形验证码输入错误">
-                <i class="login-dig-icon-guard"></i>
-                <input autocomplete="off" name="register_code" type="text" placeholder="输入图形验证码" maxlength="4">
-                <div class="after-input-box">
-                    <img class="verify-img" src="/front/landpage/captcha" alt="verify">
-                </div>
-            </div>
-            <div class="login-dig-input-box" data-error="短信验证码输入错误">
-                <i class="login-dig-icon-guard"></i>
-                <input autocomplete="off" name="register_sms" type="text" placeholder="输入短信验证码" maxlength="6">
-                <div class="after-input-box">
-                    <span data-name="register_get_sms" class="l-get-sms is-stop">获取验证码</span>
-                </div>
-            </div>
-            <div class="reg-tips">
-              
-              未注册用户验证后自动注册,注册即代表同意 <a class="service-name" href="/front/staticPage/permission_rules.html" target="_blank">《剑鱼标讯用户使用许可协议》</a><a class="service-name" href="/front/staticPage/privacy_rules.html" target="_blank">《剑鱼标讯隐私政策》</a>
-            </div>
-            <button class="login-dig-submit-button" name="register_submit_phone" disabled="true">立即体验</button>
-          </div>
-        </main>
-    </section>
+  <section class="login-card">
+    <header class="login-card-header">
+      <span class="h-title">注册</span>
+    </header>
+    <main class="login-card-main">
+      <div class="login-card-item" :class="{'is-focus': focus.phone, 'is-error': error.phone}" :data-error="phoneErrorText">
+        <i class="login-dig-icon-phone"></i>
+        <input
+          autocomplete="off"
+          v-model="phoneVal"
+          name="register_phone"
+          type="tel"
+          placeholder="输入手机号码"
+          maxlength="11"
+          @focus="onFocus('phone')"
+          @blur="onBlur('phone')"
+          @input="onPhoneInput"
+        >
+      </div>
+      <div class="login-card-item" :class="{'is-focus': focus.captcha, 'is-error': error.captcha}" :data-error="captchaErrorText">
+        <i class="login-dig-icon-guard"></i>
+        <input
+          autocomplete="off"
+          name="register_code"
+          type="text"
+          v-model="captchaVal"
+          placeholder="输入图形验证码"
+          maxlength="4"
+          @focus="onFocus('captcha')"
+          @blur="onBlur('captcha')"
+        >
+        <div class="after-input-box">
+          <img class="verify-img" :src="imgCaptcha" @click="changeCaptcha" alt="verify">
+        </div>
+      </div>
+      <div class="login-card-item" :class="{'is-focus': focus.code, 'is-error': error.code}" :data-error="codeErrorText">
+        <i class="login-dig-icon-guard"></i>
+        <input
+          autocomplete="off"
+          name="register_sms"
+          ype="text"
+          v-model="codeVal"
+          placeholder="输入短信验证码"
+          maxlength="6"
+          @focus="onFocus('code')"
+          @blur="onBlur('code')"
+        >
+        <div class="after-input-box">
+          <span v-show="sendCodeStatus" data-name="register_get_sms" class="l-get-sms" :class="{'is-stop': stopClickCode}" @click="getCodeFn">获取验证码</span>
+          <span v-show="!sendCodeStatus" class="l-get-sms is-stop">重新获取${countdown}s</span>
+        </div>
+      </div>
+      <div class="reg-tips">
+        未注册用户验证后自动注册,注册即代表同意 <a class="service-name" href="/front/staticPage/permission_rules.html"
+          target="_blank">《剑鱼标讯用户使用许可协议》</a><a class="service-name" href="/front/staticPage/privacy_rules.html"
+          target="_blank">《剑鱼标讯隐私政策》</a>
+      </div>
+      <button class="login-card-button" name="register_submit_phone" :class="{'is-stop': !submitStatus}" @click="onSubmitReg">立即体验</button>
+    </main>
+  </section>
 </section>
 <!-- 添加defer让js延迟执行(脚本将在页面完成解析时执行)。因为此时可能还没有加载Vue以及element-ui -->
 <script defer src='{{Msg "seo" "cdn"}}/tags/js/login-card.js?v={{Msg "seo" "version"}}'></script>