ezhizao_dms_app/pages/recerptSfprod/index.vue

<template>

	<view class='container '>
		<view class='content'>
			<text class='title'>{{title}}</text>
			<view class='item-table' scroll-y v-for="(item,index) in products" :key='index'>
				<view class="uni-row table-layout">
					<text class='tbhead left'>产品描述</text>
					<text class='tbhead right'>{{item['description']}}</text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody left'>批次</text>
					<text class='tbbody right'>{{item['batch']}}</Text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody left'>箱数</text>
					<text class='tbbody right'>{{item['cases']}}</Text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody  left' style="height: 100%;">箱号</text>
					<text class='last-tbbody right'>{{item['boxno']}}</text>
				</view>

			</view>
		</view>
		<view class='btn uni-row'>
			<button class='bottom-btn left-btn'>取消</button>
			<button class='bottom-btn right-btn' type="primary">确定接收</button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	onLoad(() => {
		for (let i = 0; i < products.value.length; i++) {
			sum.value += parseInt(products.value[i]['cases'].toString());
		}
		// this.title = '热处理' + this.sum + '箱'
		title.value = '热处理' + sum.value + '箱'
	})
	const title = ref('热处理')
	const sum = ref(0)
	const products = ref([{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112、X12522、X552222、X15522、J5211、J5112'
		},
		{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112'
		},
		{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112'
		},
		{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112'
		},
		{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112'
		},
		{
			description: '博士_0395614149_15*110.1',
			batch: 'DC23727410070',
			cases: 5,
			boxno: 'X12522、X552222、X15522、J5211、J5112'
		}
	])
</script>

<style lang="scss">
	.container {
		height: 100%;
		overflow: auto;
		background-color: rgba(245, 245, 245, 1);

		.content {
			width: 94%;
			/* height: auto; */
			background-color: rgba(255, 255, 255, 1);
			margin: 50rpx auto;
			padding-bottom: 144rpx;
			border-radius: 12rpx;

			.title {
				margin: 10rpx auto;
				width: 90%;
				font-size: 36rpx;
				font-weight: bold;
			}

			.item-table {
				margin: 10rpx auto;
				width: 90%;

				.table-layout {
					background-color: rgba(236, 245, 255, 1);
					align-items: center;

					.tbhead {
						background-color: rgba(236, 245, 255, 1);
						font-size: 28rpx;
						height: 56rpx;
						line-height: 56rpx;
						padding-left: 6rpx;
						border-bottom: 1px solid lightgray;
					}

					.tbbody {
						font-size: 28rpx;
						background-color: rgba(238, 240, 245, 1);
						width: 70%;
						height: 56rpx;
						line-height: 56rpx;
						padding-left: 6rpx;
						border-bottom: 1px solid lightgray;
					}

					.left {
						color: rgba(136, 136, 136, 1);
						flex: 1;
					}

					.right {
						flex: 3;
					}

					.last-tbbody {
						font-size: 28rpx;
						background-color: rgba(238, 240, 245, 1);
						width: 70%;
						height: 100%;
						align-items: center;
						border-bottom: 1px solid lightgray;
					}

				}
			}
		}

		.btn {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			height: 100rpx;
			padding: 16rpx 24rpx;
			align-items: center;
			background-color: #FFFFFF;
			justify-content: space-between;

			.bottom-btn {
				flex: 1;
				font-size: 28rpx;
				color: #FFFFFF;

				&.left-btn {
					background-color: #a4adb3;
				}

				&.right-btn {
					background-color: #1684fc;
					margin-left: 24rpx;

				}
			}
		}
	}
</style>