CRM_12.9 英文研报暂存

.env.development

@@ -3,4 +3,6 @@ VITE_APP_API_URL="http://8.136.199.33:8302/api"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
-VITE_APP_OUTDIR="dist"
+VITE_APP_OUTDIR="dist"
+# PC端中文研报跳转地址
+VITE_CN_YB_PC="https://ybpctest.hzinsights.com/report/index"

.env.production

@@ -3,4 +3,6 @@ VITE_APP_API_URL="https://ybpcen.hzinsights.com/api"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
-VITE_APP_OUTDIR="hongze_yb_en"
+VITE_APP_OUTDIR="hongze_yb_en"
+# PC端中文研报跳转地址
+VITE_CN_YBPC="https://ybpc.hzinsights.com/report/index"

.env.test

@@ -3,4 +3,6 @@ VITE_APP_API_URL="http://8.136.199.33:8302/api"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
-VITE_APP_OUTDIR="hongze_yb_en"
+VITE_APP_OUTDIR="hongze_yb_en"
+# PC端中文研报跳转地址
+VITE_CN_YB_PC="https://ybpctest.hzinsights.com/report/index"

package.json

@@ -13,6 +13,7 @@
     "@vueuse/core": "^9.6.0",
     "axios": "^1.2.0",
     "element-plus": "^2.2.25",
+    "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
     "vconsole": "^3.15.0",
     "vue": "^3.2.41",

src/api/auth.js

@@ -0,0 +1,72 @@
+/**
+ * 注册、登录、修改密码、绑定手机号等
+ */
+import {get,post} from './http'
+
+/**
+ * 发送邮箱验证码
+ * @param params.Name  用户姓名
+ * @param params.Email  邮箱
+ */
+export const emailCodeSend=params=>{
+    return get('/auth/emailCode',params)
+}
+
+/**
+ * 短信验证码
+ * @param params.Mobile  手机号
+ * @param params.Area_num  区号
+ */
+export const smsCodeSend=params=>{
+    return get('/auth/smsCode',params)
+}
+
+/**
+ * 注册
+ * @param params.CompanyName 公司名称  
+ * @param params.Name 用户名称  
+ * @param params.Password 密码 md5加密后  
+ * @param params.Email 用户邮箱  
+ * @param params.SmsCode 邮箱验证码  
+ */
+export const registerApi=params=>{
+    return post('/auth/register',params)
+}
+
+/**
+ * 登录
+ * @param params.Account 用户
+ * @param params.Type 类型 1：邮箱 2：手机  
+ * @param params.Password 密码 md5加密后  
+ */
+export const loginApi=params=>{
+    return post('/auth/login',params)
+}
+
+/**
+ * 绑定手机号
+ * @param params.Mobile 手机号  
+ * @param params.SmsCode 验证码  
+ */
+export const bindMobile=params=>{
+    return post('/auth/bindMobile',params)
+}
+
+/**
+ * 修改密码
+ * @param params.OldPwd 旧密码 MD5加密后  
+ * @param params.NewPwd 新密码 MD5加密后  
+ */
+export const psdModify=params=>{
+    return post('/auth/modifyPwd',params)
+}
+
+/**
+ * 忘记密码
+ * @param params.Account 账户
+ * @param params.SmsCode 验证码
+ * @param params.NewPwd 新密码 MD5加密后  
+ */
+export const psdMissingApi=params=>{
+    return post('/auth/forgetPwd',params)
+}

src/api/http.js

@@ -2,6 +2,7 @@
 import axios from "axios";
 import { ElMessage } from 'element-plus'
 import CryptoJS from './crypto'
+import router from '@/router/index'
 
 let config = {
   baseURL: import.meta.env.VITE_APP_API_URL,
@@ -13,6 +14,7 @@ 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) {
@@ -33,6 +35,18 @@ _axios.interceptors.response.use(
 
     if(data.code === 400) {
       ElMessage.error(data.msg)
+    }if(data.code==401){
+      // 非法访问
+      ElMessage({
+        type:'error',
+        message:data.msg,
+        duration:1000
+      })
+      setTimeout(()=>{
+        // 清除token，重新登录
+        localStorage.removeItem('yben_token')
+        router.replace('/login')
+      },1000)
     }
     return data;
   },

src/assets/icons/add-square.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4793 16.9609H15.0393V21.5209C15.0393 21.6529 15.1473 21.7609 15.2793 21.7609H16.7193C16.8513 21.7609 16.9593 21.6529 16.9593 21.5209V16.9609H21.5193C21.6513 16.9609 21.7593 16.8529 21.7593 16.7209V15.2809C21.7593 15.1489 21.6513 15.0409 21.5193 15.0409H16.9593V10.4809C16.9593 10.3489 16.8513 10.2409 16.7193 10.2409H15.2793C15.1473 10.2409 15.0393 10.3489 15.0393 10.4809V15.0409H10.4793C10.3473 15.0409 10.2393 15.1489 10.2393 15.2809V16.7209C10.2393 16.8529 10.3473 16.9609 10.4793 16.9609Z" fill="#1856A7"/>
+<path d="M27.04 4H4.96C4.429 4 4 4.429 4 4.96V27.04C4 27.571 4.429 28 4.96 28H27.04C27.571 28 28 27.571 28 27.04V4.96C28 4.429 27.571 4 27.04 4ZM25.84 25.84H6.16V6.16H25.84V25.84Z" fill="#1856A7"/>
+</svg>

src/assets/icons/avatar.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.2812 26.7861C21.6382 28.873 18.3676 30.0055 15 29.9999C11.6324 30.0055 8.36173 28.873 5.71873 26.7861C6.04002 24.5536 7.15524 22.5118 8.85992 21.0349C10.5646 19.5579 12.7445 18.745 15 18.745C17.2555 18.745 19.4354 19.5579 21.14 21.0349C22.8447 22.5118 23.9599 24.5536 24.2812 26.7861ZM11.1937 17.5349C9.46919 18.157 7.92239 19.1903 6.68737 20.5452C5.45235 21.9002 4.56638 23.5358 4.10623 25.3105C2.0912 23.1812 0.744237 20.5082 0.231835 17.6218C-0.280566 14.7354 0.0640518 11.7621 1.2231 9.06944C2.38214 6.37676 4.3048 4.08272 6.75344 2.47087C9.20209 0.859013 12.0694 0 15.0009 0C17.9325 0 20.7997 0.859013 23.2484 2.47087C25.697 4.08272 27.6197 6.37676 28.7787 9.06944C29.9378 11.7621 30.2824 14.7354 29.77 17.6218C29.2576 20.5082 27.9106 23.1812 25.8956 25.3105C25.4351 23.5354 24.5485 21.8995 23.3128 20.5445C22.0771 19.1896 20.5296 18.1565 18.8043 17.5349C19.9379 16.7281 20.7857 15.5819 21.2253 14.2619C21.6649 12.9418 21.6737 11.5162 21.2502 10.1909C20.8267 8.86553 19.9929 7.70909 18.8693 6.88854C17.7457 6.06799 16.3904 5.62578 14.999 5.62578C13.6077 5.62578 12.2524 6.06799 11.1288 6.88854C10.0051 7.70909 9.17139 8.86553 8.74791 10.1909C8.32443 11.5162 8.33313 12.9418 8.77275 14.2619C9.21238 15.5819 10.0602 16.7281 11.1937 17.5349ZM15 7.49987C15.6156 7.49982 16.2252 7.62103 16.7939 7.85658C17.3627 8.09212 17.8795 8.43739 18.3148 8.87267C18.7501 9.30795 19.0954 9.82472 19.331 10.3935C19.5666 10.9622 19.6878 11.5718 19.6878 12.1874C19.6878 12.803 19.5666 13.4125 19.331 13.9813C19.0954 14.55 18.7501 15.0668 18.3148 15.5021C17.8795 15.9373 17.3627 16.2826 16.7939 16.5182C16.2252 16.7537 15.6156 16.8749 15 16.8749C13.7568 16.8748 12.5647 16.3809 11.6857 15.5018C10.8067 14.6227 10.3128 13.4305 10.3128 12.1874C10.3128 10.9442 10.8067 9.752 11.6857 8.87294C12.5647 7.99387 13.7568 7.49997 15 7.49987Z" fill="#00459F"/>
+</svg>

src/router/index.js

@@ -60,6 +60,11 @@ const routes=[
     name: "TransitionPage",
     component: ()=>import("@/views/verification/transitionPage.vue"),
   },
+  {
+    path: "/my",
+    name: "MobileMyPage",
+    component: ()=>import("@/views/verification/mobileMyPage.vue"),
+  },
   {
     path: '/:pathMatch(.*)',
     name: 'error',
@@ -84,14 +89,17 @@ const router=createRouter({
     }
   }
 })
-
-const whitelist=['/login','/passwordMissing']
+// 白名单
+const whitelist=['/login','/passwordMissing','/register']
+// 需要重定向的路由
+const shouldRedireact=['/report/index','/report/detail','/roadshow/detail']
 
 router.beforeEach((to, from, next) => {
-  console.log(to.path);
+  // console.log(to.path);
   // 做登录的权限判断
   if(!localStorage.getItem('yben_token') && !whitelist.includes(to.path)){
-    sessionStorage.setItem('login_redirect',to.fullPath)
+    if(shouldRedireact.includes(to.path)) sessionStorage.setItem('login_redirect',to.fullPath)
+
     next({path:'/login',replace:true})
     return 
   }

src/views/report/Detail.vue

@@ -2,7 +2,6 @@
 import {onMounted, ref} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {apiReportDetail,apiReportClassifyList} from '@/api/report'
-import {Avatar,Edit} from '@element-plus/icons-vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -13,7 +12,7 @@ async function getReportClassify(){
     const res=await apiReportClassifyList()
     if(res.code===200){
         const arr=res.data.list||[]
-        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"}]
+        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"},{id: 0,classify_name: "ABOUT US"}]
     }
 }
 getReportClassify()
@@ -116,17 +115,22 @@ onMounted(()=>{
     wwidth.value=window.innerWidth
 })
 
-// TODO 绑定手机号
+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=()=>{
-    // TODO 退出登录，清除token
+    localStorage.removeItem('yben_token')
     router.push('/login')
 }
 const passwordChange=()=>{
-    // TODO 修改密码
+    let {href} = router.resolve({path:"/passwordChange"});
+    window.open(href,'_blank');
 }
 
 </script>
@@ -140,32 +144,32 @@ const passwordChange=()=>{
             </div>
             <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
             <el-popover
+                popper-class="user-info-popper"
                 placement="top-start"
-                trigger="click"
-                :width="240">
+                trigger="click">
                 <template #reference>
-                    <div @click="userInfoShow" class="user-info-hover">
-                        <el-icon><Avatar /></el-icon>
+                    <div class="user-info-hover">
+                        <img src="@/assets/icons/avatar.svg" />
                         <span>xxxxx</span>
                     </div>
                 </template>
                 <div class="user-info-message">
-                    <div>用户姓名：<span>xxxxx</span></div>
-                    <div>邮箱：<span>1605177521@qq.com</span></div>
-                    <div>手机号：
-                        <!-- <span style="display: inline-flex;align-items: center;">
+                    <div class="user-info-item">用户姓名：<span>xxxxx</span></div>
+                    <div class="user-info-item">邮箱：<span>1605177521@qq.com</span></div>
+                    <div class="user-info-item">手机号：
+                        <span style="display: inline-flex;align-items: center;">
                             <span>+86 13588818597</span>
-                            <el-icon style="margin-left: 8px;cursor: pointer;" @click="bindPhone"><Edit /></el-icon>
-                        </span> -->
-                        <span style="display: inline-flex;align-items: center;color: var(--el-color-primary);cursor: pointer;"
+                            <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" @click="bindPhone" />
+                        </span>
+                        <!-- <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
                         @click="bindPhone">
-                            <el-icon style="margin-right: 8px;"><Edit /></el-icon>
+                            <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
                             <span>绑定手机号</span>
-                        </span>
+                        </span> -->
                     </div>
                     <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
-                        <el-button type="primary" @click="loginOut">退出账号</el-button>
-                        <el-button type="primary" plain @click="passwordChange">修改密码</el-button>
+                        <el-button type="primary" @click="loginOut" size="large" style="width: 100px;background-color:#1856A7 ;">退出账号</el-button>
+                        <el-button plain @click="passwordChange" size="large" style="width: 100px;">修改密码</el-button>
                     </div>
                 </div>
             </el-popover>
@@ -173,6 +177,7 @@ const passwordChange=()=>{
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
             <span @click="$router.replace('/')">HORIZON INSIGHTS</span>
+            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
         </div>
         <div class="no-select-text detail-wrap">
             <h2 class="title">【No.{{info.stage}}|FICC】{{info.title}} ({{info.create_time.substring(5, 7)}}{{info.create_time.substring(8, 10)}})</h2>
@@ -229,6 +234,21 @@ const passwordChange=()=>{
         margin-bottom: 0;
     }
 }
+.user-info-popper{
+    min-width: 300px!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>
@@ -258,7 +278,26 @@ const passwordChange=()=>{
     .user-info-hover{
         display: flex;
         align-items: center;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 17px;
         cursor: pointer;
+        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;
+        }
     }
 }
 .mobile-header-wrap{
@@ -277,11 +316,20 @@ const passwordChange=()=>{
     position: relative;
     .menu-icon{
         position: absolute;
-        left: 20px;
+        left: 17px;
         top: 50%;
         transform: translateY(-50%);
         width: 17px;
     }
+    .user-info-avatar{
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 17px;
+        height: 18px;
+    }
 }
 @media (max-width: 768px){
     .header-wrap{

src/views/report/Index.vue

@@ -5,7 +5,7 @@ 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 {Avatar,Edit} from '@element-plus/icons-vue'
+import {SuccessFilled} from '@element-plus/icons-vue'
 
 const { width, height } = useWindowSize()
 
@@ -159,44 +159,28 @@ function goReportDetail(item){
 let showFilter=ref(false)
 let filterSize=ref('30%')
 
-const userInfoShow=()=>{
-    window.event.stopPropagation()
+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=()=>{
-    // TODO 退出登录，清除token
+    localStorage.removeItem('yben_token')
     router.push('/login')
 }
 const passwordChange=()=>{
-    // TODO 修改密码
     let {href} = router.resolve({path:"/passwordChange"});
     window.open(href,'_blank');
 }
-// const isPhone=ref(window.innerWidth<=768)
-
-// const handleOrientationchange=()=>{
-//     // 移动端横竖屏切换事件
-//     nextTick(()=>{
-//         console.log(window.innerWidth);
-//         isPhone.value = window.innerWidth<=768
-//         console.log(isPhone.value);
-//     })
-// }
-// onMounted(()=>{
-//     window.addEventListener('orientationchange',handleOrientationchange)
-// })
-// onUnmounted(()=>{
-//     window.removeEventListener('orientationchange',handleOrientationchange)
-// })
 
 </script>
 
@@ -209,15 +193,15 @@ const passwordChange=()=>{
                 <img src="@/assets/search.svg" alt="">
                 <span style="margin-left:10px">search for</span>
             </div>
-            <el-icon class="user-info-avatar" @click="userInfoGo"><Avatar /></el-icon>
+            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
+            <el-icon @click="goYBPCCN" class="ybCN-jump"><SuccessFilled /></el-icon>
             <el-popover
                 popper-class="user-info-popper"
                 placement="top-start"
-                trigger="click"
-                :width="240">
+                trigger="click">
                 <template #reference>
-                    <div @click="userInfoShow" class="user-info-hover">
-                        <el-icon><Avatar /></el-icon>
+                    <div class="user-info-hover">
+                        <img src="@/assets/icons/avatar.svg" />
                         <span>xxxxx</span>
                     </div>
                 </template>
@@ -440,8 +424,23 @@ const passwordChange=()=>{
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        right: 20px;
+        right: 17px;
         cursor: pointer;
+        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;
@@ -459,7 +458,7 @@ const passwordChange=()=>{
         padding: 15px 0;
         .search-box{
             left: unset;
-            right: 45px;
+            right: 55px;
             span{
                 display: none;
             }
@@ -470,14 +469,18 @@ const passwordChange=()=>{
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
-            right: 20px;
-            font-size: 18px;
+            right: 17px;
+            height: 18px;
+        }
+        .ybCN-jump{
+            display: none;
         }
         .user-info-hover{
             display: none;
         }
         .menu-icon{
             display: block;
+            left: 17px;
             width: 17px;
         }
     }

src/views/roadShow/Detail.vue

@@ -4,7 +4,6 @@ import {apiRoadShowVideoDetail,apiVideoPlayLog} from '@/api/roadShow'
 import {apiReportClassifyList} from '@/api/report'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import { useRoute, useRouter } from 'vue-router'
-import {Avatar,Edit} from '@element-plus/icons-vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -15,7 +14,7 @@ async function getReportClassify(){
     const res=await apiReportClassifyList()
     if(res.code===200){
         const arr=res.data.list||[]
-        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"}]
+        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"},{id: 0,classify_name: "ABOUT US"}]
     }
 }
 getReportClassify()
@@ -120,17 +119,24 @@ function handleChangeSecClassify(item,pitem){
         })
 
 }
+
+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=()=>{
-    // TODO 退出登录，清除token
+    localStorage.removeItem('yben_token')
     router.push('/login')
 }
 const passwordChange=()=>{
-    // TODO 修改密码
+    let {href} = router.resolve({path:"/passwordChange"});
+    window.open(href,'_blank');
 }
 
 </script>
@@ -144,32 +150,32 @@ const passwordChange=()=>{
             </div>
             <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
             <el-popover
+                popper-class="user-info-popper"
                 placement="top-start"
-                trigger="click"
-                :width="240">
+                trigger="click">
                 <template #reference>
-                    <div @click="userInfoShow" class="user-info-hover">
-                        <el-icon><Avatar /></el-icon>
+                    <div class="user-info-hover">
+                        <img src="@/assets/icons/avatar.svg" />
                         <span>xxxxx</span>
                     </div>
                 </template>
                 <div class="user-info-message">
-                    <div>用户姓名：<span>xxxxx</span></div>
-                    <div>邮箱：<span>1605177521@qq.com</span></div>
-                    <div>手机号：
-                        <!-- <span style="display: inline-flex;align-items: center;">
+                    <div class="user-info-item">用户姓名：<span>xxxxx</span></div>
+                    <div class="user-info-item">邮箱：<span>1605177521@qq.com</span></div>
+                    <div class="user-info-item">手机号：
+                        <span style="display: inline-flex;align-items: center;">
                             <span>+86 13588818597</span>
-                            <el-icon style="margin-left: 8px;cursor: pointer;" @click="bindPhone"><Edit /></el-icon>
-                        </span> -->
-                        <span style="display: inline-flex;align-items: center;color: var(--el-color-primary);cursor: pointer;"
+                            <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" @click="bindPhone" />
+                        </span>
+                        <!-- <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
                         @click="bindPhone">
-                            <el-icon style="margin-right: 8px;"><Edit /></el-icon>
+                            <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
                             <span>绑定手机号</span>
-                        </span>
+                        </span> -->
                     </div>
                     <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
-                        <el-button type="primary" @click="loginOut">退出账号</el-button>
-                        <el-button type="primary" plain @click="passwordChange">修改密码</el-button>
+                        <el-button type="primary" @click="loginOut" size="large" style="width: 100px;background-color:#1856A7 ;">退出账号</el-button>
+                        <el-button plain @click="passwordChange" size="large" style="width: 100px;">修改密码</el-button>
                     </div>
                 </div>
             </el-popover>
@@ -177,6 +183,7 @@ const passwordChange=()=>{
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
             <span @click="$router.replace('/')">HORIZON INSIGHTS</span>
+            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
         </div>
         <div class="detail-wrap" v-if="info">
             <div class="title">{{info.title}}</div>
@@ -217,7 +224,26 @@ const passwordChange=()=>{
     .user-info-hover{
         display: flex;
         align-items: center;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 17px;
         cursor: pointer;
+        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;
+        }
     }
 }
 .mobile-header-wrap{
@@ -236,7 +262,7 @@ const passwordChange=()=>{
     position: relative;
     .menu-icon{
         position: absolute;
-        left: 20px;
+        left: 17px;
         top: 50%;
         transform: translateY(-50%);
         width: 17px;
@@ -248,6 +274,15 @@ const passwordChange=()=>{
     }
     .mobile-header-wrap{
         display: block;
+        .user-info-avatar{
+            display: flex;
+            align-items: center;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 17px;
+            height: 18px;
+        }
     }
 }
 .detail-wrap{
@@ -284,4 +319,21 @@ const passwordChange=()=>{
         }
     }
 }
+</style>
+<style lang="scss">
+.user-info-popper{
+    min-width: 300px!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>

src/views/verification/bindPhoneNo.vue

@@ -3,16 +3,27 @@ import { reactive, ref } from 'vue';
 import {ElMessage,ElMessageBox} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
+import {smsCodeSend,bindMobile} from '@/api/auth.js'
 
   const router = useRouter()
 
   const bindPhoneRef = ref(null)
   const newPhoneNoRef = ref(null)
+  const telCodeArr=[
+    { value: '86', label: '+86' },
+    { value: '852', label: "+852" },
+    { value: '886', label: '+886' },
+    { value: '1', label: '+1' },
+    { value: '65', label: '+65' },
+    { value: '62', label: '+62' },
+    { value:'081',label: '+081' },
+    { value:'44',label: '+44' }
+  ]
 
   const bindPhone=reactive({
     form:{
       newPhoneNo:'',
-      newPhoneNoPre:'+86',
+      newPhoneNoPre:'86',
       verificationCode:''
     },
     rules:{
@@ -35,34 +46,54 @@ import {CaretBottom} from '@element-plus/icons-vue'
   })
 // ----------------------------------------------------方法
   const sendVerCode=()=>{
-    codeInfo.isRequesting=true
-    codeInfo.timeout--
-    codeTimer=setInterval(()=>{
-      if(codeInfo.timeout==1){
-        codeInfo.isRequesting=false
-        codeInfo.timeout=60
-        codeTimer=null
+    bindPhoneRef.value.validateField(['newPhoneNo']).then(res=>{
+      let codeParams={
+        Mobile:bindPhone.form.newPhoneNo,
+        Area_num:bindPhone.form.newPhoneNoPre || '86'
       }
-      codeInfo.timeout--
-    },1000)
-    // TODO 发送验证码
-    ElMessage.success('已发送验证码')
+      smsCodeSend(codeParams).then(res=>{
+        if(res.code!=200) return 
+        ElMessage.success('已发送验证码')
+        codeInfo.isRequesting=true
+        codeInfo.timeout--
+        codeTimer=setInterval(()=>{
+          if(codeInfo.timeout==1){
+            codeInfo.isRequesting=false
+            codeInfo.timeout=60
+            codeTimer=null
+          }
+          codeInfo.timeout--
+        },1000)
+      })
+    }).catch(err=>{
+      let errMessage=''
+      errMessage=err.newPhoneNo?err.newPhoneNo[0].message:''
+      if(errMessage){
+        ElMessage.warning(errMessage)
+      }
+    })
   }
 
   const bindSubmit=()=>{
     bindPhoneRef.value.validate(valid=>{
       if(valid){
-        if(!bindPhone.form.newPhoneNoPre){
-          ElMessage.error('请选择手机区号')
-        }
-        if(Math.random()>0.5){
-          newPhoneNoRef.value.validateMessage='该手机号已绑定其他账号，请检查'
-          newPhoneNoRef.value.validateState='error'
-        }else{
-          //TODO 注册成功，跳转
-          sessionStorage.setItem('transitionPageMessage','bindPhone')
-          router.replace('/transitionPage')
+        let params={
+          Mobile:bindPhone.form.newPhoneNo,
+          SmsCode:bindPhone.form.verificationCode
         }
+        bindMobile(params).then(res=>{
+          if(res.code==200){
+            //TODO 绑定成功，跳转
+            sessionStorage.setItem('transitionPageMessage','bindPhone')
+            router.replace('/transitionPage')
+          } 
+          // if(Math.random()>0.5){
+          //   newPhoneNoRef.value.validateMessage='该手机号已绑定其他账号，请检查'
+          //   newPhoneNoRef.value.validateState='error'
+          // }else{
+
+          // }
+        })
       }
     })
   }
@@ -87,9 +118,7 @@ import {CaretBottom} from '@element-plus/icons-vue'
           <el-form-item prop="newPhoneNo" ref="newPhoneNoRef" size="large">
             <div class="phone-item">
               <el-select v-model="bindPhone.form.newPhoneNoPre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
-                <el-option label="+86" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
+                <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
               </el-select>
               <el-input v-model.trim="bindPhone.form.newPhoneNo" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
                 <template #suffix>
@@ -115,17 +144,9 @@ import {CaretBottom} from '@element-plus/icons-vue'
             <template #label>
               <el-select v-model="bindPhone.form.newPhoneNoPre" :suffix-icon="CaretBottom"
               style="max-width: 60px;" placeholder="请选择" size="large">
-                <el-option label="+886" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
+                <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
               </el-select>
             </template>
-            <!-- <div class="phone-item"> -->
-              <!-- <el-select v-model="bindPhone.form.newPhoneNoPre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
-                <el-option label="+86" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
-              </el-select> -->
               <el-input v-model.trim="bindPhone.form.newPhoneNo" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
                 <template #suffix>
                   <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 

src/views/verification/login.vue

@@ -3,6 +3,9 @@ import {ref,reactive} from 'vue'
 import {ElMessageBox,ElMessage} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
+import {loginApi,registerApi,emailCodeSend} from '@/api/auth.js'
+
+import md5 from 'md5';
 
   const router = useRouter()
   const loginFormRef=ref(null)
@@ -12,9 +15,23 @@ import {CaretBottom} from '@element-plus/icons-vue'
   const loginForm=reactive({
     email:'',
     phone:'',
-    phonePre:'+86',
+    phonePre:'86',
     password:'',
   })
+  const telCodeArr=[
+    { value: '86', label: '+86' },
+    { value: '852', label: "+852" },
+    { value: '886', label: '+886' },
+    { value: '1', label: '+1' },
+    { value: '65', label: '+65' },
+    { value: '62', label: '+62' },
+    { value:'081',label: '+081' },
+    { value:'44',label: '+44' }
+  ]
+
+  // 隐私政策是否阅读
+  const hasChecked=ref(false)
+
   const loginFormRules=reactive({
     email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
     {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
@@ -48,14 +65,27 @@ import {CaretBottom} from '@element-plus/icons-vue'
       ElMessage.success('复制成功')
     }
   }
-  console.log();
   const login=()=>{
-    loginFormRef.value.validate(valid=>{
+    loginFormRef.value.validate(valid =>{
       if(valid){
-        //TODO 登录接口对接
-        // if(!loginForm.phonePre && loginType.value==2){
-        //   ElMessage.error('请选择手机区号')
-        // }
+        if(!hasChecked.value){
+          ElMessage.warning('请勾选隐私政策')
+          return
+        }
+        let params={
+          Account:loginType.value==1?loginForm.email:loginForm.phone,
+          Type:loginType.value,
+          Password:md5(loginForm.password)
+        }
+        loginApi(params).then(res=>{
+          // console.log(res);
+          if(res.code == 200){
+            localStorage.setItem('yben_token',res.data.access_token)
+            let redirectPath=sessionStorage.getItem('login_redirect') || '/'
+            sessionStorage.removeItem('login_redirect')
+            router.replace(redirectPath)
+          }
+        })
         // console.log(loginForm);
         // if(Math.random()>0.75){
           // ElMessageBox.confirm("您的账号未曾注册，请注册后登录", '提示',   
@@ -81,10 +111,10 @@ import {CaretBottom} from '@element-plus/icons-vue'
           // ElMessage.error('密码错误，请检查')
         // }else if(Math.random()>0.2){
           //TODO 登录成功，跳转
-          localStorage.setItem('yben_token','FDSAFWRFEGGREGEe1')
-          let redirectPath=sessionStorage.getItem('login_redirect') || '/'
-          sessionStorage.removeItem('login_redirect')
-          router.replace(redirectPath)
+          // localStorage.setItem('yben_token','FDSAFWRFEGGREGEe1')
+          // let redirectPath=sessionStorage.getItem('login_redirect') || '/'
+          // sessionStorage.removeItem('login_redirect')
+          // router.replace(redirectPath)
         // }else{
               // ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
               // {
@@ -158,18 +188,33 @@ import {CaretBottom} from '@element-plus/icons-vue'
   })
 
   const sendVerCode=()=>{
-    codeInfo.isRequesting=true
-    codeInfo.timeout--
-    codeTimer=setInterval(()=>{
-      if(codeInfo.timeout==1){
-        codeInfo.isRequesting=false
-        codeInfo.timeout=60
-        codeTimer=null
+    registerFormRef.value.validateField(['userName','email']).then(res=>{
+      let codeParams={
+        Name:registerForm.userName,
+        Email:registerForm.email
+      }
+      emailCodeSend(codeParams).then(res=>{
+        if(res.code!=200) return  
+        ElMessage.success('已发送验证码')
+        codeInfo.isRequesting=true
+        codeInfo.timeout--
+        codeTimer=setInterval(()=>{
+          if(codeInfo.timeout==1){
+            codeInfo.isRequesting=false
+            codeInfo.timeout=60
+            codeTimer=null
+          }
+          codeInfo.timeout--
+        },1000)
+      })
+    }).catch(err=>{
+      let errMessage=''
+      errMessage=err.userName?err.userName[0].message:
+                  err.email?err.email[0].message:''
+      if(errMessage){
+        ElMessage.warning(errMessage)
       }
-      codeInfo.timeout--
-    },1000)
-    // TODO 发送验证码
-    ElMessage.success('已发送验证码')
+    })
   }
 
   const register=()=>{
@@ -180,7 +225,24 @@ import {CaretBottom} from '@element-plus/icons-vue'
           step.value=2
           return
         }
-        console.log(registerForm);
+        if(!hasChecked.value){
+          ElMessage.warning('请勾选隐私政策')
+          return
+        }
+        let params={
+          CompanyName:registerForm.companyName,
+          Name:registerForm.userName,
+          Email:registerForm.email,
+          SmsCode:registerForm.verificationCode,
+          Password:md5(registerForm.password)
+        }
+        registerApi(params).then(res=>{
+          console.log(res.code);
+          if(res.code==200){
+            sessionStorage.setItem('transitionPageMessage','register')
+            router.replace('/transitionPage')
+          }
+        })
         // if(Math.random()>0.75){
         //   ElMessageBox.confirm("您的邮箱已注册，请直接登录","提示",
         //   {
@@ -193,8 +255,8 @@ import {CaretBottom} from '@element-plus/icons-vue'
         //   }).catch(()=>{})
         // }else if(Math.random()>0.25){
         //   //TODO 注册成功，跳转
-          sessionStorage.setItem('transitionPageMessage','register')
-          router.replace('/transitionPage')
+          // sessionStorage.setItem('transitionPageMessage','register')
+          // router.replace('/transitionPage')
         // }else{
           // ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
           // {
@@ -235,9 +297,7 @@ import {CaretBottom} from '@element-plus/icons-vue'
               <el-form-item prop="phone" v-else >
                 <div class="phone-item">
                   <el-select v-model="loginForm.phonePre" style="max-width: 90px;margin-right: 10px;" placeholder="请选择" size="large">
-                    <el-option label="+86" value="+86" />
-                    <el-option label="101" value="101" />
-                    <el-option label="3" value="3" />
+                    <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
                   </el-select>
                   <el-input v-model.trim="loginForm.phone" style="flex-grow: 1;" placeholder="请输入手机号" size="large">
                   </el-input>
@@ -256,6 +316,10 @@ import {CaretBottom} from '@element-plus/icons-vue'
               </div>
             </div>
             <el-button class="submit-button" type="primary" size="large" @click="login">立即登录</el-button>
+            <div class="privacy-policy">
+              <el-checkbox v-model="hasChecked" label="我已阅读并同意" style="color:#333333"></el-checkbox>
+              <span @click="privacyPolicy" class="policy">弘则研报隐私政策</span>
+            </div>
             <div class="login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
           </div>
         </div>
@@ -288,9 +352,7 @@ import {CaretBottom} from '@element-plus/icons-vue'
               <template #label>
                 <el-select v-model="loginForm.phonePre" :suffix-icon="CaretBottom"
                 style="max-width: 55px;" placeholder="请选择" size="large">
-                  <el-option label="+886" value="+86" />
-                  <el-option label="101" value="101" />
-                  <el-option label="3" value="3" />
+                  <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
                 </el-select>
               </template>
               <el-input v-model.trim="loginForm.phone" style="flex-grow: 1;" placeholder="请输入手机号" size="large"></el-input>
@@ -304,6 +366,10 @@ import {CaretBottom} from '@element-plus/icons-vue'
             <span @click="psdMissingPageGo">忘记密码？</span>
           </div>
           <el-button type="primary" class="submit-button" @click="login" size="large">立即登录</el-button>
+          <div class="privacy-policy">
+            <el-checkbox v-model="hasChecked" label="我已阅读并同意"></el-checkbox>
+            <span @click="privacyPolicy" class="policy">弘则研报隐私政策</span>
+          </div>
           <div class="mobile-login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
         </div>
         <!-- 注册 -->
@@ -337,6 +403,10 @@ import {CaretBottom} from '@element-plus/icons-vue'
           </el-form>
           <el-button type="primary" class="submit-button" @click="register" size="large" v-if="step==1">下一步</el-button>
           <el-button type="primary" class="submit-button" size="large" v-if="step==2" @click="register">提交信息</el-button>
+          <div class="privacy-policy" v-if="step==2">
+            <el-checkbox v-model="hasChecked" label="我已阅读并同意" style="color:#333333" ></el-checkbox>
+            <span @click="privacyPolicy" class="policy">弘则研报隐私政策</span>
+          </div>
           <div class="mobile-login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
         </div>
       </div>
@@ -368,6 +438,19 @@ import {CaretBottom} from '@element-plus/icons-vue'
         font-weight: 600;
       }
     }
+    .privacy-policy{
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      margin-top: 25px;
+      display: flex;
+      align-items: center;
+      .policy{
+        color: #1856A7;
+        cursor: pointer;
+        margin-left: 12px;
+      }
+    }
     .submit-button{
       margin-top: 26px;
       width: 100%;
@@ -398,7 +481,7 @@ import {CaretBottom} from '@element-plus/icons-vue'
         .login-container-right{
           background-color: white;
           width: 600px;
-          height: 500px;
+          height: 550px;
           opacity: 0.95;
           border: 1px solid #DCDFE6;
           border-radius: 8px;
@@ -445,12 +528,12 @@ import {CaretBottom} from '@element-plus/icons-vue'
                 color: #333333;;
                 cursor: pointer;
               }
-            }
+            }      
             .login-hint{
               font-size: 14px;
               line-height: 20px;
               color: #999999;
-              margin-top: 26px;
+              margin-top: 25px;
             }
           }
         }

src/views/verification/mobileMyPage.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+  const userForm=reactive({
+    userName:'陈煌滨',
+    email:'hbchen@hz.com',
+    phone:'17859768727',
+    areaNum:'+86'
+  })
+
+
+  const bindPhone=()=>{
+    let {href} = router.resolve({path:"/bindPhoneNo"});
+    window.open(href,'_blank');
+  }
+  const loginOut=()=>{
+      localStorage.removeItem('yben_token')
+      router.push('/login')
+  }
+  const passwordChange=()=>{
+      let {href} = router.resolve({path:"/passwordChange"});
+      window.open(href,'_blank');
+  }
+</script>
+
+<template>
+  <div class="user-container" id="user-container">
+    <div class="fixed-header">
+      <span>
+        HORIZONINSIGHTS
+      </span>
+    </div>
+    <div class="user-info-box">
+      <img src="@/assets/icons/avatar.svg" class="user-avatar">
+      <div class="user-info">
+        <el-form :model="userForm" id="mobile-form-field" label-position="left" label-width="56px">
+          <el-form-item label="用户姓名" size="large">
+            {{ userForm.userName }}
+          </el-form-item>
+          <el-form-item label="邮箱" size="large">
+            {{ userForm.email }}
+          </el-form-item>
+          <el-form-item label="手机号" size="large">
+            <div class="phone-form-item" @click="bindPhone">
+              <!-- {{ userForm.areaNum+' '+userForm.phone }}
+              <img src="@/assets/icons/edit.svg" style="height: 16px;margin-left: 20px;"> -->
+              <img src="@/assets/icons/add-square.svg" style="height: 16px;margin-right: 8px;">
+              <span>绑定手机号</span>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" class="form-button" size="large" @click="loginOut">退出账号</el-button>
+        <el-button class="form-button" size="large" style="margin-left: 0;" @click="passwordChange">修改密码</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<style lang="scss" scoped>
+  .user-container{
+    padding: 50px 30px 30px;
+    .user-info-box{
+      padding-top: 50px;
+      text-align: center;
+      .user-avatar{
+        height: 60px;
+      }
+      .user-info{
+        margin-top: 20px;
+        .phone-form-item{
+          display: flex;
+          align-items: center;
+          span{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            color: #1856A7;
+          }
+        }
+        .form-button{
+          width: 100%;
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+.user-container{
+  .el-form-item__label{
+    padding: 0;
+    margin-right: 14px;
+    color: #333333;
+  }
+  .el-form-item__content{
+    color: #333333;
+  }
+}
+</style>

src/views/verification/passwordChange.vue

@@ -2,6 +2,8 @@
 import { reactive, ref } from 'vue';
 import {ElMessage,ElMessageBox} from 'element-plus'
 import { useRouter } from 'vue-router';
+import {psdModify} from '@/api/auth.js'
+import md5 from 'md5';
 
   const router = useRouter()
 
@@ -37,20 +39,23 @@ import { useRouter } from 'vue-router';
   const submit=()=>{
     psdChangeRef.value.validate(valid=>{
       if(valid){
-        if(Math.random()>0.75){
-          ElMessage.error('原密码错误')
-        }else{
-          //TODO 注册成功，跳转
-          ElMessage({
-            message: '修改成功,请重新登录',
-            type: 'success',
-            duration:0
-          })
-          setTimeout(()=>{
-            localStorage.removeItem('yben_token')
-            router.replace('/login')
-          },1000)
+        let params={
+          OldPwd:md5(psdChange.form.passwordOrigin),
+          NewPwd:md5(psdChange.form.password)
         }
+        psdModify(params).then(res=>{
+          if(res.code == 200){
+            ElMessage({
+              message: '修改成功,请重新登录',
+              type: 'success',
+              duration:1000
+            })
+            setTimeout(()=>{
+              localStorage.removeItem('yben_token')
+              router.replace('/login')
+            },1000)
+          }
+        })
       }
     })
   }
@@ -104,7 +109,6 @@ import { useRouter } from 'vue-router';
           </el-form-item>
         </el-form>
         <el-button type="primary" @click="submit" class="psdChange-button" size="large">确定</el-button>
-        <!-- <el-button @click="router.back()" class="psdChange-button" style="background-color: white;" size="large">返回</el-button> -->
       </div>
     </div>
 </template>

src/views/verification/passwordMissing.vue

@@ -3,17 +3,28 @@ import { reactive, ref } from 'vue';
 import {ElMessage,ElMessageBox} from 'element-plus'
 import { useRouter } from 'vue-router';
 import {CaretBottom} from '@element-plus/icons-vue'
+import {smsCodeSend,emailCodeSend,psdMissingApi} from '@/api/auth.js'
+import md5 from 'md5';
 
   const router = useRouter()
 
   const psdMissingRef = ref(null)
   const phoneRef = ref(null)
-
+  const telCodeArr=[
+    { value: '86', label: '+86' },
+    { value: '852', label: "+852" },
+    { value: '886', label: '+886' },
+    { value: '1', label: '+1' },
+    { value: '65', label: '+65' },
+    { value: '62', label: '+62' },
+    { value:'081',label: '+081' },
+    { value:'44',label: '+44' }
+  ]
   const psdMissing=reactive({
     form:{
       email:'',
       phone:'',
-      phonePre:'+86',
+      phonePre:'86',
       password:'',
       passwordConfirm:'',
       verificationCode:''
@@ -58,46 +69,79 @@ const changeLoginType=(type)=>{
 }
 
   const sendVerCode=()=>{
-    codeInfo.isRequesting=true
-    codeInfo.timeout--
-    codeTimer=setInterval(()=>{
-      if(codeInfo.timeout==1){
-        codeInfo.isRequesting=false
-        codeInfo.timeout=60
-        codeTimer=null
+    psdMissingRef.value.validateField(['phone','email']).then(async res=>{
+      let resp=''
+      // 邮箱验证
+      if(loginType.value==1){
+        let params={
+          Name:psdMissing.form.userName||'',
+          Email:psdMissing.form.email
+        }
+        resp=await emailCodeSend(params)
+      }else{
+        let params={
+          Mobile:psdMissing.form.phone,
+          Area_num:psdMissing.form.phonePre ||'86'
+        }
+        resp=await smsCodeSend(params)
       }
+      if(resp.code==200){
+      codeInfo.isRequesting=true
       codeInfo.timeout--
-    },1000)
-    // TODO 发送验证码
-    ElMessage.success('已发送验证码')
+      codeTimer=setInterval(()=>{
+        if(codeInfo.timeout==1){
+          codeInfo.isRequesting=false
+          codeInfo.timeout=60
+          codeTimer=null
+        }
+        codeInfo.timeout--
+      },1000)
+      // TODO 发送验证码
+      ElMessage.success('已发送验证码')
+      }
+    }).catch(err=>{
+      let errMessage=''
+      errMessage=err.phone?err.phone[0].message:
+                  err.email?err.email[0].message:''
+      if(errMessage){
+        ElMessage.warning(errMessage)
+      }
+    })
   }
 
   const psdMissingSubmit=()=>{
     psdMissingRef.value.validate(valid=>{
       if(valid){
-        if(!psdMissing.form.phonePre){
-          ElMessage.error('请选择手机区号')
-        }
-        if(Math.random()>0.5){
-          // ElMessageBox.confirm("您的账号未曾注册，请注册后登录","提示",
-          // {
-          //   confirmButtonText: '立即注册',
-          //   showCancelButton:false,
-          // }).then(res=>{
-          //   router.push('/register')
-          // }).catch(()=>{})
-        }else{
-          //TODO 注册成功，跳转
-          ElMessage({
-            message: '修改成功',
-            type: 'success',
-            duration:1000
-          })
-          setTimeout(()=>{
-            localStorage.removeItem('yben_token')
-            router.replace('/login')
-          },1000)
+        let params={
+          Account:loginType.value==1?psdMissing.form.email:psdMissing.form.phone,
+          Password:md5(psdMissing.form.password),
+          SmsCode:psdMissing.form.verificationCode
         }
+        psdMissingApi(params).then(res=>{
+          if(res.code==200){
+            ElMessage({
+              message: '修改成功',
+              type: 'success',
+              duration:1000
+            })
+            setTimeout(()=>{
+              localStorage.removeItem('yben_token')
+              router.replace('/login')
+            },1000)
+          }
+        })
+        // if(Math.random()>0.5){
+        //   // ElMessageBox.confirm("您的账号未曾注册，请注册后登录","提示",
+        //   // {
+        //   //   confirmButtonText: '立即注册',
+        //   //   showCancelButton:false,
+        //   // }).then(res=>{
+        //   //   router.push('/register')
+        //   // }).catch(()=>{})
+        // }else{
+        //   //TODO 注册成功，跳转
+
+        // }
       }
     })
   }
@@ -126,9 +170,7 @@ const changeLoginType=(type)=>{
           <el-form-item prop="phone" ref="phoneRef" v-if="loginType==2">
             <div class="phone-item">
               <el-select v-model="psdMissing.form.phonePre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
-                <el-option label="+86" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
+                <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
               </el-select>
               <el-input v-model.trim="psdMissing.form.phone" size="large" style="flex-grow: 1;height: 40px;" placeholder="请输入手机号">
                 <template #suffix>
@@ -162,17 +204,10 @@ const changeLoginType=(type)=>{
         <el-form :model="psdMissing.form" class="mobile-missing-psd-form" id="mobile-form-field" label-width="55px"
         label-position="left" :rules="psdMissing.rules" ref="psdMissingRef" hide-required-asterisk>
           <el-form-item prop="phone" ref="phoneRef" v-if="loginType==2" size="large">
-            <!-- <el-select v-model="psdMissing.form.phonePre" size="large" style="margin-right: 10px;" placeholder="请选择">
-              <el-option label="+86" value="+86" />
-              <el-option label="101" value="101" />
-              <el-option label="3" value="3" />
-            </el-select> -->
             <template #label>
               <el-select v-model="psdMissing.form.phonePre" :suffix-icon="CaretBottom"
               style="max-width: 55px;" placeholder="请选择" size="large">
-                <el-option label="+886" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
+                <el-option :label="item.label" :value="item.value" v-for="item in telCodeArr" />
               </el-select>
             </template>
             <el-input v-model.trim="psdMissing.form.phone" size="large" style="flex-grow: 1;height: 40px;" placeholder="请输入手机号">

src/views/verification/register.vue

@@ -2,19 +2,20 @@
 import { reactive, ref } from 'vue';
 import {ElMessage,ElMessageBox} from 'element-plus'
 import { useRouter } from 'vue-router';
+import {registerApi,emailCodeSend} from '@/api/auth.js'
+import md5 from 'md5'
 
   const router = useRouter()
 
   const registerRef = ref(null)
   const phoneRef = ref(null)
-
+  // 隐私政策是否阅读
+  const hasChecked=ref(false)
   const register=reactive({
     form:{
       userName:'',
       companyName:'',
       email:'',
-      phone:'',
-      phonePre:'+86',
       password:'',
       passwordConfirm:'',
       verificationCode:''
@@ -24,14 +25,6 @@ import { useRouter } from 'vue-router';
       companyName:{required: true, message:'公司名称不能为空', trigger: 'blur'},
       email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
       {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
-      phone:[
-      {validator:(rule,value,callback)=>{
-        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
-          callback(new Error('必须都为数字'))
-        }else{
-          callback()
-        }
-      }, trigger: 'blur'}],
       password:{required: true, message:'密码不能为空', trigger: 'blur'},
       passwordConfirm:[{required: true, message:'密码不能为空', trigger: 'blur'},
       {validator:(rule,value,callback)=>{
@@ -42,7 +35,6 @@ import { useRouter } from 'vue-router';
         }
       }, trigger: 'blur'}],
       verificationCode:{required: true, message:'邮箱验证码不能为空', trigger: 'blur'}
-
     }
   })
 
@@ -54,50 +46,76 @@ import { useRouter } from 'vue-router';
 
 // ----------------------------------------------------方法
   const sendVerCode=()=>{
-    codeInfo.isRequesting=true
-    codeInfo.timeout--
-    codeTimer=setInterval(()=>{
-      if(codeInfo.timeout==1){
-        codeInfo.isRequesting=false
-        codeInfo.timeout=60
-        codeTimer=null
+    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('已发送验证码')
+        codeInfo.isRequesting=true
+        codeInfo.timeout--
+        codeTimer=setInterval(()=>{
+          if(codeInfo.timeout==1){
+            codeInfo.isRequesting=false
+            codeInfo.timeout=60
+            codeTimer=null
+          }
+          codeInfo.timeout--
+        },1000)
+      })
+    }).catch(err=>{
+      let errMessage=''
+      errMessage=err.userName?err.userName[0].message:
+                  err.email?err.email[0].message:''
+      if(errMessage){
+        ElMessage.warning(errMessage)
       }
-      codeInfo.timeout--
-    },1000)
-    // TODO 发送验证码
-    ElMessage.success('已发送验证码')
+    })
   }
 
   const registerSubmit=()=>{
     registerRef.value.validate(valid=>{
       if(valid){
-        if(!register.form.phonePre){
-          ElMessage.error('请选择手机区号')
+        if(!hasChecked.value){
+          ElMessage.warning('请勾选隐私政策')
+          return
         }
-        if(Math.random()>0.75){
-          ElMessageBox.confirm("您的邮箱已注册，请直接登录","提示",
-          {
-            confirmButtonText: '立即登录',
-            showCancelButton:false,
-          }).then(res=>{
-            router.push('/login')
-          }).catch(()=>{})
-        }else if(Math.random()>0.5){
-          phoneRef.value.validateMessage='该手机号已绑定其他账号，请检查'
-          phoneRef.value.validateState='error'
-        }else if(Math.random()>0.25){
-          //TODO 注册成功，跳转
-          sessionStorage.setItem('transitionPageMessage','register')
-          router.replace('/transitionPage')
-        }else{
-          ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
-          {
-            confirmButtonText: '复制邮箱',
-            showCancelButton:false,
-          }).then(res=>{
-            copyEmail()
-          }).catch(()=>{})
+        let params={
+          CompanyName:register.form.companyName,
+          Name:register.form.userName,
+          Email:register.form.email,
+          SmsCode:register.form.verificationCode,
+          Password:md5(register.form.password)
         }
+        // registerApi(params).then(res=>{
+        //   console.log(res);
+        //   if(Math.random()>0.75){
+        //     ElMessageBox.confirm("您的邮箱已注册，请直接登录","提示",
+        //     {
+        //       confirmButtonText: '立即登录',
+        //       showCancelButton:false,
+        //     }).then(res=>{
+        //       router.push('/login')
+        //     }).catch(()=>{})
+        //   }else if(Math.random()>0.5){
+        //     phoneRef.value.validateMessage='该手机号已绑定其他账号，请检查'
+        //     phoneRef.value.validateState='error'
+        //   }else if(Math.random()>0.25){
+        //     //TODO 注册成功，跳转
+            sessionStorage.setItem('transitionPageMessage','register')
+            router.replace('/transitionPage')
+        //   }else{
+        //     ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
+        //     {
+        //       confirmButtonText: '复制邮箱',
+        //       showCancelButton:false,
+        //     }).then(res=>{
+        //       copyEmail()
+        //     }).catch(()=>{})
+        //   }
+        // })
       }
     })
   }
@@ -124,6 +142,10 @@ import { useRouter } from 'vue-router';
     }
   }
 
+  const privacyPolicy=()=>{
+    //TODO 去查看隐私政策
+  }
+
 </script>
 
 <template>
@@ -139,24 +161,13 @@ import { useRouter } from 'vue-router';
       <div class="regitser-form-box" id="regitser-form-box">
         <el-form :model="register.form" :rules="register.rules" ref="registerRef">
           <el-form-item prop="userName">
-            <el-input v-model="register.form.userName" size="large" placeholder="请输入姓名" class="form-item"></el-input>
+            <el-input v-model="register.form.userName" size="large" placeholder="请输入姓名"></el-input>
           </el-form-item>
           <el-form-item prop="companyName">
-            <el-input v-model="register.form.companyName" size="large" placeholder="请输入公司名称" class="form-item"></el-input>
-          </el-form-item>
-          <el-form-item prop="phone" ref="phoneRef">
-            <div class="phone-item">
-              <el-select v-model="register.form.phonePre" size="large" style="margin-right: 10px;" placeholder="请选择">
-                <el-option label="+86" value="+86" />
-                <el-option label="101" value="101" />
-                <el-option label="3" value="3" />
-              </el-select>
-              <el-input v-model.trim="register.form.phone" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
-              </el-input>
-            </div>
+            <el-input v-model="register.form.companyName" size="large" placeholder="请输入公司名称"></el-input>
           </el-form-item>
           <el-form-item prop="email">
-            <el-input v-model="register.form.email" size="large" placeholder="请输入邮箱" class="form-item">
+            <el-input v-model="register.form.email" size="large" placeholder="请输入邮箱">
               <template #suffix>
                 <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
                 @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
@@ -165,17 +176,21 @@ import { useRouter } from 'vue-router';
             </el-input>
           </el-form-item>
           <el-form-item prop="verificationCode" >
-            <el-input v-model="register.form.verificationCode" size="large" placeholder="请输入邮箱验证码" class="form-item"></el-input>
+            <el-input v-model.trim="register.form.verificationCode" size="large" placeholder="请输入邮箱验证码"></el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <el-input v-model="register.form.password" size="large" type="password" placeholder="请输入密码" class="form-item"></el-input>
+            <el-input v-model="register.form.password" size="large" type="password" placeholder="请输入密码"></el-input>
           </el-form-item>
           <el-form-item prop="passwordConfirm" style="margin-bottom: 0;">
-            <el-input v-model="register.form.passwordConfirm" size="large" type="password" placeholder="请再次输入密码" class="form-item"></el-input>
+            <el-input v-model="register.form.passwordConfirm" size="large" type="password" placeholder="请再次输入密码"></el-input>
           </el-form-item>
         </el-form>
         <el-button type="primary" @click="registerSubmit" class="register-button" size="large">提交信息</el-button>
         <div class="login-row">已有账号<span @click="loginPageGo">去登录</span></div>
+        <div class="privacy-policy">
+          <el-checkbox v-model="hasChecked" label="我已阅读并同意" style="color:#333333"></el-checkbox>
+          <span @click="privacyPolicy" class="policy">弘则研报隐私政策</span>
+        </div>
         <div class="question-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
       </div>
     </div>
@@ -197,14 +212,6 @@ import { useRouter } from 'vue-router';
       justify-content: center;
       flex-direction: column;
       align-items: center;
-      .phone-item{
-        width: 100%;
-        display: flex;
-        align-items: center;
-      }
-      // .form-item{
-        // width: 317px;
-      // }
       .register-button{
         margin-top: 40px;
         width: 100%;
@@ -223,6 +230,19 @@ import { useRouter } from 'vue-router';
           margin-left: 12px;
         }
       }
+      .privacy-policy{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        margin-bottom: 30px;
+        display: flex;
+        align-items: center;
+        .policy{
+          color: #1856A7;
+          cursor: pointer;
+          margin-left: 12px;
+        }
+      }
       .question-hint{
         font-weight: 400;
         font-size: 14px;
@@ -237,17 +257,5 @@ import { useRouter } from 'vue-router';
     .el-input,.el-input__wrapper{
       width: 360px;
     }
-    .phone-item{
-      width: 360px;
-      .el-select{
-        .el-input,.el-input__wrapper{
-          width: 90px;
-        }
-      }
-      .el-input,.el-input__wrapper{
-        flex-grow: 1;
-        width: unset;
-      }
-    }
   }
 </style>

src/views/verification/transitionPage.vue

@@ -6,7 +6,7 @@
      * register - 注册成功
      * bindPhone - 绑定手机号
      */
-    const transitionType=ref('bindPhone')
+    const transitionType=ref()
     
     let timer=null
     const time = ref(3)
@@ -26,25 +26,25 @@
 
     // -------------------created
 
-    // transitionType.value = sessionStorage.getItem('transitionPageMessage')
-
-    // // 判断是否是正常操作后的跳转，而不是人工在地址栏做的跳转
-    // if(!transitionType.value){
-    //     router.replace('/')
-    // }else{
-    //     if(transitionType.value =='register'){
-    //         // 设置定时器
-    //         timer=setInterval(()=>{
-    //             if(time.value==1){
-    //                 ybPageGo()
-    //                 return 
-    //             }
-    //             time.value--
-    //         },1000)
-    //     }
-    // }
-    // // 清除
-    // sessionStorage.removeItem('transitionPageMessage')
+    transitionType.value = sessionStorage.getItem('transitionPageMessage')
+    console.log(transitionType.value);
+    // 判断是否是正常操作后的跳转，而不是人工在地址栏做的跳转
+    if(!transitionType.value){
+        router.replace('/')
+    }else{
+        if(transitionType.value =='bindPhone'){
+            // 设置定时器
+            timer=setInterval(()=>{
+                if(time.value==1){
+                    ybPageGo()
+                    return 
+                }
+                time.value--
+            },1000)
+        }
+    }
+    // 清除
+    sessionStorage.removeItem('transitionPageMessage')
     
 </script>