LSM_OIL_SITE/packageElectron/index.vue

<template>
	<view class="container">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">电子对账单</block>
		</cu-custom>

		<view class="options-frame">
			<view v-for="item,index in optionsList" :key="index" :class="index == currentIndex ? 'active':''"
				@click="selectOptions(index)">{{item.text}}</view>
		</view>

		<scroll-view v-if="dataList.length" class="list" :scroll-y="true" @scrolltolower="lower">
			<view class="item" v-for="item,index in dataList" :key="index">
			
				<view v-if="item.status!=0" class="introduce" @click="openDetails(item)">
					<view>{{item.id}}</view>
					<view>
						结算周期：
						<view>{{item.beginReconciliationTime}}至 {{item.endReconciliationTime}}</view>
					</view>
					<view>结算金额：{{item.statementAmount}}元</view>
					<view>推送时间：{{item.reviewTime?item.reviewTime:'暂无'}}</view>
					<view class="footer">
						<view v-if="item.status ==1" class="button" @click="openDetails(item)">点击确认</view>
						<view v-if="item.status ==2" class="buttonConfirmed">已确认</view>
						<view v-if="item.status ==3" class="buttonError">金额有误</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view v-else class="empty">
			<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/yunsite-empty.png"></image>
			<view>暂无对账单~</view>
		</view>

	</view>
</template>

<script>
	import serve from '@/api/packageElectron/packageElectron.js'

	export default {
		data() {
			return {
				currentIndex: 0,
				paramter: {
					currentPage: 1,
					pagesize: 20,
					params: {
						siteId: uni.getStorageSync('oilSitePriceId')
					},
				},
				dataList: [],
				optionsList: [{
					text: '全部',
					value: ''
				}, {
					text: '待确认',
					value: ''
				}, {
					text: '已确认',
					value: ''
				}, {
					text: '金额异常',
					value: ''
				}]
		
		
			}
		},

		onLoad() {
			this.getByPage()
		},

		methods: {
			selectOptions(index) {
				this.currentIndex = index
				this.paramter.currentPage = 1
				this.paramter.params ={
					siteId: uni.getStorageSync('oilSitePriceId')
				}
				if(index == 0){
					this.paramter.params.status = '5'
				}else if(index ==1){
					this.paramter.params.status = '1'
				}else if(index ==2){
					this.paramter.params.status = '2'
				}else if(index ==3){
					this.paramter.params.status = '3'
				}
				this.getByPage()
			},
			getByPage(){
				// this.parameter.params.siteId = this.siteId
				serve.getByPage(this.paramter).then(res=>{
					if (res.code === 20000) {
						if (!res.data.list.length&&this.paramter.currentPage!=1) {
							uni.showToast({
								title: '没有更多结算单啦~',
								icon: 'none'
							})
							return
						}
						if (this.paramter.currentPage == 1) {
							this.dataList = []
						}
						this.dataList = this.dataList.concat(res.data.list)
					}
				})
			},
		
	
		
			lower() {
				this.paramter.currentPage += 1
				this.getByPage()
			},
			openDetails(item){
				let stationInfo = JSON.stringify(item)
				uni.navigateTo({
					url: `./reconciliationDetails/index?data=${stationInfo}`
				})
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f1f2f7 !important;
		>.options-frame {
			display: flex;
			justify-content: space-between;
			padding: 0 31rpx;
			background: #fff;


			>view {
				width: 144rpx;
				height: 66rpx;
				font-size: 25rpx;
				line-height: 66rpx;
				text-align: center;
				color: #000000;

				>text {
					color: #F83D3D;
				}

				&.active {
					color: #e19555;
					border-bottom: 4rpx solid #e19555;
				}
			}
		}


		>.list {
			margin: 30rpx;
			flex: 1;
			overflow-y: hidden;
			.item {
				margin: 20rpx 60rpx 0 0;
				.introduce {
					padding: 12rpx 24rpx 24rpx;
					min-height: 220rpx;
					background: #fff;
					border: 2rpx solid #d7d7d7;
					border-radius: 10rpx;
					>view{
						padding: 10rpx 0;
					}
					>view:nth-child(1){
						font-weight: bold;
						padding-bottom: 12rpx;
						border-bottom: 2rpx solid #d7d7d7;
					}
					>.footer {
						position: relative;
						height: 58rpx;
						line-height: 58rpx;
						padding: 0 34rpx 40rpx;
						font-size: 32rpx;
						color: #000;
						font-weight: 550;
					
						.button {
							position: absolute;
							top: 0;
							right: 10rpx;
							width: 150rpx;
							height: 58rpx;
							line-height: 58rpx;
							text-align: center;
							font-size: 28rpx;
							color: #fff;
							background: #169bd5;
							border-radius: 10rpx;
						}
						.buttonConfirmed{
							position: absolute;
							top: -85rpx;
							right: 10rpx;
							width: 150rpx;
							height: 150rpx;
							line-height: 150rpx;
							text-align: center;
							font-size: 28rpx;
							color: #fff;
							background: #7f7f7f;
							border-radius: 75rpx;
							transform: rotate(-45deg);
						}
						.buttonError{
							position: absolute;
							top: -85rpx;
							right: 10rpx;
							width: 150rpx;
							height: 150rpx;
							line-height: 150rpx;
							text-align: center;
							font-size: 28rpx;
							color: #fff;
							background: #d9001b;
							border-radius: 75rpx;
							transform: rotate(-45deg);
						}
					
					
					}
				}

			}
		}

		

		>.empty {
			margin: 218rpx auto 0;

			>image {
				width: 473rpx;
				height: 404rpx;
			}

			>view {
				margin-top: 45rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
			}
		}

	}
</style>