ezhizao_dms_app/pages/changeBox/index.vue

<template>
	<view class='container'>
		<view class='content'>
			<view>
				<text class='title'>当前箱号</text>
				<view class="vehicleList uni-row" style="height: 100%;">
					<view class="vehicleNo uni-row" v-for="(item,index) in vehicleList">
						<text>{{item.carrierCode}}</text>
						<text @click="handleDelVehicleNo(item)">×</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<button class='submit code' @click="handleScanCode()">扫码</button>
			</view>
		</view>
		<view class='bottom uni-row'>
			<button class='submit' type=primary @click="handleSubmit">提交</button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	
	const vehicleList = ref([{ // 载具列表
			carrierId: '1731475038666575873',
			carrierCode: '000001'
		},
		{
			carrierId: '1731467623237767169',
			carrierCode: '000002'
		}
	])

	onLoad(() => {})

	function init(){
		
	}

	function handleDelVehicleNo(item) {
		vehicleList.value.splice(item, 1);
	}

	function handleScanCode() {
		uni.scanCode({
			scanType: ['qrCode'], // 条形码扫描
			onlyFromCamera: true, // 只允许相机扫码
			success: function(res) {
				let vehicleObj = JSON.parse(res.result);
				for (let i = 0; i < vehicleList.value.length; i++) {
					if (Object.entries(vehicleList.value[i]).toString() === Object.entries(vehicleObj)
						.toString()) {
						uni.showToast({
							icon: "error",
							title: "载具已存在"
						})
						return;
					}
				}
				vehicleList.value.push(JSON.parse(res.result));
			}
		});
	}

	function handleSubmit() {

	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: #f5f5f5;
	}

	.bottom {
		background-color: white;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		align-items: center;

	}

	.submit {
		margin: 0 auto;
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 0;
	}

	.code {
		background-color: rgba(0, 226, 166, 1);
		color: white;
	}

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

		.vehicleList {
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
			height: 120rpx;
			overflow: auto;
			padding: 0 80rpx;

			.vehicleNo {
				padding: 0 10rpx;
				margin: 10rpx;
				justify-content: space-between;
				align-items: center;
				width: 230rpx;
				height: 60rpx;
				border: 1px solid rgba(213, 213, 213, 1);
				border-radius: 6rpx;
			}
		}
	}

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

	.btn {
		position: fixed;
		top: 940rpx;
		left: 0;
		right: 0;
	}

	.segment {
		width: 280rpx;
		height: 1rpx;
		border: 1px solid rgba(187, 187, 187, 1);
	}
</style>