YTAPP/pages/instock/index.vue

<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" label-align="right" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="单号" :required="valiFormData.search_order_choice !== 2" name="orderNum">
					<uni-easyinput v-model="valiFormData.orderNum" placeholder="请输入单号" suffixIcon="scan" :focus="focusType" @iconClick="scan" />
				</uni-forms-item>
				<uni-forms-item v-if="valiFormData.search_order_choice === 2" label="批次号" name="batch_number">
					<uni-data-select v-model="valiFormData.batch_number" :localdata="batchOptions" placeholder="请选择批次号"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item v-if="valiFormData.search_order_choice === 1" label="仓位编码" name="space_code">
					<uni-data-select v-model="valiFormData.space_code" :localdata="spaces" placeholder="请选择仓位编码"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item v-if="valiFormData.search_order_choice !== 2" label="重量" required name="weight">
					<uni-easyinput
						v-model="valiFormData.weight"
						placeholder="请输入重量"
						oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g, '').replace(/\.{2,}/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').match(/^\d*(\.?\d{0,2})/g)[0] || null"
					>
						<template #right>
							<view class="weight-right">KG</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item v-if="valiFormData.search_order_choice === 1" label="图片" name="images">
					<view class="upload-container">
						<view class="preview">
							<view v-for="(img, index) in images" :key="index" class="image-container">
								<image :src="img.path" class="preview-image" mode="aspectFill" @click="openPreview(img.path)" />
								<progress :percent="img.progress || 0" :activeColor="Number(img.progress || 0) === 100 ? '#00ff00' : '#10AEFF'" stroke-width="3" />

								<text v-if="img.status === 'success'">1</text>
								<uni-icons class="delete-icon" @click="deleteImage(index)" type="clear" size="20" color="red" />
							</view>
							<view v-if="images.length < maxImages" class="choose-image-container" @click="chooseImage">
								<uni-icons type="plusempty" size="40" color="#ccc" />
							</view>
						</view>
						<text style="padding-top: 8px">最多选择6张图片</text>
						<!-- 放大预览 -->
						<view v-if="previewImage" class="preview-modal" @click="closePreview">
							<image :src="previewImage" class="preview-large" mode="aspectFit" @click.stop="closePreview" />
						</view>
					</view>
				</uni-forms-item>

				<uni-forms-item>
					<view @click="searchPkgChange" class="checkbox-cum" :style="{ color: valiFormData.search_pkg ? '#007AFF' : 'gray' }">
						<checkbox :checked="valiFormData.search_pkg" @click="searchPkgChange" />
						搜索寄存包裹
					</view>

					<view class="sub-choice">
						<checkbox :disabled="!valiFormData.search_pkg" :checked="valiFormData.typing" />
						<text
							@click="
								() => {
									if (valiFormData.search_pkg) {
										valiFormData.typing = !valiFormData.typing;
									}
								}
							"
							:style="{
								color: valiFormData.search_pkg && valiFormData.typing ? '#007AFF' : 'gray'
							}"
						>
							包裹寄存、代购、运单都找不到时手工添加包裹
						</text>
					</view>

					<view @click="searchOrderChoiceChange" class="checkbox-cum" :style="{ color: valiFormData.search_order ? '#007AFF' : 'gray' }">
						<checkbox :checked="valiFormData.search_order" @click="searchOrderChoiceChange" />
						搜索运单
					</view>

					<view>
						<uni-data-checkbox :disabled="!valiFormData.search_order" v-model="valiFormData.search_order_choice" :localdata="searchOrderChoice" />
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="info" @click="reset">重置</button>
				<button type="primary" @click="onsubmit" :loading="loading">
					<uni-icons v-if="!loading" type="checkmarkempty" size="18" color="white"></uni-icons>
					提交
				</button>
			</view>
		</view>

		<view class="history">
			<view class="item" v-for="(item, i) in instockHistory.slice(0, 5)" :key="i">
				<text class="code" :style="{ color: item.status ? 'green' : '#666' }">
					{{ item.orderNum }}
					<text v-if="item.batch_text">批次号: {{ item.batch_text }}</text>
					<text v-if="item.space">仓位编码: {{ item.space }}</text>
					{{ item.type }}
				</text>

				<uni-icons v-if="item.status" type="checkmarkempty" class="status" size="16" color="green"></uni-icons>
				<text class="status fail" v-else>F</text>

				<text style="margin-left: 10rpx; font-weight: 300">
					{{ '\r\n' + item.createTime }}
				</text>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="info"
				cancelText="否"
				confirmText="是"
				title="提示"
				content="是否按默认申报（默认申报为：衣服，10件，单价1）"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="printerDialog" type="dialog" :is-mask-click="false">
			<view style="width: 90%; margin: 0 auto; min-height: 250px; background-color: #fff; border-radius: 5px">
				<view class="" style="font-size: 20px; border-bottom: 1px solid #e1e1e1; padding: 15px 10px">
					<view>
						<view style="margin-bottom: 20px">
							<text>打印尾程面单</text>
						</view>
						<view>
							<view v-if="printerList">
								<view>
									<uni-data-checkbox
										multiple
										v-model="sendToPeinter"
										:localdata="[
											{
												text: '发送到标签打印机打印',
												value: 1
											}
										]"
										@change="sendToPeinterFun"
									>
										>
									</uni-data-checkbox>
									<uni-data-checkbox :disabled="sendToPeinter.length === 0" v-model="selectPrinter" :localdata="printers"></uni-data-checkbox>
								</view>
							</view>
						</view>
					</view>
					<view style="text-align: center; position: absolute; bottom: 10px; width: 90%; display: flex; margin: 0 auto; left: 0; right: 0">
						<button @click="close" style="width: 35%">关闭</button>
						<button
							@click="printConfirm"
							:hover-stay-time="500"
							:loading="subLoading"
							:disabled="sendToPeinter.length === 0 || subLoading"
							class="my-bt-bg"
							style="width: 35%"
						>
							打印
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import permision from '@/common/permission.js';
import { ref, reactive, nextTick, provide, computed } from 'vue';
import { onShow, onLoad, onUnload, onHide, onBackPress, onNavigationBarButtonTap } from '@dcloudio/uni-app';
import {
	getAliyunOssSignatureUrl,
	instockScanURL,
	outStockScanURL,
	weighScanURL,
	checkWaybillGoodsURL,
	printWaybillLabelURL,
	getWarehouseSpaceURL,
	getBindParamsURL,
	getPrinterListURL
} from '@/utils/api.js';
import { uuid } from '@/utils/random.ts';
const alertDialog = ref();
const message = ref();
const valiForm = ref();
const printerDialog = ref();
const token = ref(null);
const user = ref(null);
const loading = ref(false);
const images = ref([]);
const messageType = ref('');
const messageText = ref('');
const batchOptions = ref([] as any);
const spaces = ref([] as any);
const previewImage = ref(null);
const maxImages = ref(6); // 最大上传图片数量
const uploadData = ref([] as any);
const imageValue = ref([] as any);
const printerList = ref({} as any);
const instockHistory = ref([] as any);
const printers = ref([] as any);
const downloadFile = ref([] as any);
const sendToPeinter = ref([1]);
const selectPrinter = ref(0);
const subLoading = ref(false);
const focusType = ref(true);
const result = ref();
// 校验表单数据
const valiFormData = reactive({
	images: [],
	orderNum: '',
	batch_number: '',
	space_code: '',
	weight: '',
	search_pkg: true,
	typing: true,
	search_order: true,
	search_order_choice: 1 as any
});

