wx_oms/salesRanking/page/index/index.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 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>