CRM_12.9 相关代码优化

src/api/http.js

@@ -3,65 +3,26 @@ import axios from "axios";
 import {ElMessage,ElMessageBox} from 'element-plus'
 import CryptoJS from './crypto'
 import router from '@/router/index'
+import { isMobile,copyText } from "../utils/common";
 
-let config = {
-  baseURL: import.meta.env.VITE_APP_API_URL,
-  timeout: 60 * 1000, // Timeout
-};
-
-const _axios = axios.create(config);
-
-const isPhone=()=>{
-  return !(window.innerWidth>768)
-}
+// 复制邮箱
 const copyEmail=()=>{
-  if (navigator.clipboard && window.isSecureContext) {
-    // navigator clipboard 向剪贴板写文本
-    navigator.clipboard.writeText('stephanie@hzinsights.com').then(() => {
-      ElMessage.success('Email address copied')
-    });
-  }else{
-    const input = document.createElement('input');
-    input.setAttribute('readonly', 'readonly');
-    input.setAttribute('value', 'stephanie@hzinsights.com');
-    document.body.appendChild(input);
-    input.setSelectionRange(0, input.value.length);
-    input.select();
-    document.execCommand('copy');
-    document.body.removeChild(input);
+  copyText('stephanie@hzinsights.com').then(res=>{
     ElMessage.success('Email address copied')
-  }
+  }).catch(()=>{})
 }
 
