From 4eca4793f2e061a9c187e063e6f0d52eb24e460f Mon Sep 17 00:00:00 2001 From: x ronger Date: Mon, 9 Nov 2020 22:02:00 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=94=A8=E6=88=B7=E6=89=A9?= =?UTF-8?q?=E5=B1=95-=E7=AB=99=E7=82=B9=E9=93=BE=E6=8E=A5=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layouts/pc/header.vue | 2 +- components/widget/portfolios.vue | 2 +- nuxt.config.js | 7 +- pages/user/_nickname.vue | 14 ++ pages/user/settings.vue | 14 +- pages/user/settings/account.vue | 236 +++++++++---------------------- plugins/fontawesome.js | 16 +++ plugins/vue-cropper.js | 4 + store/user.js | 16 +++ 9 files changed, 139 insertions(+), 172 deletions(-) create mode 100644 plugins/fontawesome.js create mode 100644 plugins/vue-cropper.js diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue index 8e0cda7..733ab0b 100644 --- a/components/layouts/pc/header.vue +++ b/components/layouts/pc/header.vue @@ -64,8 +64,8 @@ {{ nickname }} 系统管理 - 资料与账号 我的草稿 + 设置 退出登录 diff --git a/components/widget/portfolios.vue b/components/widget/portfolios.vue index bd9ddac..677f44b 100644 --- a/components/widget/portfolios.vue +++ b/components/widget/portfolios.vue @@ -45,7 +45,7 @@ export default { name: "portfolios", props: { - portfolios: [] + portfolios: Array }, data() { return { diff --git a/nuxt.config.js b/nuxt.config.js index 5be9b31..8b77b6a 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -46,7 +46,8 @@ export default { ** Global CSS */ css: [ - 'element-ui/lib/theme-chalk/index.css' + 'element-ui/lib/theme-chalk/index.css', + '@fortawesome/fontawesome-svg-core/styles.css' ], /* ** Plugins to load before mounting the App @@ -57,7 +58,9 @@ export default { {src: '~/plugins/extend'}, {src: '~/plugins/axios'}, {src: '~/plugins/element-ui'}, - {src: '~/plugins/vditor', ssr: false} + {src: '~/plugins/vditor', ssr: false}, + {src: '~/plugins/fontawesome'}, + // {src: '~/plugins/vue-cropper', ssr: false} ], /* ** Nuxt.js dev-modules diff --git a/pages/user/_nickname.vue b/pages/user/_nickname.vue index 08cd7e2..a1e07b6 100644 --- a/pages/user/_nickname.vue +++ b/pages/user/_nickname.vue @@ -11,6 +11,13 @@

{{ user.nickname }}

+
+ + + + + +
取消关注 @@ -70,6 +77,7 @@ export default { store .dispatch('user/fetchDetail', params) .catch(err => error({statusCode: 404})), + store.dispatch('user/fetchUserExtend', params), store.dispatch('user/fetchArticleList', params), store.dispatch('user/fetchPortfolioList', params), store.dispatch('user/fetchFollowerList', params), @@ -79,6 +87,7 @@ export default { computed: { ...mapState({ user: state => state.user.data, + userExtend: state => state.user.userExtend, articles: state => state.user.articles, portfolios: state => state.user.portfolios, followers: state => state.user.followers, @@ -294,4 +303,9 @@ h3, .h3 { .tab-content { min-height: 50vh; } + +.user-link { + font-size: 24px; + margin: 0 0.5rem; +} diff --git a/pages/user/settings.vue b/pages/user/settings.vue index bf6c189..1c459f2 100644 --- a/pages/user/settings.vue +++ b/pages/user/settings.vue @@ -8,7 +8,19 @@ @select="handleSelectMenu"> - 资料与账号 + 基本信息 + + + + 我的头像 + + + + 账户安全 + + + + 通知方式 diff --git a/pages/user/settings/account.vue b/pages/user/settings/account.vue index 64b822f..92120e2 100644 --- a/pages/user/settings/account.vue +++ b/pages/user/settings/account.vue @@ -1,88 +1,71 @@ diff --git a/plugins/fontawesome.js b/plugins/fontawesome.js new file mode 100644 index 0000000..7fe6184 --- /dev/null +++ b/plugins/fontawesome.js @@ -0,0 +1,16 @@ +import Vue from 'vue' +import { library, config } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { fas } from '@fortawesome/free-solid-svg-icons' +import { fab } from '@fortawesome/free-brands-svg-icons' + +// This is important, we are going to let Nuxt.js worry about the CSS +config.autoAddCss = false + +// You can add your icons directly in this plugin. See other examples for how you +// can add other styles or just individual icons. +library.add(fas) +library.add(fab) + +// Register the component globally +Vue.component('font-awesome-icon', FontAwesomeIcon) diff --git a/plugins/vue-cropper.js b/plugins/vue-cropper.js new file mode 100644 index 0000000..ef1ab55 --- /dev/null +++ b/plugins/vue-cropper.js @@ -0,0 +1,4 @@ +import Vue from 'vue'; +import VueCropper from 'vue-cropperjs'; +import 'cropperjs/dist/cropper.css'; +Vue.component('vue-cropper', VueCropper); diff --git a/store/user.js b/store/user.js index 9a29f64..c2b2c76 100644 --- a/store/user.js +++ b/store/user.js @@ -10,6 +10,7 @@ export const state = () => { return { fetching: false, data: [], + userExtend: {}, articles: { articles: [], pagination: {} @@ -36,6 +37,9 @@ export const mutations = { updateDetailData(state, action) { state.data = action }, + updateUserExtendData(state, action) { + state.userExtend = action + }, updateArticleList(state, action) { state.articles = action }, @@ -63,6 +67,18 @@ export const actions = { commit('updateFetching', false) }) }, + fetchUserExtend({ commit }, params) { + commit('updateFetching', true); + return this.$axios + .$get(`${USER_API_PATH}/${params.nickname}/user-extend`) + .then(response => { + commit('updateUserExtendData', response) + commit('updateFetching', false) + }) + .catch(error => { + commit('updateFetching', false) + }) + }, fetchArticleList({commit}, params) { commit('updateFetching', true); return this.$axios