const searchOrderChoice = reactive([
	{
		text: '更新为已入库,状态为【已入库】',
		value: 1
	},
	{
		text: '更新为已出库,状态为【已出库】',
		value: 2
	},
	{
		text: '称重计费',
		value: 3
	}
]);

const rules = computed(() => {
	return {
		orderNum: {
			rules: [
				{
					required: valiFormData.search_order_choice !== 2,
					errorMessage: '单号不能为空'
				}
			]
		},
		weight: {
			rules: [
				{
					required: true,
					errorMessage: '重量不能为空'
				},
				{
					format: 'number',
					errorMessage: '重量只能输入数字'
				}
			]
		}
	};
});
const spaceRes = computed(() => {
	try {
		const res = spaces.value.find((item: any) => item.value === valiFormData.space_code) as any;
		// console.log(res);
		return res?.text;
	} catch (e) {
		console.log(e);
		return '';
	}
});
onShow(() => {
	focusType.value = true;
	loading.value = false;
	token.value = uni.getStorageSync('token');
	user.value = uni.getStorageSync('user');
	getWarehouseSpace();
	getBindParams();
	getPrinterList();
});
onHide(() => {
	focusType.value = false;
	loading.value = false;
});
onNavigationBarButtonTap((event: any) => {
	if (event.index === 0) {
		uni.navigateTo({
			url: '/pages/instock/instockLog'
		});
	}
});

