cloud_admin_app/pagesCenter/billingPage/invoiceDetail/invoiceDetail.vue

<template>
	<view>
		<view class="from-box amount">
			<view class="">开票状态</view>
			<view class="price">
				<!-- <view class="invoice-state">开票成功</view> -->
				<view
					:class="{'invoice-state':true, 'content-state-orange':model1.userInfo.invoiceStatus==1,'content-state-blue':model1.userInfo.invoiceStatus==2,'content-state-red':model1.userInfo.invoiceStatus==0}">
					{{['未开票','开票中','开票完成'][model1.userInfo.invoiceStatus==null?'':model1.userInfo.invoiceStatus]}}
				</view>
			</view>
		</view>
		<view class="from-box">
			<u--form labelPosition="left">
				<view class="line line-icon ">
					<u-form-item label="发票抬头" prop="userInfo.invoiceTitle" borderBottom ref="item1"
						@click="goinvoiceTitle">
						<u--input disabled v-model="model1.userInfo.invoiceTitle" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view v-if="checked==1">
					<view class="line">
						<u-form-item label="税号" prop="userInfo.dutyNumber" borderBottom ref="item1">
							<u--input disabled v-model="model1.userInfo.dutyNumber" border="none" inputAlign='right'
								placeholder=""></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="注册地址" prop="userInfo.registeredAddress" borderBottom ref="item1">
							<u--input disabled v-model="model1.userInfo.registeredAddress" border="none"
								inputAlign='right' placeholder=""></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="公司开户行" prop="userInfo.bankOfDeposit" borderBottom ref="item1">
							<u--input disabled v-model="model1.userInfo.bankOfDeposit" border="none" inputAlign='right'
								placeholder="">
							</u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="开户行账户" prop="userInfo.openBankAccount" borderBottom ref="item1">
							<u--input disabled v-model="model1.userInfo.openBankAccount" border="none"
								inputAlign='right' placeholder=""></u--input>
						</u-form-item>
					</view>
				</view>
				<view class="line ">
					<u-form-item label="发票金额" prop="userInfo.actualPay" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.actualPay" border="none" inputAlign='right'
							placeholder="" color="#4C91FF"></u--input>
					</u-form-item>
				</view>
				<view class="">
					<u-form-item label="申请时间" prop="userInfo.createTime" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.createTime" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<!-- 邮寄信息 -->
		<!-- 	<view class="content-title">
			<view class="content-name">
				<view class="orders-line"></view>
				<view>邮寄信息</view>
			</view>
		</view>
		<view class="from-box">
			<u--form labelPosition="left">
				<view class="line-last">
					<u-form-item label="邮寄地址" prop="userInfo.address" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.address" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line-last">
					<u-form-item label="邮寄联系人" prop="userInfo.contacts" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.contacts" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line-last">
					<u-form-item label="联系人电话" prop="userInfo.phone" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.phone" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>

			</u--form>
		</view> -->
		<!-- 	<view class="from-box amount">
			<view class="">电子邮箱</view>
			<view class="">
				<u--input disabled v-model="model2.userInfo2.email" border="none" inputAlign='right'></u--input>
			</view>
		</view> -->
		<!-- position bottom -->
		<view class="footer-box">
			<view class="check" v-if="model1.userInfo.filePath != '' && model1.userInfo.filePath != null">
				<u-button color="#4C91FF" :plain="true" shape='circle' @click="goBillingOrder">下载PDF文件</u-button>
			</view>
			<!-- <view>
				<u-button color="#4C91FF" shape='circle' @click="www">重开发票</u-button>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	// 
	const model1 = reactive({
		userInfo: {
			invoiceStatus: '',
			filePath: '',
			invoiceTitle: '',
			dutyNumber: '',
			registeredAddress: '',
			bankOfDeposit: '',
			openBankAccount: '',
			actualPay: '',
			createTime: ''
		}
	})
	const model2 = reactive({
		userInfo2: {
			address: '',
			phone: '',
			contacts: '',
			email: '',
		}
	})
	const progressVal = ref()
	const inId = ref()
	const checked = ref()
	// 
	onLoad((option) => {
		let detail = JSON.parse(option.detail)
		// console.log(detail,'详情')
		model1.userInfo.invoiceStatus = detail.invoiceStatus
		model1.userInfo.filePath = detail.filePath
		model1.userInfo.invoiceTitle = detail.invoiceTitle
		model1.userInfo.dutyNumber = detail.dutyNumber
		model1.userInfo.registeredAddress = detail.registeredAddress
		model1.userInfo.bankOfDeposit = detail.bankOfDeposit
		model1.userInfo.openBankAccount = detail.openBankAccount
		model1.userInfo.actualPay = detail.actualPay / 100
		model1.userInfo.createTime = formatTimestamp(detail.createTime)
		checked.value = detail.type
		// console.log(option, 'option', detail);
	})
	// 
	const goBillingOrder = () => {
		// uni.navigateTo({
		// 	url: '../billingOrder/billingOrder?id=' + inId.value
		// })
		uni.downloadFile({
			url: 'https://www.zzpower.net/admin-api/infra/file/4/get/' + model1.userInfo.filePath,
			success: function(res) {
				// console.log(res, 'res打开')
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					fileType: 'pdf',
					showMenu: true,
					success: function(res) {
						// console.log('打开文档成功');
					},
					fail: function(error) {
						// console.log(error,'打开失败')
						uni.showToast({
							title: '文件错误',
							duration: 2000,
							icon: 'error'
						});
					}
				});
			}
		});
	}

	const formatTimestamp = (timestamp) => {
		// 创建一个新的 Date 对象，传入时间戳
		const date = new Date(timestamp);

		// 获取年、月、日、时、分、秒
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，需加 1
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		// 返回格式化后的时间字符串
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
</script>

<style lang="less" scoped>
	.from-box {
		background: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
	}

	.price {
		color: #4C91FF;
		font-size: 28rpx;
		font-weight: 400;
		text-align: right;
	}

	.line {
		border-bottom: 1px solid #eee;
	}

	/deep/.u-form-item__body {
		padding: 24rpx 0 !important;
	}

	/deep/.u-form-item__body__left {
		width: 250rpx !important;
	}

	/deep/.u-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		text-align: left !important;
	}

	/deep/.u-form-item__body__right {
		// width: 50% !important;
	}

	/deep/.u-line:last-child {
		border: 0 !important;
	}

	.amount {
		display: flex;
		padding: 24rpx 32rpx;
		justify-content: space-between;
		align-items: center;
		color: #585858;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
	}

	/deep/.u-input__content__field-wrapper__field {
		height: 40rpx !important;
		line-height: 40rpx !important;
	}

	.content-title {
		display: flex;
		justify-content: space-between;
		margin: 16rpx 32rpx;
	}

	.content-name {
		font-size: 32rpx;
		font-weight: 400;
		text-align: left;
		color: #171717;
		display: flex;
		align-items: center;
	}

	.orders-line {
		width: 4rpx;
		height: 28rpx;
		margin-right: 8rpx;
		border-left: 4rpx solid #4C91FF;
		border-radius: 4rpx;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 16rpx 32rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		// display: flex;

		/deep/.u-button {
			// width: 331rpx !important;
			height: 72rpx !important;
		}
	}

	/deep/.u-input--square {
		background-color: #fff !important;
	}

	.line-icon {
		/deep/.u-icon__icon {
			color: #808080 !important;
			margin-left: 8rpx;
		}
	}

	.line-last {
		border-bottom: 1px solid #eee;
	}

	.line-last:last-child {
		border: 0;
	}

	.invoice-state {
		border: 1px solid #4C91FF;
		font-size: 20rpx;
		font-weight: 400;
		color: #4C91FF;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.check {
		margin-right: 24rpx;
	}

	.content-state-orange {
		border: 1px solid #FF7B0E;
		color: #FF7B0E;
	}

	.content-state-blue {
		border: 1px solid #4C91FF;
		color: #4C91FF;
	}

	.content-state-red {
		border: 1px solid #F2634F;
		color: #F2634F;
	}

	.content-state-green {
		border: 1px solid #26C3C0;
		color: #26C3C0;
	}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
		padding-bottom: 120rpx;
	}
</style>