system-phone 3.1.91 → 3.1.92

package/src/components/AloneLoadParams.vue

@@ -1,26 +1,26 @@
-<template>
-  <div>
-     <p>获取参数中，请保持网络畅通</p>
-  </div>
-</template>
-
-<script>
-import co from 'co'
-import Vue from 'vue'
-import LoadParams from '../plugins/LoadParams'
-
-export default {
-  title: '加载参数',
-  props: {
-    componentName: {
-      type: String
-    }
-  },
-  ready () {
-    LoadParams.load().then(() => {
-      // this.$resetpost(Vue.dataUrl + 'rs/logic/androidLog', {data: {name: 'path', msg: '加载参数成功'}}, {resolveMsg: null, rejectMsg: null})
-      this.$goto(this.componentName)
-    })
-  }
-}
-</script>
+<template>
+  <div>
+     <p>获取参数中，请保持网络畅通</p>
+  </div>
+</template>
+
+<script>
+import co from 'co'
+import Vue from 'vue'
+import LoadParams from '../plugins/LoadParams'
+
+export default {
+  title: '加载参数',
+  props: {
+    componentName: {
+      type: String
+    }
+  },
+  ready () {
+    LoadParams.load().then(() => {
+      // this.$resetpost(Vue.dataUrl + 'rs/logic/androidLog', {data: {name: 'path', msg: '加载参数成功'}}, {resolveMsg: null, rejectMsg: null})
+      this.$goto(this.componentName)
+    })
+  }
+}
+</script>

package/src/components/LoadAppdata.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="loadingdata" :class="{'loaderror': show, 'loadsuccess': !show}">
-    <!-- <h2 style="margin: 0" v-if="show">{{msg}}</h2> -->
-    <h2 style="margin: 0" v-if="show">参数加载失败，请检查网络状态和服务状态...</h2>
-  </div>
-</template>
-
-<script>
-  export default {
-    title: '加载参数',
-    data () {
-      return {
-        msg: '',
-        show: false
-      }
-    },
-    ready () {
-      this.$appdata.load().then(() => {
-        this.$emit('ready')
-      })
-    }
-  }
-</script>
-<style media="screen">
-  .loadingdata {
-    position: fixed;
-    background: #fff;
-    opacity: 0.6;
-    top: 0;
-    width: 100%;
-  }
-  .loaderror {
-    opacity: 1;
-  }
-  .loadsuccess {
-    display: none;
-  }
-</style>
+<template>
+  <div class="loadingdata" :class="{'loaderror': show, 'loadsuccess': !show}">
+    <!-- <h2 style="margin: 0" v-if="show">{{msg}}</h2> -->
+    <h2 style="margin: 0" v-if="show">参数加载失败，请检查网络状态和服务状态...</h2>
+  </div>
+</template>
+
+<script>
+  export default {
+    title: '加载参数',
+    data () {
+      return {
+        msg: '',
+        show: false
+      }
+    },
+    ready () {
+      this.$appdata.load().then(() => {
+        this.$emit('ready')
+      })
+    }
+  }
+</script>
+<style media="screen">
+  .loadingdata {
+    position: fixed;
+    background: #fff;
+    opacity: 0.6;
+    top: 0;
+    width: 100%;
+  }
+  .loaderror {
+    opacity: 1;
+  }
+  .loadsuccess {
+    display: none;
+  }
+</style>

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>
+

package/src/components/NavBottom.vue

