logpm/pagesHome/pages/StockUplist/StockUplist.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="head">
				<view class="type1">
					<view>客户：{{user.consignee}}</view>
					<view>当前库位：{{user.goodsAreaName }}</view>
				</view>
				<view class="type1">
					<view>计划件数：{{user.planNum || 0}}</view>
					<view>备货件数：{{user.scanNum || 0}}</view>
				</view>
				<!-- 				<view>
					<view class="button" @click="handleShowChangeStorage">切换库位</view>
				</view> -->
			</view>
			<view class="tabtip">
				<view @click="setorderStatus(1)">
					<view :class="orderStatus==1?'xz':''">定制品</view>
				</view>
				<view @click="setorderStatus(2)">
					<view :class="orderStatus==2?'xz':''">库存品</view>
				</view>
				<view @click="setorderStatus(3)">
					<view :class="orderStatus==3?'xz':''">零担</view>
				</view>
			</view>
		</template>

		<template #body>
			<scroll-view scroll-y="true" :style="{height: details.scrollHeight}" class="scvew">
				<view class="mabx">
					<!-- 定制品 -->
					<view class="item" v-if="orderStatus==1" v-for="item in orderList">
						<view class="toptitl">
							<view class="toplft">
								库位号：{{item.allocation}}
							</view>
							<view class="tis bf">
								按件扫描
							</view>
						</view>
						<view class="boxcontt">
							<view>
								<view><text style="color: #90A0AF;">托盘号：</text>{{item.pallet}}</view>
								<view><text style="color: #90A0AF;">托盘名称：</text>{{item.trayLeanName}}</view>
							</view>
							<view class="">
								<view @click.stop="goorderdetail(item)"><text
										style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}
								</view>
							</view>
							<view>
								<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum || 0}}</view>
								<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum || 0}}</view>
							</view>
						</view>
						<view class="buttts">
							<view class="antu" v-if="item.trayLean" @click="ckscanningCode(item)">
								整托备货扫码
							</view>
							<!-- <view class="anj" @click="godetails(item)" v-if="!item.completeStact"> -->
							<view class="anj" @click="godetails(item)">
								{{item.completeStact?'查看明细':'按件备货扫码'}}
							</view>
							<!-- 					<view class="anj" @click="godetails(item)" v-else>
								查看明细
							</view> -->
						</view>
					</view>
					<!-- 库存品 -->
					<view class="item" v-if="orderStatus==2" v-for="item in stockList">
						<!-- <view class="toptitl">
							<view class="toplft">
								库位号：{{item.allocation}}
							</view>
							<view :class="item==3?'tis bf':'tis'">
								整托备货
							</view>
						</view> -->
						<view class="boxcontt">
							<view>
								<view>
									<text style="color: #90A0AF;">货位：</text>
									<text
										v-if="item.allocations">{{item.allocationList ? item.allocationList.map(val => val.name).join(','): ''}}</text>
								</view>
								<view><text style="color: #90A0AF;">物品：</text>{{item.materialName}}</view>
							</view>
							<view>
								<view><text style="color: #90A0AF;">SKU：</text>{{item.sku}}</view>
								<view><text style="color: #90A0AF;">规格：</text>{{item.cargoNorms}}</view>
							</view>
							<view>
								<view><text style="color: #90A0AF;">物料编码：</text>{{item.cargoNumber}}</view>
								<view><text style="color: #90A0AF;">单位：</text>{{item.cargoUnit}}</view>
							</view>
							<view>
								<view><text style="color: #90A0AF;">计划数量：</text>{{item.planNum || 0}}</view>
								<view><text style="color: #90A0AF;">已扫数量：</text>{{item.realNum || 0}}</view>
							</view>
						</view>
						<view class="buttts" v-if="Number(item.realNum) < Number(item.planNum)">
							<view class="anj" @click="goBarCode(item)">
								配置包条码
							</view>
							<!-- <view class="anj">
								拆包
							</view> -->
						</view>
					</view>
					<!-- 零担 -->
					<template v-if="orderStatus==3">
						<view class="item" v-for="item in zeroOrderList">
							<view class="toptitl">
								<view class="toplft">
									库位号：{{item.allocation}}
									<text v-if="item.stockQuantity">{{ `(${item.stockQuantity})`}}</text>
								</view>
								<view class="tis bf">
									按件扫描
								</view>
							</view>
							<view class="boxcontt">
								<view>
									<view><text style="color: #90A0AF;">托盘号：</text>{{item.pallet}}</view>
									<view @click.stop="goorderdetail(item)"><text
											style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}
									</view>
								</view>
								<view>
									<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum || 0}}</view>
									<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum || 0}}</view>
								</view>
							</view>
							<view class="buttts">
								<view class="anj" @click="showZeroOrderDetails(item)">
									{{item.completeStact?'查看明细':'去备货'}}
								</view>
								<view class="anj" @click="printOrderCode(item)">
									打印订单号
								</view>
							</view>
						</view>
					</template>
					<!-- <up-button type="primary" text="确定"></up-button> -->
				</view>
			</scroll-view>
		</template>
	</BasicContainer>
	<tiplist ref="tiplists"></tiplist>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
	<BluetoothList ref="bluetoothList"></BluetoothList>

	<!-- 切换库位 -->
	<PopUp ref="ChangeStorage">
		<view class="PopUpTitle">请扫描库位码</view>
	</PopUp>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		detailType,
	} from '@/interfaces/pagesHome/StockUplist'
	import {
		distributionStockuporderList,
		distributionStockupscanningCode,
		distributionStockuplocationSelection,
		postZeroStockUpData,
		postZeroStockUp,
		distributionScanStockUpArea
	} from '@/api/user.js'
	import { reactive, toRefs, ref, inject, onMounted, nextTick } from "vue";
	import useBluetoothStore from '@/store/useBluetoothStore.js';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const bluetoothList = ref(null)
	const bluetoothStore = useBluetoothStore()
	const { bluetoothInfo } = storeToRefs(bluetoothStore)
	const utils = inject('utils') as any
	// 获取组件实例
	const tiplists = ref(null)
	const basicContainer = ref(null)
	/** 切换库位 */
	const ChangeStorage = ref(null)
	// 基础组件配置项
	const option = {
		title: '备货列表',
		haveData: true,
		async pullDownRefreshInitPage() {
			await initpage()
		}
	}
	// 页面变量定义
	let details = reactive({
		reservationId: '',
		orderList: [],
		// 零担订单列表
		zeroOrderList: [],
		orderStatus: 1,
		user: {
			consignee: '',
			goodsAreaName: '',
			planNum: '',
			scanNum: '',
		},
		stockList: [],
		stockupId: '',
		items: {},
		isscan: false,
		scancode: '',
		trayId: '',
		zeroOrderVisibi: false,
		/** 是否切换库位 */
		isChangeStorage: false,
		/** 当前库位ID */
		goodsStockupAllocationId: '',
		/** 扫描选择库位 */
		isChooseStorage: false,
		/** 被选中的 */
		chooseItem: {},
		scrollHeight: ''
	})
	onLoad((op) => {
		details.reservationId = op.id
		details.stockupId = op.stockupId
		details.items = JSON.parse(op.item)
		const _tts = ['定制品拣货', '库存品拣货', '零担拣货']

		utils.ttsspke(_tts[details.orderStatus - 1])
	})
	onShow(() => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code :>> ', code);
				console.log(code);
				details.scancode = code
				if (details.isChooseStorage) scanChooseStorage()
				if (details.isscan) scandata()
			}
		})
		// #endif
		// 页面显示延时调用组件刷新函数
		const timer = setTimeout(() => {
			basicContainer.value.startPullDownRefresh()
			clearTimeout(timer)
		}, 200)
	})
	onMounted(async () => {
		await nextTick()
		details.scrollHeight = await utils.getViewDistanceFormTop('.scvew')

	})
	/* 	onHide(() => {
			uni.$off('scancodedate')
			details.isscan = false
		}) */

	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	async function initpage() {
		console.log(details.items);
		let data = {
			// 零担为1, 不是零担为0
			isZero: 0,
			orderStatus: details.orderStatus,
			reservationId: details.reservationId,
			typeService: details.items.typeService,
			stockupId: details.stockupId,
			mallName: details.items.mallName
		}
		// 当标签页为零担时, 改变isZero状态
		if (details.orderStatus === 3) {
			data.orderStatus = 1
			data.isZero = 1
		}
		details.orderList = []
		let response = await distributionStockuporderList(data)
		if (response.code !== 200) return
		console.log('response :>> ', response);
		console.log('details.orderStatus :>> ', details.orderStatus);
		details.user.consignee = response.data?.consignee
		details.user.goodsAreaName = response.data?.goodsAreaName
		details.orderList = response.data?.orderList || []
		details.stockList = response.data?.stockList || []
		if (details.orderStatus === 3) details.zeroOrderList = response.data?.orderList || []
		details.user.planNum = response.data?.planNum
		details.user.scanNum = response.data?.scanNum
		details.isscan = false
		return null
	}
	// 库存品详情页
	function godetails(item : any) {
		uni.navigateTo({
			url: '/pagesHome/pages/StockUplistScandetails/StockUplistScandetails?stockArticleId='
				+ (item.stockArticleId || '') +
				'&orderStatus=' +
				details.orderStatus + '&reservationId=' + details.reservationId +
				'&allocation=' + item.allocation + '&pallet=' + item.pallet + '&orderCode=' + item.orderCode
				+ '&stockupId=' + details.stockupId + '&allocationId=' + item.allocationId
				+ '&typeService=' + details.items.typeService
				+ '&status=' + (item.completeStact ? '1' : '0')
		})
	}

	async function ckscanningCode(item : any) {
		let content = '请扫描托盘码'
		// if (!details.goodsStockupAllocationId) {
		// 	content = '请先扫描库位码'
		// }
		details.isscan = item.taryLean
		details.trayId = item.trayId
		uni.showToast({
			title: content,
			icon: 'none'
		})
		// #ifdef APP
		utils.ttsspke(content)
		// #endif
		details.isscan = true
	}
	function setorderStatus(state : number) {
		if (details.orderStatus === state) return
		details.orderStatus = state
		const _tts = ['定制品拣货', '库存品拣货', '零担拣货']
		utils.ttsspke(_tts[details.orderStatus - 1])
		// 调用组件刷新函数
		basicContainer.value.startPullDownRefresh()
	}
	async function goBarCode(item : any) {
		if (!item.allocationList || item.allocationList.length === 0) {
			// #ifdef APP
			utils.ttsspke('该库存品没有上架数据')
			// #endif
			uni.showToast({
				title: '该库存品没有上架数据',
				icon: 'none'
			})
			return
		}
		console.log('item :>> ', item);
		const _allocationList = item.allocationList.map(val => val.name)
		console.log('_allocationList :>> ', _allocationList);

		if (_allocationList.length === 1) {
			return uni.navigateTo({
				url: '/pagesHome/pages/setbarcode/setbarcode?item=' + JSON.stringify(item)
					+ '&reservationId=' + details.reservationId
					+ '&goodsAreaName=' + details.user.goodsAreaName
					+ '&stockupId=' + details.stockupId
					+ '&allocationId=' + item.allocationList[0].id
					+ '&positionCode=' + item.allocationList[0].name
					+ '&mallName=' + details.items.mallName
			})
		}
		details.isChooseStorage = true
		details.chooseItem = item

		tiplists.value.setdetails({
			title: '请选择货位',
			isshow: true,
			tipstate: 2,
			list: _allocationList,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择货位',
						icon: 'none'
					})
					return
				}
				console.log('deta :>> ', deta);
				// 被选中的索引
				const _index = deta.checklist[0]
				uni.navigateTo({
					url: '/pagesHome/pages/setbarcode/setbarcode?item=' + JSON.stringify(item)
						+ '&reservationId=' + details.reservationId
						+ '&goodsAreaName=' + details.user.goodsAreaName
						+ '&stockupId=' + details.stockupId
						+ '&allocationId=' + item.allocationList[_index].id
						+ '&positionCode=' + item.allocationList[_index].name
						+ '&mallName=' + details.items.mallName
				})
				details.isChooseStorage = false
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				details.isChooseStorage = false
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				details.isChooseStorage = false
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/** 扫描库位 */
	const scanStorage = async () => {
		try {
			uni.showLoading()
			const res = await distributionScanStockUpArea({ stockUpAreaCode: details.scancode })
			const { code, data } = res
			if (code !== 200) return
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			uni.hideLoading()
		}
	}

	/** 扫描定制品 */
	const scanOrder = async () => {
		try {
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			let data = {
				trayBarCode: details.scancode,
				stockupId: details.stockupId,
				trayId: details.trayId,
				reservationId: details.reservationId,
				scanType: 1
			}
			let res = await distributionStockupscanningCode(data)
			if (res.code !== 200) return
			if (res.audio) utils.ttsspke(res.audio)
			// 调用组件刷新函数
			basicContainer.value.startPullDownRefresh()
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			details.isscan = false
			uni.hideLoading()
		}
	}

	/** 扫描库位 */
	function scanChooseStorage() {
		const _allocationList = details.chooseItem.allocationList
		console.log('_allocationList :>> ', _allocationList);
		const _item = _allocationList.find(val => (val.id + '') === (details.scancode + ''))
		console.log('_item :>> ', _item);
		// 扫描的货位id与该货物无关系时
		if (!_item) return uni.showToast({
			title: '该货位无此物料',
			icon: 'none'
		})

		uni.navigateTo({
			url: '/pagesHome/pages/setbarcode/setbarcode?item=' + JSON.stringify(details.chooseItem)
				+ '&reservationId=' + details.reservationId
				+ '&goodsAreaName=' + details.user.goodsAreaName
				+ '&stockupId=' + details.stockupId
				+ '&allocationId=' + _item.id
				+ '&positionCode=' + _item.name
				+ '&mallName=' + details.items.mallName
		})
	}

	/** 扫描接口
	 * */
	async function scandata() {
		scanOrder()
		// if (!details.goodsStockupAllocationId || details.isChangeStorage) scanStorage()
		// else scanOrder()
	}

	/** 展示零担订单物料详情
	 */
	async function showZeroOrderDetails(item) {
		if (!item.allocation) {
			return uni.showToast({
				title: '未上架,上架后再进行操作',
				icon: 'none'
			})
		}
		// 请求零担详情
		let data = {
			typeService: details.items.typeService,
			stockupId: details.stockupId,
			allocationId: item.allocationId,
			orderCode: item.orderCode,
			stockArticleId: item.stockArticleId
		}
		const res = await postZeroStockUpData(data)
		const { code } = res
		let inpList = []
		if (code !== 200) return
		console.log('res.data :>> ', res.data);
		inpList = res.data.map(val => {
			return {
				id: val.id,
				title: val.categoryName,
				value: val.realityQuantity,
				maxNum: val.quantity,
				minNum: val.realityQuantity || 0,
				type: 'Number',
				disabled: item.completeStact,
				allocationId: item.allocationId,
				orderCode: item.orderCode,
				stockArticleId: val.stockArticleId
			}
		})


		// 查看模式
		if (item.completeStact) {
			return tiplists.value.setdetails({
				title: '产看零担物料明细',
				isshow: true,
				tipstate: 4,
				inpList,
				inputtext: '',
				confirmTxt: '关闭',
				isonecheck: true,
				success: async (deta) => {
					tiplists.value.setdetails({ isshow: false })
				},
				cancel: (details) => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: (details) => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
		}

		// 提交模式
		tiplists.value.setdetails({
			title: '设置零担物料数量',
			isshow: true,
			tipstate: 4,
			inpList,
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: async (deta) => {
				console.log('deta :>> ', deta);
				if (deta.inpList.length === 0 || item.completeStact) return tiplists.value.setdetails({ isshow: false })
				let data : any = {
					reservationId: details.reservationId,
					typeService: details.items.typeService,
					stockupId: details.stockupId,
					orderCode: deta.inpList[0].orderCode,
					stockArticleId: deta.inpList[0].stockArticleId,
					list: []
				}
				if (deta.inpList[0].allocationId) data.allocationId = deta.inpList[0].allocationId
				const _flag = deta.inpList.every(val => {
					console.log('val :>> ', val);
					if (val.value < val.minNum) {
						uni.showToast({
							title: '不能小于当前数量'
						})
						return false
					}
					if (val.value > val.minNum) {
						console.log('1 :>> ', 1);
						data.list.push({
							firsts: val.title,
							id: val.id,
							quantity: val.value,
							stockArticleId: val.stockArticleId,
						})
					}

					return true
				})

				if (!_flag) return
				if (data.list.length === 0) {
					return uni.showToast({
						title: '最少修改一项物料',
						icon: 'none'
					})
				}

				const res = await postZeroStockUp(data)
				console.log('res :>> ', res);
				const { code } = res
				if (code === 200) {
					tiplists.value.setdetails({ isshow: false })
					// 调用组件刷新函数
					basicContainer.value.startPullDownRefresh()
				}
				if (res.audio) {
					// #ifdef APP-PLUS
					utils.ttsspke(res.audio)
					// #endif
				}
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/**
	 * 打印订单码
	 */
	function printOrderCode(item) {
		console.log('item :>> ', item);
		// return
		// 提交模式
		tiplists.value.setdetails({
			title: '生成订单编号二维码数量',
			isshow: true,
			tipstate: 1,
			// inpList,
			inputtext: 1,
			confirmTxt: '确定生成',
			isonecheck: true,
			success: async (deta) => {
				// 打印数
				const _inputValue = parseInt(deta.inputtext)
				// 是否满足打印条件
				let _flag = true
				if (_inputValue !== _inputValue) {
					uni.showToast({
						title: '请输入数字',
						icon: 'none'
					})
					_flag = false
				} else if (_inputValue <= 0) {
					uni.showToast({
						title: '数字必须大于零',
						icon: 'none'
					})
					_flag = false
				}
				// 不满足打印条件, 退出函数
				if (!_flag) return tiplists.value.setdetails({ isshow: false })
				// #ifdef APP
				let _isReturn = false
				for (let i = 0; i <= _inputValue; i++) {
					if (_isReturn) return
					console.log('i :>> ', i);
					let text = '! 0 200 200 330 1\r\n'
					text += 'SETBOLD 2\r\n'
					text += `T 56 0 0 0 ${item.orderCode}\r\n`
					text += 'LINE 0 50 420 50 3\r\n'
					text += `T 55 0 0 60 客户\r\n`
					text += 'LINE 40 50 40 110 3\r\n'
					text += `T 55 0 50 60 ${user.consignee}\r\n`
					text += 'LINE 40 80 420 80 3\r\n'
					text += `T 55 0 50 90 ${details.address}\r\n`
					text += 'LINE 0 110 420 110 3\r\n'
					text += `T 55 0 0 120 物料\r\n`
					text += 'LINE 40 110 40 140 3\r\n'
					text += `T 55 0 50 120 ${details.dataList[item]?.materialName}\r\n`
					text += 'LINE 0 140 420 140 3\r\n'
					text += 'B QR 150 150 M 2 U 4\r\n'
					text += `MA,${item.orderCode}\r\n`
					text += 'ENDQR\r\n'
					text += `T 55 0 140 260 ${item.orderCode}\r\n`
					text += 'FORM\r\n'
					text += 'PRINT\r\n'
					let sylist = utils.initbl()
					console.log(sylist);
					utils.getbl(bluetoothInfo.value, text).catch(() => {
						bluetoothList.value.setdetails({ isshow: true })
						_isReturn = true
					})
				}

				if (_isReturn) return
				// #endif
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/** 显示切换库位弹窗 */
	const handleShowChangeStorage = () => {
		details.isChangeStorage = true
		ChangeStorage.value.setDetails({
			title: '切换备货区域',
			showPopUp: true,
			success() {
				ChangeStorage.value.details.showPopUp = false
				details.isChangeStorage = false
			},
			close() {
				ChangeStorage.value.details.showPopUp = false
				details.isChangeStorage = false
			}
		})
	}
	const { user, orderList, orderStatus, stockList, zeroOrderList } = toRefs(details)
</script>

<style lang="scss" scoped>
	.tabtip {
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;

			>view {
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.xz {
			color: #D3832A;
			border-bottom: 8upx solid #D3832A;
			// border-radius: 5upx;
		}
	}

	.scvew {
		width: 100%;
		height: 60vh;
		margin-top: 20upx;

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

			>.item {
				width: 686upx;
				// height: 378upx;
				background: #FFFFFF;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding: 10upx 20upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #ebebeb;
				margin-bottom: 20upx;
				padding-bottom: 30upx;

				.toptitl {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #EEEEEE;
					padding: 34upx 24upx;
					box-sizing: border-box;

					.toplft {
						font-size: 32upx;
						font-weight: 400;
						color: #092C4D;
					}

					.tis {
						font-size: 32upx;
						font-weight: 400;
						color: #0086F1;
					}

					.bf {
						color: #D3832A;
					}
				}

				.boxcontt {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					padding: 32upx 24upx;
					box-sizing: border-box;
					font-size: 28upx;
					border-bottom: 2upx solid #EEEEEE;

					>view {
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						margin-bottom: 20upx;

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

						>view {
							flex: 1;
							word-wrap: break-word;
							word-break: break-all;

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

				.buttts {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					box-sizing: border-box;

					.antu {
						border: 2upx solid #0086F1;
						color: #0086F1;
					}

					.anj {
						border: 2upx solid #D3832A;
						color: #D3832A;
					}

					>view {
						width: 204upx;
						height: 64upx;
						background: #FFFFFF;
						border-radius: 8upx;
						opacity: 1;
						font-size: 28upx;
						display: flex;
						align-items: center;
						justify-content: center;

					}
				}
			}
		}
	}

	.head {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 20upx;
		height: 176upx;
		box-sizing: border-box;
		// border-bottom: 1upx solid #ececec;
		background-color: #ffffff;

		>.type1 {
			width: 100%;
			margin-top: 10upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;

			>view {
				width: 50%;
			}
		}

		>view {
			width: 100%;
		}
	}

	.button {
		margin-top: 10upx;
		padding: 10upx 20upx;
		background: var(--subjectColor);
		border-radius: 10upx;
		width: fit-content;
		color: #fff;
	}

	.topBox {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 10upx;
		border-radius: 10upx;

		.searchInput {
			margin-right: 10upx;
			background: #eee;
			padding: 12upx 20upx;
			flex: 1;
		}

		// 按钮样式
		.button {
			margin-top: 0;
			padding: 10upx 40upx;
			border-radius: 5upx;
			background-color: var(--subjectColor);
			color: #fff;
		}
	}

	.PopUpTitle {
		margin-top: 20upx;
		text-align: left;

	}
</style>