<template> <Layout class="author-follow-page"> <LayoutHeader slot='header' :hide="noHeader" theme="white" class="author-page-header" :title="(isMine ? '我' : 'TA') + '的关注'"> <template v-slot:suctionTop> <TabBlock @on-change-tab="onChangeTab"></TabBlock> </template> </LayoutHeader> <UserList ref="userList" :on-fetch="onFetch"> <template v-if="activeType == 0" #item="{ data }"> <TopicItem :data="data"></TopicItem> </template> <template v-slot:empty> <div class="empty-block"> <div class="empty-content"> 暂无关注的{{activeType ? '用户' : '话题'}} </div> </div> </template> </UserList> </Layout> </template> <script> import UserList from './components/user-list'; import TabBlock from './components/follow-tab-block'; import TopicItem from './components/follow-topic-item'; import {createNamespacedHelpers, mapState} from 'vuex'; const {mapActions: userMapActions} = createNamespacedHelpers('user'); export default { name: 'authorFollow', data() { return { isMine: false, activeType: 1 }; }, created() { this._baseParams = { authorType: this.$route.params.type || 1, limit: 20, }; }, activated() { this.init(this.$route.params); this.$refs.userList.init(); }, beforeRouteUpdate(to, from, next) { this.init(to.params); this.$refs.userList.init(); next(); }, computed: { ...mapState(['yoho']), noHeader() { return this.yoho.context.env.isChat; }, }, methods: { ...userMapActions(['authorAttentionList', 'authorMineAttentionList']), init(params) { this.isMine = !params.id; if (!this.isMine) { this._baseParams.authorUid = params.id; } }, onChangeTab({type}) { this.activeType = type; this.$refs.userList.init(); }, onFetch({page, lastedTime}) { let params = Object.assign({page, lastedTime, type: this.activeType}, this._baseParams); return this.isMine ? this.authorMineAttentionList(params) : this.authorAttentionList(params); } }, components: { UserList, TabBlock, TopicItem } }; </script> <style lang="scss" scoped> .author-page-header /deep/ { .layout-header { border-bottom: none !important; } .suction-top-block { position: relative; } .tab-block { border-bottom: 1px solid #e8e8e8; } } .empty-block { position: absolute; width: 100%; height: 100%; background-color: #fff; .empty-content { width: 100%; position: absolute; top: 30%; color: #b7b7b7; text-align: center; font-weight: 300; &:before { content: ""; display: block; width: 196px; height: 196px; background-image: url("~statics/image/userpage/follow-empty.png"); background-size: 100% 100%; margin: 0 auto 34px; } } } </style>