打印loading

src/pages/point/index.vue

@@ -59,7 +59,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;">
+		<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;" v-show="isLoadFinish">
 			<button @click="printImage"
 				style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button>
 		</view>
@@ -81,13 +81,67 @@
 		name: 'point',
 		data() {
 			return {
-				data: {},
+				timer:null,
+				originData:[],
+				data: [],
 				newHtmlContent: '', //打印传入的html
 				isLoadFinish: false,
 			}
 		},
 
 		methods: {
+			
+			getListData(){
+				// 获取数据
+				// 大哥：后端添加了 制造标签 生产线 ，可根据 生产线是否有值 来判断打印的是制造标签
+				// this.data = [{
+				// 	itemCode:'065.051-01M', // 物品代码
+				// 	itemName: 'PCCLARNATEA1225BLACK9999', // 物品名称
+				// 	packName: '包装名称',// 包装名称
+				// 	packageCode: 'PS0513-000003', // 包装号
+				// 	batch:'20240514',//批次
+				// 	parentNumber:'PS0513-000003',//父包装号
+				// 	itemType:'物料类型',//物料类型
+				// 	asnNumber:'123232',//ASN
+				// 	supplierCode: 'Fewewq', // 供应商
+				// 	qty: '100', // 数量
+				// 	printTimes:'2019-09-09 09:09:00', // 打印时间
+				// 	barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
+				// 	barcodeBase64: '',
+				// 	productionLineCode:''//生产线
+				// }]
+				
+				let _this = this
+				this.$nextTick(async () => {
+					// 获取二维码图片临时路径
+					const el = _this.$refs['qrcodeRef']
+					let str = ''
+					el.forEach(async (item, index) => {
+						await item.canvasToTempFilePath({
+							success: async (res) => {
+								// 将临时路径转换成base64
+								await pathToBase64(res.tempFilePath).then(base64 => {
+									_this.data[index].barcodeBase64 = base64
+									if (index == el.length - 1) {
+										_this.isLoadFinish = true
+										uni.hideLoading();
+				
+									}
+								}).catch(err => {
+									console.log(err);
+								})
+							},
+							fail(err) {
+								console.log('err:::', err)
+							}
+						})
+				
+					})
+				
+				})
+				
+				
+			},
 			// #ifdef APP
 			// 打印
 			printImage() {
@@ -116,6 +170,7 @@
 				if (newVal == true) {
 					// 读取html文件将文件中的内容图换成当前页面的数据
 					let str = ''
+					// #ifdef APP
 					this.readFile(htmlFileUrl, (htmlContent) => {
 						this.newHtmlContent = htmlContent
 						this.data.forEach(item => {
@@ -195,60 +250,34 @@
 							"mainBody", str); //替换物品代码
 						console.log(this.newHtmlContent)
 					});
-
+					// #endif
 				}
 			}
 		},
 		onLoad(option) {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
+			});
 			if (option.points) {
-				this.data = JSON.parse(option.points);
+				this.originData = JSON.parse(option.points);
+			}	
+		},
+		unmounted() {
+			if(this.timer){
+				clearTimeout(this.timer)
+				this.timer = null
 			}
 		},
-		async onShow() {
-			// 获取数据
-			// 大哥：后端添加了 制造标签 生产线 ，可根据 生产线是否有值 来判断打印的是制造标签
-			// this.data = [{
-			// 	itemCode:'065.051-01M', // 物品代码
-			// 	itemName: 'PCCLARNATEA1225BLACK9999', // 物品名称
-			// 	packName: '包装名称',// 包装名称
-			// 	packageCode: 'PS0513-000003', // 包装号
-			// 	batch:'20240514',//批次
-			// 	parentNumber:'PS0513-000003',//父包装号
-			// 	itemType:'物料类型',//物料类型
-			// 	asnNumber:'123232',//ASN
-			// 	supplierCode: 'Fewewq', // 供应商
-			// 	qty: '100', // 数量
-			// 	printTimes:'2019-09-09 09:09:00', // 打印时间
-			// 	barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
-			// 	barcodeBase64: '',
-			// 	productionLineCode:''//生产线
-			// }]
-			this.$nextTick(async () => {
-				// 获取二维码图片临时路径
-				const el = this.$refs['qrcodeRef']
-				let str = ''
-				el.forEach(async (item, index) => {
-					await item.canvasToTempFilePath({
-						success: async (res) => {
-							// 将临时路径转换成base64
-							await pathToBase64(res.tempFilePath).then(base64 => {
-								this.data[index].barcodeBase64 = base64
-								if (index == el.length - 1) {
-									this.isLoadFinish = true
-								}
-							}).catch(err => {
-								console.log(err);
-							})
-						},
-						fail(err) {
-							console.log('err:::', err)
-						}
-					})
-
-				})
-
-			})
-
+		 onShow() {
+			this.timer = setTimeout(()=>{
+				if(this.timer){
+					clearTimeout(this.timer)
+					this.timer = null
+				}
+				this.data = this.originData
+				this.getListData()
+			},1000)
 		},
 	}
 </script>