Skip to content

Commit 8b8f426

Browse files
sendyasendya
committed
add: account center page
1 parent fcc805c commit 8b8f426

File tree

7 files changed

+446
-14
lines changed

7 files changed

+446
-14
lines changed

‎src/main.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,11 @@ import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
1313
import * as dayjs from 'dayjs' // 日期时间支持库
1414

1515
import '@/permission' // permission control
16+
import '@/utils/filter' // base filter
1617

1718
import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
1819
import config from '@/defaultConfig'
1920

20-
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
21-
return dayjs(dataStr).format(pattern)
22-
})
23-
24-
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
25-
return dayjs(dataStr).format(pattern)
26-
})
27-
2821
Vue.config.productionTip = false
2922

3023
Vue.use(Storage, config.storageOptions)

‎src/utils/filter.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Vue from "vue";
2+
import * as dayjs from "dayjs";
3+
4+
Vue.filter('NumberFormat', function (value) {
5+
if (!value) {
6+
return '0'
7+
}
8+
let intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
9+
return intPartFormat
10+
})
11+
12+
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
13+
return dayjs(dataStr).format(pattern)
14+
})
15+
16+
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
17+
return dayjs(dataStr).format(pattern)
18+
})

‎src/views/account/center/Index.vue

Lines changed: 269 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,288 @@
11
<template>
2-
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
3-
account center page
4-
</a-card>
2+
<div class="page-header-wrapper-grid-content-main">
3+
4+
<a-row :gutter="24">
5+
<a-col :md="24" :lg="7">
6+
<!-- :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }" -->
7+
<a-card :bordered="false">
8+
<div class="account-center-avatarHolder">
9+
<div class="avatar">
10+
<img :src="avatar()"/>
11+
</div>
12+
<div class="username">{{ nickname() }}</div>
13+
<div class="bio">海纳百川，有容乃大</div>
14+
</div>
15+
<div class="account-center-detail">
16+
<p>
17+
<i class="title"></i>交互专家
18+
</p>
19+
<p>
20+
<i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
21+
</p>
22+
<p>
23+
<i class="address"></i><span>浙江省</span><span>杭州市</span>
24+
</p>
25+
</div>
26+
<a-divider />
27+
28+
<div class="account-center-tags">
29+
<div class="tagsTitle">标签</div>
30+
<div>
31+
<template v-for="(tag, index) in tags">
32+
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
33+
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
34+
{{`${tag.slice(0, 20)}...`}}
35+
</a-tag>
36+
</a-tooltip>
37+
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
38+
{{tag}}
39+
</a-tag>
40+
</template>
41+
<a-input
42+
v-if="tagInputVisible"
43+
ref="tagInput"
44+
type="text"
45+
size="small"
46+
:style="{ width: '78px' }"
47+
:value="tagInputValue"
48+
@change="handleInputChange"
49+
@blur="handleTagInputConfirm"
50+
@keyup.enter="handleTagInputConfirm"
51+
/>
52+
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
53+
<a-icon type="plus" /> New Tag
54+
</a-tag>
55+
</div>
56+
</div>
57+
<a-divider :dashed="true" />
58+
59+
<div class="account-center-team">
60+
<div class="teamTitle">团队</div>
61+
<a-spin :spinning="teamSpinning">
62+
<div class="members">
63+
<a-row>
64+
<a-col :span="12" v-for="(item, index) in teams" :key="index">
65+
<a>
66+
<a-avatar size="small" :src="item.avatar" />
67+
<span class="member">{{ item.name }}</span>
68+
</a>
69+
</a-col>
70+
</a-row>
71+
</div>
72+
</a-spin>
73+
</div>
74+
</a-card>
75+
</a-col>
76+
<a-col :md="24" :lg="17">
77+
<a-card
78+
style="width:100%"
79+
:bordered="false"
80+
:tabList="tabListNoTitle"
81+
:activeTabKey="noTitleKey"
82+
@tabChange="key => handleTabChange(key, 'noTitleKey')"
83+
>
84+
<article-page v-if="noTitleKey === 'article'"></article-page>
85+
<app-page v-else-if="noTitleKey === 'app'"></app-page>
86+
<project-page v-else="noTitleKey === 'project'"></project-page>
87+
</a-card>
88+
</a-col>
89+
</a-row>
90+
91+
92+
</div>
593
</template>
694

