572 lines
14 KiB
Vue
572 lines
14 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
|
||
<scroll-view scroll-y="true" @scroll="showFixed" style="height:100%" @scrolltolower="reachBottom()" :style="{'overflow':showPopupMiddle ? 'hidden': 'scroll'}">
|
||
<div class="fixed-box" :style=" 'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
|
||
<view>
|
||
<view class="center-title">{{sMsg.SERVERPART_NAME}}</view>
|
||
|
||
<view class="title-clock" style="color: #fff;text-align: center;">{{sMsg.ENDACCOUNT_DATE}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="center-title">日结营收(元）</view>
|
||
<view class="tab-unit-num " style="color: #fff;text-align: center;">{{sMsg.CASHPAY ? $util.fmoney(sMsg.CASHPAY,2) : '0.00'}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="center-title">待我办理</view>
|
||
<view class="tab-unit-num " style="color: #fff;text-align: center;">{{sMsg.DEAL_COUNT}}</view>
|
||
</view>
|
||
</div>
|
||
<div class="box-card" v-show="sMsg.SERVERPART_NAME" :style="'opacity:'+(1-opacity)+';'" >
|
||
<div class="box-top-title">
|
||
<span class="box-center-title">{{sMsg.SERVERPART_NAME}}</span>
|
||
<picker mode="date" @columnchange="bindDateColumnChange" @change="bindDateChange" :value="values" :end="pageData.endDate" :start="pageData.startDate" class="title-clock" >
|
||
<view>{{sMsg.ENDACCOUNT_DATE}} <text class="uni-icon uni-icon-arrowdown"></text></view>
|
||
</picker>
|
||
<!-- <span class="title-clock">{{sMsg.ENDACCOUNT_DATE}}</span> -->
|
||
</div>
|
||
<view class="top-card">
|
||
<div class="box-center-box">
|
||
<span class="center-title">日结营收(元）</span>
|
||
<span class="center-num">{{sMsg.CASHPAY ? $util.fmoney(sMsg.CASHPAY,2) : '0.00'}}</span>
|
||
</div>
|
||
<div class="box-bottom-tab">
|
||
<view class="tab-unit" style="flex: 3;">
|
||
|
||
<span class="tab-icon2" v-if="sMsg.DIFFERENT_PRICE_LESS==0 && sMsg.DIFFERENT_PRICE_MORE!=0">长款金额</span>
|
||
<span class="tab-icon2" v-else-if="sMsg.DIFFERENT_PRICE_LESS!=0 && sMsg.DIFFERENT_PRICE_MORE==0">短款金额</span>
|
||
<span class="tab-icon2" v-else>长短款额</span>
|
||
</view>
|
||
<view class="tab-unit" style="flex: 2;">
|
||
<span class="tab-icon1">待我办理</span>
|
||
</view>
|
||
<view class="tab-unit" style="flex: 3;">
|
||
<span class="tab-icon2">在营门店</span>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="box-bottom-tab">
|
||
<div class="tab-unit" style="flex: 3;">
|
||
|
||
<span class="tab-unit-num priceRed" v-if="sMsg.DIFFERENT_PRICE_LESS!=0">{{sMsg.DIFFERENT_PRICE_LESS}}</span>
|
||
<span class="tab-unit-num priceGreen" v-if="sMsg.DIFFERENT_PRICE_MORE!=0">{{sMsg.DIFFERENT_PRICE_MORE}}</span>
|
||
<span class="tab-unit-num " v-if="sMsg.DIFFERENT_PRICE_LESS==0&& sMsg.DIFFERENT_PRICE_MORE==0">0.00</span>
|
||
</div>
|
||
<div class="tab-unit" style="flex: 2;">
|
||
|
||
<span class="tab-unit-num">{{sMsg.DEAL_COUNT}}</span>
|
||
</div>
|
||
<div class="tab-unit" style="flex: 3;" @tap="showPop">
|
||
|
||
<span class="weisc-ico" v-if="sMsg.SHOP_UPCOUNT>0">{{sMsg.SHOP_UPCOUNT}}</span>
|
||
<span class="tab-unit-num " :class="{'more-btn':sMsg.SHOP_UPCOUNT>0}">{{sMsg.SHOP_UPCOUNT>0 ? '/ '+sMsg.SHOP_TCOUNT : sMsg.SHOP_TCOUNT}}</span>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
|
||
<div v-if="pageList.length>0">
|
||
<div class="card" v-for="(item,i) in pageList" @tap="goDetail(item)" :key="i" :class="item.PENDSTATE == 0 ? 'conten-border' : ''">
|
||
|
||
<div class="uni-flex jc-between" >
|
||
<p class="contentName">{{item.SHOPNAME}}</p>
|
||
<text class="typeText" :class="item.TREATMENT_MARKSTATE == '2'|| item.TREATMENT_MARKSTATE == '4'? 'typeText-color' : ''">{{item.TREATMENT_MARK}}</text>
|
||
</div>
|
||
|
||
<div class="content-index">{{i+1}}</div>
|
||
<view class="uni-flex content-box-cashpay jc-end" >
|
||
<view>
|
||
<text class="content-price">{{$util.fmoney(item.CASHPAY)}}</text>
|
||
<text style="font-size: 24upx;">元</text>
|
||
</view>
|
||
<view class="long-short-money" v-if="item.DIFFERENT_PRICE!=0"><text :class="{'priceGreen':item.DIFFERENT_PRICE>0, 'priceRed':item.DIFFERENT_PRICE<0}">{{item.DIFFERENT_PRICE}}</text>元</view>
|
||
</view>
|
||
<view class="bb1"></view>
|
||
<view class="uni-flex jc-between" >
|
||
<view class="uni-flex align-top">
|
||
<text class="G-icon A-icon" ></text>
|
||
<text class="content-span">账期：{{item.ENDACCOUNT_STARTDATE}} - {{item.ENDACCOUNT_DATE}}</text>
|
||
</view>
|
||
<image :src="cardIcoPath(item.SCAN_TYPE)" mode="aspectFit"></image>
|
||
|
||
</view>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<popUp :show="showPopupMiddle" @hidePopup="closePop" type="middle" @touchmove.prevent>
|
||
<div class="header-top">未上传门店</div>
|
||
<div class="pop-body" @touchmove.prevent>
|
||
<view class="uni-flex pop-row align-top" style="aligin-items:flex-start;" v-for="(c,i) in unUploadList" :key="i">
|
||
<text class="pop-index" >{{i>8 ? i+1 :'0'+(i+1)}}</text>
|
||
<text class="">{{c.SHOPNAME}}</text>
|
||
</view>
|
||
</div>
|
||
</popUp>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapMutations} from 'vuex'
|
||
import popUp from '@/components/uni-popup.vue'
|
||
export default {
|
||
data() {
|
||
let nowTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
|
||
let startTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD','-90')
|
||
return {
|
||
pageData: {
|
||
pageIndex:1,
|
||
pageSize:10,
|
||
sDate: nowTime,
|
||
SERVERPART_ID: '',
|
||
isEnd: false,
|
||
isLoading: true,
|
||
endDate: nowTime,
|
||
startDate: startTime
|
||
},
|
||
|
||
sMsg:{},
|
||
fixedY: -68,
|
||
opacity: 0,
|
||
showPopupMiddle: false,
|
||
pageHieght: uni.getSystemInfoSync().windowHeight,
|
||
pageList:[],
|
||
unUploadList:[],
|
||
|
||
}
|
||
},
|
||
components:{
|
||
popUp
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations(['shouldReLoadingList']),
|
||
bindDateChange(e) {
|
||
let values = e.detail.value
|
||
|
||
|
||
this.pageData.pageIndex =1
|
||
this.pageData.isEnd = false
|
||
this.pageData.sDate = values.replace(/-/ig,'/')
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.getList()
|
||
this.getHeader()
|
||
this.getUnUpLoadShops()
|
||
},
|
||
|
||
cardIcoPath(type) {
|
||
|
||
switch (type){
|
||
case 3:
|
||
return '/static/images/effective/jkcs.png'
|
||
case 1:
|
||
return '/static/images/effective/ewm.png'
|
||
case 2:
|
||
return '/static/images/effective/scj.png'
|
||
|
||
}
|
||
},
|
||
showFixed(e){
|
||
let options = e.detail
|
||
|
||
if(options.scrollTop > 95 && options.scrollTop < 162){
|
||
|
||
this.fixedY = -68+ (options.scrollTop -95)
|
||
this.opacity = (options.scrollTop -85)/68
|
||
}else if(options.scrollTop>162){
|
||
uni.setNavigationBarColor({
|
||
backgroundColor:"#EAEBEB"
|
||
})
|
||
this.fixedY = 0
|
||
this.opacity = 1
|
||
}else{
|
||
this.fixedY = -68
|
||
this.opacity = 0
|
||
}
|
||
|
||
},
|
||
getList () {
|
||
let _this = this
|
||
|
||
_this.$request.$get('GetEndaccountDetails',{
|
||
|
||
statistical_Date: this.pageData.sDate,
|
||
Serverpart_Id: this.pageData.SERVERPART_ID,
|
||
page_Index: this.pageData.pageIndex,
|
||
page_Size: this.pageData.pageSize,
|
||
|
||
}).then(res=>{
|
||
uni.hideLoading()
|
||
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]
|
||
|
||
if (list.length < _this.pageData.pageSize) {
|
||
|
||
_this.pageData.isEnd = true
|
||
}
|
||
|
||
})
|
||
},
|
||
getHeader () {
|
||
let _this = this
|
||
_this.$request.$get('GetEndaccountListByDate',{
|
||
statistical_Date: this.pageData.sDate,
|
||
Serverpart_Id: this.pageData.SERVERPART_ID
|
||
|
||
}).then(res=>{
|
||
|
||
if (res.Result_Data.List && res.Result_Code==100) {
|
||
let _data = res.Result_Data.List[0]
|
||
|
||
_data.ENDACCOUNT_DATE = _this.$util.cutDate(_data.ENDACCOUNT_DATE,'MM月DD日')
|
||
|
||
_data.DIFFERENT_PRICE_LESS = _this.$util.fmoney(_data.DIFFERENT_PRICE_LESS)
|
||
_data.DIFFERENT_PRICE_MORE = _this.$util.fmoney(_data.DIFFERENT_PRICE_MORE)
|
||
_this.sMsg = _data
|
||
if(_data.SHOP_UPCOUNT>0){
|
||
_this.getUnUpLoadShops()
|
||
}
|
||
}
|
||
|
||
|
||
})
|
||
},
|
||
goDetail(item){
|
||
this.$util.toNextRoute('navigateTo', '/pages/dataSummary/detail?SERVERPART_ID='+item.SERVERPART_ID+'&ENDACCOUNT_ID='+item.ENDACCOUNT_ID)
|
||
|
||
},
|
||
getUnUpLoadShops(){
|
||
let _this = this
|
||
_this.$request.$get('GetUnUpLoadShops',{
|
||
|
||
action_record: _this.pageData.sDate,
|
||
Serverpart_Id: _this.pageData.SERVERPART_ID
|
||
}).then(res => {
|
||
let _data = res.Result_Data
|
||
|
||
_this.unUploadList = _data.List
|
||
|
||
})
|
||
},
|
||
reachBottom () {
|
||
let _this = this
|
||
if (!_this.pageData.isEnd) {
|
||
_this.pageData.pageIndex += 1
|
||
_this.getList()
|
||
}
|
||
},
|
||
showPop(){
|
||
|
||
if(this.sMsg.SHOP_UPCOUNT>0){
|
||
this.showPopupMiddle = true
|
||
}
|
||
},
|
||
closePop(){
|
||
this.showPopupMiddle = false
|
||
},
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.pageData.pageIndex = 1
|
||
this.pageData.isEnd = false
|
||
this.getList()
|
||
this.getHeader()
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
|
||
onReachBottom() {
|
||
this.reachBottom()
|
||
},
|
||
onLoad(option) {
|
||
let _this = this
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.pageData.sDate = option.date //"2020/11/26 "
|
||
this.pageData.SERVERPART_ID = option.seviceId
|
||
this.getList()
|
||
this.getHeader()
|
||
|
||
uni.$on('datasummary', function (data){
|
||
|
||
if(data) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
_this.pageData.pageIndex = 1
|
||
_this.pageData.isEnd = false
|
||
_this.getList()
|
||
_this.getHeader()
|
||
_this.shouldReLoadingList(true);
|
||
}
|
||
});
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
uni.$off('datasummary');
|
||
},
|
||
onHide() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url('../../common/css/listUnit.css');
|
||
.page-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.long-short-money {
|
||
position: absolute;
|
||
right: 30upx;
|
||
font-size: 24upx;
|
||
color: #636363;
|
||
top: 130rpx;
|
||
}
|
||
.long-short-money text {
|
||
font-size: 24upx;
|
||
}
|
||
.card image{
|
||
width: 30upx;
|
||
height: 30upx;
|
||
}
|
||
.scan-ico, .shouchi-ico, .jiekou-ico {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 18px;
|
||
}
|
||
.scan-ico:after {
|
||
content:'';
|
||
display: block;
|
||
margin-left: 16upx;
|
||
width: 30upx;
|
||
height: 30upx;
|
||
background: url(../../static/images/effective/ewm.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
.shouchi-ico:after {
|
||
content:'';
|
||
display: block;
|
||
margin-left: 16upx;
|
||
width: 21upx;
|
||
height: 29upx;
|
||
background: url(../../static/images/effective/scj.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
.jiekou-ico:after {
|
||
content:'';
|
||
display: block;
|
||
margin-left: 16upx;
|
||
width: 29upx;
|
||
height: 27upx;
|
||
background: url(../../static/images/effective/jkcs.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
.weisc-ico:before {
|
||
content:'';
|
||
display: block;
|
||
margin-right: 8upx;
|
||
width: 22upx;
|
||
height: 20upx;
|
||
background: url(../../static/images/effective/jg.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
/* 头部卡片 */
|
||
.box-card {
|
||
padding: 24upx 24upx 0;
|
||
|
||
background-color: #fff;
|
||
/* box-shadow: 0px 2upx 16upx 0.4upx #e2e2e2; */
|
||
/* position: fixed;
|
||
z-index: 1; */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
transition: all .2s;
|
||
background: url(../../static/images/effective/bg-top.png) no-repeat center;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: top center;
|
||
}
|
||
.top-card {
|
||
background: linear-gradient(to right, #686D8F, #A1ACC6);
|
||
margin-top: 24upx;
|
||
padding: 24upx 0 16upx 0;
|
||
border-radius: 16upx;
|
||
}
|
||
.box-bank {
|
||
width: 100%;
|
||
height: 364upx;
|
||
}
|
||
.box-top-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.title-clock {
|
||
color: #999;
|
||
font-size: 24upx;
|
||
text-align: right;
|
||
}
|
||
.title-fn {
|
||
font-size: 26upx;
|
||
color: #A1A1A1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.more-btn,.weisc-ico {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8upx;
|
||
color: #dd7575;
|
||
font-size: 30upx;
|
||
}
|
||
.more-btn:after{
|
||
content: '';
|
||
display: block;
|
||
margin-left: 8upx;
|
||
width: 14upx;
|
||
height: 24upx;
|
||
background: url(../../static/images/effective/sj.png) no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
|
||
.box-center-title {
|
||
font-size: 24upx;
|
||
color: #010101;
|
||
border-radius: 24upx;
|
||
padding: 0 16upx;
|
||
background-color: #DEDEDE;
|
||
text-align: center;
|
||
|
||
}
|
||
.uni-icon-arrowdown {
|
||
font-size: 24rpx;
|
||
}
|
||
.box-center-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 16upx;
|
||
}
|
||
.center-title {
|
||
color: #DEDEDE;
|
||
font-size: 26upx;
|
||
}
|
||
.center-num {
|
||
font-size: 56upx;
|
||
color: #fff;
|
||
font-family: Bahnschrift Regular;
|
||
}
|
||
.box-bottom-tab{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
/* flex-direction: column; */
|
||
text-align: center;
|
||
color: #636363;
|
||
font-size: 26upx;
|
||
justify-content: center;
|
||
}
|
||
.tab-icon1,.tab-icon2 {
|
||
font-size: 24upx;
|
||
color: #DEDEDE;
|
||
flex: 1;
|
||
}
|
||
|
||
.tab-unit-num {
|
||
font-size: 30upx;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.tab-unit-num+.tab-unit-num:before {
|
||
content: '/';
|
||
margin: 0 8upx;
|
||
color: #fff;
|
||
}
|
||
.priceGreen,.priceGreen.tab-unit-num {
|
||
color: #7CB9A5;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.priceRed,.tab-unit-num.priceRed {
|
||
color: #D13B3B;
|
||
font-size: 28upx;
|
||
}
|
||
.fixed-box {
|
||
padding: 16upx;
|
||
background: linear-gradient(to right, #686D8F, #A1ACC6);
|
||
transition: all .2s;
|
||
position: fixed;
|
||
top: 0upx;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 弹出内容 */
|
||
.header-top {
|
||
font-size: 30rpx ;
|
||
font-weight: 600 ;
|
||
color: #333 ;
|
||
text-align: left ;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
}
|
||
.pop-body {
|
||
width: 600upx;
|
||
max-height: 700upx;
|
||
overflow: auto;
|
||
}
|
||
.pop-row {
|
||
padding: 24upx 0;
|
||
font-size: 24upx;
|
||
align-items: center;
|
||
|
||
}
|
||
.pop-row + .pop-row {
|
||
border-top: 1upx solid #eee;
|
||
}
|
||
.pop-index {
|
||
color: #E1B582;
|
||
border: 1upx solid #E1B582;
|
||
border-radius: 8upx;
|
||
padding: 0upx 12upx;
|
||
margin-right: 12upx;
|
||
font-size: 24rpx;
|
||
line-height: 1.2;
|
||
}
|
||
</style>
|