592 lines
16 KiB
Vue
592 lines
16 KiB
Vue
<template>
|
||
<view class="page-content my-bg">
|
||
<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true">
|
||
<block slot="content">交易统计</block>
|
||
<block slot="backText" class="back-text">返回</block>
|
||
</cu-custom>
|
||
|
||
<view class="main-money bg-main-oil">
|
||
<view class="dataTimeBox">
|
||
<view class="cu-capsule-container">
|
||
<view class="cu-capsule round bg-white solid line-gray" @tap="showModal(0)">
|
||
<view class='cu-tag bg-white'>
|
||
{{starTimes}}
|
||
</view>
|
||
<view class="cu-tag bg-white">
|
||
<text class='cuIcon-usefullfill rr90 padding-left-xs'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-margin">至</view>
|
||
<view class="cu-capsule-container">
|
||
<view class="cu-capsule round bg-white solid line-gray" @tap="showModal(1)">
|
||
<view class='cu-tag bg-white'>
|
||
{{endTimes}}
|
||
</view>
|
||
<view class="cu-tag bg-white">
|
||
<text class='cuIcon-usefullfill rr90 padding-left-xs'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding-xs flex align-center">
|
||
<view class="flex-sub text-center padding-top-lg">
|
||
<view class="txet-xxs">
|
||
<text class="text-white">交易金额(元)</text>
|
||
</view>
|
||
<view class=" text-sl padding padding-top-xs"><text class="text-white">￥{{basicData.totalMoney|numberFilter}}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class=" margin-left margin-right to-top">
|
||
<view class=" flex bg-white radius">
|
||
<view class="padding text-center flex-sub" >
|
||
<text class='text-lg' style="font-size: 30rpx;">交易笔数</text>
|
||
<view class='text-lg' style="font-size: 30rpx;">（笔）</view>
|
||
<view class="padding-sm">
|
||
<text class="oil-main-color text-lg" style="font-size: 30rpx;">{{basicData.totalCount}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="padding text-center flex-sub">
|
||
<text class='text-lg' style="font-size: 30rpx;">加油升数</text>
|
||
<view class="text-lg" style="font-size: 30rpx;">（升）</view>
|
||
<view class="padding-sm">
|
||
<text class="oil-main-color text-lg" style="font-size: 30rpx;">{{basicData.totalVolume |numberFilter}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-top-lg ">
|
||
<view class="titleforList margin-bottom-sm">
|
||
<view class="titleforList_left"></view>
|
||
<view class="titleforList_text">
|
||
该时间段订单
|
||
</view>
|
||
</view>
|
||
<view class=" menu-avatar radius">
|
||
<view class="cu-item bg-w padding radius shadow margin-bottom postions" v-for=" (item,i) in OrderList" :key="item.id" v-if="OrderList.length">
|
||
<view class="content">
|
||
<view class=" solid-bottom padding-bottom-sm">
|
||
<view class="flex-treble text-lg" @tap="copyId(item.orderSerialNumber)">
|
||
{{item.orderSerialNumber}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"></text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class=" text-content text-df">
|
||
<text class="lin-h-2">
|
||
{{item.siteName}}
|
||
</text>
|
||
</view> -->
|
||
<view class="showMoney">
|
||
<view class="text-lg text-red textmony text-bold">
|
||
<text>{{item.sitePriceAmount}}</text>
|
||
</view>
|
||
<view class="flex-sub text-right textIcon cuIcon-right">
|
||
</view>
|
||
</view>
|
||
<view class="text-sm " @tap="toDetails(item.id)">
|
||
<view class="flex">
|
||
<view class="details">
|
||
<view class="top1 text-left">
|
||
<text class="padding-left-xs padding-right-sm text-lg">
|
||
{{item.oilsCode}}
|
||
</text>
|
||
</view>
|
||
<view class="bottom text-left margin-top-xs margin-bottom-xs">
|
||
<text class="padding-left-xs text-lg">
|
||
<text class=" text-lg " v-if="item.volume">{{item.volume|numberFilter}} {{item.oilProductType=='GAS'?'L':'L'}}</text>
|
||
<!-- {{item.createTime}} -->
|
||
</text>
|
||
</view>
|
||
<view class="bottom text-left">
|
||
<text class="padding-left-xs text-lg">
|
||
加油车牌： {{item.plateNumber }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-top-sm flex justify-between" @tap="toDetails(item.id)">
|
||
<view class="text-gray text-lg">
|
||
{{item.orderTime||` ${item.createTime}`}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
<view class="quexingtu" v-if="OrderList.length<1">
|
||
<!-- <Empty /> -->
|
||
<image src="../../static/img/qslist.png" mode="" style='padding-top: 50rpx; width: 480rpx;height: 490rpx;'></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-picker mode="time" v-model="starshow" start-year='2020' :params='params' @confirm='confirmTime'></u-picker>
|
||
<u-picker mode="time" v-model="endshow" start-year='2020' :params='params' @confirm='confirmEndTime'></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import staffApi from '@/packageStaff/api/staff.js'
|
||
import cloudSiteApi from '@/api/cloud-site.js'
|
||
import oliSiteApi from '@/api/oli-site.js'
|
||
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLoadMore:false,
|
||
OrderList:[],
|
||
starshow:false,
|
||
endshow:false,
|
||
loadStatus:"loading",
|
||
params:{
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: true,
|
||
minute: true,
|
||
second: true
|
||
},
|
||
types:0,
|
||
starTimes:'2020-10-01 00:00:00',
|
||
endTimes:'2020-10-01 00:00:00',
|
||
mainURL: this.global.mainURL,
|
||
basicData: {
|
||
totalAccount: 0,
|
||
totalAmout: 0,
|
||
totalCount: 0
|
||
},
|
||
TimeList:{
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:"",
|
||
dateEndTime:"",
|
||
currentPage:1,
|
||
pageSize:10,
|
||
},
|
||
currentPage:1,
|
||
scanUrl: '',
|
||
userMenu: uni.getStorageSync('userMenu'),
|
||
loginUser: uni.getStorageSync('loginUser'),
|
||
title: 'Hello',
|
||
cuIconList: [],
|
||
channelId:uni.getStorageSync('channelId')
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getdayList()
|
||
this.getTime()
|
||
console.log('这里是onload')
|
||
uni.setStorageSync('orderType', 1)
|
||
},
|
||
onShow() {
|
||
console.log('这里是onshow')
|
||
// this.getYesterday()
|
||
// this.getdayList()
|
||
},
|
||
onPullDownRefresh() {
|
||
// this.getYesterday()
|
||
let _that = this
|
||
this.currentPage = 1
|
||
if(this.types == 0){
|
||
this.getdayList()
|
||
}else if(this.types == 1){
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:_that.starTimes,
|
||
dateEndTime:_that.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.getInfo(data)
|
||
}else{
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:this.starTimes,
|
||
dateEndTime:this.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.getInfo(data)
|
||
}
|
||
},
|
||
filters: {
|
||
// numberFilters(value){
|
||
// return value.toFixed(2)
|
||
// },
|
||
numberFilter(value) {
|
||
if (value) {
|
||
// let values = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/))
|
||
let number = (Math.round(value * 100) / 100).toFixed(2)
|
||
return number
|
||
} else {
|
||
return '0.00'
|
||
}
|
||
}
|
||
},
|
||
onReachBottom() { //上拉触底函数
|
||
console.log('触底函数')
|
||
let _that = this
|
||
console.log(this.types)
|
||
if(this.types == 0){
|
||
this.getdayList()
|
||
}else if(this.types == 1){
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:_that.starTimes,
|
||
dateEndTime:_that.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.getInfo(data)
|
||
}else{
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:this.starTimes,
|
||
dateEndTime:this.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.getInfo(data)
|
||
}
|
||
},
|
||
components: {
|
||
UniLoadMore
|
||
},
|
||
methods: {
|
||
getTime(){//获取时间
|
||
let nowDate = new Date();
|
||
let year = nowDate.getFullYear();
|
||
let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
|
||
let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
|
||
let hr = nowDate.getHours()
|
||
let mf = nowDate.getMinutes() < 10 ? '0' + nowDate.getMinutes() : nowDate.getMinutes()
|
||
let ss =nowDate.getSeconds() < 10 ? '0' + nowDate.getSeconds() :nowDate.getSeconds()
|
||
this.starTimes = year + "-" + month + "-" + day+" " + '00:00:00';
|
||
this.endTimes = year + "-" + month + "-" + day+" " +hr+':'+mf+':'+ss
|
||
},
|
||
|
||
copyId(id) {//复制订单id
|
||
uni.setClipboardData({
|
||
data: id,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '订单号已复制',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toDetails(id) {//前往订单详情
|
||
let orderType = uni.getStorageSync('orderType')
|
||
uni.setStorageSync('orderSource', orderType == 1 ? 'mpxoil' : null)
|
||
console.log(id)
|
||
uni.setStorageSync('orderId', id)
|
||
uni.navigateTo({
|
||
url: '/packageOrders/pages/orderList/OrderDetail/OrderDetail'
|
||
})
|
||
},
|
||
getdayList(){ //获取当天信息
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:'',
|
||
dateEndTime:'',
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
|
||
this.getInfo(data)
|
||
},
|
||
showModal(n){//显示时间list
|
||
if(n==0){
|
||
this.starshow = true
|
||
console.log('这里是起始时间设置')
|
||
}else{
|
||
this.endshow = true
|
||
console.log('这里是终点时间设置')
|
||
}
|
||
},
|
||
getInfo(data){
|
||
if(this.loadStatus == 'loading'){
|
||
oliSiteApi.getRefuelDataByDay(data).then((res)=>{
|
||
// console.log(res)
|
||
if(res.code == 20000){
|
||
this.basicData = res.data.info
|
||
console.log(this.basicData)
|
||
this.OrderList =this.OrderList.concat(res.data.list)
|
||
console.log(res.data.list)
|
||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.isLoadMore = true
|
||
this.loadStatus = 'nomore'
|
||
console.log('这里是小于10')
|
||
} else {
|
||
console.log('这里是大于于10')
|
||
this.currentPage++
|
||
this.isLoadMore = false
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:'只有这些数据了',
|
||
icon:'none'
|
||
})
|
||
}
|
||
},
|
||
changeInfo(data){
|
||
oliSiteApi.getRefuelDataByDay(data).then((res)=>{
|
||
// console.log(res)
|
||
if(res.code == 20000){
|
||
this.basicData = res.data.info
|
||
this.OrderList =res.data.list
|
||
console.log(res.data.list)
|
||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.isLoadMore = true
|
||
this.loadStatus = 'nomore'
|
||
console.log('这里是小于10')
|
||
} else {
|
||
console.log('这里是大于于10')
|
||
this.currentPage++
|
||
this.isLoadMore = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
confirmEndTime(e){ //获取 赋值 结束时间
|
||
if(this.starTimes == ''){
|
||
uni.showToast({
|
||
title:"请输入开始日期",
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
this.loadStatus = 'loading'
|
||
this.types = 2
|
||
this.currentPage = 1
|
||
this.endTimes =e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute+":"+e.second
|
||
let starTime = new Date(this.starTimes.replace(/-/g,"/")),
|
||
endTime = new Date(this.endTimes.replace(/-/g,"/"))
|
||
console.log(starTime)
|
||
console.log(endTime)
|
||
if(endTime < starTime){
|
||
uni.showToast({
|
||
title:"结束时间小于开始时间",
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:this.starTimes,
|
||
dateEndTime:this.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.changeInfo(data)
|
||
// oliSiteApi.getRefuelDataByDay(data).then((res)=>{
|
||
// this.basicData = res.data.info
|
||
// this.OrderList = res.data.list
|
||
// })
|
||
},
|
||
confirmTime(e){ //获取 赋值 开始时间
|
||
let _that = this
|
||
_that.starTimes = e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute+":"+e.second
|
||
if(_that.endTimes == ''){
|
||
return
|
||
}
|
||
this.loadStatus = 'loading'
|
||
this.types = 1
|
||
this.currentPage = 1
|
||
let starTime = new Date(_that.starTimes.replace(/-/g,"/")),
|
||
endTime = new Date(_that.endTimes.replace(/-/g,"/"))
|
||
if(endTime < starTime){
|
||
uni.showToast({
|
||
title:"开始时间大于结束时间",
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
day:"",
|
||
channelId:uni.getStorageSync('channelId'),
|
||
dateStartTime:_that.starTimes,
|
||
dateEndTime:_that.endTimes ,
|
||
currentPage:this.currentPage,
|
||
pageSize:10
|
||
}
|
||
this.changeInfo(data)
|
||
},
|
||
getSiteInfo() { //获取油站信息
|
||
cloudSiteApi.getSiteDetail().then(res => {
|
||
if (res.code === 20000) {
|
||
this.site = res.data.site
|
||
this.oilList = res.data.oil
|
||
uni.setStorage({
|
||
key: 'oilSite',
|
||
data: res.data.site
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// getYesterday() {
|
||
// oliSiteApi.getYesterdayOrderInfo(this.channelId).then(res => {
|
||
// uni.stopPullDownRefresh()
|
||
// if (res.code === 20000) {
|
||
// this.basicData = res.data.info
|
||
// }
|
||
// })
|
||
// },
|
||
scanQr() {
|
||
var that = this
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
uni.setStorageSync('qrCode', res.result)
|
||
uni.navigateTo({
|
||
url: that.scanUrl,
|
||
fail: (err) => {
|
||
console.log(err)
|
||
},
|
||
success: (res) => {
|
||
console.log('chengg', res)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 方便开发
|
||
// scanQr() {
|
||
// uni.setStorageSync('qrCode', 'XM&1299257961238990848')
|
||
// uni.navigateTo({
|
||
// url: '/pages/stationDetail/stationDetail',
|
||
// fail: (err) => {
|
||
// console.log(err)
|
||
// },
|
||
// success: (res) => {
|
||
// console.log('chengg', res)
|
||
// }
|
||
// })
|
||
|
||
// },
|
||
routerTo(url, name) {
|
||
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.quexingtu{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.textmony{
|
||
font-size:40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
.textIcon{
|
||
font-size: 40rpx;
|
||
}
|
||
.showMoney{
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
.postions{
|
||
position: relative;
|
||
}
|
||
.titleforList_left{
|
||
background-color: #FE0505;
|
||
width: 14rpx;
|
||
height: 40rpx;
|
||
margin-right: 9rpx;
|
||
}
|
||
.titleforList_text{
|
||
font-size: 34rpx;
|
||
}
|
||
.titleforList{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items:flex-end;
|
||
}
|
||
.text-margin{
|
||
margin: 0 10rpx;
|
||
}
|
||
.dataTimeBox{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
.bottom-bar {
|
||
position: relative;
|
||
padding-top: 50px;
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.bottom-bar-fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding-top: 70rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.main-money {
|
||
position: relative;
|
||
z-index: 1;
|
||
height:472rpx ;
|
||
}
|
||
|
||
.van-tag {
|
||
display: inline-block;
|
||
padding: 0.3rem 0.4rem;
|
||
position: absolute;
|
||
right: 1px;
|
||
font-size: 12px;
|
||
top: 25%;
|
||
background-color: #b9ffca;
|
||
border-radius: 10rem 0 0 10rem;
|
||
border-color: transparent;
|
||
}
|
||
|
||
.bg-main-color {
|
||
min-height: 160rpx;
|
||
}
|
||
.bg-w{
|
||
background-color: #ffff;
|
||
}
|
||
.to-top {
|
||
position: relative;
|
||
top: -140rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cu-list {
|
||
position: relative;
|
||
top: -140rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cu-list.grid>.cu-item [class*=cuIcon] {
|
||
font-size: 75rpx;
|
||
}
|
||
|
||
.cu-avatar {
|
||
background-color: transparent;
|
||
}
|
||
</style>
|