打印loading2024/7/9 13:35:39

src/pages/point/index.vue

@@ -58,7 +58,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>
@@ -67,7 +67,7 @@
 
 <script setup lang="ts">
 	import { ref, reactive, nextTick, createApp, watch } from 'vue'
-	import { onShow, onLoad } from '@dcloudio/uni-app'
+	import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
 	import { pathToBase64 } from '../../api/img-to-base64.js'
 	// 打印页面的模板
 	const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件，这里我重新命名了文件名
@@ -75,10 +75,44 @@
 	const testModule = uni.requireNativePlugin('TestModule')
 	// #endif
 
+	const timer = ref(null)
+	const originData = ref([])
 	const data = ref([])
 	const newHtmlContent = ref('') // 打印传入的html
 	const isLoadFinish = ref(false)
 	const qrcodeRef = ref()
+
+	const getListData = () => {
+		nextTick(async () => {
+			// 获取二维码图片临时路径
+			const el = _this.$refs['qrcodeRef']
+			let str = ''
+			// #ifdef APP
+			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)
+					}
+				})
+
+			})
+			// #endif
+
+		})
+	}
 	// #ifdef APP
 	// 打印
 	const printImage = () => {
@@ -199,72 +233,29 @@
 		}
 	)
 	onLoad(option) {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		});
 		if (option.points) {
-			data.value = JSON.parse(option.points);
+			originData.value = JSON.parse(option.points);
 		}
 	}
-	onShow(() => {
-		// 获取数据
-		// data.value = [
-		//   {
-		//     itemNumber: '555555',
-		//     itemName: 'hahah',
-		//     referenceOrderRow: '55',
-		//     referenceOrderCode: '55',
-		//     supplierCode: '555',
-		//     packageCode: '9999-8888',
-		//     amount: '55',
-		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
-		//     barcodeBase64: ''
-		//   },
-		//   {
-		//     itemNumber: '66',
-		//     itemName: 'hahah',
-		//     referenceOrderRow: '66',
-		//     referenceOrderCode: '666',
-		//     supplierCode: '66',
-		//     packageCode: '66666',
-		//     amount: '666666',
-		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
-		//     barcodeBase64: ''
-		//   },
-		//   {
-		//     itemNumber: '66',
-		//     itemName: 'hahah',
-		//     referenceOrderRow: '66',
-		//     referenceOrderCode: '666',
-		//     supplierCode: '66',
-		//     packageCode: '66666',
-		//     amount: '666666',
-		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;',
-		//     barcodeBase64: ''
-		//   }
-		// ]
-		nextTick(async () => {
-			// 获取二维码图片临时路径
-			const el = qrcodeRef.value
-			const str = ''
-			el.forEach(async (item, index) => {
-				await item.canvasToTempFilePath({
-					success: async (res) => {
-						// 将临时路径转换成base64
-						await pathToBase64(res.tempFilePath)
-							.then((base64) => {
-								data.value[index].barcodeBase64 = base64
-								if (index == el.length - 1) {
-									isLoadFinish.value = true
+	onUnload(() => {
+		if (timer.value) {
+			clearTimeout(timer.value)
+			timer.value = null
 		}
 	})
-							.catch((err) => {
-								console.log(err)
-							})
-					},
-					fail(err) {
-						console.log('err:::', err)
+	onShow(() => {
+		timer.value = setTimeout(() => {
+			if (timer.value) {
+				clearTimeout(timer.value)
+				timer.value = null
 			}
-				})
-			})
-		})
+			data.value = originData.value
+			getListData()
+		}, 1000)
 	})
 </script>