316 lines
7.3 KiB
Vue
316 lines
7.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<div class="uni-flex ai-center screen-box">
|
||
<text>账期：</text>
|
||
<picker mode="date" @change="bindDateChange($event,0)" :value="pageData.searchTime[0]" :end="pageData.endDate" start="2019/12/01" class="screen-unit">
|
||
<text>{{pageData.searchTime[0]}}</text>
|
||
<image src="/static/images/tab_down.png" mode="aspectFit"></image>
|
||
</picker>
|
||
<text class="mr20">至</text>
|
||
<picker mode="date" @change="bindDateChange($event,1)" :value="pageData.searchTime[1]" :end="pageData.endDate" start="2019/12/01" class="screen-unit">
|
||
<text>{{pageData.searchTime[1]}}</text>
|
||
<image src="/static/images/tab_down.png" mode="aspectFit"></image>
|
||
</picker>
|
||
<button type="primary" size="mini" class="search-button" @tap="searchList">查询</button>
|
||
</div>
|
||
<view v-if="!pageData.isLoading && pageList.length>0">
|
||
<div class="box-card" v-for="(item,i) in pageList" :key="i" @tap="goDetail(item)">
|
||
<div class="box-top-title">
|
||
<span class="title-clock">{{$util.cutDate(item.ENDACCOUNT_DATE,'YYYY年MM月DD日')}}</span>
|
||
<span class="title-fn">{{item.SERVERPART_NAME}}</span>
|
||
</div>
|
||
|
||
<div class="box-bottom-tab">
|
||
<div class="tab-unit">
|
||
<i class="tab-icon1"></i>
|
||
<span>待办理：</span>
|
||
<span class="tab-unit-num">{{item.DEAL_COUNT}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</view>
|
||
<view v-else-if="pageData.isLoading===false" >
|
||
<noFound :nodata="pageList.length>0 ? false : true"/>
|
||
</view>
|
||
<view class="load-more" v-if="pageList.length>0">
|
||
<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters,mapMutations } from 'vuex'
|
||
export default {
|
||
data() {
|
||
let now = new Date()
|
||
|
||
let nowTime = this.$util.cutDate(now, 'YYYY/MM/DD')
|
||
let sTime = this.$util.cutDate(now, 'YYYY/MM/DD', -2)
|
||
return {
|
||
|
||
pageData: {
|
||
pageIndex: 1,
|
||
pageSize: 99,
|
||
searchTime: [sTime,nowTime],
|
||
endDate: nowTime,
|
||
sDate: sTime,
|
||
eDate: nowTime,
|
||
isEnd: false,
|
||
isLoading: true
|
||
},
|
||
showList:[],
|
||
pageList:[]
|
||
}
|
||
},
|
||
computed:{
|
||
...mapGetters({reloading:'shouldReLoadingList'})
|
||
},
|
||
methods: {
|
||
...mapMutations(['shouldReLoadingList']),
|
||
bindDateChange(e,index){
|
||
|
||
this.pageData.searchTime[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
},
|
||
searchList(){
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.pageData.isEnd = false
|
||
this.pageData.pageIndex = 1
|
||
this.pageList= []
|
||
this.getList()
|
||
},
|
||
getList () {
|
||
let _this = this
|
||
|
||
_this.$request.$get('GetEndaccountTotalList',{
|
||
// action_record: this.searchTime,
|
||
Page_Index: this.pageData.pageIndex,
|
||
Page_Size: this.pageData.pageSize,
|
||
Statistical_Date: `${this.pageData.searchTime[0]},${this.pageData.searchTime[1]}`, // '2019/12/27'
|
||
|
||
}).then(res=>{
|
||
|
||
uni.hideLoading()
|
||
_this.pageData.isLoading = false
|
||
if(!res.Result_Code ||res.Result_Code!='100') return
|
||
|
||
let list = res.Result_Data.List
|
||
|
||
_this.pageList = _this.pageData.pageIndex ==1 ? list :[..._this.pageList,...list]
|
||
// _this.showList = list.slice(0,_this.pageData.pageSize)
|
||
|
||
if (list.length < _this.pageData.pageSize) {
|
||
_this.pageData.isEnd = true
|
||
}
|
||
this.$forceUpdate()
|
||
})
|
||
},
|
||
goDetail(item){
|
||
this.$util.toNextRoute('navigateTo', '/pages/dataSummary/dayDetail?seviceId='+item.SERVERPART_ID+'&date='+item.ENDACCOUNT_DATE)
|
||
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.pageData.pageIndex = 1
|
||
this.pageData.isEnd = false
|
||
this.getList()
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
},
|
||
onReachBottom(){
|
||
|
||
if(!this.pageData.isEnd) {
|
||
// uni.showLoading({
|
||
// title:'正在加载'
|
||
// })
|
||
// let {pageIndex , pageSize} = this.pageData
|
||
// let showList = this.showList
|
||
// let pageList = this.pageList
|
||
// let maxLen = pageList.length
|
||
|
||
// let startArrIndex = pageIndex*pageSize - 1
|
||
// let endArrIndex = startArrIndex+pageSize
|
||
|
||
// if(endArrIndex < maxLen) {
|
||
// this.showList = showList.concat(pageList.slice(startArrIndex,endArrIndex))
|
||
// } else{
|
||
// this.pageData.isEnd = true
|
||
// this.showList.concat(pageList.slice(startArrIndex,maxLen))
|
||
// }
|
||
this.pageData.isEnd = false
|
||
this.pageData.pageIndex += 1
|
||
this.getList()
|
||
// setTimeout(function(){
|
||
// uni.hideLoading()
|
||
// },1000)
|
||
}
|
||
},
|
||
onShow() {
|
||
let _this = this
|
||
if(this.reloading) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
_this.pageData.pageIndex = 1
|
||
_this.pageData.isEnd = false
|
||
_this.getList()
|
||
_this.shouldReLoadingList(false)
|
||
}
|
||
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
onHide() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.screen-box {
|
||
background-color: #fff;
|
||
padding: 0 20rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
.screen-box .screen-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 200rpx;
|
||
padding: 0 14rpx;
|
||
line-height: 3;
|
||
}
|
||
.screen-box text {
|
||
line-height: 3;
|
||
}
|
||
.screen-box image{
|
||
width: 12rpx;
|
||
height: 8rpx;
|
||
margin: 0 16rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.search-button {
|
||
font-size: 24rpx;
|
||
padding: 0 20rpx;
|
||
color: #417CF7;
|
||
background-color: #F8FCFF;
|
||
border: 3rpx solid #6695F8;
|
||
line-height: 1.8;
|
||
border-radius: 6rpx;
|
||
}
|
||
.mr20 {
|
||
margin: 0 30rpx 0 16rpx;
|
||
}
|
||
/* 内容卡片 */
|
||
.box-card {
|
||
|
||
margin: 30upx 24upx;
|
||
background-color: #fff;
|
||
box-shadow: 0px 0upx 8upx 0.4upx #e2e2e2;
|
||
border-radius: 6upx;
|
||
overflow: hidden;
|
||
}
|
||
.box-top-title {
|
||
padding: 16upx 24upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fafafa;
|
||
}
|
||
.title-clock {
|
||
font-size: 28upx;
|
||
color: #454545;
|
||
display: inline-block;
|
||
}
|
||
.title-fn {
|
||
font-size: 26upx;
|
||
color: #636363;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.title-fn:before {
|
||
content: '';
|
||
display: block;
|
||
margin-right: 20upx;
|
||
width: 28upx;
|
||
height: 20upx;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
|
||
}
|
||
|
||
.title-clock:before {
|
||
content: '';
|
||
display: inline-block;
|
||
margin-right: 12upx;
|
||
width: 24upx;
|
||
height: 24upx;
|
||
background: url(../../static/images/effective/jt.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
.box-center-title {
|
||
color: #6A6A6A;
|
||
padding-left: 36upx;
|
||
font-size: 26upx;
|
||
}
|
||
.box-bottom-tab{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
padding: 24upx 24upx;
|
||
}
|
||
.tab-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
/* padding-left: 36upx; */
|
||
color: #636363;
|
||
font-size: 26upx;
|
||
flex: 1;
|
||
}
|
||
.tab-unit:after{
|
||
content: '';
|
||
display: block;
|
||
/* margin-left: 16upx; */
|
||
flex: 1;
|
||
height: 24upx;
|
||
background: url(../../static/images/effective/sj.png) no-repeat center right;
|
||
background-size: contain;
|
||
}
|
||
.tab-icon1:before {
|
||
content: '';
|
||
display: block;
|
||
margin-right: 20upx;
|
||
width: 32upx;
|
||
height: 32upx;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
|
||
}
|
||
.tab-icon1:before {
|
||
background-image: url(../../static/images/mbwa/rw.png);
|
||
}
|
||
.title-fn:before {
|
||
background-image: url(../../static/images/effective/rjjy_fwq.png);
|
||
}
|
||
.tab-unit-num {
|
||
font-size: 30upx;
|
||
color: #454545;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|