ezhizao_dms_app/pages/processInspection/index.vue

<template>
	<view class="page-container uni-column">
		<view class="search-container uni-row">
			<input type="text" v-model="keywords" placeholder="请输入箱号" />
			<view class="btn uni-row">搜索</view>
			<!-- <uni-icons type="scan" size="24" /> -->
		</view>
		<view class="scan-btn uni-row" @click.stop="handleScanCode">扫描箱号</view>
		<view class="daywork-item uni-column" v-for="(item, index) in dayworkList" :key="index">
			<view class="lot-code uni-row">
				<text>批次号：{{ item.lot_code }}</text>
				<uni-icons type="right" size="16" />
			</view>
			<view class="info">
				<view class="info-row uni-row">
					<view class="label">序检箱号：</view>
					<view class="value">{{ item.carrier_code }}</view>
					<view class="label">检察员：</view>
					<view class="value">{{ item.inspector }}</view>
				</view>
				<view class="info-row uni-row">
					<view class="label">检查数量：</view>
					<view class="value">{{ item.checks_number }}</view>
					<view class="label">不合格数：</view>
					<view class="value">{{ item.unacceptable_amount }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReady, onUnload, onShow } from '@dcloudio/uni-app'
	
	const keywords = ref('')
	const dayworkList = ref([])
	
	/***************************** 页面生命周期函数 *****************************/
	onShow(() => {
		dayworkList.value = [
			{
				lot_code: 'D2423156000691',
				carrier_code: '000010',
				inspector: '张蕾',
				checks_number: 20,
				unacceptable_amount: 3
			},
			{
				lot_code: 'D2423156000691',
				carrier_code: '000010',
				inspector: '张蕾',
				checks_number: 20,
				unacceptable_amount: 3
			}
		]
	})
	
	/***************************** 定义了一些方法 *****************************/
	const addProcessInspection = (data) => {
		const info = {
			title: data.title,
			standard: data.standard,
			result: '',
			number: 1
		}
		unfitInfos.value.push(info)
	}
	
	/***************************** 定义了一些事件 *****************************/
	// 扫码
	const handleScanCode = () => {
		uni.scanCode({
			onlyFromCamera: true,
			success: function (res) {
				if (res.scanType !== 'QR_CODE') {
					uni.showToast({
						icon: 'none',
						title: '二维码未识别成功',
						duration: 2000
					})
					return
				}
				console.log(res)
				const result = JSON.parse(res.result)
				uni.navigateTo({
					url: '/pages/processInspection/scan?carrierId=' + result.carrierId + '&carrierCode=' + result.carrierCode
				})
			}
		});
	}
	// 添加不合格信息
	const handleShowUnfit = () => {
		uni.navigateTo({
			url: "/pages/processInspection/form"
		})
	}
</script>

<style lang="scss">
	.page-container {
		height: 100%;
		background-color: #ececec;
		font-size: 28rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}
	.search-container {
		border-radius: 12rpx;
		align-items: center;
		
		input {
			flex: 1;
			background-color: #ffffff;
			height: 64rpx;
			box-sizing: border-box;
			padding: 0 16rpx;
		}
		.btn {
			width: 120rpx;
			height: 64rpx;
			background-color: #1684FC;
			justify-content: center;
			font-size: 24rpx;
			color: #ffffff;
			justify-content: center;
			align-items: center;
		}
	}
	.scan-btn {
		height: 64rpx;
		margin: 32rpx 32rpx 0 32rpx;
		color: #ffffff;
		background-color: #00D068;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}
	.daywork-item {
		padding: 24rpx;
		background-color: #ffffff;
		margin-top: 24rpx;
		border-radius: 8rpx;
		
		.lot-code {
			align-items: center;
			justify-content: space-between;
			font-weight: 700;
		}
		
		.info {
			font-size: 24rpx;
			color: #767676;
			
			.info-row {
				margin-top: 16rpx;
				
				.label {
					width: 120rpx;
				}
				.value {
					flex: 1;
				}
			}
		}
	}
</style>