logpm/pagesHome/pages/Relocation/Relocation.vue

<template>
	<u-navbar :title="pagetype=='1'?'托盘移库':'按件移库'" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff'
		placeholder :autoBack="true" leftIconSize='35'></u-navbar>
	<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
	<view class="scanqcview">
		<image src="/pagesHome/static/scanqc.png"></image>
		<view>请直接扫描库位码</view>
	</view>
	<view class="topviewbox">
		<view class="oebox">
			<image src="/pagesHome/static/changku.png"></image>
			<view>
				{{(dtilobj?.warehouseName||'')+'-'+(dtilobj?.areaTitle||'')+'-'+(dtilobj?.shelfTitle||"")+'-'+(dtilobj?.allocationTitle||'')}}
			</view>
		</view>
		<view class="contview">
			<view>
				<view>
					<view>仓库</view>
				</view>
				<view>{{dtilobj?.warehouseName||'暂无数据'}}</view>
			</view>
			<view v-if="pagetype==2">
				<view>
					<view>包条码</view>
				</view>
				<view class="btm">
					<input v-model="scancode" placeholder="请扫描或输入" />
					<view @click="scandata">确认</view>
				</view>
			</view>
		</view>
	</view>
	<view class="tuopanview">
		<view>
			托盘编号：{{dtilobj?.trayCode||'暂无数据'}}
		</view>
		<view>
			<view>
				数量：<text style="color: #178AF2;">{{dtilobj.trayNum||'0'}}</text>
			</view>
			<view v-if="pagetype==2">
				包条数量：<text style="color: #178AF2;">{{traynumber||'0'}}</text>
			</view>
		</view>
	</view>

	<view class="scview">
		<scroll-view class="sclcs" scroll-y="true">
			<view class="visc">
				<block v-for="(item,index) in scanlist">
					<!-- 按托盘移库 -->
					<template v-if="Number(pagetype) === 1">
						<view class="item2">
							<!-- 定制品 -->
							<view v-if="item.goodsType === 1">
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>服务号：{{item.serviceNum}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>托盘码：{{item.trayCode + `(${item.trayName})`}}</view>
								</view>
								<view class="tpbx" @click.stop="goorderdetail(item)">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>订单自编号：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>剩余数量：{{item.totalNum-item.shelfNum}}</view>
								</view>
							</view>

							<!-- 零担 -->
							<view v-if="item.goodsType === 2">
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>运单号：{{item.waybillNo}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>托盘码：{{item.trayCode + `(${item.trayName})`}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>订单自编号：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>剩余数量：{{item.totalNum-item.shelfNum}}</view>
								</view>
							</view>

							<!-- 库存品 -->
							<view v-if="item.goodsType === 3">
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>物料编码：{{item.materialCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>物料名称：{{item.materialName}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>托盘码：{{item.trayCode + `(${item.trayName})`}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>仓库地址：{{obldate.warehouseName}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>库位信息：{{obldate.areaName + '-' + obldate.allocationName}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>订单自编号：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>商场名称：{{item.marketName}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>批次号：{{item.incomingBatch}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>剩余数量：{{item.totalNum-item.shelfNum}}</view>
								</view>
							</view>

							<view class="viewnum">
								<view>总包数：{{item.totalNum}}</view>
								<view>扫码数：{{item.shelfNum}}</view>
							</view>
							<image class="qtimgzt"
								:src="item.totalNum==item.shelfNum?'/pagesHome/static/qitao.png':'/pagesHome/static/weiqitao.png'">
							</image>
						</view>
					</template>

					<!-- 按件移库 -->
					<template v-if="Number(pagetype) === 2">
						<view class="item2" v-for="item in scanlist">
							<view class="tpbx" @click.stop="goorderdetail(item)">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>订单自编号：{{item.orderCode}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>包条码：{{item.orderPackageCode}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>库位：{{item.positionCode}}</view>
							</view>
						</view>
					</template>
				</block>
			</view>
		</scroll-view>
	</view>
	<view class="butbox">
		<view>取消</view>
		<view @click="setstate(true)">确认移库</view>
	</view>
	<view class="bgtps" v-if="isshowtot">
		<!-- 按托盘移库 -->
		<view v-if="pagetype=='1'" class="trary">
			<view class="titqr">移库确认</view>
			<view class="contenbox">
				<view class="topbs1">
					<view>请确认从</view>
					<view>
						<view>
							<image src="/pagesHome/static/kuwei.png"></image>
							<view>库位</view>
						</view>
						<view>{{(obldate?.areaName||'')+'-'+(obldate?.shelfName||'')+'-'+(obldate?.allocationName||'')}}
						</view>
					</view>
				</view>
				<view class="topbs1">
					<view>移动</view>
					<view>
						<view>
							<image src="/pagesHome/static/tuopan.png"></image>
							<view>托盘</view>
						</view>
						<view>{{trayCode}}，共计{{traynumber}}件</view>
					</view>
				</view>
				<view class="topbs1">
					<view>到</view>
					<view>
						<view>
							<image src="/pagesHome/static/kuwei.png"></image>
							<view>库位</view>
						</view>
						<view>
							{{(dtilobj?.areaTitle||'')+'-'+(dtilobj?.shelfTitle||'')+'-'+(dtilobj?.allocationTitle||'')}}
						</view>
					</view>
				</view>
			</view>
			<view class="btbox">
				<view @click="setstate(false)">取消</view>
				<view @click="uplist">确认</view>
			</view>
		</view>
		<!-- 按件移库 -->
		<view v-if="pagetype=='2'" class="anjian">
			<view class="titqr">移库确认</view>
			<view class="contenbx">
				<view class="titypo">
					请确认共计移动<text style="color: #D3832A;margin-left: 10rpx;">{{traynumber}}</text>件
				</view>
				<view class="topbs1">
					<view>到</view>
					<view>
						<view>
							<image src="/pagesHome/static/kuwei.png"></image>
							<view>库位</view>
						</view>
						<view>
							{{(dtilobj?.areaTitle||'')+'-'+(dtilobj?.shelfTitle||'')+'-'+(dtilobj?.allocationTitle||'')}}
						</view>
					</view>
				</view>
				<view class="topbs1" v-if="dtilobj.trayCode">
					<view></view>
					<view>
						<view>
							<image src="/pagesHome/static/tuopan.png"></image>
							<view>托盘</view>
						</view>
						<view>{{dtilobj?.trayCode}}</view>
					</view>
				</view>
			</view>
			<view class="btbox">
				<view @click="setstate(false)">取消</view>
				<view @click="uplist">确认</view>
			</view>
		</view>
	</view>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
	<tips ref="tip"></tips>
</template>

<script lang="ts" setup>
	import {
		warehouseUpdownTypemoveAllocationByTrayCode,
		warehouseUpdownTypemoveAllocationScanTrayCode,
		warehouseUpdownTypemoveAllocationPackageList,
		warehouseUpdownTypemoveAllocationScanPackage,
		warehouseUpdownTypemoveAllocationScanTarget,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { computed, reactive, ref, toRefs, watchEffect } from "vue";
	import utils from '@/utils/utils';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const tip = ref(null)
	let details = reactive({
		scancode: '',
		pagetype: '',
		allocationId: '',
		dtilobj: {} as any,
		trayCode: '',
		scanlist: [],
		obldate: {} as any,
		codenumer: 0,
		isshowtot: false,
		// 当前正在请求的包条码
		scancodeList: []
	})
	onLoad((op) => {
		details.pagetype = op.type
		utils.ttsspke(`当前移库方式为${op.pageName}, 请先扫描库位码`)

	})
	onShow(() => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif

	})
	/* 	onHide(() => {
			uni.$off('scancodedate')
		}) */
	// 下拉刷新
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			details.scancode = ''
			details.allocationId = ''
			details.dtilobj = {}
			details.obldate = {}
			details.trayCode = ''
			details.scanlist = []
			details.isshowtot = false
			details.scancodeList = []

			// 关闭下拉动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	const traynumber = computed(() => {
		let numbers = 0
		details.scanlist.map(item => {
			if (item.shelfNum) {
				numbers += item.shelfNum
			} else if (item.num) {
				numbers += item.num
			}
		})
		return numbers
	})
	watchEffect(() => {
		details.scanlist.map(item => {
			details.codenumer += item.shelfNum
		})
		console.log(details.codenumer);
	})
	async function scandata() {
		let res = null
		// 先扫库位码, 后扫描托盘码
		if (!details.allocationId) {
			if (details.scancode[0] === 'T') {
				uni.showToast({
					title: '请扫描库位码',
					icon: 'none'
				})
				// #ifdef APP
				utils.ttsspke('请扫描库位码')
				// #endif
				return
			}
			let data = {
				allocationId: details.scancode
			}
			res = await warehouseUpdownTypemoveAllocationScanTarget(data)
			console.log('res1 :>> ', res);
			if (res.code == 200) {
				details.dtilobj = res.data
				details.allocationId = res.data.allocationId
				details.scancode = ''
				if (details.pagetype === '1') {
					if (details.dtilobj.trayCode) {
						utils.ttsspke('该库位已绑托盘')
						// 刷新页面
						return uni.startPullDownRefresh({})
					}

					utils.ttsspke('扫描成功, 请扫描需要移动的托盘')
				}
				else if (details.pagetype === '2') utils.ttsspke('扫描成功, 请扫描需要移动的包条')
			}
			return
		}
		// 检测是否重复请求
		if (details.scancodeList.includes(details.scancode)) {
			// #ifdef APP
			utils.ttsspke('重复扫描')
			// #endif
			uni.showToast({
				title: '重复扫描',
				icon: 'none'
			})
			return
		}
		details.scancodeList.push(details.scancode)

		try {
			if (details.pagetype == '1') {
				let data = {
					trayCode: details.scancode,
				}
				res = await warehouseUpdownTypemoveAllocationScanTrayCode(data)
				console.log('res :>> ', res);
				if (res.code !== 200) return
				details.trayCode = details.scancode
				details.scanlist = res.data.list
				// #ifdef APP
				utils.ttsspke('当前托盘' + details.scanlist.reduce((curr, item) => curr + item.shelfNum, 0) + '件')
				// #endif
				details.obldate = res.data
			} else if (details.pagetype == '2') {
				let data = {
					allocationId: details.allocationId,
					orderPackageCode: details.scancode,
				}
				res = await warehouseUpdownTypemoveAllocationScanPackage(data)
				console.log('res :>> ', res);
				if (res.code == 200) {
					details.scanlist.push(res.data)

					// #ifdef APP
					utils.ttsspke(details.scanlist.length + '件')
					// #endif
				}
			}
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}
	async function uplist() {
		let res = null
		uni.showLoading({
			mask: true,
			title: '移库中'
		})
		if (details.pagetype == '1') {
			let data = {
				allocationId: details.allocationId,
				trayCode: details.trayCode,
			}
			res = await warehouseUpdownTypemoveAllocationByTrayCode(data)
		} else if (details.pagetype == '2') {
			let data = {
				allocationId: details.allocationId,
				upShelfPackageList: details.scanlist,
			}
			res = await warehouseUpdownTypemoveAllocationPackageList(data)
		}
		// 关闭loading
		uni.hideLoading()
		if (res.code == 200) {
			console.log('res :>> ', res);
			uni.showToast({
				title: '移库成功',
				icon: 'success'
			})
			uni.startPullDownRefresh({})
		} else {
			uni.showToast({
				title: '移库失败',
				icon: 'error'
			})
		}
	}
	function setstate(flg : boolean) {
		let returnContent = ''
		if (flg && !details.allocationId) returnContent = '请先扫描库位码'
		else if (flg && !details.trayCode && details.pagetype == '1') returnContent = '请扫描正确的托盘码'
		else if (flg && details.scanlist.length == 0 && details.pagetype == '2') returnContent = '请扫描正确的包件码'
		if (returnContent) {
			uni.showToast({
				title: returnContent,
				icon: 'none'
			})
			// #ifdef APP
			utils.ttsspke(returnContent)
			// #endif
			return
		}

		let content = 0
		// 按托盘移库
		if (Number(details.pagetype) === 1) content = details.scanlist.reduce((curr, item) => curr + item.shelfNum, 0)
		// 按件移库
		else if (Number(details.pagetype) === 2) content = details.scanlist.length

		if (flg) {
			// #ifdef APP
			utils.ttsspke('当前待移库' + content + '件')
			// #endif
		}
		details.isshowtot = flg
	}

	const {
		obldate,
		isshowtot,
		scancode,
		pagetype,
		dtilobj,
		scanlist,
		trayCode,
	} = toRefs(details)
</script>

<style lang="scss">
	.bgtps {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #00000050;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

		>.anjian {
			width: 640upx;
			// height: 800upx;
			background: #FFFFFF;
			border-radius: 8upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding: 25upx 20upx;

			>.titqr {
				font-size: 32upx;
				font-weight: 400;
				color: #092C4D;
				margin-bottom: 30upx;
			}

			>.contenbx {
				width: 580upx;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 20upx;

				.titypo {
					font-size: 30upx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 40upx;
				}

				>.topbs1 {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 30upx;

					&:nth-last-child(1) {
						margin-bottom: 0;
					}

					>view:nth-of-type(1) {
						width: 140upx;
						font-size: 30upx;
					}

					>view:nth-of-type(2) {
						display: flex;
						align-items: center;
						flex: 1;

						>view:nth-of-type(1) {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 20upx;

							>image {
								width: 72upx;
								height: 72upx;
							}

							>view {
								font-size: 24upx;
								font-weight: 400;
								color: #90A0AF;
							}
						}

						>view:nth-of-type(2) {
							flex: 1;
							font-size: 28upx;
							font-weight: 400;
							color: #020B18;
						}
					}
				}
			}

			.btbox {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20upx;

				>view {
					width: 260upx;
					height: 88upx;
					border-radius: 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					font-size: 32upx;

					&:nth-of-type(1) {
						background-color: #F5F5F6;
						color: #5A6875;
					}

					&:nth-of-type(2) {
						background-color: #D3832A;
						color: #FFFFFF;
						margin-left: 20upx;
					}
				}
			}
		}

		>.trary {
			width: 640upx;
			// height: 800upx;
			background: #FFFFFF;
			border-radius: 8upx;
			padding: 25upx 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			>.titqr {
				font-size: 32upx;
				font-weight: 400;
				color: #092C4D;
				margin-bottom: 30upx;
			}

			.contenbox {
				width: 580upx;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 20upx;

				>.topbs1 {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 30upx;

					&:nth-last-child(1) {
						margin-bottom: 0;
					}

					>view:nth-of-type(1) {
						width: 140upx;
						font-size: 30upx;
					}

					>view:nth-of-type(2) {
						display: flex;
						align-items: center;
						flex: 1;

						>view:nth-of-type(1) {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 20upx;

							>image {
								width: 72upx;
								height: 72upx;
							}

							>view {
								font-size: 24upx;
								font-weight: 400;
								color: #90A0AF;
							}
						}

						>view:nth-of-type(2) {
							flex: 1;
							font-size: 28upx;
							font-weight: 400;
							color: #020B18;
						}
					}
				}
			}

			.btbox {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20upx;

				>view {
					width: 260upx;
					height: 88upx;
					border-radius: 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					font-size: 32upx;

					&:nth-of-type(1) {
						background-color: #F5F5F6;
						color: #5A6875;
					}

					&:nth-of-type(2) {
						background-color: #D3832A;
						color: #FFFFFF;
						margin-left: 20upx;
					}
				}
			}
		}
	}

	.tuopanview {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 686upx;
		// height: 160upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: auto;
		margin-top: 30upx;
		padding: 30upx 24upx;
		box-sizing: border-box;

		>view {
			font-size: 28upx;
			font-weight: 400;
			color: #020B18;

			&:nth-of-type(1) {
				margin-bottom: 30upx;
			}

			&:nth-of-type(2) {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.butbox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;
		font-size: 32upx;

		>view:nth-of-type(1) {
			width: 320upx;
			height: 100upx;
			background: #FFFFFF;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5A6875;
			font-size: 32upx;
			font-weight: 400;
		}

		>view:nth-of-type(2) {
			width: 320upx;
			height: 100upx;
			background: #D3832A;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 20upx;
		}
	}

	.sclcs {
		width: 686upx;
		height: 40vh;
		margin: auto;
		margin-top: 20upx;

		.visc {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item1 {
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.removeicons {
					position: absolute;
					right: 0;
				}

				.qtimgzt {
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}

				// >view:nth-last-child(1){
				// 	border-bottom: none !important;
				// }
				>view {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					&:nth-last-child(1) {
						border-bottom: 0upx solid #EEEEEE00 !important;
					}

					>image {
						width: 32upx;
						height: 32upx;
						margin-right: 15upx;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						word-wrap: break-word;
						word-break: break-all;

						.numb {
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}
			}

			.item2 {
				width: 686upx;
				margin: auto;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;

				.qtimgzt {
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}

				>.viewnum {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}
			}

			.item2 {
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;

				>.tpbx {
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					>image {
						width: 32upx;
						height: 32upx;
						margin-right: 15upx;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;

						.numb {
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}

				>.viewnum {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}
			}

			.tpbx {
				display: flex;
				align-items: center;
				padding: 18upx 24upx;
				box-sizing: border-box;
				border-bottom: 4upx solid #EEEEEE;

				>image {
					flex: none;
					width: 32upx;
					height: 32upx;
					margin-right: 15upx;
				}

				>view {
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;

					.numb {
						font-size: 28upx;
						color: #178AF2;
					}
				}
			}

		}
	}

	.tabchecklist {
		width: 684upx;
		height: 100upx;
		margin: auto;
		margin-top: 30upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.xz {
			>view:nth-of-type(1) {
				color: #D3832A !important;
			}

			>view:nth-of-type(2) {
				background-color: #D3832A !important;
			}
		}

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 32upx;
				font-weight: 400;
				margin-bottom: 20upx;
				color: #020B18;
				transition: all 0.2s;
			}

			>view:nth-of-type(2) {
				width: 96upx;
				height: 8upx;
				background-color: #D3832A00;
				border-radius: 4upx;
				transition: all 0.2s;
			}
		}
	}

	.topviewbox {
		width: 686upx;
		// height: 456upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 20upx 20upx;
		opacity: 1;
		box-sizing: border-box;
		position: relative;
		margin: auto;
		margin-top: 20upx;

		>.oebox {
			padding: 20upx 25upx;
			box-sizing: border-box;
			border-bottom: 4upx solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			>view {
				font-size: 32upx;
				font-weight: 400;
				color: #020B18;
			}

			>image {
				width: 32upx;
				height: 32upx;
				margin-right: 14upx;
			}
		}

		.numbox {
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;

			>view {
				width: 640upx;
				height: 160upx;
				background: #F5F7FB;
				border-radius: 8upx 8upx 8upx 8upx;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;

					&:nth-of-type(1) {
						>view:nth-of-type(2) {
							color: #FF9545 !important;
						}
					}

					&:nth-of-type(2) {
						>view:nth-of-type(2) {
							color: #178AF2 !important;
						}
					}

					>view:nth-of-type(1) {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						margin-bottom: 18upx;
					}

					>view:nth-of-type(2) {
						font-size: 36upx;
						font-weight: 400;

					}
				}
			}
		}

		>.contview {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;

			>view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20upx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-right: 30upx;
					margin-left: 50upx;
					width: 120upx;
					color: #020B18;
					font-size: 28upx;
					font-weight: 400;

					// >image{
					// 	width: 48upx;
					// 	height: 48upx;
					// 	margin-right: 12upx;
					// }
					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}

				>view:nth-of-type(2) {
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;

					>input {
						flex: 1;
					}
				}

				.btm {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						width: 120upx;
						height: 60upx;
						background: #D3832A;
						border-radius: 8upx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 32upx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 20upx;
					}
				}
			}
		}
	}

	.bgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;

	}

	.scanqcview {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 10upx;

		>image {
			width: 72upx;
			height: 72upx;
			margin-right: 16upx;
		}

		>view {
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>