knowledge.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <!-- 知识库列表 -->
  3. <view class="container">
  4. <view class="rnwdList">
  5. <view class="list" @tap="goDetails(item)" v-for="(item, index1) in dataSource" :key="index1">
  6. <span class="lb">{{ item.popular == '1' ? '热门' : '非热门' }}</span>
  7. <span class="listTitle">{{ item.titleName }}</span>
  8. <view class="onePic" v-if="item.imgUrlList !=null && item.imgUrlList.split(',').length == 1">
  9. <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
  10. </image>、
  11. </view>
  12. <view class="twoPic" v-if="item.imgUrlList != null && item.imgUrlList.split(',').length == 2">
  13. <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
  14. </image>
  15. </view>
  16. <view class="threePic" v-if="item.imgUrlList != null && item.imgUrlList.split(',').length == 3">
  17. <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
  18. </image>
  19. </view>
  20. <view class="jlSj">
  21. <span style="color: #07c160;font-size: 24rpx;">
  22. {{ item.createTime }}
  23. <!-- <em class="iconfont icon-jifen"></em> -->
  24. </span>
  25. <view class="ck">
  26. <span>
  27. <em class="iconfont icon-shoucang"></em>
  28. {{ item.watchNum }}
  29. </span>
  30. </view>
  31. </view>
  32. </view>
  33. <uni-fab ref="fab" :horizontal="right" :vertical="bottom" @fabClick="fabClick()" />
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import {
  39. list,
  40. knowledgePay,
  41. getDetails
  42. } from '@/api/knowledge/knowledge.js';
  43. export default {
  44. data() {
  45. return {
  46. dataSource: [],
  47. // 数据总量
  48. total: 0,
  49. queryParams: {
  50. // 当前页
  51. pageNum: 1,
  52. // 每页数据量
  53. pageSize: 10,
  54. },
  55. loading: false,
  56. //是否显示弹出层
  57. open: false,
  58. //悬浮按钮右对齐
  59. right: 'right',
  60. //悬浮按钮下对齐
  61. bottom: 'bottom',
  62. }
  63. },
  64. /**
  65. * 生命周期函数--监听页面加载
  66. */
  67. onLoad(options) {
  68. this.getList()
  69. },
  70. onReachBottom() {
  71. let pageNum = this.queryParams.pageNum
  72. let pageSize = this.queryParams.pageSize
  73. let total = this.total
  74. if (pageNum * pageSize >= total) {
  75. uni.showToast({
  76. title: '暂无更多数据'
  77. })
  78. return
  79. } else {
  80. this.queryParams.pageNum += 1;
  81. this.getList()
  82. }
  83. },
  84. methods: {
  85. goDetails(item) {
  86. this.isKnowledgePay(item)
  87. },
  88. isKnowledgePay(item) {
  89. let params = {
  90. //减少积分人id
  91. userId: getApp().globalData.userId,
  92. //增加积分人id
  93. createId: item.createId,
  94. integral: item.integral,
  95. id: item.id,
  96. relevance: "1",
  97. }
  98. knowledgePay(params).then(res => {
  99. if (res.code == 200) {
  100. getDetails(item.id).then(res => {
  101. let data = res.data
  102. data.urls = data.imgUrlList.split(',')
  103. uni.navigateTo({
  104. url: `/pages/common/articleDetail/articleDetail?data=${this.encodify(data)}`
  105. });
  106. })
  107. } else {
  108. uni.showToast({
  109. title: res.msg
  110. })
  111. }
  112. })
  113. },
  114. // 分页触发
  115. change(e) {
  116. this.getList(e.current);
  117. },
  118. // 获取数据
  119. getList() {
  120. let params = {
  121. pageSize: this.queryParams.pageSize,
  122. pageNum: this.queryParams.pageNum
  123. }
  124. list(params).then(res => {
  125. if (res.code == 200) {
  126. this.dataSource = [...this.dataSource, ...res.rows]
  127. this.total = res.total
  128. }
  129. })
  130. },
  131. //悬浮按钮点击事件
  132. fabClick() {
  133. uni.navigateTo({
  134. url: '../knowledge/knowledgeForm'
  135. });
  136. },
  137. }
  138. }
  139. </script>
  140. <style>
  141. @import './knowledge.css';
  142. </style>