logpm/pagesHome/pages/DownGoods/DownGoods.vue

<template>
	<u-navbar title="下架扫描" 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> -->
	<!-- 微信小程序适配 -- 扫码按钮 -->
	/* #ifdef MP-WEIXIN */
	<view class="scanButton" @click="handleScan">扫码</view>
	/* #endif */

	<view class="viewbx" v-if="pageType=='1'">
		<view class="vwtybx1">
			<view>
				<view>
					<image src="/pagesHome/static/tuoicon.png"></image>
					<view>托盘码</view>
				</view>
				<view>
					<input placeholder="扫码或输入托盘码" v-model="trayCode" @blur="inscan" @confirm="inscan" />
				</view>
			</view>
			<view>
				<view>
					<image src="/pagesHome/static/kuicon.png"></image>
					<view>库位</view>
				</view>
				<view>
					{{allocaTitle||'暂无数据'}}
				</view>
			</view>
		</view>
	</view>
	<view class="tbchec" v-if="details.pageType!=2&&details.pageType!=1">
		<view :class="!isallcheck?'':'xz'" @click="allquanxuan">
			<image :src="!isallcheck?'/pagesHome/static/downnocheck.png':'/pagesHome/static/downcheck.png'"></image>
			<view>全选</view>
		</view>
	</view>

	<view class="item2" v-if="pageType=='2'">
		<view class="tpbx">
			<image src="/pagesHome/static/kuweiicon.png"></image>
			<view>仓库名称：{{details.resdata.warehouseName}}</view>
		</view>
		<view class="tpbx">
			<image src="/pagesHome/static/kuweiicon.png"></image>
			<view>货位信息：
				<text v-show="details.resdata.areaTitle">{{details.resdata.areaTitle}}</text>
				<text v-show="details.resdata.shelfTitle">-{{details.resdata.shelfTitle}}排</text>
				<text v-show="details.resdata.positionInfo">{{details.resdata.positionInfo}}</text>
			</view>
		</view>

		<view class="tpbx">
			<view style="width: 50%;">包件数：{{details.resdata.totalNum}}</view>
			<view style="width: 50%;">包件总数：{{details.resdata.orderTotalnum}}</view>
		</view>
		<view class="tpbx">
			<view style="width: 50%;">库存数：{{details.resdata.stockNum}}</view>
			<view style="width: 50%;">库存总数：{{details.resdata.stockTotalNum}}</view>
		</view>
		<view class="tpbx">
			<image src="/pagesHome/static/kuweiicon.png"></image>
			<view>托盘码：{{details.resdata.trayCode || '' + `(${details.resdata.trayName || ''})`}}
			</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scvorder" :style="{'--height':pageType=='1'?'60vh':pageType=='2'?'60vh':'65vh'}">

		<view class="itembox" v-for="(item,index) in datalist" v-if="details.pageType!=2&&details.pageType!=1">
			<view class="topon1" @click="checkite(item)">
				<view>
					<image v-if="details.pageType!=2&&details.pageType!=1"
						:src="checkdatalist.indexOf(item)==-1?'/pagesHome/static/downnocheck.png':'/pagesHome/static/downcheck.png'">
					</image>
					<view>{{index+1}}</view>
				</view>
			</view>
			<view class="topon2" @click.stop="goorderdetail(item)">
				<image src="/pagesHome/static/checi.png"></image>
				<view>订单自编号：{{item?.orderCode}}</view>
			</view>
			<view class="topon2" v-if="item?.materialCode&&pageType==4">
				<image src="/pagesHome/static/checi.png"></image>
				<view>物料编码：{{item?.materialCode}}</view>
			</view>
			<view class="topon2" v-if="item?.goodsName">
				<image src="/pagesHome/static/checi.png"></image>
				<view>物料名称：{{item?.goodsName}}</view>
			</view>
			<view class="topon2" v-if="item?.marketName">
				<image src="/pagesHome/static/checi.png"></image>
				<view>商场名称：{{item?.marketName}}</view>
			</view>
			<view class="topon2" v-if="item?.incomingBatch">
				<image src="/pagesHome/static/checi.png"></image>
				<view>批次号：{{item?.incomingBatch}}</view>
			</view>
			<view class="topon2" v-if="item?.positionCode">
				<image src="/pagesHome/static/checi.png"></image>
				<view>库位信息：{{item?.positionCode}}</view>
			</view>
			<view class="topon2" v-if="item?.associationId&&pageType!='4'">
				<image src="/pagesHome/static/checi.png"></image>
				<view>订单号：{{item?.associationId}}</view>
			</view>
			<view class="topon2" v-if="item?.associationValue&&pageType!='4'">
				<image src="/pagesHome/static/checi.png"></image>
				<view>包条码：{{item?.associationValue}}</view>
			</view>
			<view class="topon2" v-if="item?.orderPackageCode&&pageType!='4'">
				<image src="/pagesHome/static/checi.png"></image>
				<view>包条码：{{item?.orderPackageCode}}</view>
			</view>
			<view class="topon2">
				<image src="/pagesHome/static/checi.png"></image>
				<view>托盘码：{{item?.trayCode + `(${item?.trayName})`}}</view>
			</view>
			<!-- <view class="topon2" v-if="item?.positionCode">
				<image src="/pagesHome/static/checi.png"></image>
				<view>托盘码：{{item?.positionCode}}</view>
			</view> -->
			<view class="viewnum">
				<view>总包数：{{item.num}}</view>
				<view>已录数：{{item.enterNum}}</view>
			</view>
		</view>

		<view class="item2" v-for="(item,index) in datalist" v-else>
			<!-- 定制品 -->
			<view v-if="item.goodsType === 1">
				<view class="tpbx">
					<image src="/pagesHome/static/kuweiicon.png"></image>
					<view>服务号：{{item.serviceNum}}</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.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.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>
	</scroll-view>

	<view class="butys">
		<view class="qut" @click="backun" v-if="pageType=='1'||pageType=='2'||pageType=='3'">取消</view>
		<view class="conf" @click="setshowstate(2)" v-else>录入信息</view>
		<view class="conf" @click="downs">确认下架</view>
	</view>
	<view class="tanchuangbg" v-if="showstate">
		<view class="inputbox" @click.stop.prevent v-if="showstate==2">
			<view class="makinp" @click="checkmake">
				{{typelist[checkmakindex]||'请选择下架类型'}}
			</view>
			<view class="makinp" @click="checkmarke" v-if="details.pageType=='4'">
				{{Marketlist[checkmarkindex]?.marketName||'没有商场'}}
			</view>
			<view class="inputscan">
				<input :placeholder="'输入'+typelist[checkmakindex]" v-model="scancode" />
				<view class="scanbt" @click="scandata">搜索</view>
			</view>
			<scroll-view scroll-y="true" class="scvbw">
				<view class="scboxitem">
					<view class="items" v-for="(item,index) in codelist">
						<view class="type1s">
							<view>物料名称：</view>
							<view>{{item.materialName}}</view>
						</view>
						<view class="type1s">
							<view>剩余件数：</view>
							<view>{{item.num || 0}}件</view>
						</view>
						<view class="type1s">
							<view>批次号：</view>
							<view>{{item.incomingBatch}}</view>
						</view>
						<view class="type1s">
							<view>商场名称：</view>
							<view>{{item.marketName}}</view>
						</view>
						<view class="type1s">
							<view>仓库名称：</view>
							<view>{{item.warehouseName}}</view>
						</view>
						<view class="type1s">
							<view>库位信息：</view>
							<view>{{item.positionCode}}</view>
						</view>
						<view class="type1s">
							<view>托盘信息：</view>
							<view>{{item.trayCode + `(${item.trayName})`}}</view>
						</view>
						<view class="rksu">
							<view>
								<view>下架数：</view>
								<input placeholder="请输入下架数" v-model="item.enterNum" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btx">
				<view class="cancel" @click="setshowstate(0)">取消</view>
				<view class="confirm" @click="confirmlist">确认</view>
			</view>
		</view>
	</view>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		warehouseUpdownTypedownScanPackage,
		warehouseUpdownTypeupShelfScanAllocation,
		warehouseUpdownTypedownDownAllocation,
		warehouseUpdownTypedownPackage,
		warehouseUpdownTypedownTrayCode,
		warehouseUpdownTypedownZeroOrder,
		warehouseUpdownTypedownStock,
		warehouseUpdownTypedownEnterZeroOrder,
		warehouseUpdownTypedownEnterStock,
		warehouseUpdownTypedownScanTrayCode,
		warehouseTrayTypefindAllMarket
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { 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 tiplists = ref(null)
	const tip = ref(null)

	const details = reactive({
		scantype: 1,
		scancode: '',
		pageType: 1,
		datalist: [],
		checkdatalist: [],
		isallcheck: false,
		resdata: {} as any,
		trayCode: '',
		showstate: 0,
		checkmakindex: 0,
		codelist: [],
		typelist: [],
		Marketlist: [],
		checkmarkindex: 0,
		allocaTitle: '',
		scandataList: []
	})
	onLoad((op) => {
		// details.upshelfScanType = op.type
		details.pageType = op.type
		if (op.type === '1') utils.ttsspke(`当前下架方式为${op.pageName}, 请扫描下架的托盘`)
		else if (op.type === '2') utils.ttsspke(`当前下架方式为${op.pageName}, 请扫描下架的库位`)
		else if (op.type === '3') utils.ttsspke(`当前下架方式为${op.pageName}, 请扫描下架的包件`)
		else if (Number(details.pageType) == 4) {
			details.typelist = ['物料编码', '物料名称']
			utils.ttsspke(`当前下架方式为${op.pageName}, 请录入物料编码或物料名称`)
		} else if (Number(details.pageType) == 5) {
			details.typelist = ['订单号', '运单号']
			utils.ttsspke(`当前下架方式为${op.pageName}, 请录入订单号或运单号`)
		}
	})

	onShow(() => {
		initmarke()
		// app 适配
		// #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.datalist = []
			details.codelist = []
			details.trayCode = ''
			details.resdata = {}
			details.allocaTitle = ''

			// 关闭刷新动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	function backun() {
		uni.navigateBack()
	}
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	async function initmarke() {
		let data = {
			warehouseCode: 'LQ'
		}
		let res = await warehouseTrayTypefindAllMarket(data)
		if (res.code !== 200) return
		console.log(res.data);
		details.Marketlist = res.data
	}
	watchEffect(() => {
		if (details.datalist.length == details.checkdatalist.length) {
			details.isallcheck = true
		} else {
			details.isallcheck = false
		}
	})
	function stop() {

	}
	function inscan() {
		details.scancode = details.trayCode
		scandata()
	}
	async function scandata() {
		console.log('111 :>> ', 111);
		// let res=await 
		const _scancode = details.scancode

		// 是否请求
		let _flag = true

		// 根据扫码的值去重
		if (details.scandataList.includes(_scancode)) _flag = false

		// 根据包条码去重
		if (Number(details.pageType) === 3 && details.datalist.find(val => val.associationValue === _scancode)) _flag = false

		if (!_flag) {
			// #ifdef APP
			utils.ttsspke('重复扫码')
			// #endif

			return uni.showToast({
				title: '重复扫码',
				icon: 'none'
			})
		}
		console.log('111 :>> ', 111);
		details.scandataList.push(_scancode)
		try {
			uni.showLoading({
				mask: true
			})
			let res = null
			let data = null;
			switch (Number(details.pageType)) {
				case 1:
					data = {
						trayCode: details.scancode
					}
					res = await warehouseUpdownTypedownScanTrayCode(data)
					if (res.code == 200) {
						details.datalist = []
						details.checkdatalist = []
						details.datalist = details.datalist.concat(res.data.list)
						details.checkdatalist = details.checkdatalist.concat(res.data.list)
						details.trayCode = details.scancode
						details.allocaTitle = res.data.warehouseName + res.data.areaTitle + res.data.allocationTitle
					}
					break;
				case 2:
					data = {
						allocationId: details.scancode
					}
					res = await warehouseUpdownTypeupShelfScanAllocation(data)
					if (res.code == 200) {
						details.datalist = []
						details.checkdatalist = []
						details.datalist = details.datalist.concat(res.data.list)
						details.checkdatalist = details.checkdatalist.concat(res.data.list)
						details.resdata = res.data

						const _positionArr = details.resdata.allocationTitle.split('-')
						details.resdata.positionInfo = _positionArr[0] + '层' + _positionArr[1] + '列'

					}
					break;
				case 3:
					data = {
						orderPackageCode: details.scancode
					}
					res = await warehouseUpdownTypedownScanPackage(data)
					console.log('res', res)
					if (res.code == 200) {
						details.datalist = details.datalist.concat([res.data])
						details.checkdatalist = details.checkdatalist.concat([res.data])
					}
					break;
				case 4:
					data = {
						stockType: details.checkmakindex + 1,
						code: details.scancode,
						marketId: details.Marketlist[details.checkmarkindex]?.marketId,
					}
					res = await warehouseUpdownTypedownEnterStock(data)
					if (res.code == 200) {
						details.datalist = []
						details.checkdatalist = []
						details.codelist = res.data
						// details.checkdatalist=details.checkdatalist.concat(res.data.list)
					}
					break;
				case 5:
					data = {
						zeroType: details.checkmakindex + 1,
						code: details.scancode
					}
					res = await warehouseUpdownTypedownEnterZeroOrder(data)
					if (res.code == 200) {
						details.codelist = res.data
						// details.checkdatalist=details.checkdatalist.concat(res.data.list)
					}
					break;
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			uni.hideLoading()
			// 请求完成, 清除阻止项
			details.scandataList.splice(details.scandataList.indexOf(_scancode), 1)
		}
	}

	async function downs() {
		let res = null
		let data = null;
		let list = []
		uni.showLoading({
			mask: true,
			title: '提交中'
		})
		switch (Number(details.pageType)) {
			case 1:
				data = {
					trayCode: details.trayCode
				}
				res = await warehouseUpdownTypedownTrayCode(data)
				break;
			case 2:
				data = {
					allocationId: details.resdata.allocationId
				}
				res = await warehouseUpdownTypedownDownAllocation(data)
				break;
			case 3:
				list = []
				details.checkdatalist.map(item => {
					list.push({
						orderPackageCode: item.associationValue
					})
				})
				data = {
					upShelfPackageList: list,
				}
				res = await warehouseUpdownTypedownPackage(data)
				break;
			case 4:
				list = []
				details.checkdatalist.map(item => {
					list.push({
						marketId: item.marketId,
						materialCode: item.associationValue,
						enterNum: item.enterNum,
						allocationId: item.allocationId,
						incomingBatch: item.incomingBatch
					})
				})
				data = {
					upShelfStockList: list
				}
				res = await warehouseUpdownTypedownStock(data)
				break;
			case 5:
				list = []
				details.checkdatalist.map(item => {
					list.push({
						waybillCode: item.waybillNumber,
						orderCode: item.associationValue,
						enterNum: item.enterNum,
						allocationId: item.allocationId,
					})
				})
				data = {
					upShelfZeroOrderList: list
				}
				res = await warehouseUpdownTypedownZeroOrder(data)
				break;
		}
		console.log('res :>> ', res);
		uni.hideLoading()
		if (res.code == 200) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			utils.ttsspke(res.msg)
			details.checkdatalist = []
			details.datalist = []
			details.codelist = []
			details.scancode = ''
			details.resdata = {}
			details.isallcheck = false
		} else {
			uni.showToast({
				icon: 'error',
				title: '下架失败'
			})
		}
	}
	function checkite(item) {
		if (details.checkdatalist.indexOf(item) == -1) {
			details.checkdatalist.push(item)
		} else {
			details.checkdatalist.splice(details.checkdatalist.indexOf(item), 1)
		}
	}
	function allquanxuan() {
		if (details.datalist.length == details.checkdatalist.length) {
			details.checkdatalist = []
		} else {
			details.datalist.map(item => {
				if (details.checkdatalist.indexOf(item) == -1) {
					details.checkdatalist.push(item)
				}
			})
		}
	}
	function confirmlist() {
		let sfcg = false
		details.codelist.map(item => {
			if (item.enterNum > item.num) {
				sfcg = true
			}
		})
		if (sfcg) {
			tip.value.setdetails({
				title: '警告',
				content: '入库数不能大于剩余件数',
				confirmTxt: '确认',
				isshow: true,
				isshowcancel: true,
				success: () => {
					tip.value.setisshow(false)
				},
				cancel: () => {
					tip.value.setisshow(false)
				},
				close: () => {
					tip.value.setisshow(false)
				}
			})
			return
		}
		details.codelist.map(item => {
			if (item.enterNum > 0) {
				details.datalist.push(item)
				details.checkdatalist.push(item)
			}
		})
		// details.datalist=details.datalist.concat(details.codelist)
		// details.checkdatalist=details.checkdatalist.concat(details.codelist)
		details.showstate = 0
		details.codelist = []
	}
	function setshowstate(state : number) {
		details.showstate = state
		// 清空数据
		details.codelist = []
		details.scancode = ''
	}
	function checkmake() {
		let list = []
		if (Number(details.pageType) == 4) {
			list = ['物料编码', '物料名称']
			details.typelist = list
		} else if (Number(details.pageType) == 5) {
			list = ['订单号', '运单号']
			details.typelist = list
		}
		tiplists.value.setdetails({
			title: '请选择搜索方式',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择商场',
						icon: 'none'
					})
					return
				}
				details.checkmakindex = deta.checklist[0]
				tiplists.value.setdetails({ isshow: false })
				details.codelist = []
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	function checkmarke() {
		let list = []
		details.Marketlist.map(item => {
			list.push(item?.marketName)
		})
		tiplists.value.setdetails({
			title: '请选择商场',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择商场',
						icon: 'none'
					})
					return
				}
				details.checkmarkindex = deta.checklist[0]
				tiplists.value.setdetails({ isshow: false })
				details.codelist = []
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	// function setchecl(index:number){
	// 	if(details.checkinarr.indexOf(index)==-1){
	// 		details.checkinarr.push(index)
	// 	}else{ 
	// 		details.checkinarr.splice(details.checkinarr.indexOf(index),1)
	// 	}
	// }

	function handleScan() {
		console.log(123123)
		// 微信小程序适配
		uni.scanCode({
			success(res) {
				console.log('res :>> ', res);
				console.log('res.result :>> ', res.result);
				details.scancode = res.result
				scandata()
			}
		})
	}
	const {
		allocaTitle,
		checkmarkindex,
		Marketlist,
		codelist,
		scancode,
		typelist,
		checkmakindex,
		showstate,
		trayCode,
		isallcheck,
		checkdatalist,
		pageType,
		datalist
	} = toRefs(details)
</script>

<style lang="scss">
	.tanchuangbg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		background-color: #00000050;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 1s;

		.makinp {
			width: 590upx;
			border: 1upx solid #00000020;
			color: #020B18;
			box-sizing: border-box;
			margin-bottom: 10upx;
			box-sizing: border-box;
			font-size: 28upx;
			padding: 10upx 20upx;
		}

		.inputbox {
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;

			.inputscan {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				>input {
					width: 440upx;
					height: 64upx;
					border: 1upx solid #092C4D30;
					border-radius: 8upx;
					box-sizing: border-box;
					font-size: 28upx;
					padding: 0upx 20upx;
					box-sizing: border-box;
				}

				.scanbt {
					width: 128upx;
					height: 64upx;
					background: #D3832A;
					border-radius: 8upx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.scvbw {
				width: 100%;
				height: 450upx;
				margin-top: 30upx;

				.scboxitem {
					display: flex;
					flex-direction: column;
					align-items: center;

					.items {
						width: 590upx;
						display: flex;
						flex-direction: column;
						box-shadow: 0upx 2upx 10upx 0upx #e2e2e3;
						margin-top: 10upx;
						padding: 20upx;
						box-sizing: border-box;

						>.lisbite {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							// position: absolute;

							>.itembox {
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								font-size: 28upx;
								color: #020B18;
								border: 1upx solid #D3832A;
								padding: 10upx 20upx;
								box-sizing: border-box;
								border-radius: 20upx;
								color: #D3832A;

								>view {
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}

						>.type1s {
							display: flex;
							align-items: center;
							margin-bottom: 20upx;

							>view {
								font-size: 28upx;

								&:nth-child(1) {
									width: fit-content;
									white-space: nowrap;
									flex: none;
								}

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>view:nth-of-type(2) {
									color: #092C4D;
								}
							}
						}

						.rksu {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;

							>view {
								// width: 50%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>input {
									width: 200upx;
									padding: 0 15upx;
									border: 1upx solid #00000020;
								}
							}
						}
					}
				}
			}

			.btx {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50upx;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 260upx;
					height: 76upx;
					border-radius: 7upx;
					font-size: 28upx;
				}

				>.cancel {
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}

				>.confirm {
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}
	}

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

		>.conf {
			width: 320upx;
			height: 100upx;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
			background-color: #D3832A;
		}

		>.qut {
			width: 320upx;
			height: 100upx;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #5A6875;
			background-color: #FFFFFF;
		}
	}

	.scvorder {
		width: 100%;
		margin-top: 20upx;
		height: var(--height);

		.itembox {
			width: 686upx;
			border-radius: 20upx;
			padding: 0 20upx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: auto;
			margin-bottom: 20upx;

			.topon1:nth-last-child(1) {
				border-bottom: 4upx solid #EEEEEE00 !important;
			}

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

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

			>.topon1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 10upx;
				box-sizing: border-box;
				border-bottom: 4upx solid #EEEEEE;

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

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

					>image {
						width: 48upx;
						height: 48upx;
						margin-right: 30upx;
					}

					>view {
						width: 50rpx;
						height: 50rpx;
						background: #178AF220;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						font-weight: 500;
						color: #178AF2;
					}
				}

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

					>view {
						width: 136upx;
						height: 64upx;
						border-radius: 8upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #90A0AF;
						background-color: #F5F5F6;
						margin-right: 20upx;

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

					.xzc {
						background-color: #178AF2 !important;
						color: #ffffff !important;
					}

					.xze {
						background-color: #F8544B !important;
						color: #ffffff !important;
					}

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

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

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

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

	.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;
		}

		.tpbx {
			display: flex;
			align-items: center;
			padding: 10upx 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;
				}
			}
		}

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

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

	.tbchec {
		width: 686rpx;
		height: 80rpx;
		padding: 16upx 36upx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		background-color: #ffffff;
		border-radius: 20upx;

		.xz {
			color: #D3832A !important;
		}

		>view {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #90A0AF;

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

	.viewbx {
		width: 686upx;
		// height: 356upx;
		background: #FFFFFF;
		border-radius: 20upx;
		position: relative;
		padding: 10upx 20upx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 40upx;

		.numvie {
			display: flex;
			align-items: center;
			font-size: 28upx;
			font-weight: 400;
			color: #020B18;
			padding: 30upx 0;

			>view:nth-of-type(1) {
				width: 200upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:nth-of-type(2) {}
		}

		.vwtybx1 {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 20upx 0;
			box-sizing: border-box;

			// border-bottom: 4upx solid #EEEEEE;
			// &:nth-last-child(1){
			// 	border-bottom: none;
			// }
			>view {
				display: flex;
				align-items: center;
				margin-bottom: 20upx;

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

				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
					width: 200upx;
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;

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

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

					>input {
						flex: 1;
					}
				}
			}
		}
	}

	.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;
		}
	}

	.scanButton {
		position: fixed;
		width: 100%;
		bottom: 20upx;
		text-align: center;
		border: 1upx solid #D3832A;
		color: #D3832A;
		padding: 15upx 0;
		border-radius: 10upx;
	}
</style>