You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
592 lines
16 KiB
592 lines
16 KiB
3 years ago
|
<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>
|