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.
391 lines
10 KiB
391 lines
10 KiB
<template> |
|
<view class="fd flex"> |
|
<topBar height="373rpx" title="油站动销"> |
|
<view slot="coment"> |
|
<view style="padding: 26rpx 40rpx"> |
|
<seleBar @seleBarFn='seleBarFn' :seleBarData='seleBarData' /> |
|
</view> |
|
<view class="header_footer"> |
|
<view> |
|
<view class="flex jc">负责人</view> |
|
<view |
|
@click="chargeOpen" |
|
style="border-bottom-left-radius:0px;border-top-left-radius: 0px;width:164rpx;"class="header_footer_item flex ac jc"> |
|
<text style="width: 100%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">{{getData.params.customerName}}</text> |
|
</view> |
|
</view> |
|
<view style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;"> |
|
<view class="flex js ae"> |
|
<text>统计日期</text> |
|
<text style="font-size: 18rpx;visibility: hidden;">01/25 16:08 </text> |
|
</view> |
|
<view style="padding: 0 20rpx; width: fit-content;" class="header_footer_item flex ac jc"> |
|
<text style="font-size: 27rpx;" @click="isShow.date=true"> {{ getData.params.startTime.split(' ')[0] }} 至 {{getData.params.endTime.split(' ')[0] }} </text> |
|
</view> |
|
</view> |
|
<view class="header_footer_item_right"> |
|
<view @click="isShow.filters=true" |
|
style="border-bottom-right-radius:0px;border-top-right-radius: 0px;" |
|
class="header_footer_item flex ac jc "> |
|
{{getData.params.dataArrangement=='desc'?'顺序':'倒序'}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</topBar> |
|
<view class="sale_list"> |
|
<scroll-view v-if="dataList.length!==0" :refresher-triggered='isShow.refresherTriggered' @refresherrefresh='refresherrefresh' :refresher-enabled='true' @scrolltolower='scrolltolower' scroll-y="true" class="list_scroll"> |
|
<view v-for="(item,index) in dataList"> |
|
<view @click="jump(item)" class="list_item flex jb"> |
|
<text :style="{color:item.rankingNum==1?'#E5920E':item.rankingNum==2?'#9495AD':item.rankingNum==3?'#BC853B':'',fontWeight:item.rankingNum>3?'':'600'}" class="flex ac ranking">No.{{item.rankingNum}}</text> |
|
<view style="min-width: 80rpx; height: 100%; display: flex;flex-direction: column;align-items: center;" class="tc"> |
|
<view class="t-icon"> |
|
<image v-if="item.siteImages" style="width: 100%; height: 100%;" :src="item.siteImages"></image> |
|
<view v-else> |
|
<uni-icons color="#2866ff" custom-prefix="iconfont" type="iconjiayou" size="25"></uni-icons> |
|
</view> |
|
</view> |
|
<view> |
|
{{item.siteContacts||'暂无'}} |
|
</view> |
|
</view> |
|
<view class="flex list_item_lable_right"> |
|
<view style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">{{item.siteName}}</view> |
|
<view class="flex jb"> |
|
<text>{{item.volume.toFixed(2)}}L</text> |
|
<text>{{item.realPrice|price}}￥</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="moreif(index)"> |
|
<moreFillend @moreFilledFn='moreFilledFn' :isShow='isShow.moreFilled'/> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view v-if="dataList.length==0" |
|
style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;"> |
|
<image src="@/static/qx.png" style="width: 536rpx; height: 399rpx;"></image> |
|
</view> |
|
</view> |
|
<charge @chargeChange='chargeChange' v-model="isShow.charge" /> |
|
<datePopup @datePopupChange='datePopupChange' v-model="isShow.date" /> |
|
<filters @filtersChange='filtersChange' v-model="isShow.filters" /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import seleBar from '@/components/seleBar' |
|
import moreFillend from '../../components/more.vue' |
|
import charge from '../../components/charge.vue' |
|
import datePopup from '../../components/datePopup.vue' |
|
import filters from '../../components/filters.vue' |
|
import sy from '@/api/sy' |
|
import convertW from '../../components/convertW.js' |
|
export default { |
|
components: { |
|
seleBar, |
|
moreFillend, |
|
charge, |
|
datePopup, |
|
filters |
|
}, |
|
data() { |
|
return { |
|
seachValue: '', |
|
index: 0, |
|
single: "", |
|
//展开控制器 |
|
isShow: { |
|
moreFilled: true, |
|
charge: false, |
|
date: false, |
|
filters: false, |
|
refresherTriggered:false |
|
}, |
|
seleBarData: [{ |
|
lable: '柴油', |
|
value: 'DIESEL', |
|
open:true |
|
}, |
|
{ |
|
lable: '汽油', |
|
value: 'PETROL', |
|
open:true |
|
}, |
|
{ |
|
lable: 'LNG', |
|
value: 'GAS', |
|
open:true |
|
} |
|
], |
|
permission:false, |
|
getData: { |
|
pageSize:5, |
|
currentPage: 1, |
|
params: { |
|
endTime: '', |
|
startTime: '', |
|
productType: 'DIESEL', |
|
dataArrangement: 'desc', |
|
customerId: '', |
|
customerName:'全部' |
|
} |
|
}, |
|
dataList: [], |
|
endDate: null, |
|
} |
|
}, |
|
watch:{ |
|
"isShow.charge":{ |
|
handler:function(n,o){ |
|
if(!n){ |
|
this.getData.currentPage = 1 |
|
this.getlist() |
|
} |
|
}, |
|
deep:true |
|
} |
|
}, |
|
created() { |
|
let date = new Date |
|
let yesterday = new Date(date.getTime()-86400000) |
|
this.getData.params.endTime =`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()}` |
|
this.getData.params.startTime =`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()}` |
|
}, |
|
onShow() { |
|
}, |
|
onLoad() { |
|
}, |
|
mounted() { |
|
this.getlist() |
|
}, |
|
filters:{ |
|
price(e){ |
|
return convertW.convertW(e) |
|
} |
|
}, |
|
methods: { |
|
refresherrefresh(){ |
|
this.getData.currentPage = 1 |
|
this.isShow.refresherTriggered = true |
|
this.getlist() |
|
}, |
|
moreif(index){ |
|
if(!this.seleBarData[this.index].open) return false |
|
if(String(this.dataList.length/2).indexOf('.')!=-1){ |
|
return index+1 == (this.dataList.length+1)/2 |
|
}else{ |
|
return index+1 == this.dataList.length/2 |
|
} |
|
}, |
|
jump(e){ |
|
|
|
uni.navigateTo({ |
|
url:'../enterpriseDetails/enterpriseDetails?jsData='+JSON.stringify(Object.assign(e,{endTime:this.getData.params.endTime,startTime:this.getData.params.startTime})) |
|
}) |
|
}, |
|
//获取列表方法 |
|
getlist() { |
|
this.getData.pageSize = this.seleBarData[this.index].open? 5:10 |
|
sy.findOilSiteDesc(this.getData).then(res=>{ |
|
this.isShow.refresherTriggered = false |
|
if (res.code !== 20000) return |
|
this.permission = Number(res.data.params.permission)==0?false:true |
|
if (res.data.list.length == 0) { |
|
uni.showToast({ |
|
title: '没有数据了哦', |
|
icon: 'none' |
|
}) |
|
if(this.getData.currentPage==1) this.dataList = [] |
|
return |
|
} |
|
if(this.seleBarData[this.index].open && res.data.list.length < 10){ |
|
this.seleBarData[this.index].open = false |
|
} |
|
if (this.getData.currentPage !== 1) { |
|
this.dataList = this.dataList.concat(res.data.list); |
|
return |
|
} |
|
this.dataList = res.data.list |
|
}) |
|
}, |
|
//滑动到低触发的函数 |
|
scrolltolower() { |
|
uni.showToast({ |
|
title: '到底了', |
|
icon: 'none' |
|
}) |
|
if(this.seleBarData[this.index].open) return |
|
this.getData.currentPage+=1 |
|
this.getlist() |
|
}, |
|
// 排序组件选中触发的函数 e当前所选值 |
|
filtersChange(e) { |
|
this.getData.currentPage = 1 |
|
this.getData.params.dataArrangement = e.value |
|
this.getlist() |
|
}, |
|
// 日期选择组件选中触发的函数 e选中的值 |
|
datePopupChange(e) { |
|
this.getData.currentPage = 1 |
|
this.getData.params.startTime = e[0] |
|
this.getData.params.endTime = e[1] |
|
console.log(e,this.getData,this.seleBarData[this.index].open,'datePopupChange') |
|
this.getlist() |
|
|
|
}, |
|
//负责人选择组件选中触发的函数 e选中的值 |
|
chargeChange(e) { |
|
this.getData.params.customerId = e.id |
|
this.getData.params.customerName = e.userName |
|
console.log(e) |
|
}, |
|
//打开charge组件 |
|
chargeOpen() { |
|
console.log(this.permission,'****************') |
|
if(!this.permission) return |
|
this.isShow.charge = true; |
|
}, |
|
//点击moreFilled组件 回调事件 |
|
moreFilledFn() { |
|
this.getData.currentPage = 1 |
|
this.seleBarData[this.index].open = false |
|
this.getlist() |
|
}, |
|
forList(e) { |
|
let a = [] |
|
for (let i = 0; i < e; i++) { |
|
a.push(i) |
|
} |
|
return a |
|
}, |
|
//顶部选择器值变化时触发的函数 e 当前的值 |
|
seleBarFn(e,w) { |
|
console.log('%c 当前选择项↓', 'color:red;font-size:50px') |
|
console.log(e,w) |
|
this.dataList = [] |
|
this.getData.currentPage = 1 |
|
this.index = w |
|
this.getData.params.productType = e.value |
|
this.isShow.moreFilled = this.seleBarData[this.index].open |
|
this.getlist() |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
>>>.uni-easyinput__content { |
|
border-radius: 15px !important; |
|
margin-top: 15rpx; |
|
} |
|
|
|
.list_scroll:nth-child(1) { |
|
color: #007AFF; |
|
} |
|
|
|
.picker-view { |
|
/* height: 1000rpx; */ |
|
color: #000000; |
|
} |
|
|
|
.sj_icon { |
|
text-align: center; |
|
height: 30px; |
|
transition: all .3s; |
|
overflow: hidden; |
|
} |
|
|
|
.list_item_lable_right { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
width: 364rpx; |
|
overflow: hidden; |
|
} |
|
|
|
.tc { |
|
text-align: center; |
|
} |
|
|
|
.fw { |
|
flex-wrap: wrap; |
|
} |
|
|
|
.t-icon { |
|
width: 50rpx !important; |
|
height: 50rpx !important; |
|
} |
|
|
|
.list_scroll { |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
|
|
.list_item { |
|
background-color: #FFFFFF; |
|
margin: 0 40rpx 10rpx 40rpx; |
|
border-radius: 10px; |
|
color: #666666; |
|
font-size: 28rpx; |
|
padding: 26rpx; |
|
} |
|
|
|
.sale_list { |
|
flex: 1; |
|
padding-top: 40rpx; |
|
overflow: hidden; |
|
} |
|
|
|
.header_footer_item_right { |
|
border-bottom-right-radius: 0px; |
|
border-top-right-radius: 0px; |
|
} |
|
|
|
.header_footer_item_right:before { |
|
content: '111'; |
|
visibility: hidden; |
|
} |
|
|
|
.fd { |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
height: 100vh; |
|
} |
|
|
|
.ae { |
|
align-items: flex-end; |
|
} |
|
|
|
.jb { |
|
justify-content: space-between; |
|
} |
|
|
|
.js { |
|
justify-content: space-around; |
|
} |
|
|
|
.flex { |
|
display: flex; |
|
} |
|
|
|
.ac { |
|
align-items: center; |
|
} |
|
|
|
.jc { |
|
justify-content: center; |
|
} |
|
|
|
.header_footer_item { |
|
height: 90rpx; |
|
padding: 0 40rpx; |
|
border-radius: 10px; |
|
background: #ADCEFF; |
|
} |
|
|
|
.header_footer { |
|
display: flex; |
|
gap: 25rpx |
|
} |
|
</style>
|
|
|