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) => {

						const res = {
							size: item.size,
							path: item.path,
							name: item.name,
							type: item.type,
							progress: 0,
							file: item
						};

						// #ifdef APP-PLUS
						//文件名操作
						//获取文件后缀
						const suffix = item.path.substring(item.path.lastIndexOf(".") + 1);
						//获取文件名
						const fileName = item.path.substring(item.path.lastIndexOf("/") + 1);
						res.name = fileName;
						res.type = suffix
						// #endif

						return res
					})
				);
				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>