|
@@ -0,0 +1,210 @@
|
|
|
+<template>
|
|
|
+ <view class="ldDetailed-container">
|
|
|
+ <!-- 筛选菜单 -->
|
|
|
+ <u-dropdown ref="uDropdown" class="filter-dropdown">
|
|
|
+ <u-dropdown-item v-model="queryParam.recordType" :title="titType" :options="optionsType" @change="searchHandle(1)"></u-dropdown-item>
|
|
|
+ <u-dropdown-item v-model="queryParam.recordScope" :title="titScope" :options="optionsScope" @change="searchHandle(1)"></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">{{item.month}}</text>
|
|
|
+ <view class="cell-item-main" v-for="(subItem, ind) in item.list" :key="ind">
|
|
|
+ <text :class="['cell-item-pic', subItem.type == 1?'orange':'']">{{subItem.type == 1 ? '收' : '支'}}</text>
|
|
|
+ <view class="cell-item-c">
|
|
|
+ <text class="cell-item-des">{{subItem.dec}}</text>
|
|
|
+ <text class="cell-item-date">{{subItem.creatDate}}</text>
|
|
|
+ </view>
|
|
|
+ <text :class="['cell-item-score', Number(subItem.score) > 0 ? 'red' : 'black']">{{Number(subItem.score)>0 ? '+'+subItem.score : subItem.score}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
|
|
|
+ <view class="loadmore">
|
|
|
+ <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listdata: [
|
|
|
+ {
|
|
|
+ month: '本月',
|
|
|
+ list: [
|
|
|
+ { type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
|
|
|
+ { type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
|
|
|
+ { type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ month: '10月',
|
|
|
+ list: [
|
|
|
+ { type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
|
|
|
+ { type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
|
|
|
+ { type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ pageNo: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页条数
|
|
|
+ total: 0, // 数据总条数
|
|
|
+ noDataText: '暂无数据', // 列表请求状态提示语
|
|
|
+ status: 'loadmore', // 加载中状态
|
|
|
+ queryParam: { // 过滤条件
|
|
|
+ recordType: '',
|
|
|
+ recordScope: ''
|
|
|
+ },
|
|
|
+ optionsType: [
|
|
|
+ { label: '所有记录', value: 1, },
|
|
|
+ { label: '获取记录', value: 2, },
|
|
|
+ { label: '使用记录', value: 3, }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.searchHandle(1)
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ optionsScope(){ // 过滤条件 近3个月
|
|
|
+ let arr = [
|
|
|
+ { label: '近3个月', value: 1 },
|
|
|
+ { label: '本月', value: 2 }
|
|
|
+ ]
|
|
|
+ arr[2] = { label: new Date().getMonth() + '月', value: 3 }
|
|
|
+ arr[3] = { label: new Date().getMonth()-1 + '月', value: 4 }
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ titType(){ // 过滤条件 所有记录 title
|
|
|
+ const row = this.optionsType.find(item => item.value == this.queryParam.recordType)
|
|
|
+ return row ? row.label : this.optionsType[0].label
|
|
|
+ },
|
|
|
+ titScope(){ // 过滤条件 近3个月 title
|
|
|
+ const row = this.optionsScope.find(item => item.value == this.queryParam.recordScope)
|
|
|
+ return row ? row.label : this.optionsScope[0].label
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 搜索查询
|
|
|
+ searchHandle (pageNo) {
|
|
|
+ this.status = "loading"
|
|
|
+ pageNo ? this.pageNo = pageNo : null
|
|
|
+ // searchSuppliers({
|
|
|
+ // pageNo: this.pageNo,
|
|
|
+ // pageSize: this.pageSize,
|
|
|
+ // queryWord: this.queryValue
|
|
|
+ // }).then(res => {
|
|
|
+ // if (res.status == 200) {
|
|
|
+ // if(this.pageNo>1){
|
|
|
+ // this.listdata = this.listdata.concat(res.data.list || [])
|
|
|
+ // }else{
|
|
|
+ // this.listdata = res.data.list || []
|
|
|
+ // }
|
|
|
+ // this.total = res.data.count || 0
|
|
|
+ // this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据'
|
|
|
+ // } else {
|
|
|
+ // this.noDataText = res.message
|
|
|
+ // this.listdata = []
|
|
|
+ // this.total = 0
|
|
|
+ // }
|
|
|
+ this.status = "loadmore"
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ if(this.listdata.length < this.total){
|
|
|
+ this.pageNo += 1
|
|
|
+ this.searchHandle()
|
|
|
+ }else{
|
|
|
+ uni.showToast({ title: '已经到底了', icon: 'none' })
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .ldDetailed-container{
|
|
|
+ width: 100%;
|
|
|
+ // 筛选菜单
|
|
|
+ .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;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1rpx solid #e9e9e9;
|
|
|
+ .cell-item-pic{
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .cell-item-c{
|
|
|
+ flex-grow: 1;
|
|
|
+ .cell-item-des{
|
|
|
+ display: block;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+ }
|
|
|
+ .cell-item-date{
|
|
|
+ display: block;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell-item-score{
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .black{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .red{
|
|
|
+ color: #fa3534;
|
|
|
+ }
|
|
|
+ .orange{
|
|
|
+ background-color: #fcbd71;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell-item-main:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|