PageView.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
  3. <!-- pageHeader , route meta :true on hide -->
  4. <!-- <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar"> -->
  5. <page-header v-if="false" :title="pageTitle" :logo="logo" :avatar="avatar">
  6. <slot slot="action" name="action"></slot>
  7. <slot slot="content" name="headerContent"></slot>
  8. <div slot="content" v-if="!this.$slots.headerContent && description">
  9. <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
  10. <div class="link">
  11. <template v-for="(link, index) in linkList">
  12. <a :key="index" :href="link.href">
  13. <a-icon :type="link.icon" />
  14. <span>{{ link.title }}</span>
  15. </a>
  16. </template>
  17. </div>
  18. </div>
  19. <slot slot="extra" name="extra">
  20. <div class="extra-img">
  21. <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
  22. </div>
  23. </slot>
  24. <div slot="pageMenu">
  25. <div class="page-menu-search" v-if="search">
  26. <a-input-search
  27. style="width: 80%; max-width: 522px;"
  28. placeholder="请输入..."
  29. size="large"
  30. enterButton="搜索"
  31. />
  32. </div>
  33. <div class="page-menu-tabs" v-if="tabs && tabs.items">
  34. <!-- @change="callback" :activeKey="activeKey" -->
  35. <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
  36. <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
  37. </a-tabs>
  38. </div>
  39. </div>
  40. </page-header>
  41. <div class="content">
  42. <div class="page-header-index-wide">
  43. <slot>
  44. <!-- keep-alive -->
  45. <keep-alive v-if="multiTab">
  46. <router-view ref="content" />
  47. </keep-alive>
  48. <router-view v-else ref="content" />
  49. </slot>
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. import { mapState } from 'vuex'
  56. import PageHeader from '@/components/PageHeader'
  57. export default {
  58. name: 'PageView',
  59. components: {
  60. PageHeader
  61. },
  62. props: {
  63. avatar: {
  64. type: String,
  65. default: null
  66. },
  67. title: {
  68. type: [String, Boolean],
  69. default: true
  70. },
  71. logo: {
  72. type: String,
  73. default: null
  74. },
  75. directTabs: {
  76. type: Object,
  77. default: null
  78. }
  79. },
  80. data () {
  81. return {
  82. pageTitle: null,
  83. description: null,
  84. linkList: [],
  85. extraImage: '',
  86. search: false,
  87. tabs: {}
  88. }
  89. },
  90. computed: {
  91. ...mapState({
  92. multiTab: state => state.app.multiTab
  93. })
  94. },
  95. mounted () {
  96. this.tabs = this.directTabs
  97. this.getPageMeta()
  98. },
  99. updated () {
  100. this.getPageMeta()
  101. },
  102. methods: {
  103. getPageMeta () {
  104. // eslint-disable-next-line
  105. this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
  106. const content = this.$refs.content
  107. if (content) {
  108. if (content.pageMeta) {
  109. Object.assign(this, content.pageMeta)
  110. } else {
  111. this.description = content.description
  112. this.linkList = content.linkList
  113. this.extraImage = content.extraImage
  114. this.search = content.search === true
  115. this.tabs = content.tabs
  116. }
  117. }
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="less" scoped>
  123. .content {
  124. margin: 12px 12px 0;
  125. .link {
  126. margin-top: 16px;
  127. &:not(:empty) {
  128. margin-bottom: 16px;
  129. }
  130. a {
  131. margin-right: 32px;
  132. height: 24px;
  133. line-height: 24px;
  134. display: inline-block;
  135. i {
  136. font-size: 24px;
  137. margin-right: 8px;
  138. vertical-align: middle;
  139. }
  140. span {
  141. height: 24px;
  142. line-height: 24px;
  143. display: inline-block;
  144. vertical-align: middle;
  145. }
  146. }
  147. }
  148. }
  149. .page-menu-search {
  150. text-align: center;
  151. margin-bottom: 16px;
  152. }
  153. .page-menu-tabs {
  154. margin-top: 48px;
  155. }
  156. .extra-img {
  157. margin-top: -60px;
  158. text-align: center;
  159. width: 195px;
  160. img {
  161. width: 100%;
  162. }
  163. }
  164. .mobile {
  165. .extra-img{
  166. margin-top: 0;
  167. text-align: center;
  168. width: 96px;
  169. img{
  170. width: 100%;
  171. }
  172. }
  173. }
  174. </style>