community.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template name="community">
  2. <view class="home">
  3. <view class="card-bottom">
  4. <!-- 顶部分页栏 -->
  5. <view class="top-tab" :style="{width:width}">
  6. <view :class="['tab-item flex-center', activeTab == k ? 'active' : '']" @tap="handleTab(k)" v-for="(v, k) in fetch.cate" :key="k">{{ v.name }}</view>
  7. </view>
  8. <view class="scroll-wrapper">
  9. <view class="margin-bottom" v-for="(v, k) in fetch.info" :key="k">
  10. <y-DiaryItem :item="v" :cate_id="cate_id" :key="v.server_time"/>
  11. </view>
  12. <uni-load-more :status="more" @clickLoadMore="clickLoadMore" :contentText="contentText"></uni-load-more>
  13. </view>
  14. <!-- 右下角按钮 -->
  15. <y-Fab :bottom="20" :right="20" @click="showModal" v-if="button_show"/>
  16. </view>
  17. <view v-if="show">
  18. <publish :title="title" :is_upload="true" @hideModal="hideModal" @getRefresh="getRefresh" :cate_id="cate_id" :type="type" :type_id="type_id"></publish>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import publish from '@/lib/dever/components/publish.vue';
  24. import uniLoadMore from "@/lib/uni-load-more/uni-load-more.vue"
  25. export default {
  26. name: "community",
  27. props: {
  28. content_id : {
  29. type : String,
  30. value : null
  31. },
  32. width : {
  33. type : String,
  34. default : '100%'
  35. },
  36. code : {
  37. type : String,
  38. default : ''
  39. },
  40. param : {},
  41. index : 0
  42. },
  43. data() {
  44. return {
  45. title : '发表新话题',
  46. show : false,
  47. button_show : true,
  48. fetch : {
  49. cate : [],
  50. info : [],
  51. },
  52. cate_id : 0,
  53. activeTab: 0,
  54. contentText : {contentdown: "展开更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
  55. more : 'more',
  56. };
  57. },
  58. mounted() {
  59. this.type = this.param['type'];
  60. this.type_id = this.param['type_id'] ? this.param['type_id'] : this.content_id;
  61. this.getData();
  62. },
  63. methods:{
  64. getRefresh : function(cate_id, type, type_id, content) {
  65. this.getInfo(cate_id, 1);
  66. },
  67. getData : function() {
  68. var self = this;
  69. this.Dever.get(this, 'app/community/?l=api.category', {code:this.code, content_id:this.content_id,noloading:1}, function(t) {
  70. if (t && t.cate.length > 0 && t.cate[self.activeTab]) {
  71. self.getInfo(t.cate[self.activeTab].id, 1);
  72. }
  73. });
  74. },
  75. getInfo : function(cate_id, page) {
  76. var self = this;
  77. if (!cate_id) {
  78. cate_id = self.cate_id;
  79. }
  80. if (page != 1 && self.more == 'noMore') {
  81. return;
  82. }
  83. self.cate_id = cate_id;
  84. self.more = 'loading';
  85. this.Dever.page([page, 'info'], this, 'app/community/?l=api.info', {cate_id:cate_id, type:this.type, type_id:this.type_id}, function(t) {
  86. if (self.Dever.pageData.status == 1) {
  87. self.more = 'more';
  88. } else {
  89. self.more = 'noMore';
  90. }
  91. if (page == 1 && !self.Dever.pageData.total) {
  92. self.fetch.info = [];
  93. }
  94. self.hideModal();
  95. });
  96. },
  97. handleTab : function(index) {
  98. if (this.activeTab == index) {
  99. return;
  100. }
  101. this.activeTab = index;
  102. this.getInfo(this.fetch.cate[this.activeTab].id, 1);
  103. },
  104. showModal : function () {
  105. this.show = true;
  106. this.button_show = false;
  107. },
  108. hideModal : function () {
  109. this.show = false;
  110. this.button_show = true;
  111. },
  112. clickLoadMore : function(e) {
  113. this.getInfo(false, 2);
  114. }
  115. },
  116. components:{
  117. publish,uniLoadMore
  118. }
  119. }
  120. </script>
  121. <style lang="less" scoped>
  122. page {
  123. --mainColor: #435257;
  124. --activeColor: #36b39b;
  125. }
  126. view {
  127. box-sizing: border-box;
  128. }
  129. .scroll-wrapper {
  130. width:100%;
  131. }
  132. .flex-center {
  133. display: flex;
  134. align-items: center;
  135. justify-content: center;
  136. }
  137. .mainColor {
  138. color: var(--mainColor);
  139. }
  140. .aColor {
  141. color: var(--activeColor);
  142. }
  143. .color-nine{
  144. color: #999999;
  145. }
  146. .main-btn {
  147. border-radius: 40upx;
  148. display: flex;
  149. align-items: center;
  150. justify-content: center;
  151. color: var(--mainColor);
  152. border: 1upx solid var(--mainColor);
  153. padding: 10rpx 40rpx;
  154. }
  155. .active-btn {
  156. color: #FFFFFF !important;
  157. background-color: var(--activeColor) !important;
  158. border: 1upx solid var(--activeColor) !important;
  159. }
  160. /* 点赞和评论 */
  161. .margin-bottom {
  162. padding-bottom: 0rpx;
  163. background-color: #ddd;
  164. border: 1px solid #bababa;
  165. box-shadow: 2px 2px 10px #bababa;
  166. }
  167. .home {
  168. padding-top: 120rpx;
  169. .top-barrage {
  170. width: 100%;
  171. height: 320rpx;
  172. overflow: hidden;
  173. }
  174. .card-bottom {
  175. width: 100%;
  176. .top-tab {
  177. display: flex;
  178. height: 120rpx;
  179. position: fixed;
  180. top: 0;
  181. left: 0;
  182. width: 100%;
  183. z-index: 100;
  184. background-color: #ffffff;
  185. .tab-item {
  186. flex: 1;
  187. color: #999;
  188. border-bottom: 4rpx solid #ececec;
  189. }
  190. .active {
  191. color: var(--mainColor);
  192. border-bottom: 4rpx solid var(--mainColor);
  193. }
  194. }
  195. }
  196. }
  197. </style>