const getWarehouseSpace = () => {
	uni.request({
		url: getWarehouseSpaceURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			code: ''
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				spaces.value = res.data.data.spaces.map((item) => {
					return {
						text: item.name,
						value: item.code
					};
				});
			}
		}
	});
};

const getBindParams = () => {
	uni.request({
		url: getBindParamsURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				batchOptions.value = res.data.data.batch_number.map((item) => {
					return {
						text: item.name,
						value: item.id
					};
				});
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};

const getPrinterList = () => {
	uni.request({
		url: getPrinterListURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				printerList.value = res.data.data.printers;
				printers.value = Object.values(printerList.value).map((item: any) => {
					return {
						text: item.name,
						value: item.value
					};
				});
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};
const batchText = (batch_number) => {
	return batchOptions.value.find((item: any) => item.value === batch_number)?.text;
};
const searchPkgChange = () => {
	valiFormData.search_pkg = !valiFormData.search_pkg;
	valiFormData.typing = valiFormData.search_pkg;
};
const searchOrderChoiceChange = () => {
	valiFormData.search_order = !valiFormData.search_order;
	valiFormData.search_order_choice = valiFormData.search_order ? 3 : '';
};

const reset = () => {
	loading.value = false;
	focusType.value = false;
	images.value = [];
	valiFormData.orderNum = '';
	// space_code: '',
	valiFormData.batch_number = '';
	valiFormData.weight = '';
	valiFormData.search_pkg = true;
	valiFormData.typing = true;
	valiFormData.search_order = true;
	nextTick(() => {
		focusType.value = true;
	});
};

const scan = async () => {
	// #ifdef APP-PLUS
	let status = await checkPermission();
	if (status !== 1) {
		return;
	}
	// #endif
	uni.scanCode({
		success: (res: any) => {
			result.value = res.result;
			valiFormData.orderNum = res.result;
			// this.onsubmit();
		},
		fail: (err) => {
			// 需要注意的是小程序扫码不需要申请相机权限
		}
	});
};
// #ifdef APP-PLUS
const checkPermission = async () => {
	let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');

	if (status === null || status === 1) {
		status = 1;
	} else {
		uni.showModal({
			content: 'Camera permission required',
			confirmText: 'Setting',
			success: function (res) {
				if (res.confirm) {
					permision.gotoAppSetting();
				}
			}
		});
	}
	return status;
};
// #endif
let st;
const warehouseScan = async () => {
	st && clearTimeout(st);
	if (valiFormData.search_order_choice === 1) {
		await checkWaybillGoods();
	} else if (valiFormData.search_order_choice === 2) {
		await scanOutstock();
	} else if (valiFormData.search_order_choice === 3) {
		await weighScan();
	}
};

const checkWaybillGoods = async () => {
	loading.value = true;
	uni.request({
		url: checkWaybillGoodsURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum
		},
		success: (res: any) => {
			if (res.data.code === 1 && res.data.data.is_goods_empty) {
				alertDialog.value.open();
			} else {
				instockScan(0);
			}
		}
	});
};

const instockScan = (is_save_goods: number) => {
	const images = getImages();
	uni.request({
		url: instockScanURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			weight: valiFormData.weight,
			space_code: valiFormData.space_code,
			is_save_goods: is_save_goods,
			images
		},
		success: (res: any) => {
			loading.value = false;
			if (res.data.code == 1) {
				messageType.value = 'success';
				messageText.value = res.data.msg;
				message.value.open();
				console.log('res.data.data---', res.data.data);

				const historyItem = {
					orderNum: valiFormData.orderNum,
					createTime: new Date(),
					space: spaceRes.value,
					type: '入库',
					status: true
				};
				instockHistory.value.unshift(historyItem);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();

				if (res.data.data.express_label) {
					console.log('有打印面单');
					selectPrinter.value = sendToPeinter.value.length > 0 ? printers.value[0].value : 0;
					printerDialog.value.open();
				} else {
					st = setTimeout(() => {
						reset();
						st && clearTimeout(st);
					}, 1000);
				}
			} else {
				messageType.value = 'error';
				messageText.value = res.data.msg;
				message.value.open();
				const historyItem = {
					orderNum: valiFormData.orderNum,
					createTime: new Date(),
					space: spaceRes.value,
					type: '入库',
					status: false
				};
				instockHistory.value.unshift(historyItem);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();
				st = setTimeout(() => {
					reset();
					st && clearTimeout(st);
				}, 1000);
			}
		}
	});
};

const scanOutstock = () => {
	console.log(valiFormData.orderNum, valiFormData.batch_number);
	if (valiFormData.orderNum.length === 0 && valiFormData.batch_number.length === 0) {
		messageType.value = 'error';
		messageText.value = '单号或批次号至少填一个';
		message.value.open();
		return;
	}
	loading.value = true;
	uni.request({
		url: outStockScanURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			batch_number: valiFormData.batch_number
		},
		success: (res: any) => {
			loading.value = false;
			if (res.data.code == 1) {
				messageType.value = 'success';
				messageText.value = res.data.msg;
				message.value.open();

				const historyItem = {
					orderNum: valiFormData.orderNum,
					batch_text: batchText(valiFormData.batch_number),
					createTime: new Date(),
					type: '出库',
					status: true
				};
				instockHistory.value.unshift(historyItem);
				instockHistory.value.length > 10 && (instockHistory.value.length = 10);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();
				if (res.data.data.labels && res.data.data.labels.length > 0) {
					console.log('有打印面单');
					selectPrinter.value = sendToPeinter.value.length > 0 ? printers.value[0].value : 0;
					printerDialog.value.open();
				} else {
					st = setTimeout(() => {
						reset();
						st && clearTimeout(st);
					}, 700);
				}
			} else {
				messageType.value = 'error';
				messageText.value = res.data.msg;
				message.value.open();
				const historyItem = {
					orderNum: valiFormData.orderNum,
					batch_text: batchText(valiFormData.batch_number),
					createTime: new Date(),
					type: '出库',
					status: false
				};
				instockHistory.value.unshift(historyItem);
				instockHistory.value.length > 10 && (instockHistory.value.length = 10);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();
				st = setTimeout(() => {
					reset();
					st && clearTimeout(st);
				}, 700);
			}
		}
	});
};
const weighScan = () => {
	loading.value = true;
	uni.request({
		url: weighScanURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			weight: valiFormData.weight
		},
		success: (res: any) => {
			loading.value = false;
			if (res.data.code == 1) {
				messageType.value = 'success';
				messageText.value = res.data.msg;
				message.value.open();
				const historyItem = {
					orderNum: valiFormData.orderNum,
					createTime: new Date(),
					type: '称重',
					status: true
				};
				instockHistory.value.unshift(historyItem);
				instockHistory.value.length > 10 && (instockHistory.value.length = 10);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();
			} else {
				messageType.value = 'error';
				messageText.value = res.data.msg;
				message.value.open();
				const historyItem = {
					orderNum: valiFormData.orderNum,
					createTime: new Date(),
					type: '称重',
					status: false
				};
				instockHistory.value.unshift(historyItem);
				instockHistory.value.length > 10 && (instockHistory.value.length = 10);
				uni.setStorageSync('instockHistory', instockHistory.value);
				getHistory();
			}
			st = setTimeout(() => {
				reset();
				st && clearTimeout(st);
			}, 700);
		}
	});
};

