system-phone 3.1.91 → 3.1.93

package/src/bootstrap/less/wells.less

@@ -1,29 +1,29 @@
-//
-// Wells
-// --------------------------------------------------
-
-
-// Base class
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: @well-bg;
-  border: 1px solid @well-border;
-  border-radius: @border-radius-base;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-  blockquote {
-    border-color: #ddd;
-    border-color: rgba(0,0,0,.15);
-  }
-}
-
-// Sizes
-.well-lg {
-  padding: 24px;
-  border-radius: @border-radius-large;
-}
-.well-sm {
-  padding: 9px;
-  border-radius: @border-radius-small;
-}
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: @well-bg;
+  border: 1px solid @well-border;
+  border-radius: @border-radius-base;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}
+
+// Sizes
+.well-lg {
+  padding: 24px;
+  border-radius: @border-radius-large;
+}
+.well-sm {
+  padding: 9px;
+  border-radius: @border-radius-small;
+}

package/src/components/EncryptUtil.js

@@ -1,53 +1,53 @@
-import AesEncryptJS from "crypto-js"
-import RsaEncryptJS from 'jsencrypt'
-
-export default {
-  /**
-   * AES加密
-   * @param word
-   * @returns {*}
-   */
-  AESEncrypt(word, encryKey){
-    var key = AesEncryptJS.enc.Utf8.parse(encryKey);
-    var srcs = AesEncryptJS.enc.Utf8.parse(word);
-    var encrypted = AesEncryptJS.AES.encrypt(srcs, key, {mode:AesEncryptJS.mode.ECB,padding: AesEncryptJS.pad.Pkcs7});
-    return encrypted.toString();
-  },
-  /**
-   * AES解密
-   * @param word
-   * @returns {*}
-   */
-  AESDecrypt(word, encryKey){
-    var key = AesEncryptJS.enc.Utf8.parse(encryKey);
-    var decrypt = AesEncryptJS.AES.decrypt(word, key, {mode:AesEncryptJS.mode.ECB,padding: AesEncryptJS.pad.Pkcs7});
-    var ret = AesEncryptJS.enc.Utf8.stringify(decrypt).toString();
-    try{
-      return JSON.parse(ret) ;
-    }catch (e){
-      return ret
-    }
-  },
-  /**
-   * RSA加密
-   * @param word
-   * @returns {*}
-   */
-  RSAEncrypt(word){
-    let encrypt = new RsaEncryptJS();
-    encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB');
-    let resdata = encrypt.encrypt(word);
-    return resdata.toString();
-  },
-  /**
-   * RSA解密
-   * @param word
-   * @returns {*}
-   */
-  RSADecrypt(word){
-    let encrypt = new RsaEncryptJS();
-    encrypt.setPrivateKey('MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAKo++i9J9dzAFtbxwowKDCo2mxi7MXxE8A8VvssaydWjjgmEz/HHMPLOhi1182a1si4pWL0/MizKnquD7T2Bu4jpQbAFnkNYEMEyq/kw904Xl0JCQHYFuvnI99RE8Q3KlTP6kEUGDjV34EL6vBGJcQvArLtj1xoP8y0nIfJ2Pw5TAgMBAAECgYAGGB8IllMwxceLhjf6n1l0IWRH7FuHIUieoZ6k0p6rASHSgWiYNRMxfecbtX8zDAoG0QAWNi7rn40ygpR5gS1fWDAKhmnhKgQIT6wW0VmD4hraaeyP78iy8BLhlvblri2nCPIhDH5+l96v7D47ZZi3ZSOzcj89s1eS/k7/N4peEQJBAPEtGGJY+lBoCxQMhGyzuzDmgcS1Un1ZE2pt+XNCVl2b+T8fxWJH3tRRR8wOY5uvtPiK1HM/IjT0T5qwQeH8Yk0CQQC0tcv3d/bDb7bOe9QzUFDQkUSpTdPWAgMX2OVPxjdq3Sls9oA5+fGNYEy0OgyqTjde0b4iRzlD1O0OhLqPSUMfAkEAh5FIvqezdRU2/PsYSR4yoAdCdLdT+h/jGRVefhqQ/6eYUJJkWp15tTFHQX3pIe9/s6IeT/XyHYAjaxmevxAmlQJBAKSdhvQjf9KAjZKDEsa7vyJ/coCXuQUWSCMNHbcR5aGfXgE4e45UtUoIE1eKGcd6AM6LWhx3rR6xdFDpb9je8BkCQB0SpevGfOQkMk5i8xkEt9eeYP0fi8nv6eOUcK96EXbzs4jV2SAoQJ9oJegPtPROHbhIvVUmNQTbuP10Yjg59+8=');
-    let resdata = encrypt.decrypt(word);
-    return resdata.toString();
-  },
-}
+import AesEncryptJS from "crypto-js"
+import RsaEncryptJS from 'jsencrypt'
+
+export default {
+  /**
+   * AES加密
+   * @param word
+   * @returns {*}
+   */
+  AESEncrypt(word, encryKey){
+    var key = AesEncryptJS.enc.Utf8.parse(encryKey);
+    var srcs = AesEncryptJS.enc.Utf8.parse(word);
+    var encrypted = AesEncryptJS.AES.encrypt(srcs, key, {mode:AesEncryptJS.mode.ECB,padding: AesEncryptJS.pad.Pkcs7});
+    return encrypted.toString();
+  },
+  /**
+   * AES解密
+   * @param word
+   * @returns {*}
+   */
+  AESDecrypt(word, encryKey){
+    var key = AesEncryptJS.enc.Utf8.parse(encryKey);
+    var decrypt = AesEncryptJS.AES.decrypt(word, key, {mode:AesEncryptJS.mode.ECB,padding: AesEncryptJS.pad.Pkcs7});
+    var ret = AesEncryptJS.enc.Utf8.stringify(decrypt).toString();
+    try{
+      return JSON.parse(ret) ;
+    }catch (e){
+      return ret
+    }
+  },
+  /**
+   * RSA加密
+   * @param word
+   * @returns {*}
+   */
+  RSAEncrypt(word){
+    let encrypt = new RsaEncryptJS();
+    encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB');
+    let resdata = encrypt.encrypt(word);
+    return resdata.toString();
+  },
+  /**
+   * RSA解密
+   * @param word
+   * @returns {*}
+   */
+  RSADecrypt(word){
+    let encrypt = new RsaEncryptJS();
+    encrypt.setPrivateKey('MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAKo++i9J9dzAFtbxwowKDCo2mxi7MXxE8A8VvssaydWjjgmEz/HHMPLOhi1182a1si4pWL0/MizKnquD7T2Bu4jpQbAFnkNYEMEyq/kw904Xl0JCQHYFuvnI99RE8Q3KlTP6kEUGDjV34EL6vBGJcQvArLtj1xoP8y0nIfJ2Pw5TAgMBAAECgYAGGB8IllMwxceLhjf6n1l0IWRH7FuHIUieoZ6k0p6rASHSgWiYNRMxfecbtX8zDAoG0QAWNi7rn40ygpR5gS1fWDAKhmnhKgQIT6wW0VmD4hraaeyP78iy8BLhlvblri2nCPIhDH5+l96v7D47ZZi3ZSOzcj89s1eS/k7/N4peEQJBAPEtGGJY+lBoCxQMhGyzuzDmgcS1Un1ZE2pt+XNCVl2b+T8fxWJH3tRRR8wOY5uvtPiK1HM/IjT0T5qwQeH8Yk0CQQC0tcv3d/bDb7bOe9QzUFDQkUSpTdPWAgMX2OVPxjdq3Sls9oA5+fGNYEy0OgyqTjde0b4iRzlD1O0OhLqPSUMfAkEAh5FIvqezdRU2/PsYSR4yoAdCdLdT+h/jGRVefhqQ/6eYUJJkWp15tTFHQX3pIe9/s6IeT/XyHYAjaxmevxAmlQJBAKSdhvQjf9KAjZKDEsa7vyJ/coCXuQUWSCMNHbcR5aGfXgE4e45UtUoIE1eKGcd6AM6LWhx3rR6xdFDpb9je8BkCQB0SpevGfOQkMk5i8xkEt9eeYP0fi8nv6eOUcK96EXbzs4jV2SAoQJ9oJegPtPROHbhIvVUmNQTbuP10Yjg59+8=');
+    let resdata = encrypt.decrypt(word);
+    return resdata.toString();
+  },
+}

