wx_oms/salesRanking/page/index/enterpriseIndex.vue

<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 :key='index' 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="width: 160rpx; height: 100%; display: flex;flex-direction: column;align-items: center;overflow: hidden;" class="tc">
							<view class="t-icon">
								<view  :style="{background:item.parentMark=='0'?'':'#BC853B'}" class="list_item_tip">
								{{item.parentMark=='0'?'总公司':'子公司'}}
								</view> 
								<!-- <image @error='imgError' style="width: 100%; height: 100%;" :src="item.siteImages?item.siteImages:'../../../static/selegs.png'"></image> -->
							</view>
							<view style="width: 100%;" class="textOverflow">
								{{item.siteContacts||'暂无'}}
							</view>
						</view>
						<view class="flex list_item_lable_right">
							<view style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">{{item.companyName}}</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 type='1'  @chargeChange='chargeChange'  v-model="isShow.charge" />
		<datePopup @datePopupChange='datePopupChange' v-model="isShow.date" />
		<filters @filtersChange='filtersChange' v-model="isShow.filters" />
	</view>
</template>

<script>
	import sy from '@/api/sy'
	import seleBar from '@/components/seleBar'
	import moreFillend from '../../components/more.vue'
	import datePopup from '../../components/datePopup.vue'
	import filters from '../../components/filters.vue'
	import convertW from '../../components/convertW.js'
	import charge from '../../components/charge.vue'
	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()} 23:59:59`
			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()} 00:00:00`
		
		
		},
		onShow() {
			
		},
		onLoad() {
		},
		mounted() {
			this.getlist()
		},
		filters:{
			price(e){
				return convertW.convertW(e)
			}
		},
		methods: {
			refresherrefresh(){
				this.getData.currentPage = 1
				this.isShow.refresherTriggered = true
				this.getlist()
			},
			imgError(e, index, i){},
			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,productType:this.getData.params.productType}))
				})
			},
			//获取列表方法
			getlist() {
				this.getData.pageSize = this.seleBarData[this.index].open? 5:10
				sy.findEnterpriseDesc(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.seleBarData[this.index].open = false;
				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() {
				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>
	.list_item_tip{
		padding: 11rpx 14rpx;
		background-color:#9F43CC;
		color: #FFFFFF;
		font-size: 16rpx;
		width: fit-content;
		margin: 0 auto;
		display: flex;
	}
	.textOverflow{
		overflow: hidden;/*超出部分隐藏*/
		white-space: nowrap;/*不换行*/
		text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	>>>.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>