<template> <view class="unclear-container"> <uni-navbar pageName="待清运清单" :isBack="false" :isMap="true"></uni-navbar> <scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom"> <!-- 列表数据 --> <view class="cell-item-con"> <view class="cell-item" v-for="(item, index) in listdata" :key="index"> <view class="cell-item-c" @tap="goPage(item)"> <view class="cell-item-info"> <view class="cell-item-info-network"> {{item.stationName || '--'}} <u-badge type="success" bgColor="#c90101" :count="item.unCleanNum" :offset="[-10,-32]" size="mini"></u-badge> </view> <view class="cell-item-info-weight"> <view class="cell-item-weight-bar"> {{ item.totalWeight ? (item.totalWeight/1000).toFixed(3) : 0 }}kg <u-badge class="badge" type="primary" bgColor="#01c9b2" count="总" :offset="[0,0]"></u-badge> </view> <view class="cell-item-weight-bar"> {{ item.maxWeight ? (item.maxWeight/1000).toFixed(3) : 0 }}kg <u-badge class="badge" type="warning" bgColor="#05695d" count="最大" :offset="[0,0]"></u-badge> </view> </view> </view> <u-icon name="arrow-right" class="arrow-right" :size="28" color="#999"></u-icon> </view> <u-button size="mini" class="handle-btn" hover-class="none" :custom-style="customBtnStyle" @click="removeFun(item)">移除</u-button> </view> </view> <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty> <view class="loadmore" v-if="listdata.length!=0"> <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" /> </view> </scroll-view> <view class="footer-bar"> <u-button class="footer-handle-btn scan-btn" hover-class="none" :custom-style="scanBtnStyle" shape="circle" @click="clearingOutlets" size="medium" type="primary"> <u-icon name="scan" class="btn-icon" :size="28" color="#fff"></u-icon> <text>扫码清运</text> </u-button> <u-button class="footer-handle-btn" hover-class="none" :custom-style="btnStyle" shape="circle" @click="openQuery" size="medium"> <u-icon name="plus" class="btn-icon" :size="28" color="#606266"></u-icon> <text>增加清运网点</text> </u-button> </view> <!-- 确认清运 --> <u-popup v-model="messagePop" mode="center" class="custom-pop" length="80%" border-radius="14" :mask-close-able="false"> <view class="custom-con"> <view class="pop-title">提示</view> <view class="pop-con"> <view class="pop-item">确认清运以下网点-设备内的可回收物?</view> <view class="pop-item">{{networkData.stationName || ''}}</view> <view class="pop-item">{{networkData.srcDeviceCode || ''}}</view> <view class="form-con"> <u-form :model="form" ref="uForm"> <u-form-item label="备注" :border-bottom="false"> <u-input v-model="form.remarks" type="textarea" border /> </u-form-item> </u-form> </view> </view> <view class="btn-con"> <view class="handle-pop-btn cancel-btn" @click="cancelFun">取消</view> <view class="handle-pop-btn submit-btn" @click="submitFun">确定</view> </view> </view> </u-popup> </view> </template> <script> import { getSelfCleanTaskList, cleanDevice, cleanStationRemove, getDeviceMsg } from '@/api/unclear.js' import { parseQueryString } from '@/libs/tools.js' export default { data() { return { listdata: [], pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 数据总条数 noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 customBtnStyle: { // 自定义按钮样式 borderColor: '#01c9b2', backgroundColor: '#01c9b2', color: '#fff' }, scrollTop: 0, // 滚动条位置 scanBtnStyle: { // 自定义按钮样式 borderColor: '#07c160', backgroundColor: '#07c160', width: '100%' }, btnStyle: { // 自定义按钮样式 width: '100%' }, form: { remarks: '' // 备注 }, boxData: null, // 箱体二维码数据 messagePop: false, // 确认清运 networkData: null // 网点详情 } }, onShow() { this.pageNo = 1 this.refresh() }, methods:{ // 是否可清运 clearingOutlets(){ if(this.listdata.length==0){ uni.showToast({ title: '请先选择待清运网点,再进行扫码清运', icon: 'none' }) }else{ this.openScan() } }, // 扫码清运 openScan(){ const _this = this uni.scanCode({ success(e) { console.log(e) // 箱体二维码数据 // { // charSet: "ISO8859-1" // errMsg: "scanCode:ok" // rawData: "aHR0cDovL3d3dy5zeHp4eWoubmV0L3dlYi9zdGF0aWMvcXJjb2RlL2Rvd25sb2FkLWFwcC5odG1sP2lkPTFiODM3M2JhLWNmMDAtNDU2NS04Y2ZkLTVmOGZlNTYwYmNmMiZ0eXBlPWR1c3RiaW4=" // result: "http://www.sxzxyj.net/web/static/qrcode/download-app.html?id=1b8373ba-cf00-4565-8cfd-5f8fe560bcf2&type=dustbin" // scanType: "QR_CODE" // } if(e.scanType == 'QR_CODE'){ // 将箱体二维码数据e.result携带参数转换为json _this.boxData = parseQueryString(e.result) _this.getNetworkInfo() } }, fail(err) { console.log(err) } }) }, // 扫码获取网点信息 getNetworkInfo(){ const _this = this getDeviceMsg(_this.boxData).then(res => { if(res.status == 200){ _this.networkData = res.data _this.form.remarks = '' _this.messagePop = true }else{ _this.messagePop = false } }) }, // 取消清运 cancelFun(){ this.messagePop = false }, // 确定清运 submitFun(){ const _this = this uni.showLoading({ mask: true, title: '加载中' }) let obj = {} obj.deviceNo = (this.networkData && this.networkData.deviceNo) ? this.networkData.deviceNo : '' obj.remarks = this.form.remarks cleanDevice(obj).then(res => { uni.hideLoading() if(res.status == 200){ uni.showToast({ icon:'none', title: '清运成功,库存重量已重置为0' }) _this.messagePop = false setTimeout(()=>{ _this.refresh() },1000) }else{ uni.showToast({ icon:'none', title: res.message }) } }) }, // 增加清运网点 openQuery(){ uni.navigateTo({ url: '/pages/cleared/chooseNetwork' }) }, // 获取查询参数 刷新列表 refresh(){ this.listdata = [] this.total = 0 this.searchHandle(1) }, // 搜索查询 searchHandle (pageNo) { uni.showLoading({ mask: true, title: '加载中' }) this.status = "loading" pageNo ? this.pageNo = pageNo : null getSelfCleanTaskList({ pageNo: this.pageNo, pageSize: this.pageSize }).then(res => { uni.hideLoading() 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" }) }, // 移除 removeFun(row){ const _this = this uni.showModal({ title: '提示', content: '确认移除该网点的清运单?', success(res) { if (res.confirm) { uni.showLoading({ mask: true, title: '加载中' }) cleanStationRemove({ stationNo: row.stationNo }).then(ret => { uni.hideLoading() if(ret.status == 200){ uni.showToast({ title: ret.message, icon: 'none' }) _this.searchHandle(1) } }) } } }) }, // 查看详情 goPage(row){ uni.navigateTo({ url: '/pages/cleared/network?stationNo='+row.stationNo }) }, // scroll-view到底部加载更多 onreachBottom() { if(this.listdata.length!=0 && this.listdata.length < this.total){ this.pageNo++ this.searchHandle() }else{ uni.showToast({ title: '已经到底了', icon: 'none' }) this.status = "nomore" } } } } </script> <style lang="scss"> page{ height: 100%; } .unclear-container { width: 100%; height: 100%; display: flex; flex-direction: column; padding-bottom: 204rpx; // 列表 .scroll-con{ flex: 1; overflow: auto; } // 列表样式 .cell-item-con{ .cell-item{ margin: $uni-spacing-col-base $uni-spacing-row-base; background-color: #fff; border-radius: $uni-border-radius-base; color: $uni-text-color; font-size: $uni-font-size-base; box-shadow: 3rpx 3rpx 5rpx #eee; padding: 40rpx 20rpx; position: relative; .cell-item-c{ display: flex; justify-content: space-around; align-items: center; .cell-item-info{ flex-grow: 1; .cell-item-info-network{ word-break: break-all; margin-bottom: 26rpx; display: inline-block; position: relative; } .cell-item-info-weight{ font-size: 24rpx; display: flex; align-items: center; justify-content: space-between; .cell-item-weight-bar{ position: relative; display: inline-block; padding-right: 50rpx; &:nth-child(2){ padding-right: 76rpx; } } } } .arrow-right{ flex-shrink: 0; margin-left: 80rpx; } } .handle-btn{ position: absolute; right: $uni-spacing-row-sm; top: $uni-spacing-col-sm; } } } .footer-bar{ width: 100%; height: 204rpx; padding: 0 10%; position: fixed; bottom: 0; left: 0; text-align: center; .footer-handle-btn{ display: block; .btn-icon{ margin-right: 10rpx; } } .scan-btn{ margin-top: 24rpx; margin-bottom: 20rpx; } } // 弹框样式 .custom-pop{ .custom-con{ text-align: center; background: url(/static/pop-bg.png) no-repeat; background-size: 100% 100%; font-size: 30rpx; color: #5a5a5a; line-height: 54rpx; .pop-title{ padding: 20rpx 0; color: #fff; font-weight: bold; } .pop-con{ padding: 80rpx 0 40rpx; .pop-item{ padding: 0 20rpx; } .form-con{ padding: 10rpx 30rpx; } } .btn-con{ border-top: 1rpx solid rgba(213,213,213,0.8); .handle-pop-btn{ padding: 20rpx 0; width: 50%; display: inline-block; } .cancel-btn{ border-right: 1rpx solid rgba(213,213,213,0.8); } .submit-btn{ color: #16d1bc; } } } } .nodata{ padding-top: 400rpx; } } </style>