@@ -1,117 +1,117 @@
-<template>
-  <div class="no-close row android-repair-order">
-    <div :class="[fullpage ? 'menu-hide' : 'col-sm-3 col-xs-3']" >
-      <ul class="nav nav-tabs">
-        <li>
-          <p style="padding-left: 15px; color: white; font-weight: 550">
-            登录人：{{loginInfo.name}}
-          </p>
-          <!--({{loginInfo.id}})-->
-        </li>
-        <li v-for="tab in tabs" @click="tabSelect(tab.link)" :class="{active: tab.link === componentName}">
-          <a href="#" class="tab-befor-img">
-            <img  :src="getImg(tab.icon)" style="height: 30px;width:30px;">
-            {{tab.name}}</a>
-        </li>
-        <li @click="mute()">
-          <a href="#" class="repair-mute-class" >
-            <img  src="../assets/guanbishengyin.png" style="height: 30px;width:30px;border-width:0">关闭声音</a>
-        </li>
-      </ul>
-    </div>
-    <div :class="[fullpage ? 'col-sm-12 col-xs-12' : 'col-sm-9 col-xs-9']" style="overflow: auto;">
-      <!--<route v-ref:route></route>-->
-      <repair-first v-if="componentName === 'repair-first'"></repair-first>
-      <completed-repair v-if="componentName === 'completed-repair'"></completed-repair>
-      <up-load v-if="componentName === 'up-load'"></up-load>
-      <check-page v-if="componentName === 'check-page'"></check-page>
-      <readmeter-home v-if="componentName === 'readmeter-home'"></readmeter-home>
-      <repair-send v-if="componentName === 'repair-send'"></repair-send>
-    </div>
-  </div>
-</template>
-
-<script scoped>
-  import Vue from 'vue'
-  import  * as Util from '../Util'
-  export default {
-    title: '底部导航',
-    data () {
-      return {
-        componentName: 'repair-first',
-        tabs: Util.f.functions,
-        text: '导航组件this',
-        fullpage: false,
-        loginInfo: {}
-      }
-    },
-    ready () {
-      this.loginInfo = Object.assign({}, this.loginInfo, Vue.user)
-      console.log(this.loginInfo, 'loginINfo')
-      // this.$refs.route.init('repair-first')
-    },
-    methods: {
-      // 选择tab
-      tabSelect (name) {
-        this.componentName = name
-        // this.$refs.route.init(name)
-        if (name !== 'text-chat-pane') {
-          this.notified('false')
-        } else {
-          this.notified('true')
-        }
-      },
-      notified (stopped) {
-        console.log('txtServiceStopped invoked$')
-        if (this.$androidUtil.isAndroid) {
-          HostApp.setPreference('txtServiceStopped', stopped)
-          HostApp.setPreference('msgCount', '0')
-        }
-      },
-      mute () {
-        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
-          window.prompt("mute","")
-        }else{
-          HostApp.mute()
-        }
-      },
-      getImg (param) {
-        return require(`../assets/${param}.png`)
-      }
-    },
-    events: {
-      showFullPage () {
-        this.fullpage = true
-      },
-      hideFullPage () {
-        this.fullpage = false
-      }
-    }
-  }
-</script>
-<style lang="less">
-  .tab-befor-img  {
-    margin: 3px 0;
-    content: '';
-    background-size: 30px;
-    display: inline-block;
-    margin-right: 8px;
-    height: 30px;
-    width: 100%;
-    vertical-align: -35%;
-  }
-  img[src=""],img:not([src]){
-    opacity: 0;
-    border:none;
-    visibility: hidden;
-    max-width: none;
-  }
-  /* .repair-mute-class {
-     &::before {
-       .tab-befor-img("../assets/guanbishengyin.png")
-     }
-   }*/
-  .menu-hide {
-    display: none;
-  }
-</style>
+<template>
+  <div class="no-close row android-repair-order">
+    <div :class="[fullpage ? 'menu-hide' : 'col-sm-3 col-xs-3']" >
+      <ul class="nav nav-tabs">
+        <li>
+          <p style="padding-left: 15px; color: white; font-weight: 550">
+            登录人：{{loginInfo.name}}
+          </p>
+          <!--({{loginInfo.id}})-->
+        </li>
+        <li v-for="tab in tabs" @click="tabSelect(tab.link)" :class="{active: tab.link === componentName}">
+          <a href="#" class="tab-befor-img">
+            <img  :src="getImg(tab.icon)" style="height: 30px;width:30px;">
+            {{tab.name}}</a>
+        </li>
+        <li @click="mute()">
+          <a href="#" class="repair-mute-class" >
+            <img  src="../assets/guanbishengyin.png" style="height: 30px;width:30px;border-width:0">关闭声音</a>
+        </li>
+      </ul>
+    </div>
+    <div :class="[fullpage ? 'col-sm-12 col-xs-12' : 'col-sm-9 col-xs-9']" style="overflow: auto;">
+      <!--<route v-ref:route></route>-->
+      <repair-first v-if="componentName === 'repair-first'"></repair-first>
+      <completed-repair v-if="componentName === 'completed-repair'"></completed-repair>
+      <up-load v-if="componentName === 'up-load'"></up-load>
+      <check-page v-if="componentName === 'check-page'"></check-page>
+      <readmeter-home v-if="componentName === 'readmeter-home'"></readmeter-home>
+      <repair-send v-if="componentName === 'repair-send'"></repair-send>
+    </div>
+  </div>
+</template>
+
+<script scoped>
+  import Vue from 'vue'
+  import  * as Util from '../Util'
+  export default {
+    title: '底部导航',
+    data () {
+      return {
+        componentName: 'repair-first',
+        tabs: Util.f.functions,
+        text: '导航组件this',
+        fullpage: false,
+        loginInfo: {}
+      }
+    },
+    ready () {
+      this.loginInfo = Object.assign({}, this.loginInfo, Vue.user)
+      console.log(this.loginInfo, 'loginINfo')
+      // this.$refs.route.init('repair-first')
+    },
+    methods: {
+      // 选择tab
+      tabSelect (name) {
+        this.componentName = name
+        // this.$refs.route.init(name)
+        if (name !== 'text-chat-pane') {
+          this.notified('false')
+        } else {
+          this.notified('true')
+        }
+      },
+      notified (stopped) {
+        console.log('txtServiceStopped invoked$')
+        if (this.$androidUtil.isAndroid) {
+          HostApp.setPreference('txtServiceStopped', stopped)
+          HostApp.setPreference('msgCount', '0')
+        }
+      },
+      mute () {
+        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
+          window.prompt("mute","")
+        }else{
+          HostApp.mute()
+        }
+      },
+      getImg (param) {
+        return require(`../assets/${param}.png`)
+      }
+    },
+    events: {
+      showFullPage () {
+        this.fullpage = true
+      },
+      hideFullPage () {
+        this.fullpage = false
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .tab-befor-img  {
+    margin: 3px 0;
+    content: '';
+    background-size: 30px;
+    display: inline-block;
+    margin-right: 8px;
+    height: 30px;
+    width: 100%;
+    vertical-align: -35%;
+  }
+  img[src=""],img:not([src]){
+    opacity: 0;
+    border:none;
+    visibility: hidden;
+    max-width: none;
+  }
+  /* .repair-mute-class {
+     &::before {
+       .tab-befor-img("../assets/guanbishengyin.png")
+     }
+   }*/
+  .menu-hide {
+    display: none;
+  }
+</style>