PageView.vue 5.0 KB

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