jp-charge/pagesFinance/MyInvoice/settlement.vue

<template>
	<view>
		<ujp-navbar title="财务单列表">
		</ujp-navbar>
		
		<view class="modal" >
		<u-picker v-model="showTimePicker"
		 @confirm="confirmTimePicker" @cancel="showTime=true"
		 mode="time" :params="params" ></u-picker>
		 
			<u-modal v-model="showTime"  title="请选择生成时间"  
			@confirm="confirmmodal" 
				:show-cancel-button="true" confirm-text="生成结算单" cancel-text="取消">
				
				
				<view class="infos">
					
					<view class="item">
						<view class="name">
							开始时间
						</view>
						<view class="content" @click="TimeKey='A',showTimePicker=true,showTime=false">
							{{defaultTimeA?defaultTimeA:'请选择开始时间'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="name">
							结束时间
						</view>
						<view class="content"  @click="TimeKey='B',showTimePicker=true,showTime=false">
							{{defaultTimeB?defaultTimeB:'请选择结束时间'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					
				</view>
		
		
			</u-modal>
		
		</view>
		
		<view class="main">
			<view class="item" v-for="(item ,index) in list"  :key="index" >
				<view  class="item1" >{{item.title}}</view>
				<view  class="item2" >生成时间：{{item.createTime}}</view>
				<view  class="item3" >
					<view  class="item31" >
						<view  class="item311" >
							总金额
						</view>
						<view  class="item312" >
							{{item.totalAmount}}元
						</view>
					</view>
					<view  class="item31" >
						<view  class="item311" >
							电量
						</view>
						<view  class="item312" >
							{{item.electricQuantity/ 10000}}度
						</view>
					</view>
					<view  class="item31" >
						<view  class="item311" >
							服务费
						</view>
						<view  class="item312" >
							{{item.servicePrice}}元
						</view>
					</view>
				</view>
				<view  class="item4" >
					<view  class="item41 item411" @click="down(item.settlementUrl)" >
						<img src="@/assets/img/riLine-file-download-line-2.svg"></img>
						
						下载结算单
					</view>
					<view  class="item41 item412"  @click="down(item.recordUrl)"  >
						<img src="@/assets/img/riLine-file-download-line-1.svg"></img>
						下载充电明细
					</view>
					
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 100px" v-if="!list.length">
			<img src="@/assets/img/blankpage.png">
			<view>查询为空</view>
		</view>
		
		<u-button    type="primary" @click="showTime=true" >生成结算单</u-button>
	</view>
</template>

<script>
		import * as API from '@/apis/invoiceApi.js'
	export default {
		data() {
			return {
				list:[],
				id:"",
				pageIndex: 1,
				recordsTotal: 0,
				showTime:false,
				showsheet:false,
				showTimePicker:false,
				TimeKey:"",
				defaultTimeA:'',
				defaultTimeB:'',
				params: {
									year: true,
									month: true,
									day: true,
									hour: false,
									minute: false,
									second: false
				},
			}
		},
		onReachBottom() {
			
				this.myLoadmore();
			
		},
		onLoad(op) {
			this.id=op.id
		},
		onReady() {
			this.getList()
		},
		methods: {
			down(url){
					if(url){
						window.location.href = url
					}else{
						uni.showToast({
							title:"下载异常"
						})
					}
			},
			confirmmodal(){
				if(!this.defaultTimeA){
					uni.showToast({
						title:"请选择开始时间"
					})
					this.showTime=true
					return
				}
				if(!this.defaultTimeB){
					uni.showToast({
						title:"请选择结束时间"
					})
					this.showTime=true
					return
				}
				if(this.defaultTimeA>this.defaultTimeB){
					uni.showToast({
						title:"结束时间需要大于开始时间"
					})
					this.showTime=true
					return
				}
				this.generateFinanceSettlementApi()
				
			},
			confirmTimePicker(e){
				
				var time=e.year+'-'+e.month+'-'+e.day
				
				
				if(this.TimeKey=='A'){
					this.defaultTimeA=time
				}
				if(this.TimeKey=='B'){
					this.defaultTimeB=time
				}
				this.showTime=true
			},
			generateFinanceSettlementApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.generateFinanceSettlement({
					entAccountId:this.id,
					startMonth:this.defaultTimeA,
					endMonth:this.defaultTimeB,
				}).then((res) => {
					uni.showModal({
						showCancel:false,
						title: '提示',
						content: '生成结算单成功',
						success: function (res) {
							
							
						}
					});
					this.pageIndex=1;
					this.list=[]
					this.getList()
				}).catch(error => {
						this.showTime=true
					uni.showToast({
					
						title: error
					})
				})
			},
			getList() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var form={}
				form.entAccountId=this.id
				 form.pageIndex=this.pageIndex
				 form.pageSize=20
				
				API.financeSettlementList(form).then((res) => {
					
					
					
					this.list = [
						...this.list,
						...res.data.data
					];
				
					
					this.recordsTotal = res.data.recordsTotal
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
				})
			},
			myLoadmore() {
				if (this.list.length < this.recordsTotal) {
					this.pageIndex += 1;
					this.getList()
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>

<style  lang="scss" scoped >
	.main{
		padding-bottom: 60px;
		.item{
			border-radius: 12px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			margin: 24rpx;
			padding: 24rpx;
			.item1{
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				font-weight: bold;
			}
			.item2{
				 color: rgba(153, 153, 153, 1);;
				font-size: 24rpx;
				
			}
			.item3{
				margin-top: 24rpx;
				    display: flex;
					justify-content: space-between;
				.item31{
					width: 30%;
					.item311{
						 color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						
					}
					.item312{
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-weight: bold;
					}
				}
				
			}
			.item4{
				margin-top: 24rpx;
				    display: flex;
				    justify-content: space-between;
					img{
						width: 32rpx;height: 32rpx;
					}
					font-size: 28rpx;

					.item41{
						width: 45%;
						padding:16rpx ;
						display: flex;
						 align-items: center;
						     justify-content: center;
						border-radius: 12px;
					}
					.item411{
						border: 1px solid rgba(22, 119, 255, 1);
						color:rgba(22, 119, 255, 1);
					}
					.item412{
						border: 1px solid rgba(0, 167, 89, 1);;
						color:rgba(0, 167, 89, 1);
					}
					
			}
		}
	}
	
.u-btn{
		margin: 0 16px;
		position: fixed;
		bottom: 12px;
		left: 0;
		right: 0;
		height: 44px;
		line-height: 44px;
		border-radius: 8px;
		background-color: rgba(24, 90, 198, 100);
		color: rgba(255, 255, 255, 100);
	}
	
	// 弹窗
	.modal {
		background-color: #101010;
		
	
		.title {
	
			line-height: 20px;
			padding: 18px 52px;
			background-image: linear-gradient(rgb(0, 217, 115), #00A457);
			color: #fff;
			text-align: center;
	
		}
	
		.infos {
			padding: 20px 14px;
	
			.item {
				white-space: pre;
				line-height: 28px;
				display: flex;
				justify-content: space-between;
				color: #666666;
				font-size: 16px
				
			}
			.content{
				color: #000;
			}
			.hint {
				color: rgba(238, 49, 56, 100);
				margin-top: 16px;
	
				font-size: 14px
			}
		}
	
	}
</style>