Skip to content

T
ty_patentSys
Commit c424bd73 by liudx
Options

新增个人中心页面

parent 7dadbb5e
Showing with 676 additions and 89 deletions
src/components/HeaderCon.vue
......@@ -7,27 +7,35 @@
<div class="header_right">
<!-- <img src="" alt=""> -->
<span class="portrait"></span>
<a-popover overlayClassName="portrait_set">
<a-popover>
<template #content>
<div class="portrait_btn" @mouseenter="hover($event, '1')">
<span v-if="hover_num == 1" @click="toset">
<div
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;
<span :class="[hover_num == 1 ? 'active' : '']">用户设置</span>
<span style="color: #3e7bfa">用户设置</span>
</span>
<span v-else>
<img src="@/static/common/icon-yhsz.png" alt="" />&nbsp;
<span :class="[hover_num == 1 ? '' : 'active']">用户设置</span>
<span>用户设置</span>
</span>
</div>
<br />
<div class="portrait_btn" @mouseenter="hover($event, '2')">
<span v-if="hover_num == 2" @click="exit">
<div
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;
<span :class="[hover_num == 2 ? 'active' : '']">退出登录</span>
<span style="color: #3e7bfa">退出登录</span>
</span>
<span v-else>
<img src="@/static/common/icon-tcdl.png" alt="" />&nbsp;
<span :class="[hover_num == 2 ? '' : 'active']">退出登录</span>
<span>退出登录</span>
</span>
</div>
</template>
......@@ -46,7 +54,7 @@ export default {
},
data() {
return {
hover_num: "",
hover_num: 0,
};
},
methods: {
......@@ -54,12 +62,23 @@ export default {
// console.log(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>
......@@ -88,7 +107,7 @@ export default {
width: 60px;
height: 60px;
background-color: pink;
.portrait_set {
.portrait_btn {
cursor: pointer !important;
.active {
......@@ -96,6 +115,8 @@ export default {
}
}
}
.portrait_set > .ant-popover-inner-content {
cursor: pointer;
}
.tel {
......
src/router/index.js
......@@ -3,14 +3,24 @@ import { createRouter, createWebHistory } from 'vue-router'
import login from "../views/login/index.vue"
import home from "../views/home/home.vue"
import index from "../views/home/index.vue"
//企业页面
import company from "../views/company/index.vue"
//专利页面
import patent from "../views/patent/index.vue"
import patentDetails from "../views/patent/patentDetails.vue"
//历史记录
import history from "../views/history/index.vue"
//我的关注
import follow from "../views/follow/index.vue"
//管理员登录
import AdminLogin from "../views/login/admin.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 = [
{
......@@ -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',
// 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(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = store.state.token;
// token && (config.headers.Authorization = token);
const token = localStorage.getItem('token') || '';
if (token) {
// config.params = { 'token': token } //如果要求携带在参数中
config.headers.token = token; //如果要求携带在请求头中
}
return config;
},
error => {
......
src/views/home/index.vue
......@@ -30,6 +30,7 @@
<router-view />
</div>
</div>
</template>
<script>
......
src/views/login/admin.vue
......@@ -101,7 +101,7 @@
</template>
<script>
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";
export default {
name: "AdminLogin",
......
src/views/login/forget.vue
......@@ -21,12 +21,13 @@
<div class="con_right">
<div class="login_title">
<span>忘记密码</span>
<span style="float: right;" class="admin_login">
<img src="../../static/login/icon-glydl.png" alt="">&nbsp;&nbsp;
<span style="float: right" class="admin_login">
<img src="../../static/login/icon-glydl.png" alt="" />&nbsp;&nbsp;
<router-link to="/login">账户登录</router-link>
</span>
</div>
<a-form
v-if="!resetShow"
:model="formState"
name="normal_login"
class="login-form"
......@@ -34,12 +35,18 @@
@finishFailed="onFinishFailed"
>
<a-form-item
name="username"
name="phone"
:rules="[
{ 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>
<img src="../../static/login/icon-user.png" alt="" />
</template>
......@@ -47,10 +54,8 @@
</a-form-item>
<a-form-item
name="decode"
:rules="[
{ required: true, message: '请输入验证码！' },
]"
name="code"
:rules="[{ required: true, message: '请输入验证码！' }]"
>
<a-input v-model:value="formState.code" placeholder="请输入验证码">
<template #prefix>
......@@ -60,20 +65,21 @@
<span v-show="!isSend" class="code" @click="sendCode"
>获取验证码</span
>
<span v-show="isSend" class="send_code"
>{{ RemainingTime }}秒后重新获取</span
>
<span v-show="isSend" class="code">
{{ RemainingTime }}
秒后重新获取
</span>
</template>
</a-input>
</a-form-item>
<a-form-item
name="password"
:rules="[
{ required: true, message: '请输入密码！' },
]"
:rules="[{ required: true, message: '请输入密码！' }]"
>
<a-input-password
v-model:value="formState.password"
placeholder="请输入新密码"
>
<a-input-password v-model:value="formState.password" placeholder="请输入新密码">
<template #prefix>
<img src="../../static/login/icon-password.png" alt="" />
</template>
......@@ -81,11 +87,12 @@
</a-form-item>
<a-form-item
name="password"
:rules="[
{ required: true, message: '请输入密码！' },
]"
:rules="[{ required: true, message: '请输入密码！' }]"
>
<a-input-password
v-model:value="formState.repassword"
placeholder="请再次输入新密码"
>
<a-input-password v-model:value="formState.repassword" placeholder="请再次输入新密码">
<template #prefix>
<img src="../../static/login/icon-password.png" alt="" />
</template>
......@@ -96,16 +103,39 @@
type="primary"
html-type="submit"
class="login-form-button"
@click="reset"
>
重置密码
</a-button>
</a-form-item>
</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>
<footer>
<a 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"
<a
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
><br />
<span>版权所有：北京中研硕福科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;</span
......@@ -114,20 +144,82 @@
</div>
</template>
<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 {
name: "forget",
data() {
return {
isSend:false,
RemainingTime:60,
isSend: false,
resetShow: false,
timer: null,
RemainingTime: 0,
formState: {
username: "",
phone: "",
code: "",
password:"",
repassword:""
password: "",
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>
<style lang="less" scoped>
......@@ -135,7 +227,7 @@ export default {
height: 50px;
}
/deep/.ant-form {
margin-top:30px;
margin-top: 30px;
clear: both;
}
/deep/.login-form-button {
......@@ -144,8 +236,7 @@ export default {
font-weight: bold;
font-size: 18px;
}
/deep/.ant-form-item-control-input{
/deep/.ant-form-item-control-input {
height: 60px;
}
.login {
......@@ -227,13 +318,13 @@ export default {
border-bottom: 3px solid rgba(82, 113, 233, 1);
}
}
.code{
color: #3E7BFA;
.code {
color: #3e7bfa;
cursor: pointer;
}
}
.admin_login{
img{
.admin_login {
img {
width: 20px;
vertical-align: middle;
}
......@@ -243,5 +334,19 @@ export default {
text-align: center;
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>
src/views/login/index.vue
......@@ -52,16 +52,11 @@
</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
>
</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-button
......@@ -114,7 +109,7 @@
</template>
<script>
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";
export default {
name: "login",
......@@ -123,43 +118,57 @@ export default {
formState: {
username: "",
password: "",
remember: true,
autologin: false,
remember: 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: {
//账号登录
login(){
login() {
console.log(this.formState.username)
let param = AES_Encrypt(
JSON.stringify({
login_name:this.formState.username,
password:this.formState.password,
login_name: this.formState.username,
password: this.formState.password,
})
);
login({
param,
}).then((res) => {
console.log(res)
if(res.code == 0){
message.success('登录成功')
this.$store.commit('setTOKEN',res.data.token)
localStorage.setItem('token',res.data.token)
if (res.code == 0) {
message.success("登录成功");
this.$store.commit("setTOKEN", 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({
path:'/index'
})
}else{
message.error(res.msg)
path: "/index",
});
} else {
message.error(res.msg);
}
});
},
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