Skip to content

T
ty_patentSys
Commit c424bd73 by liudx
Options

新增个人中心页面

parent 7dadbb5e
Showing with 684 additions and 97 deletions
src/components/HeaderCon.vue
...@@ -7,27 +7,35 @@ ...@@ -7,27 +7,35 @@
<div class="header_right"> <div class="header_right">
<!-- <img src="" alt=""> --> <!-- <img src="" alt=""> -->
<span class="portrait"></span> <span class="portrait"></span>
<a-popover overlayClassName="portrait_set"> <a-popover>
<template #content> <template #content>
<div class="portrait_btn" @mouseenter="hover($event, '1')"> <div
<span v-if="hover_num == 1" @click="toset"> class="portrait_btn"
@mouseenter="hover($event, '1')"
@mouseleave="leave($event)"
>
<span v-if="hover_num == 1" @click="toset" style="cursor: pointer">
<img src="@/static/common/icon-yhsz-hover.png" alt="" />&nbsp; <img src="@/static/common/icon-yhsz-hover.png" alt="" />&nbsp;
<span :class="[hover_num == 1 ? 'active' : '']">用户设置</span> <span style="color: #3e7bfa">用户设置</span>
</span> </span>
<span v-else> <span v-else>
<img src="@/static/common/icon-yhsz.png" alt="" />&nbsp; <img src="@/static/common/icon-yhsz.png" alt="" />&nbsp;
<span :class="[hover_num == 1 ? '' : 'active']">用户设置</span> <span>用户设置</span>
</span> </span>
</div> </div>
<br /> <br />
<div class="portrait_btn" @mouseenter="hover($event, '2')"> <div
<span v-if="hover_num == 2" @click="exit"> class="portrait_btn"
@mouseenter="hover($event, '2')"
@mouseleave="leave($event)"
>
<span v-if="hover_num == 2" @click="exit" style="cursor: pointer">
<img src="@/static/common/icon-tcdl-hover.png" alt="" />&nbsp; <img src="@/static/common/icon-tcdl-hover.png" alt="" />&nbsp;
<span :class="[hover_num == 2 ? 'active' : '']">退出登录</span> <span style="color: #3e7bfa">退出登录</span>
</span> </span>
<span v-else> <span v-else>
<img src="@/static/common/icon-tcdl.png" alt="" />&nbsp; <img src="@/static/common/icon-tcdl.png" alt="" />&nbsp;
<span :class="[hover_num == 2 ? '' : 'active']">退出登录</span> <span>退出登录</span>
</span> </span>
</div> </div>
</template> </template>
...@@ -46,7 +54,7 @@ export default { ...@@ -46,7 +54,7 @@ export default {
}, },
data() { data() {
return { return {
hover_num: "", hover_num: 0,
}; };
}, },
methods: { methods: {
...@@ -54,12 +62,23 @@ export default { ...@@ -54,12 +62,23 @@ export default {
// console.log(num) // console.log(num)
this.hover_num = num; this.hover_num = num;
}, },
toset(){ leave() {
this.hover_num = 0;
},
toset() {
let routeUrl = this.$router.resolve({
path: "/usersetting",
});
window.open(routeUrl.href, "_blank");
}, },
exit(){ exit() {
} this.$router.push({
path: "/login",
});
localStorage.removeItem('login_name');
localStorage.removeItem('password')
},
}, },
}; };
</script> </script>
...@@ -88,15 +107,17 @@ export default { ...@@ -88,15 +107,17 @@ export default {
width: 60px; width: 60px;
height: 60px; height: 60px;
background-color: pink; background-color: pink;
.portrait_set {
.portrait_btn { .portrait_btn {
cursor: pointer !important; cursor: pointer !important;
.active { .active {
color: #3e7bfa !important; color: #3e7bfa !important;
}
} }
} }
} }
.portrait_set > .ant-popover-inner-content {
cursor: pointer;
}
.tel { .tel {
padding: 0 15px; padding: 0 15px;
......
src/router/index.js
...@@ -3,14 +3,24 @@ import { createRouter, createWebHistory } from 'vue-router' ...@@ -3,14 +3,24 @@ import { createRouter, createWebHistory } from 'vue-router'
import login from "../views/login/index.vue" import login from "../views/login/index.vue"
import home from "../views/home/home.vue" import home from "../views/home/home.vue"
import index from "../views/home/index.vue" import index from "../views/home/index.vue"
//企业页面
import company from "../views/company/index.vue" import company from "../views/company/index.vue"
//专利页面
import patent from "../views/patent/index.vue" import patent from "../views/patent/index.vue"
import patentDetails from "../views/patent/patentDetails.vue" import patentDetails from "../views/patent/patentDetails.vue"
//历史记录
import history from "../views/history/index.vue" import history from "../views/history/index.vue"
//我的关注
import follow from "../views/follow/index.vue" import follow from "../views/follow/index.vue"
//管理员登录
import AdminLogin from "../views/login/admin.vue" import AdminLogin from "../views/login/admin.vue"
//忘记密码
import forget from "../views/login/forget.vue" import forget from "../views/login/forget.vue"
//个人设置
import usersetting from "../views/userset/index.vue"
import personalSetting from "../views/userset/personalSetting.vue"
import securitySetting from "../views/userset/securitySetting.vue"
const routes = [ const routes = [
{ {
...@@ -71,6 +81,25 @@ const routes = [ ...@@ -71,6 +81,25 @@ const routes = [
}, },
] ]
}, },
{
path:'/usersetting',
name:'usersetting',
component:usersetting,
redirect:'/personalSetting',
children:[
{
path:'/personalSetting',
name:'personalSetting',
component:personalSetting,
},
{
path:'/securitySetting',
name:'securitySetting',
component:securitySetting,
}
]
}
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
......
src/utils/API.js deleted 100644 → 0
import { get, post } from './request'
//示例
export const login = p => post('/api/common/login', p);
// export const sendSms = p => post('/api/common/sendSms', p);
// export const sendSms = p => get('/api/home/homeWords',{});
src/utils/loginAPI.js 0 → 100644
import { get, post } from './request'
/**
* 示例
get请求
export const changePassword = p => get('/api/home/changePassword',{});
oost请求
export const login = p => post('/api/common/login', p);
*/
export const login = p => post('/api/common/login', p);
export const changePassword = p => post('/api/common/changePassword',p);
export const sendSms = p => post('/api/common/sendSms',p);
src/utils/request.js
...@@ -12,8 +12,11 @@ axios.interceptors.request.use( ...@@ -12,8 +12,11 @@ axios.interceptors.request.use(
config => { config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = store.state.token; const token = localStorage.getItem('token') || '';
// token && (config.headers.Authorization = token); if (token) {
// config.params = { 'token': token } //如果要求携带在参数中
config.headers.token = token; //如果要求携带在请求头中
}
return config; return config;
}, },
error => { error => {
......
src/views/home/index.vue
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
......
src/views/login/admin.vue
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</template> </template>
<script> <script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js"; import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { login } from "@/utils/API"; import { login } from "@/utils/loginAPI";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
export default { export default {
name: "AdminLogin", name: "AdminLogin",
......
src/views/login/forget.vue
...@@ -21,12 +21,13 @@ ...@@ -21,12 +21,13 @@
<div class="con_right"> <div class="con_right">
<div class="login_title"> <div class="login_title">
<span>忘记密码</span> <span>忘记密码</span>
<span style="float: right;" class="admin_login"> <span style="float: right" class="admin_login">
<img src="../../static/login/icon-glydl.png" alt="">&nbsp;&nbsp; <img src="../../static/login/icon-glydl.png" alt="" />&nbsp;&nbsp;
<router-link to="/login">账户登录</router-link> <router-link to="/login">账户登录</router-link>
</span> </span>
</div> </div>
<a-form <a-form
v-if="!resetShow"
:model="formState" :model="formState"
name="normal_login" name="normal_login"
class="login-form" class="login-form"
...@@ -34,12 +35,18 @@ ...@@ -34,12 +35,18 @@
@finishFailed="onFinishFailed" @finishFailed="onFinishFailed"
> >
<a-form-item <a-form-item
name="username" name="phone"
:rules="[ :rules="[
{ required: true, message: '请输入手机号！' }, { required: true, message: '请输入手机号！' },
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: '手机号格式不正确！',
validateTrigger: 'onBlur',
},
]" ]"
> >
<a-input v-model:value="formState.username" placeholder="请输入手机号"> <a-input v-model:value="formState.phone" placeholder="请输入手机号">
<template #prefix> <template #prefix>
<img src="../../static/login/icon-user.png" alt="" /> <img src="../../static/login/icon-user.png" alt="" />
</template> </template>
...@@ -47,10 +54,8 @@ ...@@ -47,10 +54,8 @@
</a-form-item> </a-form-item>
<a-form-item <a-form-item
name="decode" name="code"
:rules="[ :rules="[{ required: true, message: '请输入验证码！' }]"
{ required: true, message: '请输入验证码！' },
]"
> >
<a-input v-model:value="formState.code" placeholder="请输入验证码"> <a-input v-model:value="formState.code" placeholder="请输入验证码">
<template #prefix> <template #prefix>
...@@ -58,22 +63,23 @@ ...@@ -58,22 +63,23 @@
</template> </template>
<template #suffix> <template #suffix>
<span v-show="!isSend" class="code" @click="sendCode" <span v-show="!isSend" class="code" @click="sendCode"
>获取验证码</span >获取验证码</span
> >
<span v-show="isSend" class="send_code" <span v-show="isSend" class="code">
>{{ RemainingTime }}秒后重新获取</span {{ RemainingTime }}
> 秒后重新获取
</span>
</template> </template>
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
name="password" name="password"
:rules="[ :rules="[{ required: true, message: '请输入密码！' }]"
{ required: true, message: '请输入密码！' },
]"
> >
<a-input-password v-model:value="formState.password" placeholder="请输入新密码"> <a-input-password
v-model:value="formState.password"
placeholder="请输入新密码"
>
<template #prefix> <template #prefix>
<img src="../../static/login/icon-password.png" alt="" /> <img src="../../static/login/icon-password.png" alt="" />
</template> </template>
...@@ -81,11 +87,12 @@ ...@@ -81,11 +87,12 @@
</a-form-item> </a-form-item>
<a-form-item <a-form-item
name="password" name="password"
:rules="[ :rules="[{ required: true, message: '请输入密码！' }]"
{ required: true, message: '请输入密码！' },
]"
> >
<a-input-password v-model:value="formState.repassword" placeholder="请再次输入新密码"> <a-input-password
v-model:value="formState.repassword"
placeholder="请再次输入新密码"
>
<template #prefix> <template #prefix>
<img src="../../static/login/icon-password.png" alt="" /> <img src="../../static/login/icon-password.png" alt="" />
</template> </template>
...@@ -96,16 +103,39 @@ ...@@ -96,16 +103,39 @@
type="primary" type="primary"
html-type="submit" html-type="submit"
class="login-form-button" class="login-form-button"
@click="reset"
> >
重置密码 重置密码
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
<div v-else class="success_reset">
<img src="../../static/login/img-success.png" alt="" />
<br /><br />
<p>您已经成功设置密码，请使用新密码登录</p>
<br /><br />
<a-button
type="primary"
html-type="submit"
class="login-form-button"
@click="tologin"
>
马上登录
</a-button>
</div>
</div> </div>
</div> </div>
<footer> <footer>
<a style="color: #818A9F;" href="http://zhongyanrenzhi.com/#/product2" target="_blank">产品介绍&nbsp;&nbsp;&nbsp;&nbsp;</a>| <a
<a style="color: #818A9F;" target="_blank" href="http://zhongyanrenzhi.com/#/into/1" style="color: #818a9f"
href="http://zhongyanrenzhi.com/#/product2"
target="_blank"
>产品介绍&nbsp;&nbsp;&nbsp;&nbsp;</a
>|
<a
style="color: #818a9f"
target="_blank"
href="http://zhongyanrenzhi.com/#/into/1"
>&nbsp;&nbsp;&nbsp;&nbsp;关于中研认知</a >&nbsp;&nbsp;&nbsp;&nbsp;关于中研认知</a
><br /> ><br />
<span>版权所有：北京中研硕福科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;</span <span>版权所有：北京中研硕福科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;</span
...@@ -114,20 +144,82 @@ ...@@ -114,20 +144,82 @@
</div> </div>
</template> </template>
<script> <script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { message } from "ant-design-vue";
import { changePassword, sendSms } from "@/utils/loginAPI";
export default { export default {
name: "forget", name: "forget",
data() { data() {
return { return {
isSend:false, isSend: false,
RemainingTime:60, resetShow: false,
timer: null,
RemainingTime: 0,
formState: { formState: {
username: "", phone: "",
code: "", code: "",
password:"", password: "",
repassword:"" repassword: "",
}, },
}; };
}, },
methods: {
//发送验证码
sendCode() {
if (this.formState.phone) {
sendSms({ phone: this.formState.phone }).then((res) => {
// console.log(res)
if (res.code == 0) {
this.isSend = true;
const TIME_COUNT = 60;
message.success(res.msg);
//获取验证码倒计时
if (!this.timer) {
this.RemainingTime = TIME_COUNT;
this.isSend = true;
this.timer = setInterval(() => {
if (this.RemainingTime > 0 && this.RemainingTime <= TIME_COUNT) {
this.RemainingTime--;
} else {
this.isSend = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
} else {
message.error(res.msg);
}
});
} else {
message.error("请先输入手机号");
}
},
//reset
reset() {
let param = AES_Encrypt(
JSON.stringify({
phone: this.formState.phone,
code: this.formState.code,
password: this.formState.password,
re_password: this.formState.repassword,
})
);
changePassword({ param }).then((res) => {
// console.log(res)
if (res.code == 0) {
this.resetShow = true;
} else {
message.error(res.msg);
}
});
},
tologin() {
this.$router.push({
path: "/login",
});
},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -135,7 +227,7 @@ export default { ...@@ -135,7 +227,7 @@ export default {
height: 50px; height: 50px;
} }
/deep/.ant-form { /deep/.ant-form {
margin-top:30px; margin-top: 30px;
clear: both; clear: both;
} }
/deep/.login-form-button { /deep/.login-form-button {
...@@ -144,8 +236,7 @@ export default { ...@@ -144,8 +236,7 @@ export default {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
} }
/deep/.ant-form-item-control-input{ /deep/.ant-form-item-control-input {
height: 60px; height: 60px;
} }
.login { .login {
...@@ -227,13 +318,13 @@ export default { ...@@ -227,13 +318,13 @@ export default {
border-bottom: 3px solid rgba(82, 113, 233, 1); border-bottom: 3px solid rgba(82, 113, 233, 1);
} }
} }
.code{ .code {
color: #3E7BFA; color: #3e7bfa;
cursor: pointer; cursor: pointer;
} }
} }
.admin_login{ .admin_login {
img{ img {
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
} }
...@@ -243,5 +334,19 @@ export default { ...@@ -243,5 +334,19 @@ export default {
text-align: center; text-align: center;
color: #818a9f; color: #818a9f;
} }
.success_reset {
text-align: center;
height: 400px;
padding: 30px 0;
img {
width: 169px;
}
p {
font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #999999;
}
}
} }
</style> </style>
src/views/login/index.vue
...@@ -52,16 +52,11 @@ ...@@ -52,16 +52,11 @@
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-form-item name="remember" style="float: left"> <a-form-item name="remember" >
<a-checkbox v-model:checked="formState.remember" <a-checkbox v-model:checked="formState.remember"
>记住密码</a-checkbox >记住密码</a-checkbox
> >
</a-form-item> </a-form-item>
<a-form-item name="remember" style="float: right">
<a-checkbox v-model:checked="formState.autologin"
>自动登录</a-checkbox
>
</a-form-item>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button
...@@ -114,7 +109,7 @@ ...@@ -114,7 +109,7 @@
</template> </template>
<script> <script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js"; import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { login } from "@/utils/API"; import { login } from "@/utils/loginAPI";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
export default { export default {
name: "login", name: "login",
...@@ -123,43 +118,57 @@ export default { ...@@ -123,43 +118,57 @@ export default {
formState: { formState: {
username: "", username: "",
password: "", password: "",
remember: true, remember: false,
autologin: false,
}, },
}; };
}, },
mounted() {}, mounted() {
let login_name = localStorage.getItem("login_name");
let password = localStorage.getItem("password");
console.log(password)
if (login_name && password) {
this.formState.username = login_name;
this.formState.password = password;
this.formState.remember = true
}
},
methods: { methods: {
//账号登录 //账号登录
login(){ login() {
console.log(this.formState.username)
let param = AES_Encrypt( let param = AES_Encrypt(
JSON.stringify({ JSON.stringify({
login_name:this.formState.username, login_name: this.formState.username,
password:this.formState.password, password: this.formState.password,
}) })
); );
login({ login({
param, param,
}).then((res) => { }).then((res) => {
console.log(res) if (res.code == 0) {
if(res.code == 0){
message.success('登录成功') message.success("登录成功");
this.$store.commit('setTOKEN',res.data.token) this.$store.commit("setTOKEN", res.data.token);
localStorage.setItem('token',res.data.token) localStorage.setItem("token", res.data.token);
//记住密码功能
if (this.formState.remember) {
//存在localstroge中
localStorage.setItem("password", this.formState.password);
localStorage.setItem("login_name", this.formState.username);
}
this.$router.push({ this.$router.push({
path:'/index' path: "/index",
}) });
}else{ } else {
message.error(res.msg) message.error(res.msg);
} }
}); });
}, },
send() { send() {
sendSms({phone:15313067271}).then(res=>{ sendSms({ phone: 15313067271 }).then((res) => {});
})
}, },
}, },
}; };
......
src/views/userset/index.vue 0 → 100644
<template>
<div class="user">
<!-- 标题栏 -->
<HeaderCon :username="username"></HeaderCon>
<div class="user_main">
<div class="sider">
<div
:class="[current == item.name ? 'sider_item active' : 'sider_item ']"
v-for="item in siderArr"
:key="item.name"
@click="changepage(item.name)"
>
<img
:src="current == item.name ? item.img_select : item.img"
alt=""
class="sider_item_img"
/>
<div
:class="[
current == item.name
? ' sider_item_name active '
: 'sider_item_name',
]"
>
{{ item.name }}
</div>
</div>
</div>
<router-view></router-view>
</div>
</div>
</template>
<script>
import HeaderCon from "../../components/HeaderCon.vue";
export default {
name: "usersetting",
components: {
HeaderCon,
},
data() {
return {
current: "个人信息",
username: "",
siderArr: [
{
name: "个人信息",
img: require("@/static/user/icon-grxx.png"),
img_select: require("@/static/user/icon-grxx-select.png"),
},
{
name: "安全设置",
img: require("@/static/user/icon-nav02.png"),
img_select: require("@/static/user/icon-aqsz-select.png"),
},
],
};
},
methods: {
changepage(name) {
// console.log(name)
switch (name) {
case "个人信息":
this.$router.push({
path: "/personalSetting",
});
break;
case "安全设置":
this.$router.push({
path: "/securitySetting",
});
break;
}
this.current = name;
},
},
};
</script>
<style lang="less" scoped>
.user {
width: calc(100%);
height: 100%;
.user_main {
height: calc(100% - 65px);
width: 100%;
background-color: #ebebeb;
display: flex;
.home_con {
background-color: #ebebeb;
padding-left: 30px;
width: calc(100% -80px);
flex: 1;
.nav_bread {
height: 50px;
padding: 20px 3px;
background-color: #ebebeb;
}
}
}
.sider {
// height: calc(100% - 70px);
background-color: #002d70;
width: 80px;
.sider_item {
height: 100px;
text-align: center;
padding: 20px 10px 20px 0;
.sider_item_img {
width: 27px;
}
.sider_item_name {
margin-top: 10px;
color: #848bad;
font-size: 14px;
text-align: center;
}
.active {
color: #fff;
}
}
.active {
background-color: #124795;
color: #fff;
}
}
}
</style>
src/views/userset/personalSetting.vue 0 → 100644
<template>
<div class="personal_con">
<!-- 面包屑导航 -->
<a-breadcrumb class="nav_bread">
<a-breadcrumb-item>用户设置</a-breadcrumb-item>
<a-breadcrumb-item>个人信息</a-breadcrumb-item>
</a-breadcrumb>
<!--设置用户信息 -->
<div class="personal_set">
<h2 class="title">个人信息</h2>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 5 }"
autocomplete="off"
>
<a-form-item label="头像" name="img" class="header_label">
<img src="../../static/user/img-tx-big.png" alt="" class="header" />
<a-upload
v-model:file-list="fileList"
name="file"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
@change="handleChange"
>
<span style="cursor: pointer; padding: 0 15px; color: #3e7bfa">
重新上传
</span>
</a-upload>
</a-form-item>
<a-form-item label="账号" name="username">
<a-input v-model:value="formState.username" readOnly />
</a-form-item>
<a-form-item label="姓名" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item
label="手机号"
:rules="[
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: '手机号格式不正确！',
validateTrigger: 'onBlur',
},
]"
name="phone"
>
<a-input placeholder="请输入手机号" v-model:value="formState.phone">
<template #suffix>
<span
class="code"
v-show="phone != '' && phone"
@click="updatePhone"
>修改</span
>
</template>
</a-input>
</a-form-item>
<a-form-item name="code" label="验证码" v-show="!phone">
<a-input
v-model:value="formState.code"
placeholder="请输入手机验证码"
>
<template #suffix>
<span v-show="!isSend" class="code" @click="sendCode"
>获取验证码</span
>
<span v-show="isSend" class="code">
{{ RemainingTime }}
秒后重新获取
</span>
</template>
</a-input>
</a-form-item>
<div class="save_btn">
<a-button type="primary" html-type="submit" @click="save">
保存
</a-button>
</div>
</a-form>
</div>
<!-- 修改手机号弹窗 -->
<a-modal
v-model:visible="visibleupdate"
title="修改手机号"
cancelText="取消"
:confirm-loading="confirmLoading"
okText="确认"
@ok="handleOk"
>
<a-form :model="updateform" style="margin: 0 20%">
<a-form-item
label="手机号"
:rules="[
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: '手机号格式不正确！',
validateTrigger: 'onBlur',
},
]"
name="phone"
>
<a-input placeholder="请输入手机号" v-model:value="updateform.phone">
</a-input>
</a-form-item>
<a-form-item name="code" label="验证码">
<a-input
v-model:value="updateform.code"
placeholder="请输入手机验证码"
>
<template #suffix>
<span v-show="!isSend" class="code" @click="sendCode"
>获取验证码</span
>
<span v-show="isSend" class="code">
{{ RemainingTime }}
秒后重新获取
</span>
</template>
</a-input>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { message } from "ant-design-vue";
import { sendSms } from "@/utils/loginAPI";
export default {
name: "personalSetting",
data() {
return {
visibleupdate: false,
isSend: false,
resetShow: false,
timer: null,
RemainingTime: 0,
phone: "125",
fileList: [],
headers: {
authorization: "authorization-text",
},
formState: {
username: "",
name: "李建国",
phone: "",
code: "",
},
updateform: {
phone: "",
code: "",
},
RemainingTime1: "",
};
},
created() {
//获取个人详细信息
this.formState.phone = "1";
},
mounted() {
this.formState.username = this.$store.state.username;
},
methods: {
handleChange(info) {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
if (info.file.status === "done") {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === "error") {
message.error(`${info.file.name} file upload failed.`);
}
},
//发送验证码
sendCode() {
if (this.formState.phone) {
sendSms({ phone: this.formState.phone }).then((res) => {
// console.log(res)
if (res.code == 0) {
this.isSend = true;
const TIME_COUNT = 60;
message.success(res.msg);
//获取验证码倒计时
if (!this.timer) {
this.RemainingTime = TIME_COUNT;
this.isSend = true;
this.timer = setInterval(() => {
if (
this.RemainingTime > 0 &&
this.RemainingTime <= TIME_COUNT
) {
this.RemainingTime--;
} else {
this.isSend = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
} else {
message.error(res.msg);
}
});
} else {
message.error("请先输入手机号");
}
},
//保存个人信息
save() {},
//修改手机号
updatePhone() {
this.visibleupdate = true;
},
},
};
</script>
<style lang="less" scoped>
:deep(.ant-input) {
height: 32px;
}
:deep(.ant-form-item-label > label) {
height: 32px;
}
.personal_con {
background-color: #ebebeb;
padding-left: 30px;
width: calc(100% - 80px);
flex: 1;
.nav_bread {
height: 50px;
padding: 20px 3px;
background-color: #ebebeb;
}
.personal_set {
width: 100%;
height: calc(100% - 80px);
background-color: #fff;
padding: 40px 40px;
.title {
color: #1c1c28;
font-size: 18px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: bold;
line-height: 28px;
}
.code {
color: #3e7bfa;
cursor: pointer;
}
.header_label {
line-height: 120px;
}
.header {
width: 120px;
height: 120px;
}
.save_btn {
padding-left: 150px;
padding-top: 20px;
}
}
}
</style>
src/views/userset/securitySetting.vue 0 → 100644
<template>
<div>
安全设置
</div>
</template>
<script>
export default {
name:'securitySetting'
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment