ldDetailed.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <view class="ldDetailed-container">
  3. <!-- 筛选菜单 -->
  4. <u-dropdown ref="uDropdown" class="filter-dropdown">
  5. <u-dropdown-item v-model="queryParam.recordType" :title="titType" :options="optionsType" @change="searchHandle(1)"></u-dropdown-item>
  6. <u-dropdown-item v-model="queryParam.recordScope" :title="titScope" :options="optionsScope" @change="searchHandle(1)"></u-dropdown-item>
  7. </u-dropdown>
  8. <scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
  9. <!-- 列表数据 -->
  10. <view class="cell-item-con">
  11. <view class="cell-item" v-for="(item, index) in listdata" :key="index">
  12. <text class="cell-item-month">{{item.month}}</text>
  13. <view class="cell-item-main" v-for="(subItem, ind) in item.list" :key="ind">
  14. <text :class="['cell-item-pic', subItem.type == 1?'orange':'']">{{subItem.type == 1 ? '收' : '支'}}</text>
  15. <view class="cell-item-c">
  16. <text class="cell-item-des">{{subItem.dec}}</text>
  17. <text class="cell-item-date">{{subItem.creatDate}}</text>
  18. </view>
  19. <text :class="['cell-item-score', Number(subItem.score) > 0 ? 'red' : 'black']">{{Number(subItem.score)>0 ? '+'+subItem.score : subItem.score}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
  24. <view class="loadmore">
  25. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  26. </view>
  27. </scroll-view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. listdata: [
  35. {
  36. month: '本月',
  37. list: [
  38. { type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
  39. { type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
  40. { type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
  41. ]
  42. },
  43. {
  44. month: '10月',
  45. list: [
  46. { type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
  47. { type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
  48. { type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
  49. ]
  50. }
  51. ],
  52. pageNo: 1, // 当前页码
  53. pageSize: 10, // 每页条数
  54. total: 0, // 数据总条数
  55. noDataText: '暂无数据', // 列表请求状态提示语
  56. status: 'loadmore', // 加载中状态
  57. queryParam: { // 过滤条件
  58. recordType: '',
  59. recordScope: ''
  60. },
  61. optionsType: [
  62. { label: '所有记录', value: 1, },
  63. { label: '获取记录', value: 2, },
  64. { label: '使用记录', value: 3, }
  65. ]
  66. }
  67. },
  68. onShow() {
  69. this.searchHandle(1)
  70. },
  71. onLoad() {
  72. },
  73. computed: {
  74. optionsScope(){ // 过滤条件 近3个月
  75. let arr = [
  76. { label: '近3个月', value: 1 },
  77. { label: '本月', value: 2 }
  78. ]
  79. arr[2] = { label: new Date().getMonth() + '月', value: 3 }
  80. arr[3] = { label: new Date().getMonth()-1 + '月', value: 4 }
  81. return arr
  82. },
  83. titType(){ // 过滤条件 所有记录 title
  84. const row = this.optionsType.find(item => item.value == this.queryParam.recordType)
  85. return row ? row.label : this.optionsType[0].label
  86. },
  87. titScope(){ // 过滤条件 近3个月 title
  88. const row = this.optionsScope.find(item => item.value == this.queryParam.recordScope)
  89. return row ? row.label : this.optionsScope[0].label
  90. }
  91. },
  92. methods:{
  93. // 搜索查询
  94. searchHandle (pageNo) {
  95. this.status = "loading"
  96. pageNo ? this.pageNo = pageNo : null
  97. // searchSuppliers({
  98. // pageNo: this.pageNo,
  99. // pageSize: this.pageSize,
  100. // queryWord: this.queryValue
  101. // }).then(res => {
  102. // if (res.status == 200) {
  103. // if(this.pageNo>1){
  104. // this.listdata = this.listdata.concat(res.data.list || [])
  105. // }else{
  106. // this.listdata = res.data.list || []
  107. // }
  108. // this.total = res.data.count || 0
  109. // this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据'
  110. // } else {
  111. // this.noDataText = res.message
  112. // this.listdata = []
  113. // this.total = 0
  114. // }
  115. this.status = "loadmore"
  116. // })
  117. },
  118. // scroll-view到底部加载更多
  119. onreachBottom() {
  120. if(this.listdata.length < this.total){
  121. this.pageNo += 1
  122. this.searchHandle()
  123. }else{
  124. uni.showToast({ title: '已经到底了', icon: 'none' })
  125. this.status = "nomore"
  126. }
  127. }
  128. }
  129. }
  130. </script>
  131. <style lang="less">
  132. .ldDetailed-container{
  133. width: 100%;
  134. // 筛选菜单
  135. .filter-dropdown{
  136. background-color: #fff!important;
  137. .u-dropdown__menu__item{
  138. background-color: #fff!important;
  139. }
  140. }
  141. // 列表
  142. .scroll-con{
  143. height: calc(100% - 40);
  144. overflow: auto;
  145. }
  146. // 列表样式
  147. .cell-item-con{
  148. .cell-item{
  149. background-color: #fff;
  150. color: #606266;
  151. .cell-item-month{
  152. display: block;
  153. color: #909399;
  154. font-size: 26rpx;
  155. padding: 16rpx 30rpx;
  156. background-color: #f8f8f8;
  157. }
  158. .cell-item-main{
  159. display: flex;
  160. align-items: center;
  161. margin: 0 30rpx;
  162. padding: 20rpx 0;
  163. border-bottom: 1rpx solid #e9e9e9;
  164. .cell-item-pic{
  165. flex-shrink: 0;
  166. margin-right: 20rpx;
  167. width: 90rpx;
  168. height: 90rpx;
  169. line-height: 90rpx;
  170. background-color: #f3f4f6;
  171. border-radius: 50%;
  172. text-align: center;
  173. }
  174. .cell-item-c{
  175. flex-grow: 1;
  176. .cell-item-des{
  177. display: block;
  178. color: #606266;
  179. font-size: 26rpx;
  180. margin-bottom: 18rpx;
  181. }
  182. .cell-item-date{
  183. display: block;
  184. color: #909399;
  185. font-size: 24rpx;
  186. }
  187. }
  188. .cell-item-score{
  189. flex-shrink: 0;
  190. }
  191. .black{
  192. color: #000;
  193. }
  194. .red{
  195. color: #fa3534;
  196. }
  197. .orange{
  198. background-color: #fcbd71;
  199. color: #fff;
  200. }
  201. }
  202. .cell-item-main:last-child{
  203. border: none;
  204. }
  205. }
  206. }
  207. }
  208. </style>