123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <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>
|