PageView.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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" :style="{ height: contHeight+'px' }">
  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. contHeight () {
  95. return window.innerHeight - 80
  96. }
  97. },
  98. mounted () {
  99. this.tabs = this.directTabs
  100. this.getPageMeta()
  101. },
  102. updated () {
  103. this.getPageMeta()
  104. },
  105. methods: {
  106. getPageMeta () {
  107. // eslint-disable-next-line
  108. this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
  109. const content = this.$refs.content
  110. if (content) {
  111. if (content.pageMeta) {
  112. Object.assign(this, content.pageMeta)
  113. } else {
  114. this.description = content.description
  115. this.linkList = content.linkList
  116. this.extraImage = content.extraImage
  117. this.search = content.search === true
  118. this.tabs = content.tabs
  119. }
  120. }
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="less" scoped>
  126. .content {
  127. margin: 12px 12px 0;
  128. .page-header-index-wide{
  129. height: 100%;
  130. >div{
  131. height: 100%;
  132. }
  133. }
  134. .link {
  135. margin-top: 16px;
  136. &:not(:empty) {
  137. margin-bottom: 16px;
  138. }
  139. a {
  140. margin-right: 32px;
  141. height: 24px;
  142. line-height: 24px;
  143. display: inline-block;
  144. i {
  145. font-size: 24px;
  146. margin-right: 8px;
  147. vertical-align: middle;
  148. }
  149. span {
  150. height: 24px;
  151. line-height: 24px;
  152. display: inline-block;
  153. vertical-align: middle;
  154. }
  155. }
  156. }
  157. }
  158. .page-menu-search {
  159. text-align: center;
  160. margin-bottom: 16px;
  161. }
  162. .page-menu-tabs {
  163. margin-top: 48px;
  164. }
  165. .extra-img {
  166. margin-top: -60px;
  167. text-align: center;
  168. width: 195px;
  169. img {
  170. width: 100%;
  171. }
  172. }
  173. .mobile {
  174. .extra-img{
  175. margin-top: 0;
  176. text-align: center;
  177. width: 96px;
  178. img{
  179. width: 100%;
  180. }
  181. }
  182. }
  183. </style>