<template>
	<view class="container">
		<view class="main-content">
			<view class="input-group">
				<u-input v-model="trackingNumber" placeholder="扫描/输入物流单号" border="surround" />
				<u-button type="primary" @click="confirmTrackingNumber" text="确定" />
			</view>
		</view>

		<view class="fixed-bottom">
			<u-button size="large" type="success" @click="scanCode" text="扫码" class="scan-button" />
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const trackingNumber = ref('');
	function confirmTrackingNumber() {
		// Logic to confirm tracking number
	}

	function scanCode() {
		uni.scanCode({
			success: (res) => {
				trackingNumber.value = res.result;
				// 处理扫码结果
				console.log('扫码结果:', res.result);
			},
			fail: (err) => {
				console.error('扫码失败:', err);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.main-content {
		padding: 20px;
		gap: 20px;
	}

	.input-group {
		display: flex;
		gap: 10px;
		margin-bottom: 30rpx;

		:deep(.u-button) {
			width: 160rpx
		}

		.u-input {
			background-color: #fff;
		}
	}
</style>