ldDetailed.vue 7.3 KB

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