PageView.vue 4.9 KB

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