795
<script>
896
import PageLayout from '@/components/layout/PageLayout'
997
import RouteView from "@/components/layout/RouteView"
98+
import { AppPage, ArticlePage, ProjectPage } from './page'
99+
100+
101+
import { mapGetters } from 'vuex'
10102
11103
export default {
12104
components: {
13105
RouteView,
14-
PageLayout
106+
PageLayout,
107+
AppPage,
108+
ArticlePage,
109+
ProjectPage
15110
},
16-
data () {
111+
data() {
17112
return {
113+
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
114+
115+
tagInputVisible: false,
116+
tagInputValue: '',
117+
118+
teams: [],
119+
teamSpinning: true,
18120
121+
tabListNoTitle: [{
122+
key: 'article',
123+
tab: '文章(8)',
124+
}, {
125+
key: 'app',
126+
tab: '应用(8)',
127+
}, {
128+
key: 'project',
129+
tab: '项目(8)',
130+
}
131+
],
132+
noTitleKey: 'app',
19133
}
20134
},
135+
mounted () {
136+
this.getTeams()
137+
},
21138
methods: {
139+
...mapGetters(["nickname", "avatar"]),
140+
141+
getTeams() {
142+
this.$http.get('/workplace/teams')
143+
.then(res => {
144+
this.teams = res.result
145+
this.teamSpinning = false
146+
})
147+
},
22148
149+
handleTabChange (key, type) {
150+
this[type] = key
151+
},
152+
153+
handleTagClose (removeTag) {
154+
const tags = this.tags.filter(tag => tag != removeTag)
155+
this.tags = tags
156+
},
157+
158+
showTagInput () {
159+
this.tagInputVisible = true
160+
this.$nextTick(() => {
161+
this.$refs.tagInput.focus()
162+
})
163+
},
164+
165+
handleInputChange (e) {
166+
this.tagInputValue = e.target.value
167+
},
168+
169+
handleTagInputConfirm () {
170+
const inputValue = this.tagInputValue
171+
let tags = this.tags
172+
if (inputValue && tags.indexOf(inputValue) === -1) {
173+
tags = [...tags, inputValue]
174+
}
175+
176+
Object.assign(this, {
177+
tags,
178+
tagInputVisible: false,
179+
tagInputValue: ''
180+
})
181+
}
23182
},
24183
}
25-
</script>
184+
</script>
185+
186+
<style lang="scss" scoped>
187+
.page-header-wrapper-grid-content-main {
188+
width: 100%;
189+
height: 100%;
190+
min-height: 100%;
191+
transition: .3s;
192+
193+
.account-center-avatarHolder {
194+
text-align: center;
195+
margin-bottom: 24px;
196+
197+
& > .avatar {
198+
margin: 0 auto;
199+
width: 104px;
200+
height: 104px;
201+
margin-bottom: 20px;
202+
border-radius: 50%;
203+
overflow: hidden;
204+
img {
205+
height: 100%;
206+
width: 100%;
207+
}
208+
}
209+
210+
.username {
211+
color: rgba(0, 0, 0, 0.85);
212+
font-size: 20px;
213+
line-height: 28px;
214+
font-weight: 500;
215+
margin-bottom: 4px;
216+
}
217+
}
218+
219+
.account-center-detail {
220+
221+
p {
222+
margin-bottom: 8px;
223+
padding-left: 26px;
224+
position: relative;
225+
}
226+
227+
i {
228+
position: absolute;
229+
height: 14px;
230+
width: 14px;
231+
left: 0;
232+
top: 4px;
233+
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
234+
}
235+
236+
.title {
237+
background-position: 0 0;
238+
}
239+
.group {
240+
background-position: 0 -22px;
241+
}
242+
.address {
243+
background-position: 0 -44px;
244+
}
245+
}
246+
247+
.account-center-tags {
248+
.ant-tag {
249+
margin-bottom: 8px;
250+
}
251+
}
252+
253+
.account-center-team {
254+
255+
.members {
256+
a {
257+
display: block;
258+
margin: 12px 0;
259+
line-height: 24px;
260+
height: 24px;
261+
.member {
262+
font-size: 14px;
263+
color: rgba(0, 0, 0, .65);
264+
line-height: 24px;
265+
max-width: 100px;
266+
vertical-align: top;
267+
margin-left: 12px;
268+
transition: all 0.3s;
269+
display: inline-block;
270+
}
271+
&:hover {
272+
span {
273+
color: #1890ff;
274+
}
275+
}
276+
}
277+
}
278+
}
279+
280+
.tagsTitle, .teamTitle {
281+
font-weight: 500;
282+
color: rgba(0,0,0,.85);
283+
margin-bottom: 12px;
284+
}
285+
286+
}
287+
288+
</style>

0 commit comments

Comments
 (0)