修改手机号

src/api/apiList.js

@@ -9,7 +9,7 @@ const baseUrl = '/api'
 
 // todo: url
 const httpUrl = 'https://repairtest.zeruiedu.com' // 测试接口
-const h5Url ='http://localhost:8080/' // 测试h5线上地址
+const h5Url ='http://localhost:8080' // 测试h5线上地址
 // const h5Url = 'http://repair.h5.zeruiedu.com/' // 测试h5线上地址
 window.localStorage.setItem('httpUrl', httpUrl)
 window.localStorage.setItem('h5Url', h5Url)
@@ -25,7 +25,7 @@ export default {
     // url地址
     WINDOWHREF_LOGIN: `${httpUrl}${wxLogin}?callBack=${h5Url}/login&${curScope}`, // 身份失效跳转的登录
     WINDOWHREF_LOGIN_TOKEN: `${httpUrl}${wxLogin}?callBack=${window.location.href}&${curScope}`, // 获取token和登录状态
-    WINDOWHREF_INDEX: `${httpUrl}${wxLogin}?callBack=${h5Url}&${curScope}`, //
+    WINDOWHREF_INDEX: `${httpUrl}${wxLogin}?callBack=${h5Url}&${curScope}`, // 没用到
     WINDOWHREF_ASK: `${httpUrl}${wxLogin}?callBack=${h5Url}&scopes=snsapi_userinfo&type=1`, // 绑定后用户进行授权
 
     // 登录相关
@@ -44,6 +44,7 @@ export default {
     REPAIR_TRANSFER: baseUrl + '/worker/repair/transfer', // 发起转单
     REPAIR_COMPLETE: baseUrl + '/worker/repair/complete', // 确认完成
     REPAIR_APPRAISAL: baseUrl + '/worker/repair/appraisal', // 查看评论
+    USER_EDIT: baseUrl + '/worker/user/edit', // 修改手机号
 
     // 管理员端
     GET_WORKER: baseUrl + '/worker/get/worker', // 查看评论

src/assets/styles/tabbar/modifyPhone.scss

@@ -4,14 +4,14 @@
    min-height: 100vh;
    background: #ffffff;
 }
-.tel input{
+.code input{
     width: 6.9rem;
     height: 0.97rem;
     border-bottom: 1px solid #F1F1F1;
     position: relative;
     margin: 0 auto;
 }
-.code input{
+.tel input{
     width: 6.9rem;
     height: 0.97rem;
     border-bottom: 1px solid #F1F1F1;
@@ -22,7 +22,10 @@ input::-webkit-input-placeholder{
     color: #C8C8C8;
     font-size: 0.28rem;
 }
-.tel .getCode{
+.code{
+    position: relative;
+}
+.code .getCode{
     width: 2rem;
     height: 0.6rem;
     background: #0054FF;

src/views/login/login.vue

@@ -85,7 +85,7 @@ export default {
                     const httpUrl =  window.localStorage.getItem('httpUrl')
                     const h5Url = window.localStorage.getItem('h5Url')
                     const wxLogin = window.localStorage.getItem('wxLogin')
-                    const t = res.role == 3 ? h5Url : `${h5Url}admin_home` // 测试h5线上地址
+                    const t = res.role == 3 ? h5Url : `${h5Url}/admin_home` // 测试h5线上地址
                     let url = `${httpUrl}${wxLogin}?callBack=${t}&scopes=snsapi_userinfo&type=1`
                     window.document.location = url // url-
                 })

src/views/tabbar/mine.vue

 <template>
-    <div
-        class="cont"
-        v-if="user"
-    >
+  <div class="cont" v-if="user">
     <div class="top"></div>
     <div class="info-item">
       <div class="photo">
-                <img
-                    src="@assets/images/my/touxiang.png"
-                    alt
-                />
+        <img src="@assets/images/my/touxiang.png" alt />
       </div>
       <div class="btn">{{user.online_status_display}}</div>
       <div class="name">{{user.name}}</div>
       <div class="group">{{user.department.name}}</div>
-            <div class="tel flex-h">
-                <div class="telNumber">{{user.phone}}</div>
-                <img
-                    src="@assets/images/my/bianji.png"
-                    alt
-                />
+      <div class="tel flex-h" @click="goPhone">
+        <div class="telNumber">{{telToHide(user.phone)}}</div>
+        <img src="@assets/images/my/bianji.png" alt />
       </div>
     </div>
     <!-- tabbar -->
@@ -43,6 +34,12 @@ export default {
         this.getUserInfo()
     },
     methods: {
+        goPhone(){
+            this.$router.push({
+                path: '/modifyPhone',
+                query:{phone:this.user.phone}
+            })
+        },
         getUserInfo () {
             this.$http
                 .get(this.$myApi.USERINFO)
@@ -50,6 +47,10 @@ export default {
                     this.user = res
                 })
                 .catch(() => {})
+        },
+        telToHide (tel) {
+            var phone = tel.substr(0, 3) + '****' + tel.substring(7, 11);
+            return phone;
         }
     }
 }

src/views/tabbar/modifyPhone.vue

 <template>
   <div class="cont">
-      <div class="tel flex-h">
-          <input type="number" placeholder="请输入新的手机号">
-          <div class="getCode">获取验证码</div>
+    <div class="tel">
+      <input v-model.trim="old_tel" maxlength="11" type="number" placeholder="请输入原手机号" />
     </div>
-      <div class="code">
-          <input type="number" placeholder="请输入验证码">
+    <div class="tel">
+      <input v-model.trim="tel" maxlength="11" type="number" placeholder="请输入新的手机号" />
     </div>
-      <div class="submit-btn">提交</div>
+    <div class="code flex-h">
+      <input v-model.trim="code" maxlength="6" type="number" placeholder="请输入验证码" />
+      <div class="getCode" @click="getCode">{{buttonText}}</div>
+    </div>
+    <div class="submit-btn" @click="submit">提交</div>
   </div>
 </template>
 
 <script>
 export default {
-
+    data () {
+        return {
+            old_tel: '',//旧手机号
+            tel: '', // 手机号
+            code: '', // 验证码
+            buttonText: '获取验证码',
+            isSending: false,
+            seconds: 60,
+            timer: null
+        }
+    },
+    methods: {
+        checkData () {
+            if(!this.checkCon()){
+                return
+            }
+            if (this.code.length !== 6) {
+                this.$toast('请正确输入验证码')
+                return false
+            }
+            return true
+        },
+        checkCon(){
+            if (this.old_tel != this.$route.query.phone) {
+                this.$toast('请正确输入原手机号码')
+                return false
+            }
+            if (this.tel.length !== 11) {
+                this.$toast('请正确输入新手机号码')
+                return false
+            }
+            if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))) {
+                this.$toast('请正确输入新手机号码')
+                return false
+            }
+             return true
+        },
+        getCode () {
+            if (this.isSending) return
+             if(!this.checkCon()){
+                return
+            }
+            const curParams = { 
+                tel: this.tel,
+                old_tel: this.old_tel,
+                is_edit: 1
+            }
+            this.$http.post(this.$myApi.SENDCODE, curParams)
+                .then(res => {
+                    this.isSending = true
+                    this.countDown()
+                })
+                .catch(() => {})
+        },
+        countDown () {
+            let seconds = 60
+            this.timer = setInterval(() => {
+                seconds--
+                this.buttonText = `重新获取(${seconds}s)`
+                if (seconds < 1) {
+                    this.isSending = false
+                    this.buttonText = '重新获取'
+                    clearInterval(this.timer)
+                }
+            }, 1000)
+        },
+        submit () {
+            if (!this.checkData()) return 
+            const curParams = {
+                tel: this.tel, 
+                code: this.code
+            }
+            this.$http.post(this.$myApi.USER_EDIT, curParams)
+                .then(res => {
+                    this.$toast('修改成功')
+                    this.$router.go(-1)
+                })
+                .catch(() => {})
+        },
+        fetchData (to, from) {
+            this.tel = '' // 手机号
+            this.code = '' // 验证码
+            this.buttonText = '获取验证码'
+            this.isSending = false
+            this.seconds = 60
+            this.timer = null
+        },
+        beforeRouteEnter (to, from, next) {
+            next(vm => {
+                vm.fetchData(to, from, next)
+            })
+        },
+        beforeRouteLeave (to, from, next) {
+            if (this.timer) {
+                clearInterval(this.timer)
+            }
+            next()
+        }
+    }
 }
 </script>