-_axios.interceptors.request.use(
-  function (config) {
-    config.headers.shareEmailId=sessionStorage.getItem('shareId')||0
-    config.headers.Authorization=localStorage.getItem('yben_token')||''
-    return config;
-  },
-  function (error) {
-    // Do something with request error
-    return Promise.reject(error);
-  }
-);
-
-// Add a response interceptor
-_axios.interceptors.response.use(
-  function (response) {
-    let data
-    if(import.meta.env.MODE==='production'){
-      data=JSON.parse(CryptoJS.Des3Decrypt(response.data));//解密
-    }else{
-      data=response.data
-    }
-
-    if(data.code === 400 || data.code === 500) {
-      ElMessage.error(data.msg)
-    }else if(data.code==401){
+// 检查返回的code
+const checkResCode=(code,msg)=>{
+  switch (code) {
+    case 400 || 500:
+      ElMessage.error(msg)
+      break;
+    case 401:
       // 非法访问
       ElMessage({
         type:'error',
-        message:data.msg,
+        message:msg,
         duration:1000
       })
       setTimeout(()=>{
@@ -70,53 +31,91 @@ _axios.interceptors.response.use(
         localStorage.removeItem('user_info')
         router.replace('/login')
       },1000)
-    }else if(data.code==4013){
+      break;
+    case 4013:
       // 未注册
       ElMessageBox.confirm("This email adress is not registered. Please try again.","Prompt",
       {
-        customClass:isPhone()?'mobile-message-confirm':'PC-message-confirm',
-        confirmButtonClass:isPhone()?'mobile-confirm-button':'',
+        customClass:isMobile()?'mobile-message-confirm':'PC-message-confirm',
+        confirmButtonClass:isMobile()?'mobile-confirm-button':'',
         confirmButtonText: 'Create account',
         showCancelButton:false,
       }).then(res=>{
         router.push('/register')
       }).catch(()=>{})
-    }else if(data.code==4014){
+      break;
+    case 4014:
       // 未绑定
       ElMessageBox.confirm("This phone number is not registered. Please try again.","Prompt",
       {
-        customClass:isPhone()?'mobile-message-confirm':'PC-message-confirm',
-        confirmButtonClass:isPhone()?'mobile-confirm-button':'',
+        customClass:isMobile()?'mobile-message-confirm':'PC-message-confirm',
+        confirmButtonClass:isMobile()?'mobile-confirm-button':'',
         confirmButtonText: 'Got it',
         showCancelButton:false,
       }).then(res=>{
         console.log('This phone number is not registered. Please try again.');
       }).catch(()=>{})
-    }else if(data.code==4012){
+      break;
+    case 4012:
       // 权限到期
       localStorage.removeItem('user_info')
       localStorage.removeItem('yben_token')
       ElMessageBox.confirm("Your trial has ended Enjoyed your experience with us? Contact us at stephanie@hzinsights.com to extend your trial.","Prompt",
       {
-        customClass:isPhone()?'mobile-message-confirm':'PC-message-confirm',
-        confirmButtonClass:isPhone()?'mobile-confirm-button':'',
+        customClass:isMobile()?'mobile-message-confirm':'PC-message-confirm',
+        confirmButtonClass:isMobile()?'mobile-confirm-button':'',
         confirmButtonText: 'Get the contact email',
         showCancelButton:false,
       }).then(res=>{
         copyEmail()
       }).catch(()=>{})
-    }else if(data.code==4015){
+      break;
+    case 4015:
       // 已注册
       ElMessageBox.confirm("There is already a user account associated with this email address. Please log in instead.","Prompt",
       {
-        customClass:isPhone()?'mobile-message-confirm':'PC-message-confirm',
-        confirmButtonClass:isPhone()?'mobile-confirm-button':'',
+        customClass:isMobile()?'mobile-message-confirm':'PC-message-confirm',
+        confirmButtonClass:isMobile()?'mobile-confirm-button':'',
         confirmButtonText: 'Log in',
         showCancelButton:false,
       }).then(res=>{
         router.push('/login')
       }).catch(()=>{})
+      break;
+  }
+}
+
+let config = {
+  baseURL: import.meta.env.VITE_APP_API_URL,
+  timeout: 60 * 1000, // Timeout
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+  function (config) {
+    config.headers.shareEmailId=sessionStorage.getItem('shareId')||0
+    config.headers.Authorization=localStorage.getItem('yben_token')||''
+    return config;
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function (response) {
+    let data
+    if(import.meta.env.MODE==='production'){
+      data=JSON.parse(CryptoJS.Des3Decrypt(response.data));//解密
+    }else{
+      data=response.data
     }
+
+    checkResCode(data.code,data.msg)
+
     return data;
   },
   function (error) {

src/components/AvatarPopover.vue

@@ -0,0 +1,82 @@
+<script setup>
+import {defineProps} from 'vue'
+import {bindPhone,loginOut,passwordChange} from '@/utils/common.js'
+
+const props=defineProps({
+  userInfo:{}
+})
+
+</script>
+
+<template>
+  <el-popover
+  popper-class="user-info-popper"
+  placement="top-start"
+  trigger="click">
+    <template #reference>
+        <div class="user-info-hover">
+            <img src="@/assets/icons/avatar.svg" />
+            <span>{{userInfo.Name}}</span>
+        </div>
+    </template>
+    <div class="user-info-message">
+        <div class="user-info-item">User Name：<span><span>{{userInfo.Name}}</span></span></div>
+        <div class="user-info-item">Email Address：<span>{{userInfo.Email}}</span></div>
+        <div class="user-info-item">Mobile Phone No：
+            <span style="display: inline-flex;align-items: center;" v-if="userInfo.Mobile" @click="bindPhone">
+                <span>+{{ userInfo.CountryCode+' '+userInfo.Mobile }}</span>
+                <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" />
+            </span>
+            <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
+            @click="bindPhone" v-else>
+                <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
+                <span>Add a phone number to your account</span>
+            </span>
+        </div>
+        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
+            <el-button type="primary" @click="loginOut" size="large" style="min-width: 100px;background-color:#1856A7 ;">Sign out</el-button>
+            <el-button plain @click="passwordChange" size="large" style="min-width: 100px;padding: 12px;">Update password</el-button>
+        </div>
+    </div>
+  </el-popover>
+</template>
+  
+<style lang="scss">
+  .user-info-popper{
+    width: unset!important;
+    .user-info-message{
+        padding: 28px;
+        .user-info-item{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            color: #333333;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+        }
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
+.user-info-hover{
+  display: flex;
+  align-items: center;
+  img{
+      height: 30px;
+      width: 30px;
+      margin-right: 10px;
+  }
+  span{
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 18px;
+      color: #666666;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 130px;
+  }
+}
+</style>

src/router/index.js

@@ -30,6 +30,7 @@ const routes=[
     name: "RoadshowDetail",
     component: ()=>import("@/views/roadShow/Detail.vue"),
   },
+  // verification目录下
   {
     path: "/login",
     name: "Login",

src/utils/common.js

@@ -0,0 +1,63 @@
+import router from "../router"
+// 判断是否是移动端
+export const isMobile=()=>{
+  return !(window.innerWidth>768)
+}
+
+/**
+ * 复制文本内容
+ * @param {*} text 文本内容
+ * @returns 
+ */
+export const copyText=(text)=>{
+  return new Promise((resolve,reject)=>{
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        // navigator clipboard 向剪贴板写文本
+        navigator.clipboard.writeText(text).then(() => {
+          resolve()
+        })
+      }else{
+        const input = document.createElement('input');
+        input.setAttribute('readonly', 'readonly');
+        input.setAttribute('value', text);
+        document.body.appendChild(input);
+        input.setSelectionRange(0, input.value.length);
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
+        resolve()
+      }
+    } catch (error) {
+      console.error(error.message);
+      reject(error)
+    }
+  })
+}
+
+// 去中文研报
+export const goYBPCCN=()=>{
+  let href = import.meta.env.VITE_CN_YB_PC
+  window.open(href,'_blank');
+}
+// 去用户信息页面 - 移动端
+export const userInfoGo=()=>{
+  let {href} = router.resolve("/my");
+  window.open(href,'_blank');
+}
+// 去绑定手机页面
+export const bindPhone=()=>{
+  let {href} = router.resolve({path:"/bindPhoneNo"});
+  window.open(href,'_blank');
+}
+// 退出登录
+export const loginOut=()=>{
+  localStorage.removeItem('yben_token')
+  localStorage.removeItem('user_info')
+  router.push('/login')
+}
+// 去修改密码页面
+export const passwordChange=()=>{
+  let {href} = router.resolve({path:"/passwordChange"});
+  window.open(href,'_blank');
+}

src/views/report/Detail.vue

@@ -2,6 +2,9 @@
 import {onMounted, ref} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {apiReportDetail,apiReportClassifyList} from '@/api/report'
+import AvatarPopover from '../../components/AvatarPopover.vue';
+import {goYBPCCN,userInfoGo} from '@/utils/common.js'
+
 
 const route=useRoute()
 const router=useRouter()
@@ -118,30 +121,6 @@ onMounted(()=>{
     wwidth.value=window.innerWidth
 })
 
-const goYBPCCN=()=>{
-    let href = import.meta.env.VITE_CN_YB_PC
-    window.open(href,'_blank');
-}
-
-const userInfoGo=()=>{
-    let {href} = router.resolve("/my");
-    window.open(href,'_blank');
-}
-
-const bindPhone=()=>{
-    let {href} = router.resolve({path:"/bindPhoneNo"});
-    window.open(href,'_blank');
-}
-const loginOut=()=>{
-    localStorage.removeItem('yben_token')
-    localStorage.removeItem('user_info')
-    router.push('/login')
-}
-const passwordChange=()=>{
-    let {href} = router.resolve({path:"/passwordChange"});
-    window.open(href,'_blank');
-}
-
 </script>
 
 <template>
@@ -154,36 +133,7 @@ const passwordChange=()=>{
             <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
             <div class="header-right">
                 <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
-                <el-popover
-                    popper-class="user-info-popper"
-                    placement="top-start"
-                    trigger="click">
-                    <template #reference>
-                        <div class="user-info-hover">
-                            <img src="@/assets/icons/avatar.svg" />
-                            <span>{{userInfo.Name}}</span>
-                        </div>
-                    </template>
-                    <div class="user-info-message">
-                        <div class="user-info-item">User Name：<span><span>{{userInfo.Name}}</span></span></div>
-                        <div class="user-info-item">Email Address：<span>{{userInfo.Email}}</span></div>
-                        <div class="user-info-item">Mobile Phone No：
-                            <!-- <span style="display: inline-flex;align-items: center;" v-if="userInfo.Mobile" @click="bindPhone">
-                                <span>{{ userInfo.CountryCode+' '+userInfo.Mobile }}</span>
-                                <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" />
-                            </span> -->
-                            <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
-                            @click="bindPhone">
-                                <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
-                                <span>Add a phone number to your account</span>
-                            </span>
-                        </div>
-                        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
-                            <el-button type="primary" @click="loginOut" size="large" style="min-width: 100px;background-color:#1856A7 ;">Sign out</el-button>
-                            <el-button plain @click="passwordChange" size="large" style="min-width: 100px;padding: 12px;">Update password</el-button>
-                        </div>
-                    </div>
-                </el-popover>
+                <AvatarPopover :user-info="userInfo"></AvatarPopover>
             </div>
         </div>
         <div class="mobile-header-wrap">
@@ -301,25 +251,6 @@ const passwordChange=()=>{
             cursor: pointer;
             margin-right: 20px;
         }
-        .user-info-hover{
-            display: flex;
-            align-items: center;
-            img{
-                height: 30px;
-                width: 30px;
-                margin-right: 10px;
-            }
-            span{
-                font-weight: 500;
-                font-size: 16px;
-                line-height: 18px;
-                color: #666666;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 130px;
-            }
-        }
     }
 }
 @media (max-width: 900px){

src/views/report/Index.vue

@@ -5,6 +5,8 @@ import {apiReportClassifyList,apiReportList} from '@/api/report'
 import { useWindowSize } from '@vueuse/core'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import roadShowList from '@/views/roadShow/List.vue'
+import {goYBPCCN,userInfoGo} from '@/utils/common.js'
+import AvatarPopover from '../../components/AvatarPopover.vue';
 
 const { width, height } = useWindowSize()
 
@@ -160,29 +162,6 @@ function goReportDetail(item){
 let showFilter=ref(false)
 let filterSize=ref('30%')
 
-const goYBPCCN=()=>{
-    let href = import.meta.env.VITE_CN_YB_PC
-    window.open(href,'_blank');
-}
-
-const userInfoGo=()=>{
-    let {href} = router.resolve("/my");
-    window.open(href,'_blank');
-}
-
-const bindPhone=()=>{
-    let {href} = router.resolve({path:"/bindPhoneNo"});
-    window.open(href,'_blank');
-}
-const loginOut=()=>{
-    localStorage.removeItem('yben_token')
-    localStorage.removeItem('user_info')
-    router.push('/login')
-}
-const passwordChange=()=>{
-    let {href} = router.resolve({path:"/passwordChange"});
-    window.open(href,'_blank');
-}
 
 </script>
 
@@ -198,37 +177,7 @@ const passwordChange=()=>{
             <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
             <div class="header-right">
                 <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
-                <el-popover
-                    popper-class="user-info-popper"
-                    placement="top-start"
-                    trigger="click">
-                    <template #reference>
-                        <div class="user-info-hover">
-                            <img src="@/assets/icons/avatar.svg" />
-                            <span>{{userInfo.Name}}</span>
-                        </div>
-                    </template>
-                    <div class="user-info-message">
-                        <div class="user-info-item">User Name：<span>{{userInfo.Name}}</span></div>
-                        <div class="user-info-item">Email Address：<span>{{userInfo.Email}}</span></div>
-                        <div class="user-info-item">Mobile Phone No：
-                            <span style="display: inline-flex;align-items: center;" v-if="userInfo.Mobile" @click="bindPhone">
-                                <span>{{ userInfo.CountryCode+' '+userInfo.Mobile }}</span>
-                                <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" />
-                            </span>
-                            <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
-                            @click="bindPhone" v-else>
-                                <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
-                                <span>Add a phone number to your account</span>
-                            </span>
-                        </div>
-                        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
-                            <el-button type="primary" @click="loginOut" size="large" 
-                            style="min-width: 100px;background-color:#1856A7;">Sign out</el-button>
-                            <el-button plain @click="passwordChange" size="large" style="min-width: 100px;padding: 12px;">Update password</el-button>
-                        </div>
-                    </div>
-                </el-popover>
+                <AvatarPopover :user-info="userInfo"></AvatarPopover>
             </div>
         </div>
         <div class="content-wrap">
@@ -438,26 +387,6 @@ const passwordChange=()=>{
             cursor: pointer;
             margin-right: 20px;
         }
-        .user-info-hover{
-            display: flex;
-            align-items: center;
-            img{
-                height: 30px;
-                width: 30px;
-                margin-right: 10px;
-            }
-            span{
-                font-weight: 500;
-                font-size: 16px;
-                line-height: 18px;
-                color: #666666;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 130px;
-            }
-        }
-
     }
     .menu-icon{
         position: absolute;

src/views/roadShow/Detail.vue

@@ -4,6 +4,8 @@ import {apiRoadShowVideoDetail,apiVideoPlayLog} from '@/api/roadShow'
 import {apiReportClassifyList} from '@/api/report'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import { useRoute, useRouter } from 'vue-router'
+import {goYBPCCN,userInfoGo} from '@/utils/common.js'
+import AvatarPopover from '../../components/AvatarPopover.vue';
 
 const route=useRoute()
 const router=useRouter()
@@ -122,31 +124,6 @@ function handleChangeSecClassify(item,pitem){
 
 }
 
-const goYBPCCN=()=>{
-    let href = import.meta.env.VITE_CN_YB_PC
-    window.open(href,'_blank');
-}
-
-const userInfoGo=()=>{
-    let {href} = router.resolve("/my");
-    window.open(href,'_blank');
-}
-
-// TODO 绑定手机号
-const bindPhone=()=>{
-    let {href} = router.resolve({path:"/bindPhoneNo"});
-    window.open(href,'_blank');
-}
-const loginOut=()=>{
-    localStorage.removeItem('yben_token')
-    localStorage.removeItem('user_info')
-    router.push('/login')
-}
-const passwordChange=()=>{
-    let {href} = router.resolve({path:"/passwordChange"});
-    window.open(href,'_blank');
-}
-
 </script>
 
 <template>
@@ -159,36 +136,7 @@ const passwordChange=()=>{
             <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
             <div class="header-right">
                 <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
-                <el-popover
-                    popper-class="user-info-popper"
-                    placement="top-start"
-                    trigger="click">
-                    <template #reference>
-                        <div class="user-info-hover">
-                            <img src="@/assets/icons/avatar.svg" />
-                            <span>{{userInfo.Name}}</span>
-                        </div>
-                    </template>
-                    <div class="user-info-message">
-                        <div class="user-info-item">User Name：<span>{{userInfo.Name}}</span></div>
-                        <div class="user-info-item">Email Address：<span>{{userInfo.Email}}</span></div>
-                        <div class="user-info-item">Mobile Phone No：
-                            <span style="display: inline-flex;align-items: center;" v-if="userInfo.Mobile" @click="bindPhone">
-                                <span>{{ userInfo.CountryCode+' '+userInfo.Mobile }}</span>
-                                <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" />
-                            </span>
-                            <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
-                            @click="bindPhone" v-else>
-                                <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
-                                <span>Add a phone number to your account</span>
-                            </span>
-                        </div>
-                        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
-                            <el-button type="primary" @click="loginOut" size="large" style="width: 100px;background-color:#1856A7 ;">Sign out</el-button>
-                            <el-button plain @click="passwordChange" size="large" style="min-width: 100px;padding: 12px;">Update password</el-button>
-                        </div>
-                    </div>
-                </el-popover>
+                <AvatarPopover :user-info="userInfo"></AvatarPopover>
             </div>
         </div>
         <div class="mobile-header-wrap">
@@ -246,25 +194,6 @@ const passwordChange=()=>{
             cursor: pointer;
             margin-right: 20px;
         }
-        .user-info-hover{
-            display: flex;
-            align-items: center;
-            img{
-                height: 30px;
-                width: 30px;
-                margin-right: 10px;
-            }
-            span{
-                font-weight: 500;
-                font-size: 16px;
-                line-height: 18px;
-                color: #666666;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 130px;
-            }
-        }
     }
 }
 @media (max-width: 900px){

src/views/verification/bindPhoneNo.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { reactive, ref } from 'vue';
-import {ElMessage,ElMessageBox} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
-import {smsCodeSend,bindMobile,modifyMobile} from '@/api/auth.js'
+import {bindMobile,modifyMobile} from '@/api/auth.js'
 import { TEL_CODE_ARR } from '../../utils/constant';
+import { isMobile } from '../../utils/common';
+import { phoneNoValidator } from './utils/validators';
+import { sendVerificationCode } from './utils/common';
 
   const router = useRouter()
 
@@ -24,26 +27,19 @@ import { TEL_CODE_ARR } from '../../utils/constant';
     },
     rules:{
       newPhoneNo:[{required: true, message:'Mobile phone No. cannot be null', trigger: 'blur'},
-      {validator:(rule,value,callback)=>{
-        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
-          callback(new Error('Must be number'))
-        }else{
-          callback()
-        }
-      }, trigger: 'blur'}],
+      {validator:phoneNoValidator, trigger: 'blur'}],
       verificationCode:{required: true, message:'Verification code cannot be null', trigger: 'blur'}
     }
   })
 
-  let codeTimer=null
   const codeInfo=reactive({
-    timeout:60,// 秒
+    timeout:0,// 秒
     isRequesting:false
   })
 // ----------------------------------------------------方法
   const sendVerCode=()=>{
     let refTemp = ''
-    if(isPhone()){
+    if(isMobile()){
       refTemp=bindPhoneMobileRef.value
     }else{
       refTemp=bindPhoneRef.value
@@ -53,20 +49,8 @@ import { TEL_CODE_ARR } from '../../utils/constant';
         Mobile:bindPhone.form.newPhoneNo,
         AreaNum:bindPhone.form.newPhoneNoPre || '86'
       }
-      smsCodeSend(codeParams).then(res=>{
-        if(res.code!=200) return 
-        ElMessage.success('Verification code sent')
-        codeInfo.isRequesting=true
-        codeInfo.timeout--
-        codeTimer=setInterval(()=>{
-          if(codeInfo.timeout==1){
-            codeInfo.isRequesting=false
-            clearInterval(codeTimer)
-            codeInfo.timeout=60
-          }
-          codeInfo.timeout--
-        },1000)
-      })
+      sendVerificationCode(codeParams,2,codeInfo)
+
     }).catch(err=>{
       let errMessage=''
       errMessage=err.newPhoneNo?err.newPhoneNo[0].message:''
@@ -77,7 +61,7 @@ import { TEL_CODE_ARR } from '../../utils/constant';
   }
 
   const bindSubmit=()=>{
-    let isPhoneVar = isPhone()
+    let isPhoneVar = isMobile()
     let refTemp = ''
     if(isPhoneVar){
       refTemp=bindPhoneMobileRef.value
@@ -127,10 +111,6 @@ import { TEL_CODE_ARR } from '../../utils/constant';
     })
   }
 
-  const isPhone=()=>{
-    return !(window.innerWidth>768)
-  }
-
 </script>
 
 <template>
@@ -147,7 +127,7 @@ import { TEL_CODE_ARR } from '../../utils/constant';
         <!-- PC端的表单 -->
         <el-form :model="bindPhone.form" class="bind-phone-form" :rules="bindPhone.rules" ref="bindPhoneRef">
           <el-form-item label="Original Mobile Phone No." label-width="176px" style="border: none;" v-if="userInfo.Mobile">
-            {{ userInfo.CountryCode+' '+userInfo.Mobile }}
+            +{{ userInfo.CountryCode+' '+userInfo.Mobile }}
           </el-form-item>
           <el-form-item prop="newPhoneNo" ref="newPhoneNoRef" size="large">
             <div class="phone-item">

src/views/verification/login.vue

@@ -1,22 +1,20 @@
 <script setup>
 import {ref,reactive} from 'vue'
-import {ElMessageBox,ElMessage} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import md5 from 'md5';
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
-import {loginApi,registerApi,emailCodeSend} from '@/api/auth.js'
-import { passwordDigitValidator } from './utils/validators';
+import {loginApi,registerApi} from '@/api/auth.js'
 // passwordDigitValidator-密码6位
+import { passwordDigitValidator,phoneNoValidator } from './utils/validators';
+import { isMobile } from '../../utils/common';
 import { TEL_CODE_ARR } from '../../utils/constant';
-
+import { sendVerificationCode } from './utils/common';
 
   const router = useRouter()
   const loginFormRef=ref(null)
   const loginFormMobileRef=ref(null)
   
-  const isPhone=()=>{
-    return !(window.innerWidth>768)
-  }
   const loginForm=reactive({
     email:'',
     phone:'',
@@ -31,22 +29,14 @@ import { TEL_CODE_ARR } from '../../utils/constant';
     email:[{required: true, message:'Email address cannot be null', trigger: 'blur'},
     {type:'email',message:'Email address format is incorrect', trigger: 'blur'}],
     phone:[{required: true, message:'Mobile phone No. cannot be null', trigger: 'blur'},
-    {validator:(rule,value,callback)=>{
-      if(!Number(value) || value.indexOf('.')!=-1){
-        callback(new Error('Must be number'))
-      }else{
-        callback()
-      }
-    }, trigger: 'blur'}],
+    {validator:phoneNoValidator, trigger: 'blur'}],
     password:[{required: true, message:'Password cannot be null', trigger: 'blur'},
-    {
-      validator:passwordDigitValidator,trigger:'blur'
-    }]
+    {validator:passwordDigitValidator,trigger:'blur'}]
   })
 
   const login=()=>{
     let refTemp = ''
-    if(isPhone()){
+    if(isMobile()){
       refTemp=loginFormMobileRef.value
     }else{
       refTemp=loginFormRef.value
@@ -64,7 +54,6 @@ import { TEL_CODE_ARR } from '../../utils/constant';
           Password:md5(loginForm.password)
         }
         loginApi(params).then(res=>{
-          // console.log(res);
           if(res.code == 200){
             localStorage.setItem('yben_token',res.data.access_token)
             let userInfo = {
@@ -139,9 +128,8 @@ import { TEL_CODE_ARR } from '../../utils/constant';
     }, trigger: 'blur'}]
   })
 
-  let codeTimer=null
   const codeInfo=reactive({
-    timeout:60,// 秒
+    timeout:0,// 秒
     isRequesting:false
   })
 
@@ -151,20 +139,7 @@ import { TEL_CODE_ARR } from '../../utils/constant';
         Name:registerForm.userName,
         Email:registerForm.email
       }
-      emailCodeSend(codeParams).then(res=>{
-        if(res.code!=200) return  
-        ElMessage.success('Verification code sent')
-        codeInfo.isRequesting=true
-        codeInfo.timeout--
-        codeTimer=setInterval(()=>{
-          if(codeInfo.timeout==1){
-            codeInfo.isRequesting=false
-            clearInterval(codeTimer)
-            codeInfo.timeout=60
-          }
-          codeInfo.timeout--
-        },1000)
-      })
+      sendVerificationCode(codeParams,1,codeInfo)
     }).catch(err=>{
       let errMessage=''
       errMessage=err.userName?err.userName[0].message:
@@ -195,7 +170,7 @@ import { TEL_CODE_ARR } from '../../utils/constant';
           Password:md5(registerForm.password)
         }
         registerApi(params).then(res=>{
-          console.log(res.code);
+          // console.log(res.code);
           if(res.code==200){
             localStorage.setItem('yben_token',res.data.access_token)
             let userInfo = {

src/views/verification/mobileMyPage.vue

@@ -1,24 +1,8 @@
 <script setup>
-import { useRouter } from 'vue-router';
+import {bindPhone,loginOut,passwordChange} from '@/utils/common.js'
 
-const router = useRouter()
+const userForm=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}
 
-  const userForm=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}
-
-
-  const bindPhone=()=>{
-    let {href} = router.resolve({path:"/bindPhoneNo"});
-    window.open(href,'_blank');
-  }
-  const loginOut=()=>{
-      localStorage.removeItem('yben_token')
-      localStorage.removeItem('user_info')
-      router.push('/login')
-  }
-  const passwordChange=()=>{
-      let {href} = router.resolve({path:"/passwordChange"});
-      window.open(href,'_blank');
-  }
 </script>
 
 <template>
@@ -45,7 +29,7 @@ const router = useRouter()
                 <span>Add a phone number to your account</span>
               </template>
               <template v-else>
-                {{ userForm.CountryCode+' '+userForm.Mobile }}
+                +{{ userForm.CountryCode+' '+userForm.Mobile }}
                 <img src="@/assets/icons/edit.svg" style="height: 16px;margin-left: 20px;">
               </template>
             </div>

src/views/verification/passwordChange.vue

@@ -1,21 +1,17 @@
 <script setup>
 import { reactive, ref } from 'vue';
-import {ElMessage,ElMessageBox} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {psdModify} from '@/api/auth.js'
 import md5 from 'md5';
-import { passwordDigitValidator } from './utils/validators';
 // passwordDigitValidator-密码6位
+import { passwordDigitValidator } from './utils/validators';
+import { isMobile } from '../../utils/common';
 
   const router = useRouter()
 
   const psdChangeRef = ref(null)
   const psdChangeMobileRef = ref(null)
-
-  const isPhone=()=>{
-    return !(window.innerWidth>768)
-  }
-
   const psdChange=reactive({
     form:{
       passwordOrigin:'',
@@ -48,7 +44,7 @@ import { passwordDigitValidator } from './utils/validators';
   }
   const submit=()=>{
     let refTemp = ''
-    if(isPhone()){
+    if(isMobile()){
       refTemp=psdChangeMobileRef.value
     }else{
       refTemp=psdChangeRef.value

src/views/verification/passwordMissing.vue

@@ -1,20 +1,19 @@
 <script setup>
 import { reactive, ref } from 'vue';
-import {ElMessage,ElMessageBox} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
-import {smsCodeSend,emailCodeSend,psdMissingApi} from '@/api/auth.js'
+import {psdMissingApi} from '@/api/auth.js'
 import md5 from 'md5';
-import { passwordDigitValidator } from './utils/validators';
+import { passwordDigitValidator,phoneNoValidator } from './utils/validators';
 import { TEL_CODE_ARR } from '../../utils/constant';
+import { sendVerificationCode } from './utils/common';
+import { isMobile } from '../../utils/common';
 
   const router = useRouter()
 
   const psdMissingRef = ref(null)
   const psdMissingMobileRef = ref(null)
-  const isPhone=()=>{
-    return !(window.innerWidth>768)
-  }
 
   const psdMissing=reactive({
     form:{
@@ -29,17 +28,9 @@ import { TEL_CODE_ARR } from '../../utils/constant';
       email:[{required: true, message:'Email address cannot be null', trigger: 'blur'},
       {type:'email',message:'Email address format is incorrect', trigger: 'blur'}],
       phone:[{required: true,message:'Mobile phone No. cannot be null', trigger: 'blur'},
-      {validator:(rule,value,callback)=>{
-        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
-          callback(new Error('Must be number'))
-        }else{
-          callback()
-        }
-      }, trigger: 'blur'}],
+      {validator:phoneNoValidator, trigger: 'blur'}],
       password:[{required: true, message:'Password cannot be null', trigger: 'blur'},
-      {
-        validator:passwordDigitValidator,trigger:'blur'
-      }],
+      {validator:passwordDigitValidator,trigger:'blur'}],
       passwordConfirm:[{required: true, message:'Password cannot be null', trigger: 'blur'},
       {validator:(rule,value,callback)=>{
         if(psdMissing.form.passwordConfirm!==psdMissing.form.password){
@@ -53,9 +44,8 @@ import { TEL_CODE_ARR } from '../../utils/constant';
     }
   })
 
-  let codeTimer=null
   const codeInfo=reactive({
-    timeout:60,// 秒
+    timeout:0,// 秒
     isRequesting:false
   })
 
@@ -74,11 +64,10 @@ const changeLoginType=(type)=>{
     passwordConfirm:'',
     verificationCode:''
   }
-  clearInterval(codeTimer)
-  codeInfo.timeout=60
+  
   codeInfo.isRequesting=false
   let refTemp;
-  if(isPhone()){
+  if(isMobile()){
     refTemp=psdMissingMobileRef.value
   }else{
     refTemp=psdMissingRef.value
@@ -88,41 +77,29 @@ const changeLoginType=(type)=>{
 
   const sendVerCode=()=>{
     let refTemp = ''
-    if(isPhone()){
+    if(isMobile()){
       refTemp=psdMissingMobileRef.value
     }else{
       refTemp=psdMissingRef.value
     }
     refTemp.validateField(['phone','email']).then(async res=>{
-      let resp=''
+      // let resp=''
+      let params={}
       // 邮箱验证
       if(loginType.value==1){
-        let params={
+        params={
           Name:psdMissing.form.userName||'',
           Email:psdMissing.form.email
         }
-        resp=await emailCodeSend(params)
       }else{
-        let params={
+        params={
           Mobile:psdMissing.form.phone,
           AreaNum:psdMissing.form.phonePre ||'86'
         }
-        resp=await smsCodeSend(params)
-      }
-      if(resp.code==200){
-      codeInfo.isRequesting=true
-      codeInfo.timeout--
-      codeTimer=setInterval(()=>{
-        if(codeInfo.timeout==1){
-          codeInfo.isRequesting=false
-          clearInterval(codeTimer)
-          codeInfo.timeout=60
-        }
-        codeInfo.timeout--
-      },1000)
-      // TODO 发送验证码
-      ElMessage.success('Verification code sent')
       }
+
+      sendVerificationCode(params,loginType.value,codeInfo)
+
     }).catch(err=>{
       let errMessage=''
       errMessage=err.phone?err.phone[0].message:
@@ -135,7 +112,7 @@ const changeLoginType=(type)=>{
 
   const psdMissingSubmit=()=>{
     let refTemp = ''
-    if(isPhone()){
+    if(isMobile()){
       refTemp=psdMissingMobileRef.value
     }else{
       refTemp=psdMissingRef.value

src/views/verification/register.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { reactive, ref } from 'vue';
-import {ElMessage,ElMessageBox} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import { useRouter } from 'vue-router';
-import {registerApi,emailCodeSend} from '@/api/auth.js'
+import {registerApi} from '@/api/auth.js'
 import md5 from 'md5'
-import { passwordDigitValidator } from './utils/validators';
 // passwordDigitValidator-密码6位
+import { passwordDigitValidator } from './utils/validators';
+import { sendVerificationCode } from './utils/common';
 
   const router = useRouter()
 
@@ -44,33 +45,20 @@ import { passwordDigitValidator } from './utils/validators';
     }
   })
 
-  let codeTimer=null
   const codeInfo=reactive({
-    timeout:60,// 秒
+    timeout:0,// 秒
     isRequesting:false
   })
 
 // ----------------------------------------------------方法
+
   const sendVerCode=()=>{
     registerRef.value.validateField(['userName','email']).then(res=>{
       let codeParams={
         Name:register.form.userName,
         Email:register.form.email
       }
-      emailCodeSend(codeParams).then(res=>{
-        if(res.code!=200) return  
-        ElMessage.success('Verification code sent')
-        codeInfo.isRequesting=true
-        codeInfo.timeout--
-        codeTimer=setInterval(()=>{
-          if(codeInfo.timeout==1){
-            codeInfo.isRequesting=false
-            clearInterval(codeTimer)
-            codeInfo.timeout=60
-          }
-          codeInfo.timeout--
-        },1000)
-      })
+      sendVerificationCode(codeParams,1,codeInfo)
     }).catch(err=>{
       let errMessage=''
       errMessage=err.userName?err.userName[0].message:
@@ -80,7 +68,7 @@ import { passwordDigitValidator } from './utils/validators';
       }
     })
   }
-
+  // 移动端的注册 在登录页面
   const registerSubmit=()=>{
     registerRef.value.validate(valid=>{
       if(valid){

src/views/verification/transitionPage.vue

@@ -21,13 +21,13 @@
     }
 
     onUnmounted(()=>{
-        timer=null
+        clearInterval(timer)
     })
 
     // -------------------created
 
     transitionType.value = sessionStorage.getItem('transitionPageMessage')
-    console.log(transitionType.value);
+    // console.log(transitionType.value);
     // 判断是否是正常操作后的跳转，而不是人工在地址栏做的跳转
     if(!transitionType.value){
         router.replace('/')

src/views/verification/utils/common.js

@@ -0,0 +1,38 @@
+
+import {smsCodeSend,emailCodeSend} from '@/api/auth.js'
+import {ElMessage} from 'element-plus'
+
+
+/**
+ * 
+ * @param {*} param -调用发送验证码接口的参数
+ * @param {*} type -类型 1-邮箱 2-手机号码
+ * @param {*} codeInfo -倒计时相关信息 timeout-倒计时 isRequesting-是否发送了验证码
+ * @param {*} time -总共几秒倒计时 默认一分钟
+ */
+export const sendVerificationCode=async (param,type,codeInfo,time=60)=>{
+  let codeTimer=null
+  let resp={}
+  if(type==1){
+    // 邮箱
+    resp=await emailCodeSend(param)
+  }else{
+    // 短信验证码
+    resp=await smsCodeSend(param)
+  }
+
+  if(resp.code==200){
+    clearInterval(codeTimer)
+    codeInfo.timeout=time
+    codeInfo.isRequesting=true
+    codeInfo.timeout--
+    codeTimer=setInterval(()=>{
+      if(codeInfo.timeout==1){
+        codeInfo.isRequesting=false
+        clearInterval(codeTimer)
+      }
+      codeInfo.timeout--
+    },1000)
+    ElMessage.success('Verification code sent')
+  }
+}

src/views/verification/utils/validators.js

@@ -4,4 +4,12 @@ export const passwordDigitValidator=(rule,value,callback)=>{
   }else{
     callback()
   }
+}
+// 手机号验证
+export const phoneNoValidator=(rule,value,callback)=>{
+  if(!Number(value) || value.indexOf('.')!=-1){
+    callback(new Error('Must be number'))
+  }else{
+    callback()
+  }
 }