201206030/novel-front-web
1
0
Fork 0
mirror of https://github.com/201206030/novel-front-web.git synced 2025-04-27 07:50:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 增加账号设置页面

Browse Source
This commit is contained in:
xiongxiaoyang 2022-05-22 10:31:58 +08:00
parent 9b006fa9d9
commit bd4e5a7f7b
8 changed files with 194 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@ -3,5 +3,6 @@
ENV = 'development'
VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api/front'
VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'

1
.env.production
View File

@ -3,3 +3,4 @@
ENV = 'production'
VUE_APP_BASE_API_URL = 'http://47.106.243.172:8888/api/front'
VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'

8
src/api/user.js
View File

@ -23,3 +23,11 @@ export function deleteComment(id) {
export function updateComment(id,content) {
return request.putForm(`/user/comment/${id}`,content);
}
export function getUserinfo() {
return request.get('/user');
}
export function updateUserInfo(userInfo) {
return request.put('/user',userInfo);
}

4
src/components/common/Top.vue
View File

@ -32,8 +32,8 @@
</span>
<span v-if="token" class="user_link"
><!--<i class="line mr20">|</i
>--><a class="mr15">{{ nickName }}</a
><a @click="logout" href="javascript:void(0)">退出</a></span
>--><router-link :to="{name:'userSetup'}" class="mr15">{{ nickName }}</router-link>
<a @click="logout" href="javascript:void(0)">退出</a></span
>
</div>
</div>

6
src/router/index.js
View File

@ -61,6 +61,12 @@ const router = createRouter({
name: 'bookContent',
component: () => import('@/views/BookContent')
},
{
path: '/user/setup',
name: 'userSetup',
component: () => import('@/views/UserSetup')
}
]
})

3
src/views/Book.vue
View File

@ -155,7 +155,7 @@
:key="index"
>
<div class="user_heads fl" vals="389">
<img :src="man" class="user_head" alt="" /><span
<img :src="item.commentUserPhoto ? uploadImgBaseUrl + item.commentUserPhoto : man" class="user_head" alt="" /><span
class="user_level1"
style="display: none"
>见习</span
@ -358,6 +358,7 @@ export default {
commentContent: "",
newestComments: {},
imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
uploadImgBaseUrl: process.env.VUE_APP_BASE_UPLOAD_IMG_URL,
dialogUpdateCommentFormVisible: false,
commentId: "",
updateComment: ""

3
src/views/Register.vue
View File

@ -148,8 +148,9 @@ export default {
ElMessage.error("用户名不能为空！");
return;
}
if (!/^1[3|4|5|6|7|8|9][0-9]{9}/.test(state.username)) {
if (!/^1[3-9]\d{9}$/.test(state.username)) {
ElMessage.error("手机号格式不正确！");
return;
}
if (!state.password) {
ElMessage.error("密码不能为空！");

171
src/views/UserSetup.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<Header />
<div class="main box_center cf">
<div class="userBox cf">
<div class="my_l">
<ul class="log_list">
<li><a class="link_8 on">账号设置</a></li>
</ul>
</div>
<div class="my_r">
<div class="my_info cf">
<div class="my_info_txt">
<ul class="mytab_list">
<li>
<i class="tit">我的头像</i>
<el-upload
class="avatar-uploader"
:action="baseUrl + '/resource/image'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
:src="userPhoto ? uploadImgBaseUrl + userPhoto : man"
class="avatar"
/>
</el-upload>
<!--
<a style="position: relative">
<img
id="imgLogo"
class="user_img"
alt="我的头像"
:src="userPhoto ? (uploadImgBaseUrl + userPhoto) : man"
/>
<input
class="opacity"
onchange="picChange()"
type="file"
id="file0"
name="file"
title="点击上传图片"
style="
z-index: 100;
cursor: pointer;
left: 0px;
top: -25px;
width: 60px;
height: 80px;
opacity: 0;
position: absolute;
"
/>
</a>-->
</li>
<li>
<i class="tit">我的昵称</i
><a id="my_name"
>{{ nickName
}}<!--<em class="ml10">[修改]</em>--></a
>
</li>
<li style="display: none">
<i class="tit">电子邮箱</i><a href="javascript:void(0);"></a>
</li>
<li>
<i class="tit">我的性别</i
><a id="my_sex">男<!--<em class="ml10">[修改]</em>--></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<Footer />
</template>
<script>
import "@/assets/styles/user.css";
import man from "@/assets/images/man.png";
import { reactive, toRefs, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { UploadProps } from "element-plus";
import { getImgVerifyCode } from "@/api/resource";
import { getUserinfo ,updateUserInfo} from "@/api/user";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
export default {
name: "userSetup",
components: {
Header,
Footer,
},
setup() {
const route = useRoute();
const router = useRouter();
const state = reactive({
userPhoto: "",
nickName: "",
baseUrl: process.env.VUE_APP_BASE_API_URL,
uploadImgBaseUrl: process.env.VUE_APP_BASE_UPLOAD_IMG_URL,
});
onMounted(async () => {
const { data } = await getUserinfo();
state.userPhoto = data.userPhoto;
state.nickName = data.nickName;
});
const beforeAvatarUpload = (rawFile) => {
if (rawFile.type !== "image/jpeg") {
ElMessage.error("必须上传 JPG 格式的图片!");
return false;
} else if (rawFile.size / 1024 / 1024 > 5) {
ElMessage.error("图片大小最多 5MB!");
return false;
}
return true;
};
const handleAvatarSuccess = (response, uploadFile) => {
state.userPhoto = response.data;
updateUserInfo({'userPhoto':state.userPhoto});
};
return {
...toRefs(state),
man,
beforeAvatarUpload,
handleAvatarSuccess
};
},
};
</script>
<style scoped>
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>