package/src/components/LoginApp.vue

@@ -46,6 +46,48 @@
       <footer slot="modal-footer" class="modal-footer">
       </footer>
     </modal>
+    <!-- 短信验证码弹窗 -->
+    <modal :show.sync="smsModalShow" backdrop="true">
+      <div slot="modal-header"></div>
+      <article slot="modal-body" class="sms-modal-body">
+        <div class="sms-wrap">
+          <div class="sms-top">
+            <div class="sms-top-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="4" width="20" height="16" rx="3"/>
+                <path d="M7 8h4M13 8h4M7 12h10M7 16h2M13 16h4"/>
+              </svg>
+            </div>
+          </div>
+          <div class="sms-ct">
+            <div class="sms-ct-label">短信验证码</div>
+            <div class="sms-ct-tip">{{ smsModalMessage }}</div>
+          </div>
+          <div class="sms-field">
+            <div class="sms-field-hint">请输入6位验证码</div>
+            <div class="sms-code-box">
+              <input
+                class="sms-code-ipt"
+                v-model="smsCode"
+                maxlength="6"
+                @keyup.enter="smsModalConfirm"
+                autocomplete="off"
+                type="tel"
+              />
+            </div>
+            <div class="sms-extra" :class="{ 'expiry-warn': smsCountdown <= 30 }">
+              <template v-if="smsCountdown > 0">剩余 {{ smsCountdown }}s</template>
+              <template v-else>已过期</template>
+            </div>
+          </div>
+          <div class="sms-actions">
+            <button class="sms-act-ok" @click="smsModalConfirm">确定</button>
+            <button class="sms-act-no" @click="smsModalCancel">取消</button>
+          </div>
+        </div>
+      </article>
+      <div slot="modal-footer"></div>
+    </modal>
   </div>
 </template>
 
@@ -125,7 +167,15 @@ export default {
       imageurl: require('../assets/miwen.png'),
       deviceIemi: '无法获取该设备码，请联系管理员',
       loginSafe: false,
-      margintop: document.documentElement.clientHeight * 0.1
+      margintop: document.documentElement.clientHeight * 0.1,
+      // 短信验证码相关
+      smsCode: '',
+      smsCountdown: 0,
+      smsCountdownTimer: null,
+      smsModalShow: false,
+      smsModalMessage: '',
+      // 标记是否处于短信验证流程
+      smsLoginFlag: false
     }
   },
 
@@ -154,6 +204,40 @@ export default {
       this.modifyPassword = false
       this.password = val
     },
+    startSmsCountdown () {
+      if (this.smsCountdownTimer) {
+        clearInterval(this.smsCountdownTimer)
+      }
+      this.smsCountdownTimer = setInterval(() => {
+        if (this.smsCountdown > 0) {
+          this.smsCountdown--
+        } else {
+          clearInterval(this.smsCountdownTimer)
+        }
+      }, 1000)
+    },
+    stopSmsCountdown () {
+      if (this.smsCountdownTimer) {
+        clearInterval(this.smsCountdownTimer)
+        this.smsCountdownTimer = null
+      }
+    },
+    smsModalConfirm () {
+      if (this.smsCode === '') {
+        this.$showMessage('请输入短信验证码')
+        return
+      }
+      this.smsLoginFlag = true
+      // 调用 confirm 方法完成 Step2
+      this.confirm()
+    },
+    smsModalCancel () {
+      this.smsModalShow = false
+      this.smsLoginFlag = false
+      this.stopSmsCountdown()
+      this.smsCode = ''
+      this.loaderShow = false
+    },
     // 对资源菜单进行排序
     sortFunctions (val) {
       this.sortArr(val)
@@ -240,9 +324,29 @@ export default {
       }else{
         try {
           let data = {name: this.ename, password: this.password}
+          // Step2: 如果有 smsLoginFlag 且有待提交的验证码，则一起发送
+          if (this.smsLoginFlag && this.smsCode) {
+            data.smsCode = this.smsCode
+          }
           data = '$' + cryptJS.RSAEncrypt(JSON.stringify(data))
           const getLogin = await Vue.resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/getLogin`, data, {resolveMsg: null, rejectMsg: null})
+          // 检查是否需要短信验证码（Step1 返回时，smsLoginFlag 为 false）
+          if (getLogin.data.needsSmsCode && !this.smsLoginFlag) {
+            this.loaderShow = false
+            this.smsCountdown = getLogin.data.expireSeconds || 300
+            this.smsModalMessage = getLogin.data.states || ('短信验证码已发送至' + getLogin.data.maskedPhone + '，请输入')
+            this.startSmsCountdown()
+            this.smsLoginFlag = true
+            this.smsModalShow = true
+            return
+          }
           if (getLogin.data.states === '登录成功'){
+            // Step2 成功后清理状态
+            if (this.smsLoginFlag) {
+              this.smsCode = ''
+              this.smsLoginFlag = false
+              this.smsModalShow = false
+            }
             // 初始化 Vue.$login
             Vue.$login = Vue.prototype.$login = {
               jwt: getLogin.data.jwt,
@@ -385,6 +489,9 @@ export default {
       this.$goto('nav-bottom')
     },
   },
+  beforeDestroy () {
+    this.stopSmsCountdown()
+  },
   watch: {
     'config'(val) {
       Vue.config = val
@@ -773,3 +880,147 @@ export default {
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 }
 </style>
+<style>
+/* 短信验证码弹窗样式 */
+.sms-modal-body {
+  padding: 0 !important;
+}
+
+.sms-wrap {
+  background: #fff;
+  padding: 32px 28px 28px;
+  text-align: center;
+  min-width: 280px;
+}
+
+.sms-top {
+  margin-bottom: 16px;
+}
+
+.sms-top-icon {
+  width: 44px;
+  height: 44px;
+  margin: 0 auto;
+  background: #EFF6FF;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sms-top-icon svg {
+  width: 22px;
+  height: 22px;
+  color: #3B82F6;
+}
+
+.sms-ct {
+  margin-bottom: 20px;
+}
+
+.sms-ct-label {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 6px;
+}
+
+.sms-ct-tip {
+  font-size: 13px;
+  color: #888;
+  line-height: 1.5;
+}
+
+.sms-field {
+  margin-bottom: 20px;
+}
+
+.sms-field-hint {
+  font-size: 12px;
+  color: #aaa;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.sms-code-box {
+  position: relative;
+  margin-bottom: 6px;
+}
+
+.sms-code-ipt {
+  width: 100%;
+  height: 46px;
+  border: 1px solid #E5E7EB;
+  border-radius: 10px;
+  padding: 0 14px;
+  font-size: 18px;
+  color: #111;
+  background: #FAFAFA;
+  text-align: center;
+  letter-spacing: 6px;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.sms-code-ipt:focus {
+  border-color: #3B82F6;
+  background: #fff;
+}
+
+.sms-code-ipt::placeholder {
+  color: #CCC;
+  letter-spacing: 1px;
+  font-size: 14px;
+}
+
+.sms-extra {
+  font-size: 12px;
+  color: #AAA;
+  text-align: right;
+}
+
+.expiry-warn {
+  color: #EF4444;
+}
+
+.sms-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.sms-act-ok {
+  flex: 1;
+  height: 44px;
+  border: none;
+  border-radius: 10px;
+  background: #3B82F6;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.sms-act-ok:active {
+  background: #2563EB;
+}
+
+.sms-act-no {
+  flex: 1;
+  height: 44px;
+  border: 1px solid #E5E7EB;
+  border-radius: 10px;
+  background: #FAFAFA;
+  color: #666;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.sms-act-no:active {
+  background: #F3F4F6;
+}
+</style>
+