<template> <view class="content"> <view class="header"> <view @click="openSearch"> <text v-if="searchForm.beginDate">{{searchForm.beginDate}}至{{searchForm.endDate}}</text> <text v-else>全部</text> <!-- <u-icon name="arrow-right" color="#999999" size="28"></u-icon> --> <u-image v-if="hasLogin" @click="openScreen=true" class="filter-img" width="36rpx" height="36rpx" src="/static/filter.png"></u-image> </view> <!-- 总计 --> <view class="header-cont"> <view class="cont-item"> <text>其它垃圾</text> <text v-if="!titleStatus" class="other">{{otherTotal}}kg</text> <u-loading :show="titleStatus"></u-loading> </view> <view class="cont-item"> <text>厨余垃圾</text> <text v-if="!titleStatus" class="chuyu">{{chuyuTotal}}kg</text> <u-loading :show="titleStatus"></u-loading> </view> <view class="cont-item"> <text>建筑垃圾</text> <text v-if="!titleStatus" class="jianzhu">{{jianzhuTotal}}kg</text> <u-loading :show="titleStatus"></u-loading> </view> </view> </view> <scroll-view class="scroll-con" :scroll-top="scrollTop" scroll-y @scrolltolower="onreachBottom"> <!-- 列表数据 --> <view class="cell-item" v-for="item in listdata"> <view class="cell-item-title" > <view> <text>{{item.createDate}}</text> </view> <view @click="intoPage(item)"> <span class="view">查看详情</span> <u-icon name="arrow-right" color="#999999" size="28"></u-icon> </view> </view> <view class="cell-item-cont"> <!-- 其他垃圾 --> <view class="cont-item"> <u-image src="/static/index/other.png"></u-image> <text>{{item.gatherOther? (item.gatherOther/1000).toFixed(3)/1 :0}}kg</text> </view> <!-- 厨余垃圾 --> <view class="cont-item"> <u-image src="/static/index/chuyu.png"></u-image> <text>{{item.gatherKitchen ? (item.gatherKitchen/1000).toFixed(3)/1 :0}}kg</text> </view> <!-- 建筑垃圾 --> <view class="cont-item"> <u-image src="/static/index/jianzhu.png"></u-image> <text>{{item.gatherBuilding ? (item.gatherBuilding/1000).toFixed(3)/1 :0}}kg</text> </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 @click="intoPage()" class="footer"> <!-- <u-icon name="edit-pen" size="30"></u-icon> --> <text>垃圾数据录入</text> </view> <!-- 筛选弹框 --> <search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal> </view> </template> <script> import searchModal from './searchModal.vue' import {gatherList,gatherTotal} from '@/api/index.js' import { checkLogin } from '@/api/login.js' import moment from 'moment' import getDate from '@/libs/getDate.js' export default { components: { searchModal }, data() { return { hasLogin: false, // 是否登录 listdata: [], // 列表数据 otherTotal: 0, // 其它垃圾总和 jianzhuTotal: 0, // 建筑垃圾总和 chuyuTotal: 0, // 厨余垃圾总和 pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 数据总条数 noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 titleStatus: false, // 顶部加载中状态 openScreen: false, // 是否打开筛选 searchForm: { // 查询条件 beginDate: getDate.getRecentday().starttime, // 创建时间默认筛选近7天 endDate: getDate.getRecentday().endtime, // 创建时间默认筛选近7天 }, scrollTop: 0, // 滚动条位置 } }, onLoad() { this.checkUpdate() // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, onUnload() { }, onShareAppMessage(res) { }, onShareTimeline(res) { }, onShow() { checkLogin().then(res => { this.hasLogin = res.status == 200 if(this.hasLogin){ this.pageInit() } else { this.noDataText = '您尚未登录或登录已过期,完成登录后可查看录入信息!' } }) }, methods: { pageInit() { this.pageNo = 1 this.pageSize = 10 this.total = 0 this.scrollTop = 0 this.otherTotal= 0 // 其它垃圾总和 this.jianzhuTotal= 0 // 建筑垃圾总和 this.chuyuTotal= 0 // 厨余垃圾总和 this.searchForm.beginDate = getDate.getRecentday().starttime this.searchForm.endDate = getDate.getRecentday().endtime console.log(this.searchForm,'this.searchForm') this.searchHandle() this.getTotal() }, // 检查更新 checkUpdate(){ if (uni.canIUse('getUpdateManager')) { const updateManager = uni.getUpdateManager() updateManager.onCheckForUpdate(function (res) { console.log('onCheckForUpdate====', res) // 请求完新版本信息的回调 if (res.hasUpdate) { console.log('res.hasUpdate====') updateManager.onUpdateReady(function () { uni.showModal({ title: '更新提示', content: '新版本已经准备好,是否重启应用?', success: function (res) { console.log('success====', res) // res: {errMsg: "showModal: ok", cancel: false, confirm: true} if (res.confirm) { // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 uni.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~' }) }) } }) } }, // 打开查询弹窗 openSearch(){ if(this.hasLogin){ this.openScreen = true } }, // 获取查询参数 刷新列表 refresh(params){ this.searchForm = params this.listdata = [] this.total = 0 this.searchHandle(1) this.getTotal() }, // 搜索查询 searchHandle (pageNo) { this.status = "loading" pageNo ? this.pageNo = pageNo : null gatherList({ pageNo: this.pageNo, pageSize: this.pageSize, beginDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'', endDate: this.searchForm.endDate ? moment(this.searchForm.endDate).format('YYYY-MM-DD 23:59:59'):'', }).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.scrollTop = 0 } this.total = res.data.count || 0 this.noDataText = '暂无数据' } else { this.noDataText = res.message this.listdata = [] this.total = 0 } this.status = "loadmore" }) }, // scroll-view到底部加载更多 onreachBottom() { console.log(111111) if(this.listdata.length < this.total){ this.pageNo += 1 this.searchHandle() }else{ uni.showToast({ title: '已经到底了', icon: 'none' }) this.status = "nomore" } }, // 总计 getTotal(){ this.titleStatus = true gatherTotal({ beginDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'', endDate: this.searchForm.endDate ? moment(this.searchForm.endDate).format('YYYY-MM-DD 23:59:59'):''}).then(res=>{ if(res.status==200){ const a = res.data.find(item=>item.rubbishType=='GATHER_BUILDING') const b = res.data.find(item=>item.rubbishType=='GATHER_OTHER') const c = res.data.find(item=>item.rubbishType=='GATHER_KITCHEN') this.jianzhuTotal= a ? (a.rubbishWeight/1000).toFixed(3)/1 : '0' this.chuyuTotal= c ? (c.rubbishWeight/1000).toFixed(3)/1 : '0' this.otherTotal= b ? (b.rubbishWeight/1000).toFixed(3)/1 : '0' } console.log(res) this.titleStatus = false }) }, // 打开垃圾数据录入页面 intoPage(item) { const flag=item ? item.gatherId : '' console.log(flag,'---------hangid,;;;;') let url = flag ? `/pages/index/addData?id=${flag}` : `/pages/index/addData` // uni.navigateTo({ // url: url // }) if(!this.hasLogin){ uni.showModal({ title: '提示', content: '您尚未登录或登录已过期,请登录后使用', success: (res)=> { if (res.confirm) { uni.navigateTo({ url: '/pages/login/login' }) } else if (res.cancel) { console.log('用户点击取消'); } } }); } else { uni.navigateTo({ url: url }) } } } } </script> <style lang="scss" scoped> .content { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; .header{ width: 100%; background-color: #FFFFFF; display: flex; flex-direction: column; border-radius: 15upx; padding: 30upx; box-shadow: 0upx 3upx 6upx #eee; margin-bottom: 20upx; :first-child { display: flex; justify-content: space-between; align-items: center; } .header-cont{ margin-top: 20upx; display: flex; align-items: center; justify-content: space-around; .cont-item{ display: flex; flex-direction: column; align-items: center; text{ line-height: 50upx; } text:last-child{ font-weight: 600; font-size: 28upx; } } .other{ color: #FB1E1E; } .chuyu{ color: #FCAE53; } .jianzhu{ color: #4EACFA; } } .filter-img{ padding: 10upx; } } .scroll-con{ flex: 1; width: 100%; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; overflow: auto; .cell-item{ width: 100%; background-color: #fff; border-radius: 15upx; // padding: 20upx; box-shadow: 0upx 3upx 6upx #eee; .cell-item-title{ padding: 20upx 20upx 10upx; width: 100%; display: flex; justify-content: space-between; // border-bottom: 1px solid #e6e6e6; .view{ color: #999999; margin-right: 12upx; } } .cell-item-cont{ width: 100%; display: flex; justify-content: space-between; padding: 20upx; margin-bottom: 20upx; .cont-item{ display: flex; flex-direction: column; align-items: center; width: 33%; // border-right: 1px solid #e6e6e6; :first-child { width: 120upx; height: 120upx; margin-bottom: 20upx; } } :last-child { border: none; } } } } .footer{ z-index: 9999; // position: absolute; // bottom: 30upx; // margin: 20upx; width: 95%; height: 80upx; background-color: #0DC55F; opacity: 1; border-radius: 50upx; color: #fff; font-size: 30rpx; display: flex; align-items: center; justify-content: center; } } </style>