<template>
	<view class="container">

		<!-- 底部按钮 -->
		<view class="footer">
			<!-- 查询区域 -->
			<view class="query-section">
				<u-radio-group v-model="queryType">
					<u-radio label="查订单" name="order" />
					<u-radio label="查物流" custom-style="margin-left:20px" name="logistics" />
				</u-radio-group>

				<view class="search-box">
					<u-input custom-style="width:100rpx" v-model="searchKeyword" placeholder="扫描/输入物流单号"
						border="surround" clearable>
					</u-input>
					<u-button color="#c8c8c8" text="查询" @click="handleSearch" />
				</view>
			</view>

			<u-divider></u-divider>

			<view style="display: flex;">
				<u-button size="large" type="success" text="确认收货扫码" @click="handleScan" />
			</view>
		</view>
	</view>
</template>

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

	const queryType = ref('order');
	const searchKeyword = ref('');

	// 处理查询
	const handleSearch = () => {
		console.log('查询:', searchKeyword.value);
	};

	// 处理扫码
	const handleScan = () => {
		uni.scanCode({
			success: (res) => {
				searchKeyword.value = res.result;
				handleSearch();
			}
		});
	};
</script>

<style lang="scss" scoped>
	@import '../components/common.scss';
</style>