pageFloor.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <view>
  3. <view class="page-content clearfix" v-for="(page, index) in pageFloorList" :key="index">
  4. <view class="tui-group-name" v-if="page.floorContent">
  5. <view class="tui-group-title">
  6. <view class="tui-group-l">{{ page.title }}</view>
  7. <view
  8. class="tui-group-r"
  9. v-if="isSwiperTemp.indexOf(page.floorContent.templateType) === -1"
  10. @click="NavToDetailPage(page)"
  11. >
  12. <text>更多</text> <text class="iconfont icon-xiayibu"></text>
  13. </view>
  14. </view>
  15. <view class="tui-sub__desc">{{ page.detail }}</view>
  16. </view>
  17. <!-- 图文模板 -->
  18. <template v-if="page.floorContent.templateType == '3'">
  19. <articleA :pageData="page" :userIdentity="userIdentity"></articleA>
  20. </template>
  21. <template v-if="page.floorContent.templateType == '4'">
  22. <articleB :pageData="page" :userIdentity="userIdentity"></articleB>
  23. </template>
  24. <template v-if="page.floorContent.templateType == '5'">
  25. <articleC :pageData="page" :userIdentity="userIdentity"></articleC>
  26. </template>
  27. <template v-if="page.floorContent.templateType == '6'">
  28. <articleD :pageData="page" :userIdentity="userIdentity"></articleD>
  29. </template>
  30. <!-- 图片模板 -->
  31. <template v-if="page.floorContent.templateType == '1'">
  32. <pictureA :pageData="page" :userIdentity="userIdentity"></pictureA>
  33. </template>
  34. <template v-if="page.floorContent.templateType == '2'">
  35. <pictureB :pageData="page" :userIdentity="userIdentity"></pictureB>
  36. </template>
  37. <template v-if="page.floorContent.templateType == '7'">
  38. <pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
  39. </template>
  40. <template v-if="page.floorContent.templateType == '8'">
  41. <pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
  42. </template>
  43. <template v-if="page.floorContent.templateType == '9'">
  44. <pictureE :pageData="page" :userIdentity="userIdentity"></pictureE>
  45. </template>
  46. <template v-if="page.floorContent.templateType == '10'">
  47. <pictureF :pageData="page" :userIdentity="userIdentity"></pictureF>
  48. </template>
  49. <!-- 产品模板 -->
  50. <template v-if="page.floorContent.templateType == '11'">
  51. <productI :pageData="page" :userIdentity="userIdentity"></productI>
  52. </template>
  53. <template v-if="page.floorContent.templateType == '12'">
  54. <productJ :pageData="page" :userIdentity="userIdentity"></productJ>
  55. </template>
  56. <template v-if="page.floorContent.templateType == '13'">
  57. <productK :pageData="page" :userIdentity="userIdentity"></productK>
  58. </template>
  59. <template v-if="page.floorContent.templateType == '14'">
  60. <productG :pageData="page" :userIdentity="userIdentity"></productG>
  61. </template>
  62. <template v-if="page.floorContent.templateType == '15'">
  63. <productD :pageData="page" :userIdentity="userIdentity"></productD>
  64. </template>
  65. <template v-if="page.floorContent.templateType == '16'">
  66. <productC :pageData="page" :userIdentity="userIdentity"></productC>
  67. </template>
  68. <template v-if="page.floorContent.templateType == '17'">
  69. <productB :pageData="page" :userIdentity="userIdentity"></productB>
  70. </template>
  71. <template v-if="page.floorContent.templateType == '18'">
  72. <productA :pageData="page" :userIdentity="userIdentity"></productA>
  73. </template>
  74. <template v-if="page.floorContent.templateType == '19'">
  75. <productE :pageData="page" :userIdentity="userIdentity"></productE>
  76. </template>
  77. <template v-if="page.floorContent.templateType == '20'">
  78. <productF :pageData="page" :userIdentity="userIdentity"></productF>
  79. </template>
  80. <template v-if="page.floorContent.templateType == '21'">
  81. <productH :pageData="page" :userIdentity="userIdentity"></productH>
  82. </template>
  83. </view>
  84. </view>
  85. </template>
  86. <script>
  87. //引入产品模板
  88. import productA from '@/components/cm-module/pageTemplate/templateA.vue'
  89. import productB from '@/components/cm-module/pageTemplate/templateB.vue'
  90. import productC from '@/components/cm-module/pageTemplate/templateC.vue'
  91. import productD from '@/components/cm-module/pageTemplate/templateD.vue'
  92. import productE from '@/components/cm-module/pageTemplate/templateE.vue'
  93. import productF from '@/components/cm-module/pageTemplate/templateF.vue'
  94. import productG from '@/components/cm-module/pageTemplate/templateG.vue'
  95. import productH from '@/components/cm-module/pageTemplate/templateH.vue'
  96. import productI from '@/components/cm-module/pageTemplate/templateI.vue'
  97. import productJ from '@/components/cm-module/pageTemplate/templateJ.vue'
  98. import productK from '@/components/cm-module/pageTemplate/templateK.vue'
  99. //引入图片模板
  100. import pictureA from '@/components/cm-module/pcitureTemplate/templateA.vue'
  101. import pictureB from '@/components/cm-module/pcitureTemplate/templateB.vue'
  102. import pictureC from '@/components/cm-module/pcitureTemplate/templateC.vue'
  103. import pictureD from '@/components/cm-module/pcitureTemplate/templateD.vue'
  104. import pictureE from '@/components/cm-module/pcitureTemplate/templateE.vue'
  105. import pictureF from '@/components/cm-module/pcitureTemplate/templateF.vue'
  106. //引入图文模板
  107. import articleA from '@/components/cm-module/articleTemplate/templateA.vue'
  108. import articleB from '@/components/cm-module/articleTemplate/templateB.vue'
  109. import articleC from '@/components/cm-module/articleTemplate/templateC.vue'
  110. import articleD from '@/components/cm-module/articleTemplate/templateD.vue'
  111. export default {
  112. name: 'pageFloor',
  113. components: {
  114. productA,
  115. productB,
  116. productC,
  117. productD,
  118. productE,
  119. productF,
  120. productG,
  121. productH,
  122. productI,
  123. productJ,
  124. productK,
  125. pictureA,
  126. pictureB,
  127. pictureC,
  128. pictureD,
  129. pictureE,
  130. pictureF,
  131. articleA,
  132. articleB,
  133. articleC,
  134. articleD
  135. },
  136. props: {
  137. list: {
  138. type: Array
  139. },
  140. pageType: {
  141. type: Number
  142. },
  143. userIdentity: {
  144. type: Number
  145. }
  146. },
  147. data() {
  148. return {
  149. pageFloorList: [],
  150. isSwiperTemp:['1','2','9','21','5','7']
  151. }
  152. },
  153. created() {
  154. this.initData(this.list)
  155. },
  156. computed: {},
  157. methods: {
  158. initData(data) {
  159. this.pageFloorList = data
  160. },
  161. NavToDetailPage(page) {
  162. //跳转
  163. this.$api.navigateTo(
  164. `/h5/pages/activity/activity-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
  165. page.title
  166. }`
  167. )
  168. }
  169. }
  170. }
  171. </script>
  172. <style lang="scss">
  173. .page-content {
  174. background-color: #f7f7f7;
  175. width: 100%;
  176. height: auto;
  177. box-sizing: border-box;
  178. padding: 0 24rpx;
  179. float: left;
  180. }
  181. .tui-group-name {
  182. width: 100%;
  183. height: 92rpx;
  184. padding: 20rpx 0;
  185. }
  186. .tui-group-title {
  187. width: 100%;
  188. float: left;
  189. .tui-group-l {
  190. float: left;
  191. font-size: 34rpx;
  192. font-weight: bold;
  193. text-align: left;
  194. line-height: 49rpx;
  195. color: #333;
  196. }
  197. .tui-group-r {
  198. float: right;
  199. font-size: $font-size-26;
  200. text-align: right;
  201. line-height: 49rpx;
  202. color: #999999;
  203. .icon-xiayibu {
  204. font-size: $font-size-30;
  205. color: #999999;
  206. }
  207. }
  208. }
  209. .tui-sub__desc {
  210. width: 100%;
  211. float: left;
  212. color: rgba(153, 153, 153, 0.9);
  213. font-size: $font-size-26;
  214. }
  215. </style>