const close = () => {
	printerDialog.value.close();
	st = setTimeout(() => {
		reset();
		st && clearTimeout(st);
	}, 700);
};
const dialogConfirm = () => {
	instockScan(1);
};
const dialogClose = () => {
	instockScan(0);
};

const sendToPeinterFun = (res: any) => {
	if (!res.detail.value.length > 0) {
		selectPrinter.value = 0;
	} else {
		selectPrinter.value = printers.value[0].value;
	}
};
const printConfirm = () => {
	subLoading.value = true;
	uni.request({
		url: printWaybillLabelURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			printer_code: selectPrinter
		},
		success: (res) => {
			close();
			subLoading.value = false;
			console.log('打印成功', res);
			messageType.value = 'success';
			messageText.value = '打印成功';
			message.value.open();
		}
	});
};
const onsubmit = () => {
	valiForm.value
		.validate()
		.then((res) => {
			warehouseScan();
		})
		.catch((err) => {
			console.log('err', err);
		});
};
const getHistory = () => {
	// this.instockHistory = uni.getStorageSync('history')
};
const getImages = () => {
	const res = images.value.map((item: any) => {
		return {
			name: item.name,
			savePath: item.serverUrl,
			fileSize: item.size,
			mimeType: item.type
		};
	});
	console.log('res22 ', res);
	return res;
};

