pageFloor.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <view>
  3. <view class="page-content clearfix" v-for="(page, index) in list" :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="page.floorContent.templateType != '8'"
  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. <template v-if="page.floorContent.templateType == '1'">
  18. <templateA :pageData="page" :userIdentity="userIdentity"></templateA>
  19. </template>
  20. <template v-if="page.floorContent.templateType == '2'">
  21. <templateB :pageData="page" :userIdentity="userIdentity"></templateB>
  22. </template>
  23. <template v-if="page.floorContent.templateType == '3'">
  24. <templateC :pageData="page" :userIdentity="userIdentity"></templateC>
  25. </template>
  26. <template v-if="page.floorContent.templateType == '4'">
  27. <templateD :pageData="page" :userIdentity="userIdentity"></templateD>
  28. </template>
  29. <template v-if="page.floorContent.templateType == '5'">
  30. <templateE :pageData="page" :userIdentity="userIdentity"></templateE>
  31. </template>
  32. <template v-if="page.floorContent.templateType == '6'">
  33. <templateF :pageData="page" :userIdentity="userIdentity"></templateF>
  34. </template>
  35. <template v-if="page.floorContent.templateType == '7'">
  36. <templateG :pageData="page" :userIdentity="userIdentity"></templateG>
  37. </template>
  38. <template v-if="page.floorContent.templateType == '8'">
  39. <templateH :pageData="page" :userIdentity="userIdentity"></templateH>
  40. </template>
  41. </view>
  42. </view>
  43. </template>
  44. <script>
  45. import templateA from '@/components/cm-module/pageTemplate/templateA.vue'
  46. import templateB from '@/components/cm-module/pageTemplate/templateB.vue'
  47. import templateC from '@/components/cm-module/pageTemplate/templateC.vue'
  48. import templateD from '@/components/cm-module/pageTemplate/templateD.vue'
  49. import templateE from '@/components/cm-module/pageTemplate/templateE.vue'
  50. import templateF from '@/components/cm-module/pageTemplate/templateF.vue'
  51. import templateG from '@/components/cm-module/pageTemplate/templateG.vue'
  52. import templateH from '@/components/cm-module/pageTemplate/templateH.vue'
  53. export default {
  54. name: 'pageFloor',
  55. components: {
  56. templateA,
  57. templateB,
  58. templateC,
  59. templateD,
  60. templateE,
  61. templateF,
  62. templateG,
  63. templateH
  64. },
  65. props: {
  66. list: {
  67. type: Array
  68. },
  69. pageType: {
  70. type: Number
  71. },
  72. userIdentity: {
  73. type: Number
  74. }
  75. },
  76. data() {
  77. return {
  78. pageFloorList: []
  79. }
  80. },
  81. created() {
  82. },
  83. watch: {
  84. list: {
  85. handler: function (el) {//监听对象的变换使用 function,箭头函数容易出现this指向不正确
  86. this.list = el
  87. },
  88. deep: true
  89. }
  90. },
  91. methods: {
  92. NavToDetailPage(page) {
  93. //跳转
  94. this.$api.navigateTo(
  95. `/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
  96. page.title
  97. }`
  98. )
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss">
  104. .page-content {
  105. background-color: #f7f7f7;
  106. width: 100%;
  107. height: auto;
  108. box-sizing: border-box;
  109. padding: 0 24rpx;
  110. float: left;
  111. }
  112. .tui-group-name {
  113. width: 100%;
  114. height: 92rpx;
  115. padding: 20rpx 0;
  116. }
  117. .tui-group-title {
  118. width: 100%;
  119. float: left;
  120. .tui-group-l {
  121. float: left;
  122. font-size: 34rpx;
  123. font-weight: bold;
  124. text-align: left;
  125. line-height: 49rpx;
  126. color: #333;
  127. }
  128. .tui-group-r {
  129. float: right;
  130. font-size: $font-size-26;
  131. text-align: right;
  132. line-height: 49rpx;
  133. color: #999999;
  134. .icon-xiayibu {
  135. font-size: $font-size-30;
  136. color: #999999;
  137. }
  138. }
  139. }
  140. .tui-sub__desc {
  141. width: 100%;
  142. float: left;
  143. color: rgba(153, 153, 153, 0.9);
  144. font-size: $font-size-26;
  145. }
  146. </style>