yufei0306
6 months ago
5 changed files with 394 additions and 1 deletions
@ -0,0 +1,287 @@ |
|||||
|
<template> |
||||
|
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> |
||||
|
<!-- 只用于展示页面 --> |
||||
|
<view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;"> |
||||
|
<view class="left"> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">物品代码</view> |
||||
|
<view class="value" id="name1">{{item.itemCode}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">物品名称</view> |
||||
|
<view class="value" id="name2">{{item.itemName}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">物料描述</view> |
||||
|
<view class="value">{{item.itemDesc1}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">包装号</view> |
||||
|
<view class="value">{{item.relateNumber}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">生产线</view> |
||||
|
<view class="value">{{item.productionLineCode}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">数量</view> |
||||
|
<view class="value">{{item.qty}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="image"> |
||||
|
<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">批次</view> |
||||
|
<view class="value">{{item.batch}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">班次</view> |
||||
|
<view class="value">{{item.shiftCode}}</view> |
||||
|
</view> |
||||
|
<view class="left-item" > |
||||
|
<view class="label">打印时间</view> |
||||
|
<view class="value">{{item.printTimes}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;"> |
||||
|
<button @click="printImage" |
||||
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 打印页面的模板 |
||||
|
const htmlFileUrl = '/hybrid/html/point.html'; |
||||
|
import { |
||||
|
pathToBase64 |
||||
|
} from "../../api/img-to-base64.js" //引入解压后的js文件,这里我重新命名了文件名 |
||||
|
// #ifdef APP |
||||
|
var testModule = uni.requireNativePlugin("TestModule") |
||||
|
// #endif |
||||
|
|
||||
|
export default { |
||||
|
name: 'pointProductReceipt', |
||||
|
data() { |
||||
|
return { |
||||
|
data: {}, |
||||
|
newHtmlContent: '', //打印传入的html |
||||
|
isLoadFinish: false, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// #ifdef APP |
||||
|
// 打印 |
||||
|
printImage() { |
||||
|
testModule.doHTMLPrint(this.newHtmlContent) |
||||
|
}, |
||||
|
// 读取html文件 |
||||
|
readFile(path, callback) { |
||||
|
plus.io.resolveLocalFileSystemURL(path, function(entry) { |
||||
|
entry.file(function(file) { |
||||
|
var reader = new plus.io.FileReader(); |
||||
|
reader.onloadend = function(e) { |
||||
|
callback(e.target.result); |
||||
|
}; |
||||
|
reader.readAsText(file); |
||||
|
}, function(e) { |
||||
|
console.log("读取文件失败:" + e.message); |
||||
|
}); |
||||
|
}, function(e) { |
||||
|
console.log("获取图片资源失败:" + e.message); |
||||
|
}); |
||||
|
} |
||||
|
// #endif |
||||
|
}, |
||||
|
watch: { |
||||
|
isLoadFinish(newVal, oldVal) { |
||||
|
if (newVal == true) { |
||||
|
// 读取html文件将文件中的内容图换成当前页面的数据 |
||||
|
let str = '' |
||||
|
this.readFile(htmlFileUrl, (htmlContent) => { |
||||
|
this.newHtmlContent = htmlContent |
||||
|
this.data.forEach(item => { |
||||
|
str += `<div class="box" style="page-break-before:always;"><br /> |
||||
|
<div class="left"> |
||||
|
<div class="left-item"> |
||||
|
<div class="label">物品代码</div> |
||||
|
<div class="value" id="name1">${item.itemCode}</div> |
||||
|
</div> |
||||
|
<div class="left-item"> |
||||
|
<div class="label">物品名称</div> |
||||
|
<div class="value" id="name2">${item.itemName}</div> |
||||
|
</div> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">物料描述</view> |
||||
|
<view class="value">{{item.itemDesc1}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">包装号</view> |
||||
|
<view class="value">{{item.relateNumber}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">生产线</view> |
||||
|
<view class="value">{{item.productionLineCode}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">数量</view> |
||||
|
<view class="value">{{item.qty}}</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="image"> |
||||
|
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
||||
|
</div> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">批次</view> |
||||
|
<view class="value">{{item.batch}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">班次</view> |
||||
|
<view class="value">{{item.shiftCode}}</view> |
||||
|
</view> |
||||
|
<view class="left-item"> |
||||
|
<view class="label">打印时间</view> |
||||
|
<view class="value">{{item.printTimes}}</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
</div>` |
||||
|
}) |
||||
|
this.newHtmlContent = this.newHtmlContent.replace( |
||||
|
"mainBody", str); //替换物品代码 |
||||
|
console.log(this.newHtmlContent) |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
if (option.points) { |
||||
|
this.data = JSON.parse(option.points); |
||||
|
} |
||||
|
}, |
||||
|
async onShow() { |
||||
|
// 获取数据 |
||||
|
// this.data = [{ |
||||
|
// 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: '' |
||||
|
// }] |
||||
|
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) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.box { |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
border-top: 1px solid #b1b1b1; |
||||
|
border-left: 1px solid #b1b1b1; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.left-item { |
||||
|
display: flex; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
border-bottom: 1px solid #b1b1b1; |
||||
|
border-right: 1px solid #b1b1b1; |
||||
|
width: 140rpx; |
||||
|
padding: 0px 10rpx; |
||||
|
height: 100rpx; |
||||
|
line-height: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
border-bottom: 1px solid #b1b1b1; |
||||
|
border-right: 1px solid #b1b1b1; |
||||
|
padding: 0px 5px; |
||||
|
height: 100rpx; |
||||
|
flex: 1; |
||||
|
width: 0px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: 300rpx; |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
width: 100%; |
||||
|
height: 301rpx; |
||||
|
border-bottom: 1px solid #b1b1b1; |
||||
|
border-top: 1px solid #b1b1b1; |
||||
|
border-right: 1px solid #b1b1b1; |
||||
|
} |
||||
|
|
||||
|
.image img { |
||||
|
width: calc(100% - 4px); |
||||
|
height: calc(100% - 4px); |
||||
|
margin: 4rpx; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,29 @@ |
|||||
|
<template> |
||||
|
<view v-if="webUrl"> |
||||
|
<web-view :webview-styles="webviewStyles" :src="`${webUrl}`"></web-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
webUrl: '', |
||||
|
webviewStyles: { |
||||
|
progress: { |
||||
|
color: "#FF3333" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
src: { |
||||
|
type: [String], |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
onLoad(event) { |
||||
|
this.webUrl = event.url |
||||
|
} |
||||
|
} |
||||
|
</script> |
Loading…
Reference in new issue