caoliancun
/
LSM_OIL_SITE_zhongping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
中品云站
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.
10 Commits
3 Branches
0 Tags
1.3 MiB
 
 
 
 
Tag: Branch: Tree: 69357846e7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '69357846e7'
${ noResults }
LSM_OIL_SITE_zhongping/pages/TransactionStatistics/TransactionStatistics.vue

591 lines
16 KiB
Raw Blame History

<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||`&nbsp;${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>