ezhizao_dms_app/pages/handlingList/turnover.vue

<template>

	<view class='container'>
		<view class='content'>
			<text class='title'>{{title}}</text>
			<view class='item-table' v-for="(item,index) in products" :key='index'>
				<view>
					<text class='tbhead' style='color:rgba(136, 136, 136,1)'>产品描述</text>
					<text class='tbhead table-layout'>{{item['description']}}</text>
				</view>
				<view>
					<text class='tbbody' style='color:rgba(136, 136, 136,1)'>批次</text>
					<text class='tbbody table-layout'>{{item['batch']}}</Text>
				</view>
				<view>
					<text class='tbbody' style='color:rgba(136, 136, 136,1)'>箱数</text>
					<text class='tbbody table-layout'>{{item['cases']}}</Text>
				</view>
				<view>
					<text class='tbbody' style='color:rgba(136, 136, 136,1)'>箱号</text>
					<text class='last-tbbody table-layout'>{{item['boxno']}}</text>
				</view>

			</view>
		</view>
		<view class='btn uni-row'>
			<button class='' type=primary>确定接收</button>
		</view>
	</view>
</template>
<script lang="uts">
	export default {
		data() {
			return {
				title: '热处理',
				sum: 0,
				products: [
					{
						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'
					}
				]
			}
		},
		methods: {

			init() {
				for (let i = 0; i < this.products.length; i++) {
					this.sum += parseInt(this.products[i]['cases'].toString());
				}
				// this.title = '热处理' + this.sum + '箱'
				this.title = '热处理' + this.sum + '箱'
			}
		},
		onReady() {
			this.init();
		}

	}
</script>

<style>
	.container {
		height: 100%;
	}

	.btn {
		background-color: white;
		width: 100%;
		height: 12%;
/* 		position: absolute;
		bottom: 0; */
	}

	.confirm {
		width: 100%;
		/* height: 80rpx; */
		/* line-height: 80rpx; */
		padding-left: 0;
	}

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

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

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

	}

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

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

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

	.table-layout {
		position: absolute;
		top: 0;
		left: 30%
	}
</style>