Skip to content

A
ant-design-pro-vue
Commit 8b8f426b by Sendya
Options

add: account center page

parent fcc805c8
Showing with 452 additions and 15 deletions
src/main.js
...@@ -13,18 +13,11 @@ import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less' ...@@ -13,18 +13,11 @@ import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
import * as dayjs from 'dayjs' // 日期时间支持库 import * as dayjs from 'dayjs' // 日期时间支持库
import '@/permission' // permission control import '@/permission' // permission control
import '@/utils/filter' // base filter
import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types" import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
import config from '@/defaultConfig' import config from '@/defaultConfig'
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(Storage, config.storageOptions) Vue.use(Storage, config.storageOptions)
......
src/utils/filter.js 0 → 100644
import Vue from "vue";
import * as dayjs from "dayjs";
Vue.filter('NumberFormat', function (value) {
if (!value) {
return '0'
}
let intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
return intPartFormat
})
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
\ No newline at end of file
src/views/account/center/Index.vue
<template> <template>
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }"> <div class="page-header-wrapper-grid-content-main">
account center page
</a-card> <a-row :gutter="24">
<a-col :md="24" :lg="7">
<!-- :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }" -->
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
<img :src="avatar()"/>
</div>
<div class="username">{{ nickname() }}</div>
<div class="bio">海纳百川，有容乃大</div>
</div>
<div class="account-center-detail">
<p>
<i class="title"></i>交互专家
</p>
<p>
<i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
</p>
<p>
<i class="address"></i><span>浙江省</span><span>杭州市</span>
</p>
</div>
<a-divider />
<div class="account-center-tags">
<div class="tagsTitle">标签</div>
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{`${tag.slice(0, 20)}...`}}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{tag}}
</a-tag>
</template>
<a-input
v-if="tagInputVisible"
ref="tagInput"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputChange"
@blur="handleTagInputConfirm"
@keyup.enter="handleTagInputConfirm"
/>
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
<a-icon type="plus" /> New Tag
</a-tag>
</div>
</div>
<a-divider :dashed="true" />
<div class="account-center-team">
<div class="teamTitle">团队</div>
<a-spin :spinning="teamSpinning">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
</div>
</a-spin>
</div>
</a-card>
</a-col>
<a-col :md="24" :lg="17">
<a-card
style="width:100%"
:bordered="false"
:tabList="tabListNoTitle"
:activeTabKey="noTitleKey"
@tabChange="key => handleTabChange(key, 'noTitleKey')"
>
<article-page v-if="noTitleKey === 'article'"></article-page>
<app-page v-else-if="noTitleKey === 'app'"></app-page>
<project-page v-else="noTitleKey === 'project'"></project-page>
</a-card>
</a-col>
</a-row>
</div>
</template> </template>
<script> <script>
import PageLayout from '@/components/layout/PageLayout' import PageLayout from '@/components/layout/PageLayout'
import RouteView from "@/components/layout/RouteView" import RouteView from "@/components/layout/RouteView"
import { AppPage, ArticlePage, ProjectPage } from './page'
import { mapGetters } from 'vuex'
export default { export default {
components: { components: {
RouteView, RouteView,
PageLayout PageLayout,
AppPage,
ArticlePage,
ProjectPage
}, },
data () { data() {
return { return {
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
tagInputVisible: false,
tagInputValue: '',
teams: [],
teamSpinning: true,
tabListNoTitle: [{
key: 'article',
tab: '文章(8)',
}, {
key: 'app',
tab: '应用(8)',
}, {
key: 'project',
tab: '项目(8)',
}
],
noTitleKey: 'app',
} }
}, },
mounted () {
this.getTeams()
},
methods: { methods: {
...mapGetters(["nickname", "avatar"]),
getTeams() {
this.$http.get('/workplace/teams')
.then(res => {
this.teams = res.result
this.teamSpinning = false
})
},
handleTabChange (key, type) {
this[type] = key
},
handleTagClose (removeTag) {
const tags = this.tags.filter(tag => tag != removeTag)
this.tags = tags
},
showTagInput () {
this.tagInputVisible = true
this.$nextTick(() => {
this.$refs.tagInput.focus()
})
},
handleInputChange (e) {
this.tagInputValue = e.target.value
},
handleTagInputConfirm () {
const inputValue = this.tagInputValue
let tags = this.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
}
}, },
} }
</script> </script>
\ No newline at end of file
<style lang="scss" scoped>
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: .3s;
.account-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
img {
height: 100%;
width: 100%;
}
}
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
}
}
.account-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
}
.title {
background-position: 0 0;
}
.group {
background-position: 0 -22px;
}
.address {
background-position: 0 -44px;
}
}
.account-center-tags {
.ant-tag {
margin-bottom: 8px;
}
}
.account-center-team {
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
}
.tagsTitle, .teamTitle {
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 12px;
}
}
</style>
\ No newline at end of file
src/views/account/center/page/App.vue 0 → 100644
<template>
<div class="app-list">
<a-list :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource">
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
<div class="meta-cardInfo" slot="description">
<div>
<p>活跃用户</p>
<p>
<span>{{ item.activeUser }}<span>万</span></span>
</p>
</div>
<div>
<p>新增用户</p>
<p>{{ item.newUser | NumberFormat }}</p>
</div>
</div>
</a-card-meta>
<template class="ant-card-actions" slot="actions">
<a>
<a-icon type="download"/>
</a>
<a>
<a-icon type="edit"/>
</a>
<a>
<a-icon type="share-alt"/>
</a>
<a>
<a-dropdown>
<a class="ant-dropdown-link" href="javascript:;">
<a-icon type="ellipsis"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</a>
</template>
</a-card>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
activeUser: 17,
newUser: 1700
})
}
export default {
name: "Article",
components: {},
data() {
return {
dataSource,
}
}
}
</script>
<style lang="scss" scoped>
.app-list {
.meta-cardInfo {
zoom: 1;
margin-top: 16px;
> div {
position: relative;
text-align: left;
float: left;
width: 50%;
p {
line-height: 32px;
font-size: 24px;
margin: 0;
&:first-child {
color: rgba(0, 0, 0, .45);
font-size: 12px;
line-height: 20px;
margin-bottom: 4px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/account/center/page/Article.vue 0 → 100644
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
import AList from 'ant-design-vue/es/list'
import AListItem from 'ant-design-vue/es/list/Item'
export default {
name: "Article",
components: {
AList,
AListItem
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/account/center/page/Project.vue 0 → 100644
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
export default {
name: "Project"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/account/center/page/index.js 0 → 100644
import AppPage from './App'
import ArticlePage from './Article'
import ProjectPage from './Project'
export { AppPage, ArticlePage, ProjectPage }
\ 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