mirror of https://github.com/halo-dev/halo-admin
完成评论消息组件
ruibaby
parent
3dcfdad849
commit
f8bd554dd6
|
|
@ -8,4 +8,4 @@ module.exports = {
|
|||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ body {
|
|||
}
|
||||
|
||||
.avatar {
|
||||
margin: 20px 8px 20px 0;
|
||||
margin: 20px 0 20px 0;
|
||||
color: #1890ff;
|
||||
background: hsla(0, 0%, 100%, .85);
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
|
||||
<template slot="content">
|
||||
<a-spin :spinning="loadding">
|
||||
<a-tabs>
|
||||
<a-tab-pane v-for="(tab, k) in tabs" :tab="tab.title" :key="k">
|
||||
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</template>
|
||||
<span @click="fetchNotice" class="header-notice">
|
||||
<a-badge count="12">
|
||||
<a-icon style="font-size: 16px; padding: 4px" type="bell" />
|
||||
</a-badge>
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
props: {
|
||||
tabs: {
|
||||
type: Array,
|
||||
default: null,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchNotice() {
|
||||
if (this.loadding) {
|
||||
this.loadding = false
|
||||
return
|
||||
}
|
||||
this.loadding = true
|
||||
setTimeout(() => {
|
||||
this.loadding = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<a-popover
|
||||
v-model="visible"
|
||||
trigger="click"
|
||||
placement="bottomRight"
|
||||
:autoAdjustOverflow="true"
|
||||
:arrowPointAtCenter="true"
|
||||
overlayClassName="header-comment-wrapper"
|
||||
:overlayStyle="{ width: '300px', top: '50px' }"
|
||||
>
|
||||
<template slot="content">
|
||||
<a-spin :spinning="loadding">
|
||||
<a-list>
|
||||
<a-list-item v-for="comment in comments" :key="comment.id">
|
||||
<a-list-item-meta title="立个Flag，共同努力" description="一天前">
|
||||
<a-avatar
|
||||
style="background-color: white"
|
||||
slot="avatar"
|
||||
src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
|
||||
/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="感谢！！！非常好的博客系统" description="一天前">
|
||||
<a-avatar
|
||||
style="background-color: white"
|
||||
slot="avatar"
|
||||
src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
|
||||
/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="token就是P2DygQ1psV86JIag，百度验证是在百度资源平台绑定域名的时候验证用的。" description="一天前">
|
||||
<a-avatar
|
||||
style="background-color: white"
|
||||
slot="avatar"
|
||||
src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
|
||||
/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-spin>
|
||||
</template>
|
||||
<span @click="fetchComment" class="header-comment">
|
||||
<a-badge dot>
|
||||
<a-icon type="bell"/>
|
||||
</a-badge>
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commentApi from '@/api/comment'
|
||||
export default {
|
||||
name: 'HeaderComment',
|
||||
data() {
|
||||
return {
|
||||
loadding: false,
|
||||
visible: false,
|
||||
comments: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchComment() {
|
||||
if (!this.visible) {
|
||||
this.loadding = true
|
||||
this.getComment()
|
||||
} else {
|
||||
this.loadding = false
|
||||
}
|
||||
this.visible = !this.visible
|
||||
},
|
||||
getComment() {
|
||||
commentApi.listLatest().then(response => {
|
||||
this.comments = response.data.data
|
||||
this.loadding = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.header-comment-wrapper {
|
||||
top: 50px !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.header-comment {
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<a-popover
|
||||
v-model="visible"
|
||||
trigger="click"
|
||||
placement="bottomRight"
|
||||
:autoAdjustOverflow="true"
|
||||
:arrowPointAtCenter="true"
|
||||
overlayClassName="header-notice-wrapper"
|
||||
:overlayStyle="{ width: '300px', top: '50px' }">
|
||||
<template slot="content">
|
||||
<a-spin :spinning="loadding">
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="通知" key="1">
|
||||
<a-list>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你收到了 14 份新周报" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="消息" key="2">
|
||||
123
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="待办" key="3">
|
||||
123
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</template>
|
||||
<span @click="fetchNotice" class="header-notice">
|
||||
<a-badge count="12">
|
||||
<a-icon style="font-size: 16px; padding: 4px" type="bell" />
|
||||
</a-badge>
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
data() {
|
||||
return {
|
||||
loadding: false,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchNotice() {
|
||||
if (!this.visible) {
|
||||
this.loadding = true
|
||||
setTimeout(() => {
|
||||
this.loadding = false
|
||||
}, 2000)
|
||||
} else {
|
||||
this.loadding = false
|
||||
}
|
||||
this.visible = !this.visible
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.header-notice-wrapper {
|
||||
top: 50px !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<!-- 两步验证 -->
|
||||
<a-modal
|
||||
centered
|
||||
v-model="visible"
|
||||
@cancel="handleCancel"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
|
||||
<template slot="footer">
|
||||
<div :style="{ textAlign: 'center' }">
|
||||
<a-button key="back" @click="handleCancel">返回</a-button>
|
||||
<a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
|
||||
继续
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-spin :spinning="stepLoading">
|
||||
<a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
|
||||
<div class="step-form-wrapper">
|
||||
<p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br />输入 6 位动态码</p>
|
||||
<p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
|
||||
<a-form-item
|
||||
:style="{ textAlign: 'center' }"
|
||||
hasFeedback
|
||||
fieldDecoratorId="stepCode"
|
||||
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
|
||||
>
|
||||
<a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000" />
|
||||
</a-form-item>
|
||||
<p style="text-align: center">
|
||||
<a @click="onForgeStepCode">遗失手机?</a>
|
||||
</p>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stepLoading: false,
|
||||
|
||||
form: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStepOk() {
|
||||
const vm = this
|
||||
this.stepLoading = true
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('values', values)
|
||||
setTimeout(() => {
|
||||
vm.stepLoading = false
|
||||
vm.$emit('success', { values })
|
||||
}, 2000)
|
||||
return
|
||||
}
|
||||
this.stepLoading = false
|
||||
this.$emit('error', { err })
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
this.$emit('cancel')
|
||||
},
|
||||
onForgeStepCode() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.step-form-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,11 +5,15 @@
|
|||
<a-icon type="link"></a-icon>
|
||||
</span>
|
||||
</a>
|
||||
<header-notice class="action"/>
|
||||
<a href="javascript:void(0)" @click="showOptionModal">
|
||||
<span class="action">
|
||||
<a-icon type="setting"></a-icon>
|
||||
</span>
|
||||
</a>
|
||||
<header-comment class="action"/>
|
||||
<a-dropdown>
|
||||
<span class="action ant-dropdown-link user-dropdown-menu">
|
||||
<a-avatar class="avatar" size="small" :src="avatar"/>
|
||||
<span>RYAN0UP</span>
|
||||
</span>
|
||||
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
||||
<a-menu-item key="0">
|
||||
|
|
@ -27,20 +31,24 @@
|
|||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<a-modal title="样式设置" v-model="optionVisible">
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderNotice from './HeaderNotice'
|
||||
import HeaderComment from './HeaderComment'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UserMenu',
|
||||
components: {
|
||||
HeaderNotice
|
||||
HeaderComment
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
optionVisible: false,
|
||||
avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm'
|
||||
}
|
||||
},
|
||||
|
|
@ -68,6 +76,9 @@ export default {
|
|||
},
|
||||
onCancel() {}
|
||||
})
|
||||
},
|
||||
showOptionModal() {
|
||||
this.optionVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue