yanzong_qianduan/pages/invoice/indexset.vue

<template>
	<view class="invoice-box">
		<view class="bill-top">
			<view class="top-name" :class="tabIndex == 0 ? 'active' : ''" @click="onTabClick(0)">发票记录
				<view v-if="tabIndex == 0" class="active-border"></view>
			</view>
			<view class="top-name" :class="tabIndex == 1 ? 'active' : ''" @click="onTabClick(1)">发票抬头
				<view v-if="tabIndex == 1" class="active-border"></view>
			</view>
		</view>
		<view v-if="tabIndex == 0">
			<view class="empty" v-if="recordList.length == 0">
				<u-empty text="暂无信息" mode="list"></u-empty>
			</view>
			<view class="bill-record" v-else>
				<view class="bill-item" v-for="(item, index) in recordList" :key="index">
					<view class="bill-item-left">
						<view class="commpany-name">{{ item.header }}</view>
						<view class="bill-price">
							<text>¥</text>{{ item.price }}
						</view>
					</view>
					<text class="bill-time">{{ item.created_at }}</text>
				</view>
			</view>

		</view>
		<!-- 发票抬头 -->
		<view v-if="tabIndex == 1" style="padding-bottom: 164rpx">
			<view class="empty" v-if="recordHeaderList.length == 0">
				<u-empty text="暂无信息" mode="list"></u-empty>
			</view>
			<view v-else class="invoice-header">
				<u-swipe-action :show="item.show" :options="options" @click="onActionClick(index)"
					v-for="(item, index) in recordHeaderList" :key="index" @open="onActionOpen(index)">
					<view class="bill-header-item" @click="onAddInvoice(item)">
						<view class="bill-header-left">
							<view class="header-type"> 普通增值税发票-{{ item.source == 1 ? '个人' : '单位' }}</view>
							<view class="bill-header">
								{{ item.header }}
							</view>
							<view class="bill-header" style="margin-top:18rpx" v-if="item.source == 2">
								税号：{{ item.duty_no }}
							</view>
						</view>
						<u-icon name="edit-pen" size="30" color="#838383"></u-icon>
					</view>
				</u-swipe-action>
			</view>
			<view class="invoice-btn-box">
				<view class="invoice-btn" @click="onAddInvoice(null)">
					<text>+</text>添加发票抬头
				</view>
			</view>
		</view>


	</view>
</template>

<script>
import Empty from '@/components/empty'
import * as InvoiceApi from '@/api/invoice'
export default {
	data() {
		return {
			tabIndex: 0,
			recordList: [],
			recordHeaderList: [],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},
	onLoad() {
		this.getRecordList()
	},
	methods: {
		onTabClick(index) {
			this.tabIndex = index
			if (index == 1) {
				this.recordHeaderList = []
				this.getHeaderList()
			} else {
				this.recordList = []
				this.getRecordList()
			}
		},
		//发票记录
		async getRecordList() {
			uni.showLoading({
				title: "加载中"
			})
			let {
				status,
				data
			} = await InvoiceApi.invoicingLog({});
			if (status == 200) {
				uni.hideLoading();
				this.recordList = data.list
			}
		},
		//发票抬头
		async getHeaderList() {
			uni.showLoading({
				title: "加载中"
			})
			let {
				status,
				data
			} = await InvoiceApi.myInvoicing({});
			if (status == 200) {
				uni.hideLoading();
				this.recordHeaderList = data.list
				this.recordHeaderList.map(item => {
					item.show = false
				})
			}
		},
		//删除
		async onActionClick(index) {  
			let that = this 
			let {
				status,
				data
			} = await InvoiceApi.invoicingDelNew({ id: that.recordHeaderList[index].id});
			if (status == 200) {
				that.getHeaderList()
				uni.showToast({
					title: '删除成功！',
					icon: 'none',
					duration: 2000
				})
			}
		},
		onActionOpen(index) {
			this.recordHeaderList[index].show = true;
			this.recordHeaderList.map((val, idx) => {
				if (index != idx) this.recordHeaderList[idx].show = false;
			})
		},
		onAddInvoice(item) {
			uni.navigateTo({
				url: "/pages/invoice/editset?detailObj=" + JSON.stringify(item)
			})
		},
	}
}
</script> 
<style lang="scss" scoped>
page {
	background: #fafafa;
}

.invoice-btn-box {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 30rpx 44rpx;
	z-index: 8;
	background: #fafafa;

	.invoice-btn {
		height: 104rpx;
		background: #F55349;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;

		text {
			font-size: 50rpx;
			margin-right: 10rpx;
		}
	}
}

.invoice-header {
	background: #fff; 

	.bill-header-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 40rpx 46rpx 40rpx 64rpx;
		font-size: 32rpx;
	}

	.header-type {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 18rpx;
	}

	.bill-header {
		font-size: 32rpx;
		color: #AEAEAE;
	}

}

.bill-top {
	margin-top: 6rpx;
	margin-bottom: 4rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 0 138rpx;

	.top-name {
		width: 128rpx;
		font-size: 32rpx;
		height: 126rpx;
		font-weight: bold;
		color: #6F6F6F;
		display: flex;
		align-items: center;
		position: relative;

		.active-border {
			width: 72rpx;
			height: 8rpx;
			background: #FF2525;
			border-radius: 34rpx;
			position: absolute;
			bottom: 0;
			left: 26rpx;
		}

	}

	.active {
		color: #262626;
	}
}

.bill-item {
	background: #fff;
	margin-bottom: 10rpx;
	display: flex;
	padding: 44rpx 34rpx 40rpx 64rpx;
	justify-content: space-between;
	align-items: flex-end;

	.commpany-name {
		font-size: 32rpx;
		color: #454545;
		margin-bottom: 34rpx;
	}

	.bill-price {
		font-size: 40rpx;
		color: #F21A1C;
		font-weight: bold;

		text {
			font-size: 24rpx;
		}
	}

	.bill-time {
		display: inline-block;
		width: 180rpx;
		font-size: 32rpx;
		color: #AEAEAE;
	}
}

.empty {
	width: 100%;
	display: flex;
	padding-top: 180rpx;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	// height: calc(100vh - 152rpx); 
}
</style>