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.
392 lines
10 KiB
392 lines
10 KiB
2 years ago
|
<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>
|