jp-housekeep-hall/pages/invoiceManagement/invoiceManagement.vue

<template>
	<view>
		<u-navbar title="发票管理"  title-color="#101010" >
			<view class="slot" slot="right" @click="gotoUrl('/pages/invoiceManagement/InvoiceTitleManagement')">
				抬头管理
			</view>
		</u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" bar-width="100" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 未开发票 -->
		<view class="not-invioced" v-if="current==0">
		<u-checkbox-group @change="selectOne" style="width: 100%;" >

			<view class="invoice-item" v-for="(item,i) in list1" :key="item" >
				<view class="radio">
					<label class="radio">
						<u-checkbox  v-model="item.checked"  :value="item.id" /><text></text>
					</label>
				</view>
				<view class="infos">
					<view class="title">
						<view class="text">
							{{thisparseUnixTime(item.createTime)}}{{item.remark}}扣费
						</view>
						<view class="money">
							{{item.amountABS}}元
						</view>
						
					</view>
					 
				</view>
			</view>
			</u-checkbox-group>
			<u-divider :isnone="list1.length==0"   nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		<!-- 已开发票 -->
		<view class="invoiced" v-if="current==1">
			<view class="invoice-item" v-for="(item,i) in list2"
			 @click="gotoUrl('/pages/invoiceManagement/invoiceDetails?id='+item.id)"
			 :key="i"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							{{item.title}}
						</view>
						<view  :class="{
							state:!item.image,
							state2:item.image,
						}" >
							{{item.image?'已开票':'开票中'}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							{{item.amount}}元
							
						

						</view>
					</view>
					<view class="item">
						<view class="name">
							抬头类型
						</view>
						<view class="value">
							
							{{item.headerType=='1'?'企业单位':''}}{{item.headerType=='2'?'个人/非企业单位':''}}
						</view>
					</view>
					<view class="item" v-if="item.headerType=='1'" >
						<view class="name">
							发票类型
						</view>
						<view class="value">
							{{item.type=='1'?'增值税专票':''}}{{item.type=='2'?'增值税普票':''}}
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							{{item.createTime}}		
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="invoice-item"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							2024年1月扣费发票
						</view>
						<view class="state2">
							已开票
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							1000.00元
							
						
			
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="value">
							联通公司
							
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							2024-02-07 16:00:00			
						</view>
					</view>
				</view>
			</view> -->
			<u-divider :isnone="list2.length==0"  v-if="list2.length==recordsTotal2" nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="current==0">
			<view class="all">
				<label class="radio">
				
					<u-checkbox-group @change="selectAll">

						<u-checkbox  v-model="checkedAll"  value="1" /><text></text>
					</u-checkbox-group>
				</label>
			</view>
			<view class="total">
				<view class="money">
					共{{sumCollectionMoney}}元
				</view>
				<view class="amount">
					{{sumCollection.length}}张发票
				</view>
			</view>
			<view class="btn-box">
				<button class="btn" @click="submit" >去开票</button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	import {
		parseUnixTime
	
	} from '@/apis/utils'
	export default {
		data() {
			return {
				list: [{
					id:0,
					name: '未开发票'
				}, {
					id:1,
					name: '已开发票'
				}],
				current: 0,
				checkedAll:false,
				checkboxList:[],
				list1:[],
				recordsTotal1:0,
				list2:[],
				recordsTotal2:0,
				pageIndex:1,
				
			}
		},
		onLoad() {
			this.getInvoiceList1()
		},
		onReachBottom() {
			if(this.current==1){
				var list=this.list2;
				var recordsTotal=this.recordsTotal2;
				
				if (list.length < recordsTotal) {			
					this.myLoadmore();
				}
			}
			
			
		},
		computed:{
			sumCollectionMoney(){
				var amounts=[];
				let totalAmount =0
				this.list1.forEach(item=>{
					//item.checked=()
					if(item.checked){
						amounts.push(item.amountABS)
					}
				})
				totalAmount = amounts.reduce((accumulator, currentValue) => {
				  return accumulator + currentValue;  
				}, 0); 
				
				
				return   totalAmount.toFixed(2)
				
			},
			sumCollection(){
				var sz=[];
				
				this.list1.forEach(item=>{
					//item.checked=()
					if(item.checked){
						sz.push(item.id)
					}
				})
				return sz
			}
		},
		methods: {
			myLoadmore() {
				this.pageIndex+=1;
				
				
				this.getInvoiceList2()
			},
			submit(){
				// var sz=[];
				
				// this.list1.forEach(item=>{
				// 	//item.checked=()
				// 	if(item.checked){
				// 		sz.push(item.id)
				// 	}
				// })
				if(this.sumCollection.length==0){
					uni.showToast({
						icon: "none",
						title: "请勾选所需的开票项目",
						
					})
					return
				}
				uni.navigateTo({
					url:"/pages/invoiceManagement/issueInvoice?ids="+this.sumCollection.join(),
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
				// uni.showLoading({
				// 	mask:true,title:'加载中...'
				// })
				// API.openInvoiceByRecordIds({
				// 	recordIds:this.sumCollection.join()
				// }).then((response) => {
				// 	uni.hideLoading();
				// 	//this.list=response.data.data;
				// 	this.companyTypes=response.data.companyTypes;
				// 	this.personTypes=response.data.personTypes;
				// }).catch(error => {
				// 	uni.hideLoading();
					
				// })
			},
			selectOne(e){
				this.checkedAll=false
				this.$forceUpdate()
				
			},
			selectAll(e){
				console.log(e)
				var sz=e
				this.list1.forEach(item=>{
					//item.checked=()
					this.$set(item,'checked',sz.length>0)
				})
				// this.$forceUpdate()
			},
			thisparseUnixTime(time){
				return parseUnixTime(time,'{y}年{m}月{d}日')
			},
			init(){
				this.pageIndex=1;
				this.current=0;
				this.getInvoiceList1()
				
			},
			change(index) {
				this.current = index;
				if(this.current==0){
					this.getInvoiceList1()
				}else{
					this.getInvoiceList2()
				}
			},
			addInfo(url) {
				var url = url;
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			getInvoiceList1(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceList({
					status:0,
					pageIndex:1,
					pageSize:9999
				}).then((response) => {
					uni.hideLoading();
					this.list1=response.data.data;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getInvoiceList2(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceList({
					status:1,
					pageIndex: this.pageIndex,
					pageSize: 20,
				}).then((res) => {
					uni.hideLoading();
					
					//this.list2=response.data.data;
					var list=[]
					if (this.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...this.list2,
							...res.data.data
						];
					}
					this.list2=list;
					
					this.recordsTotal2=res.data.recordsTotal;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.slot{
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-right: 32rpx;
	}
	// 标签
	.tabs{
		    position: fixed;
		background-color: #fff;
		    width: 100%;
		/deep/.u-tabs{
			width: 400rpx;
			margin: 0 auto;
		}
	}
	.invoiced,.not-invioced{
		margin-top: 100rpx;
	}
	.not-invioced{
		
		    padding-bottom: 160rpx;
			
	}
	.not-invioced{
		.invoice-item{
			width: 100%;
		}
	}
	
	// 发票
	.invoice-item{
		
		margin: 24rpx;
		padding: 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.infos{
			margin-left: 32rpx;
			flex: 1;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
				.text{
					color: rgba(51,51,51,1);
					
				}
				.money{
					color: rgba(255,61,0,1);
					white-space: pre;
					
				}
				.state{
					color: rgba(255,61,0,1);
					font-size: 36rpx;
				}
				.state2{
					color: rgba(0,185,98,1);
					font-size: 36rpx;
				}
			}
			.item{
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				.name{
					color: rgba(119,119,119,1);
				}
				.value{
					color: rgba(51,51,51,1);
					margin-left: 24rpx;
				}
			}
		}
	}
    // 底部
	.bottom{
		background-color: #fff;
		padding: 28rpx 32rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.total{
			margin-left: 110rpx;
			.money{
				color: rgba(22,119,255,1);
				font-size: 36rpx;
			}
			.amount{
				color: #111111;
				text-align: right;
			}
		}
		.btn-box{
			margin-left: auto;
			.btn{
				width: 260rpx;
				border-radius: 50px;
				background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
				color: rgba(255,255,255,1);
				font-size: 36rpx;
				line-height: 80rpx;
			}
		}
	}
   
</style>