ldDetailed.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <view class="ldDetailed-container">
  3. <!-- 筛选菜单 -->
  4. <u-dropdown ref="uDropdown" class="filter-dropdown">
  5. <u-dropdown-item v-model="queryParam.changeType" :title="titType" :options="optionsType" @change="searchHandle()"></u-dropdown-item>
  6. <u-dropdown-item v-model="timeScope" :title="titScope" :options="optionsScope" @change="searchHandle()"></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" v-if="timeScope == 'threeMonth'">{{item.month}}</text>
  13. <view class="cell-item-main" v-for="(subItem, ind) in item.monthDataList" :key="ind">
  14. <text :class="['cell-item-pic', subItem.changeType == 'ADD'?'orange':'']">{{subItem.changeType == 'ADD' ? '收' : '支'}}</text>
  15. <view class="cell-item-c">
  16. <text class="cell-item-des">{{subItem.remarks}}</text>
  17. <text class="cell-item-date">{{subItem.createDate}}</text>
  18. </view>
  19. <text :class="['cell-item-score', subItem.changeType == 'ADD' ? 'red' : 'black']">
  20. {{subItem.changeType == 'ADD' ? '+'+subItem.changeNum : subItem.changeNum}}
  21. </text>
  22. </view>
  23. <u-empty class="nodata" :text="noDataText" v-if="item.monthDataList.length==0 && status!='loading'" mode="list"></u-empty>
  24. </view>
  25. </view>
  26. <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
  27. <view class="loadmore">
  28. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  29. </view>
  30. </scroll-view>
  31. </view>
  32. </template>
  33. <script>
  34. import {ldUsedQuery} from '@/api/user.js'
  35. import getDate from '@/libs/getDate'
  36. import moment from 'moment'
  37. export default {
  38. data() {
  39. return {
  40. listdata: [],
  41. pageNo: 1, // 当前页码
  42. pageSize: 10, // 每页条数
  43. total: 0, // 数据总条数
  44. noDataText: '暂无数据', // 列表请求状态提示语
  45. status: 'loadmore', // 加载中状态
  46. timeScope: 'threeMonth', // 时间类别 1:近三个月 2:本月 3:本月前一月 4:本月前2月
  47. queryParam: { // 过滤条件
  48. changeType: '', // 金币变更类型
  49. },
  50. optionsType: [
  51. { label: '所有记录', value: '', },
  52. { label: '获取记录', value: 'ADD', },
  53. { label: '使用记录', value: 'SUB', }
  54. ]
  55. }
  56. },
  57. onShow() {
  58. this.searchHandle()
  59. },
  60. onLoad() {
  61. this.timeScope = 'threeMonth'
  62. this.queryParam.changeType = ''
  63. },
  64. computed: {
  65. // 时间过滤条件
  66. optionsScope(){ // 过滤条件 近3个月
  67. let arr = [
  68. { label: '近3个月', value: 'threeMonth' },
  69. { label: '本月', value: 'thisMonth' }
  70. ]
  71. arr[2] = { label: new Date().getMonth() + '月', value: 'lastMonth' }
  72. arr[3] = { label: new Date().getMonth()-1 + '月', value: 'lastTwoMonth' }
  73. return arr
  74. },
  75. titType(){ // 过滤条件 所有记录 title
  76. const row = this.optionsType.find(item => item.value == this.queryParam.changeType)
  77. return row ? row.label : this.optionsType[0].label
  78. },
  79. titScope(){ // 过滤条件 近3个月 title
  80. const row = this.optionsScope.find(item => item.value == this.timeScope)
  81. return row ? row.label : this.optionsScope[0].label
  82. },
  83. // 查询时间段
  84. queryDate() {
  85. var dt = new Date();
  86. const threeTime = dt.setMonth( dt.getMonth()-2 )
  87. const quickType = {
  88. threeMonth: [moment(getDate.getThreeMonthDays().starttime), moment(getDate.getThreeMonthDays().endtime)],
  89. lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
  90. thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
  91. lastTwoMonth: [moment(getDate.getLastTwoMonthDays().starttime), moment(getDate.getLastTwoMonthDays().endtime)],
  92. }
  93. let queryTime = {
  94. beginDate: quickType[this.timeScope][0].format('YYYY-MM-DD'),
  95. endDate: quickType[this.timeScope][1].format('YYYY-MM-DD')
  96. }
  97. return queryTime
  98. },
  99. },
  100. methods:{
  101. // 搜索查询
  102. searchHandle () {
  103. this.status = "loading"
  104. let params = Object.assign(this.queryParam,this.queryDate)
  105. console.log(params,'pppppppp')
  106. ldUsedQuery(params).then(res => {
  107. console.log(res,'pppppppp')
  108. if (res.status == 200) {
  109. let list = res.data
  110. // 查询3个月时 数据处理
  111. if (this.timeScope == 'threeMonth') {
  112. list.map(item=>{
  113. let m = moment(item.month).month()+1
  114. item.month = (m == moment().month()+1) ? '本月' : m+'月'
  115. })
  116. }
  117. this.listdata = list
  118. } else {
  119. this.noDataText = res.message
  120. this.listdata = []
  121. this.total = 0
  122. }
  123. this.status = "loadmore"
  124. })
  125. },
  126. // scroll-view到底部加载更多
  127. onreachBottom() {
  128. if(this.listdata.length < this.total){
  129. this.pageNo += 1
  130. this.searchHandle()
  131. }else{
  132. uni.showToast({ title: '已经到底了', icon: 'none' })
  133. this.status = "nomore"
  134. }
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="less">
  140. page{
  141. height: 100%;
  142. background-color: #fff;
  143. }
  144. .ldDetailed-container{
  145. width: 100%;
  146. height: 100%;
  147. // 筛选菜单
  148. .filter-dropdown{
  149. background-color: #fff!important;
  150. .u-dropdown__menu__item{
  151. background-color: #fff!important;
  152. }
  153. }
  154. // 列表
  155. .scroll-con{
  156. height: calc(100% - 40);
  157. overflow: auto;
  158. }
  159. // 列表样式
  160. .cell-item-con{
  161. .cell-item{
  162. background-color: #fff;
  163. color: #606266;
  164. .cell-item-month{
  165. display: block;
  166. color: #909399;
  167. font-size: 26rpx;
  168. padding: 16rpx 30rpx;
  169. background-color: #f8f8f8;
  170. }
  171. .cell-item-main{
  172. display: flex;
  173. align-items: center;
  174. margin: 0 30rpx;
  175. padding: 20rpx 0;
  176. border-bottom: 1rpx solid #e9e9e9;
  177. .cell-item-pic{
  178. flex-shrink: 0;
  179. margin-right: 20rpx;
  180. width: 90rpx;
  181. height: 90rpx;
  182. line-height: 90rpx;
  183. background-color: #f3f4f6;
  184. border-radius: 50%;
  185. text-align: center;
  186. }
  187. .cell-item-c{
  188. flex-grow: 1;
  189. .cell-item-des{
  190. display: block;
  191. color: #606266;
  192. font-size: 26rpx;
  193. margin-bottom: 18rpx;
  194. }
  195. .cell-item-date{
  196. display: block;
  197. color: #909399;
  198. font-size: 24rpx;
  199. }
  200. }
  201. .cell-item-score{
  202. flex-shrink: 0;
  203. }
  204. .black{
  205. color: #000;
  206. }
  207. .red{
  208. color: #fa3534;
  209. }
  210. .orange{
  211. background-color: #fcbd71;
  212. color: #fff;
  213. }
  214. }
  215. .cell-item-main:last-child{
  216. border: none;
  217. }
  218. }
  219. }
  220. }
  221. </style>