index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <view class="community">
  3. <!-- 列表 -->
  4. <zs-list mt="0" @load="loadMore" :status="status">
  5. <view class="left">
  6. <view class="store-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
  7. <zs-img :src="item.coverImg" width="344rpx" height="256rpx" mode="widthFix"></zs-img>
  8. <view class="info">
  9. <view class="title">
  10. {{item.communityTitle}}
  11. </view>
  12. <view class="user-info">
  13. <image class="head" :src="item.publishLogo" mode=""></image>
  14. <view class="user-name">
  15. 研学官方账号
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="right">
  22. <view class="store-item" v-for="(item,index) in list1" :key="index" @click="goDetail(item)">
  23. <zs-img :src="item.coverImg" width="344rpx" height="256rpx" mode="widthFix"></zs-img>
  24. <view class="info">
  25. <view class="title">
  26. {{item.communityTitle}}
  27. </view>
  28. <view class="user-info">
  29. <image class="head" :src="item.publishLogo" mode=""></image>
  30. <view class="user-name">
  31. 研学官方账号
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </zs-list>
  38. </view>
  39. </template>
  40. <script>
  41. import {getItem} from '@/api/study.js';
  42. export default {
  43. data() {
  44. return {
  45. status: 'more',
  46. id:0,
  47. list: [
  48. ],
  49. list1: [
  50. ],
  51. }
  52. },
  53. methods: {
  54. loadMore() {
  55. if(this.id){
  56. this.getItem()
  57. }
  58. },
  59. goDetail(item){
  60. uni.navigateTo({
  61. url:'./detail?id='+item.tabId,
  62. success(res) {
  63. console.log(1111111);
  64. res.eventChannel.emit('detail', item)
  65. }
  66. })
  67. },
  68. //获取社区分类列表
  69. getItem(){
  70. this.status = 'loading'
  71. getItem({communityId:this.id,currentPage:1,pageSize:10,state:2}).then(res=>{
  72. if(res.state == 'Success'){
  73. let list = []
  74. let list1 = []
  75. res.content.records.map((item,index)=>{
  76. if(index%2){
  77. list1.push(item)
  78. }else{
  79. list.push(item)
  80. }
  81. })
  82. this.list = this.list.concat(list)
  83. this.list1 = this.list1.concat(list1)
  84. let total = this.list.length+this.list1.length
  85. if(total>=res.content.total){
  86. this.status = 'noMore'
  87. }else{
  88. this.status = 'more'
  89. this.query.currentPage++
  90. }
  91. }
  92. })
  93. },
  94. },
  95. onLoad(options) {
  96. console.log(options.id);
  97. this.id = options.id
  98. this.getItem()
  99. }
  100. }
  101. </script>
  102. <style lang="scss" >
  103. .community{
  104. background: #FFFFFF;
  105. padding: 20rpx;
  106. .zs-list {
  107. display: flex;
  108. flex-wrap: wrap;
  109. justify-content: space-between;
  110. .left {
  111. }
  112. .right {
  113. }
  114. .store-item{
  115. box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0,0,0,0.08);
  116. border-radius: 16rpx;
  117. width: 344rpx;
  118. margin-top: 20rpx;
  119. .info{
  120. padding: 20rpx;
  121. .title{
  122. color: #222222;
  123. font-size: 24rpx;
  124. width: 100%;
  125. display: -webkit-box;
  126. -webkit-box-orient: vertical;
  127. -webkit-line-clamp: 2; /* 显示的最大行数 */
  128. overflow: hidden;
  129. }
  130. .user-info{
  131. display: flex;
  132. align-items: center;
  133. margin-top: 20rpx;
  134. .head{
  135. width: 40rpx;
  136. height: 40rpx;
  137. border-radius: 50%;
  138. }
  139. .user-name{
  140. color: #AAAAAA;
  141. font-size: 20rpx;
  142. margin-left: 12rpx;
  143. }
  144. }
  145. }
  146. }
  147. }
  148. }
  149. </style>