<template> <view class="ldDetailed-container"> <!-- 筛选菜单 --> <u-dropdown ref="uDropdown" class="filter-dropdown"> <u-dropdown-item v-model="queryParam.changeType" :title="titType" :options="optionsType" @change="searchHandle()"></u-dropdown-item> <u-dropdown-item v-model="timeScope" :title="titScope" :options="optionsScope" @change="searchHandle()"></u-dropdown-item> </u-dropdown> <scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom"> <!-- 列表数据 --> <view class="cell-item-con"> <view class="cell-item" v-for="(item, index) in listdata" :key="index"> <text class="cell-item-month" v-if="timeScope == 'threeMonth'">{{item.month}}</text> <view class="cell-item-main" v-for="(subItem, ind) in item.monthDataList" :key="ind"> <view :class="['cell-item-pic']"> <u-image mode="scaleToFill" v-if="subItem.changeType == 'ADD'" shape="circle" width="70rpx" height="70rpx" src="/static/tudi.png"></u-image> <u-image mode="scaleToFill" v-else shape="circle" width="70rpx" height="70rpx" src="/static/bued.png"></u-image> </view> <view class="cell-item-c"> <text class="cell-item-des">{{subItem.operateTypeDictValue||'--'}}</text> <text class="cell-item-date">{{subItem.createDate}}</text> </view> <view :class="['cell-item-score', subItem.changeType == 'ADD' ? 'black' : 'red']"> <text>{{subItem.changeType == 'ADD' ? '+'+subItem.changeNum : '-'+subItem.changeNum}}</text> <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image> </view> </view> <view class="nodata" v-if="item.monthDataList.length==0 && status!='loading'"> <u-empty :text="noDataText" mode="list"></u-empty> </view> </view> </view> <view class="nodata" v-if="listdata.length==0 && status!='loading'"> <u-empty :text="noDataText" mode="list"></u-empty> </view> <view class="loadmore"> <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" /> </view> </scroll-view> </view> </template> <script> import {ldUsedQuery} from '@/api/user.js' import getDate from '@/libs/getDate' import moment from 'moment' export default { data() { return { listdata: [], pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 数据总条数 noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 timeScope: 'threeMonth', // 时间类别 1:近三个月 2:本月 3:本月前一月 4:本月前2月 queryParam: { // 过滤条件 changeType: '', // 金币变更类型 }, optionsType: [ { label: '所有记录', value: '', }, { label: '获取记录', value: 'ADD', }, { label: '使用记录', value: 'SUB', } ] } }, onShow() { this.searchHandle() }, onLoad() { this.timeScope = 'threeMonth' this.queryParam.changeType = '' // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, computed: { // 时间过滤条件 optionsScope(){ // 过滤条件 近3个月 let arr = [ { label: '近3个月', value: 'threeMonth' }, { label: '本月', value: 'thisMonth' } ] arr[2] = { label: new Date().getMonth() + '月', value: 'lastMonth' } arr[3] = { label: new Date().getMonth()-1 + '月', value: 'lastTwoMonth' } return arr }, titType(){ // 过滤条件 所有记录 title const row = this.optionsType.find(item => item.value == this.queryParam.changeType) return row ? row.label : this.optionsType[0].label }, titScope(){ // 过滤条件 近3个月 title const row = this.optionsScope.find(item => item.value == this.timeScope) return row ? row.label : this.optionsScope[0].label }, // 查询时间段 queryDate() { var dt = new Date(); const threeTime = dt.setMonth( dt.getMonth()-2 ) const quickType = { threeMonth: [moment(getDate.getThreeMonthDays().starttime), moment(getDate.getThreeMonthDays().endtime)], lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)], thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)], lastTwoMonth: [moment(getDate.getLastTwoMonthDays().starttime), moment(getDate.getLastTwoMonthDays().endtime)], } let queryTime = { beginDate: quickType[this.timeScope][0].format('YYYY-MM-DD'), endDate: quickType[this.timeScope][1].format('YYYY-MM-DD') } return queryTime }, }, methods:{ // 搜索查询 searchHandle () { this.listdata = [] this.status = "loading" let params = Object.assign(this.queryParam,this.queryDate) console.log(params,'pppppppp') ldUsedQuery(params).then(res => { console.log(res,'pppppppp') if (res.status == 200) { let list = res.data // 查询3个月时 数据处理 if (this.timeScope == 'threeMonth') { list.map(item=>{ let m = moment(item.month).month()+1 item.month = (m == moment().month()+1) ? '本月' : m+'月' }) } this.listdata = list } else { this.noDataText = res.message this.listdata = [] this.total = 0 } this.status = "nomore" }) }, } } </script> <style lang="less"> page{ height: 100%; background-color: #fff; } .ldDetailed-container{ width: 100%; height: 100%; .nodata{ margin: 50upx 0; } // 筛选菜单 .filter-dropdown{ background-color: #fff!important; .u-dropdown__menu__item{ background-color: #fff!important; } } // 列表 .scroll-con{ height: calc(100% - 40); overflow: auto; } // 列表样式 .cell-item-con{ .cell-item{ background-color: #fff; color: #606266; .cell-item-month{ display: block; color: #909399; font-size: 26rpx; padding: 16rpx 30rpx; background-color: #f8f8f8; } .cell-item-main{ display: flex; align-items: center; padding: 20rpx 30rpx; border-bottom: 1rpx solid #e9e9e9; .cell-item-pic{ flex-shrink: 0; width: 90rpx; height: 90rpx; line-height: 90rpx; background-color: #FFFFFF; border-radius: 50%; text-align: center; display: flex; align-items: center; } .cell-item-c{ flex-grow: 1; .cell-item-des{ display: block; color: #606266; font-size: 30rpx; margin-bottom: 10rpx; } .cell-item-date{ display: block; color: #909399; font-size: 24rpx; } } .cell-item-score{ flex-shrink: 0; font-size: 40rpx; display: flex; align-items: center; } .black{ color: #01c9b2; } .red{ color: red; } .orange{ background-color: #fcbd71; color: #fff; } } .cell-item-main:last-child{ border: none; } } } } </style>