Sports/pages/index/print.vue

<template>
	<view class="add">
		<view class="add-hd">
			<view class="a">
				<view class="h1">繁殖笼：002</view>
				<view class="text">实验室：张三</view>
				<view class="text">负责人：李小</view>
			</view>
			<view class="b">
				<image src="@/static/1@2x.png"></image>
			</view>
		</view>
		<view class="add-bd">
			<view class="a">
				<view class="th">
					<view class="item">编号</view>
					<view class="item">性别</view>
					<view class="item">生日</view>
					<view class="item">品系</view>
					<view class="item">备注</view>
				</view>
				<view class="tr">
					<view class="item">ABC01</view>
					<view class="item">♂</view>
					<view class="item">2023.01.28</view>
					<view class="item">ABCDEF</view>
					<view class="item"></view>
				</view>
				<view class="tr">
					<view class="item">ABC01</view>
					<view class="item">♀</view>
					<view class="item">2023.01.28</view>
					<view class="item">ABCDEF</view>
					<view class="item">喂药</view>
				</view>
			</view>
			<view class="b">
				<view class="th">
					<view class="item">数量</view>
					<view class="item">性别</view>
					<view class="item">父亲</view>
					<view class="item">母亲</view>
					<view class="item">品系</view>
				</view>
				<view class="tr">
					<view class="item">23</view>
					<view class="item">2023.01.28</view>
					<view class="item">ABC01</view>
					<view class="item">ABC02</view>
					<view class="item">ABCDEF</view>
				</view>
			</view>
		</view>
		<view class="add-fd">
			<view class="btn">打印</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				type: 1,
				slist: [],
				youzailishi: [],
			};
		},
		onLoad(o) {
			this.id = o.id
			this.type = o.type;
			this.get_api_squirrel_list();
		},
		methods: {
			async get_api_squirrel_list() {
				const { errorcode, data } = await this.$api.api_squirrel_list({
					cage_id: this.id,
					type: this.type,
					uid: uni.getStorageSync("userInfo").uid
				})
				if(errorcode == 200){
					this.slist = data.slist
					this.isShow = data.slist.length == 0?true:false
					this.youzailishi = data.youzailishi
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.add{
	padding-bottom: calc(env(safe-area-inset-bottom)+140rpx);
	overflow: hidden;
	&-hd{
		padding: 0 35rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.a{
			flex: 1;
			padding: 40rpx 0 20rpx;
			.h1{
				font-size: 40rpx;
				color: #000;
			}
			.text{
				line-height: 50rpx;
				font-size: 26rpx;
				color: #000;
			}
		}
		.b{
			width: 150rpx;
			height: 150rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	&-bd{
		padding: 0 35rpx;
		overflow: hidden;
		.a{
			border-top: 1px solid #c0c2c2;
			overflow: hidden;
			.th{
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1px solid #c0c2c2;
				.item{
					width: 20%;
					font-size: 28rpx;
					color: #000;
					text-align: center;
				}
			}
			.tr{
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1px solid #c0c2c2;
				font-size: 28rpx;
				color: #000;
				border-bottom: 1px solid #c0c2c2;
				.item{
					width: 20%;
					font-size: 28rpx;
					color: #000;
					text-align: center;
				}
			}
		}
		.b{
			border-top: 1px solid #c0c2c2;
			overflow: hidden;
			.th{
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1px solid #c0c2c2;
				.item{
					width: 20%;
					font-size: 28rpx;
					color: #000;
					text-align: center;
				}
			}
			.tr{
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1px solid #c0c2c2;
				font-size: 28rpx;
				color: #000;
				border-bottom: 1px solid #c0c2c2;
				.item{
					width: 20%;
					font-size: 28rpx;
					color: #000;
					text-align: center;
				}
			}
		}
	}
	&-fd{
		width: 100%;
		padding: 20rpx 35rpx;
		box-sizing: border-box;
		background-color: #f3f5f6;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		.btn{
			width: 100%;
			line-height: 90rpx;
			text-align: center;
			background-color: #009944;
			font-size: 32rpx;
			color: #ffffff;
			border-radius: 10rpx;
		}
	}
}
</style>