logpm/pagesHome/pages/signOrderScan/signOrderScan.vue

<template>
	<u-navbar title="签收订单扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
	<view class="hdstop">
		<view class="khxb">
			<view>客户：张三</view>
		</view>
		<view class="tps">
			<view>
				<view>订单总数</view>
				<view>15</view>
			</view>
			<view>
				<view>齐套数</view>
				<view>15</view>
			</view>
			<view>
				<view>配送件数</view>
				<view>15</view>
			</view>
			<view>
				<view>签收件数</view>
				<view>15</view>
			</view>
		</view>
	</view>
	<view class="scinp">
		<view>齐套状态</view>
		<view>
			<cusSelects  @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145' :clearable='true'></cusSelects>
		</view>
		<view class="inputs">
			<input placeholder="请输入查询的订单号"/>
		</view>
		<view class="btscan">查询</view>
	</view>
	<scroll-view class="scve" scroll-y="true">
		<view class="mabx">
			<view class="itec" v-for="item in [1,2,3,4,5,1,2,1,4,1,3,1]">
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">订单编号：</text>GH45892112323</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">总数：</text>20</view>
					<view><text style="color: #90A0AF;">计划：</text>20</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">装车：</text>20</view>
					<view><text style="color: #90A0AF;">签收：</text>20</view>
				</view>
				<view :class="item<3?'tip tp1':item<5?'tip tp2':'tip tp3'">齐套</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { reactive, toRefs } from "vue";
	let details=reactive({
		schanvalue:'',
		typearr:[
			{
				value:1,
				label:'齐套'
			},
			{
				value:2,
				label:'部分扫'
			},
			{
				value:3,
				label:'未扫'
			}
		],
	})
	function checktype(e){
		
	}
	const { typearr,schanvalue }=toRefs(details)
</script>

<style lang="scss">
	.scve {
		width: 100%;
		height: 62.2vh;
		margin-top: 20upx;
	
		.mabx {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			>.itec {
				width: 686upx;
				// height: 176upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 36upx 24upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 20upx;
	
				&:nth-last-child(1) {
					margin-bottom: 0;
				}
	
				>.contenbx1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #092C4D;
					margin-bottom: 20upx;
	
					&:nth-last-child(1) {
						margin-bottom: 0;
					}
	
					>view {
						flex: 1;
					}
				}
	
				.tip {
					position: absolute;
					right: 0;
					top: 0;
					width: 96rpx;
					height: 48rpx;
					border-radius: 0 8upx 0 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
				}
	
				.tp1 {
					background-color: #0086F120;
					color: #0086F1;
				}
	
				.tp2 {
					background-color: #F8544B20;
					color: #F8544B;
				}
	
				.tp3 {
					background-color: #FA8C1620;
					color: #FA8C16;
				}
			}
		}
	}
	.hdstop{
		width: 100%;
		padding: 34upx 32upx;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 28upx;
		font-weight: 400;
		color: #092C4D;
		>.khxb{
			display: flex;
			align-items: center;
			margin-bottom: 40upx;
		}
		>.tps{
			display: flex;
			align-items: center;
			justify-content: space-around;
			>view{
				display: flex;
				align-items: center;
				flex-direction: column;
				&:nth-of-type(1){
					>view:nth-of-type(2){
						color: #092C4D;
					}
				}
				&:nth-of-type(2){
					>view:nth-of-type(2){
						color: #0086F1;
					}
				}
				&:nth-of-type(3){
					>view:nth-of-type(2){
						color: #3AD8BC;
					}
				}
				&:nth-of-type(4){
					>view:nth-of-type(2){
						color: #FA8C16;
					}
				}
				>view:nth-of-type(2){
					font-size: 36upx;
					font-weight: 400;
					
					margin-top: 20upx;
				}
			}
		}
	}
	.scinp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-top: 3upx solid #EEEEEE;
		>view:nth-of-type(1){
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}
		.inputs{
			width: 276upx;
			height: 64upx;
			background: #F5F5F6;
			border-radius: 8upx;
			opacity: 1;
			border: 2upx solid #EEEEEE;
			padding: 10upx;
			box-sizing: border-box;
			font-size: 24rpx;
			font-weight: 400;
			color: #AFB4BA;
		}
		.btscan{
			width: 128upx;
			height: 64upx;
			background: #D3832A;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>