XEH-miniProgram/pages/self/bill/detail.vue

<template>
	<view class="page-wrap">
		<view class="header-panel">
			<view class="name">应付# 财税·年服务费</view>
			<view class="desc">账单编号：9885</view>
			<view class="desc">创建时间：2023-10-25 14:26:08</view>
			<view class="desc">所属订单：HC25263</view>
			<view class="state state-1">49760.00</view>
		</view>
		<view class="info-panel">
			<view class="title-row">
				<image class="icon" src="../../../static/svg/tag.svg"></image>
				账单信息
			</view>
			<view class="text-row">
				<view class="label">付款方</view>
				<view class="text">天津超易达胜科技发展有限公司</view>
			</view>
			<view class="text-row" style="border: none">
				<view class="label">收款方</view>
				<view class="text">天津鑫恩华产业园区管理有限公司</view>
			</view>
			<view class="text-row">
				<view class="label">账单金额</view>
				<view class="text">24600.00</view>
			</view>
			<view class="text-row">
				<view class="label">账单说明</view>
				<view class="text">33600.00，前一份合同押金抵消 9000</view>
			</view>
			<view class="text-row">
				<view class="label">约定支付日期</view>
				<view class="text">2023-09-15</view>
			</view>
			<view class="text-row">
				<view class="label">支付状态</view>
				<view class="text">已支付</view>
			</view>
			<template v-if="isCollapse">
				<view class="text-row">
					<view class="label">支付方式</view>
					<view class="text">善付通</view>
				</view>
				<view class="text-row">
					<view class="label">支付时间</view>
					<view class="text">2023-12-11 20:32:08</view>
				</view>
				<view class="text-row">
					<view class="label">是否到账</view>
					<view class="text">待确认</view>
				</view>
			</template>
		</view>
		<view v-show="isCollapse" class="info-panel">
			<view class="title-row">
				<image class="icon" src="../../../static/svg/tag.svg"></image>
				备注信息
			</view>
			<view class="text-row">
				<text class="remark">备注默认为空，如果有备注信息在这里填写， 最多三行，肯定够用了 按字义回车换行，显得更有条理</text>
			</view>
		</view>
		<view class="collapse-btn" @click="isCollapse = !isCollapse">{{ isCollapse ? '收起 ∧' : '展开更多 ∨' }}</view>
		<view class="info-panel">
			<view class="title-row">
				<image class="icon" src="../../../static/svg/tag.svg"></image>
				发票信息
			</view>
			<view class="text-row">
				<view class="label">发票</view>
				<view class="text">电子发票</view>
			</view>
			<view class="text-row">
				<view class="label">发票用途</view>
				<view class="text">
					<input class="input" type="text" placeholder="请输入" maxlength="20" />
				</view>
			</view>
			<view class="text-row">
				<view class="label">开票状态</view>
				<view class="text">待申请</view>
			</view>
		</view>
		<view class="contact-row">
			<image class="avatar" src="../../../static/img_avatar.png" mode="aspectFill"></image>
			<view class="info">
				<view class="name">陈禹佳</view>
				<view class="desc">专属客服，24小时咨询</view>
			</view>
			<view class="tel">电话</view>
			<image class="icon" src="../../../static/icon_tel.png"></image>
		</view>
		<view class="foot-panel">
			<view class="foot-panel-wrap">
				<button class="btn btn-1">申请开票</button>
				<button class="btn">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isCollapse: false
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.header-panel {
	height: 206.04rpx;
	background: #fff;
	padding: 13.74rpx 233.52rpx 13.74rpx 27.47rpx;
	position: relative;
	box-sizing: border-box;
	border-top: 1rpx solid #e0e0e0;
	.state {
		width: 178.57rpx;
		height: 178.57rpx;
		position: absolute;
		right: 27.47rpx;
		top: 13.74rpx;
		border-radius: 8.24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 32.97rpx;
		color: #fff;
		&::after {
			font-size: 27.47rpx;
			margin-top: 13.74rpx;
		}
		&-1 {
			background: #00bfbf;
			&::after {
				content: '未支付';
			}
		}
		&-2 {
			background: #ccc;
			&::after {
				content: '确认中';
			}
		}
		&-3 {
			background: #f7922a;
			&::after {
				content: '已到账';
			}
		}
	}
	.name {
		font-size: 32.97rpx;
		line-height: 1.5;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 6.87rpx;
	}
	.desc {
		font-size: 27.47rpx;
		line-height: 1.5;
		color: #999;
	}
}
.info-panel {
	background: #fff;
	margin-top: 13.74rpx;
	.title-row {
		padding: 13.74rpx 27.47rpx;
		min-height: 82.42rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e0e0e0;
		font-size: 27.47rpx;
		color: #0384d6;
		.icon {
			width: 20.6rpx;
			height: 20.6rpx;
			background: #3498db;
			padding: 8.24rpx;
			margin-right: 13.74rpx;
		}
	}
	.text-row {
		padding: 20.6rpx 27.47rpx;
		min-height: 82.42rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 27.47rpx;
		& + .text-row {
			border-top: 1rpx solid #e0e0e0;
		}
		.label {
			white-space: nowrap;
			margin-right: 27.47rpx;
		}
		.text {
			word-break: break-all;
			text-align: right;
		}
		.remark {
			line-height: 41.21rpx;
		}
		.input {
			width: 274.73rpx;
			margin: -5.49rpx 0;
		}
	}
}
.collapse-btn {
	font-size: 24.73rpx;
	color: #999;
	line-height: 82.42rpx;
	text-align: center;
	background: #fff;
	border-top: 1rpx solid #e0e0e0;
}
.contact-row {
	display: flex;
	align-items: center;
	height: 109.89rpx;
	background: #fff;
	padding: 0 27.47rpx;
	margin: 13.74rpx 0;
	.avatar {
		width: 76.92rpx;
		height: 76.92rpx;
		border-radius: 50%;
	}
	.info {
		flex: 1;
		margin: 0 13.74rpx;
	}
	.name {
		font-size: 27.47rpx;
		color: #545e8f;
	}
	.desc {
		font-size: 24.73rpx;
		color: #999;
	}
	.tel {
		font-size: 27.47rpx;
		color: #999;
	}
	.icon {
		width: 54.95rpx;
		height: 54.95rpx;
		margin-left: 13.74rpx;
	}
}
.foot-panel {
	height: 96.15rpx;
	&-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 96.15rpx;
		background: #f7f7f7;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 27.47rpx;
	}
	.btn {
		min-width: 164.84rpx;
		height: 68.68rpx;
		font-size: 27.47rpx;
		line-height: 68.68rpx;
		color: #fff;
		background: #f97631;
		border-radius: 5.49rpx;
		box-sizing: border-box;
		padding: 0 27.47rpx;
		margin: 0 0 0 13.74rpx;
		&-1 {
			color: #666;
			background: none;
			border: 1rpx solid #ccc;
			line-height: 65.93rpx;
		}
	}
}
</style>