// 获取阿里云oss签名
const getAliyunOssSignature = (rawFiles) => {
	uni.request({
		url: getAliyunOssSignatureUrl,
		method: 'GET',
		header: {
			batoken: token.value
		},
		success: ({ data }: any) => {
			const signature = data.data.signature;

			const uploadPromises = rawFiles.map((image) => {
				return upLoadFile(signature, image);
			});

			Promise.all(uploadPromises)
				.then((results) => {
					console.log('所有图片加载成功:', results);
					uni.showToast({
						title: '加载成功',
						icon: 'success'
					});
				})
				.catch((error) => {
					console.error('加载失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				});
		},
		fail: (err) => {
			console.log(err);
		}
	});
};
const upLoadFile = (signature, image) => {
	const fileData = {
		policy: signature.policy,
		signature: signature.signature,
		ossaccessKeyId: signature.ossAccessKeyId,
		key: signature.dir + dayjs().format('YYYYMMDD') + '/' + uuid() + '_' + image.name,
		dir: signature.dir,
		host: signature.host,
		file: image.file
	};
	return new Promise((resolve, reject) => {
		const uploadTask = uni.uploadFile({
			url: signature.host, // 你的上传接口地址
			filePath: image.path,
			name: image.name, // 这里根据后端需要的字段来定义
			formData: fileData,
			success: (uploadFileRes) => {
				if (uploadFileRes.statusCode === 204 || uploadFileRes.statusCode === 200) {
					image!.serverUrl = fileData.key;
					resolve(uploadFileRes);
				} else {
					reject(uploadFileRes);
				}
			},
			fail: (error) => {
				console.log('error++', error);
				reject(error);
			},
			// 更新上传进度
			complete: () => {
				console.log('complete---');
				image.progress = 100;
			}
		});
		// 可选：监听上传进度变化
		uploadTask.onProgressUpdate((progressEvent) => {
			image.progress = progressEvent.progress; // 更新进度
		});
	});
};
const chooseImage = () => {
	uni.chooseImage({
		count: maxImages.value - images.value.length,
		success: (res) => {
			images.value = images.value.concat(
				res.tempFiles.map((item) => {
					return {
						name: item.name,
						size: item.size,
						type: item.type,
						path: item.path,
						progress: 0,
						file: item
					};
				})
			);
			const paddingImages = images.value.filter((image) => image.progress === 0);

			nextTick(() => {
				getAliyunOssSignature(paddingImages);
			});
		},
		fail: (err) => {
			console.error(err);
		}
	});
};
const deleteImage = (index) => {
	images.value.splice(index, 1);
};

const openPreview = (image) => {
	previewImage.value = image; // 设置放大预览的图片
};
const closePreview = () => {
	previewImage.value = null; // 关闭预览
};
</script>
<style lang="scss">
.example {
	padding: 15px;
	background-color: #fff;
}

.checkbox-cum {
	margin-bottom: 20rpx;
	font-size: 14rpx;
}

.sub-choice {
	margin-bottom: 20rpx;
	margin-left: 20rpx;
	font-size: 14rpx;
}

.button-group {
	margin-top: 15px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35px;
		width: 50%;
		margin-left: 10px;
		font-size: 16rpx;
	}

	.uni-icons {
		margin-right: 10px;
	}
}

.weight-right {
	padding-right: 10rpx;
	font-size: 14rpx;
}

.history {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-items: start;

	.title {
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.code {
		font-weight: 600;
	}

	.item {
		padding: 20rpx;
		font-size: 20rpx;
		color: #666;

		.status {
			padding-left: 20rpx;
		}

		.fail {
			font-weight: 600;
			color: #f00;
		}
	}
}
</style>
<style scoped>
.upload-container {
	padding: 16px;
}

.preview {
	display: flex;
	flex-wrap: wrap;
}

.image-container {
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
}

.preview-image {
	width: 130rpx;
	height: 130rpx;
}

.delete-icon {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.choose-image-container {
	width: 130rpx;
	/* 与图片大小一致 */
	height: 130rpx;
	/* 与图片大小一致 */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	/* 背景颜色为白色 */
	border: 1px dashed #cccccc;
	/* 虚线边框 */
	border-radius: 5px;
	/* 圆角 */
	cursor: pointer;
}

.preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	/* 半透明背景 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.preview-large {
	max-width: 90%;
	/* 最大宽度 */
	max-height: 90%;
	/* 最大高度 */
}
.progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
</style>