<template> <view style="position: fixed;top:0; left: 100%;" :style="canvasStyle"> <canvas :style="canvasStyle" canvas-id="confirmBillDetail" ></canvas> </view> </template> <script> export default { data() { return { serial_number: '', custom_name: '', goodsList: [], total_num: 0, total_piece: 0, userName: '', userMobile: '', useHeight: 3508, billTitle: '' } }, computed: { // useHeight() { // return 300 + (this.goodsList.length - 1) * 50 // }, canvasStyle() { return 'width:2479px; height:' + this.useHeight + 'px;' } }, methods: { init(option) { let param = option console.log("param", param) this.dataInit(param) }, createPic() { console.log('方法执行了') let that = this let cxt = null; let ctx = uni.createCanvasContext('confirmBillDetail', that) // uni.createSelectorQuery() // .select("#confirmBillDetail") // .context(function(res){ // ctx = res.context // }) // .exec(); console.log('cxt',ctx) let l0 = 5; let l1 = 30; let l2 = 930; let l3 = 1280; let l4 = 1680; let l5 = 2030; let l6 = 2474; let lc = 600; let t1 = 100; let t2 = 180; let t3 = 280; let t4 = 330; let t5 = 380; let t6 = 530; ctx.font = "50px sans-serif" ctx.fillText(this.billTitle, lc, t1) ctx.font = "40px sans-serif" ctx.fillText('订单编号:' + this.serial_number, l1, t2) ctx.fillText('客户名称:' + this.custom_name, l1, t3) ctx.moveTo(l0, t4) ctx.lineTo(l6, t4) ctx.stroke() ctx.fillText('商品编码/名称', l1, t5) ctx.fillText('主单位', l2, t5) ctx.fillText('主数量', l3, t5) ctx.fillText('辅单位', l4, t5) ctx.fillText('辅数量', l5, t5) console.log('2222') this.goodsList.map((item, index) => { // ctx.font = "12px sans-serif" let list_t = (index * 150 + t6); let goods_t1 = list_t - 20, goods_t2 = list_t + 20 ctx.fillText(item.goods_code, l1, goods_t1) ctx.fillText(item.goods_name, l1, goods_t2) // ctx.font = "20px sans-serif" ctx.fillText(item.goods_unit, l2, list_t) ctx.fillText(item.good_num, l3, list_t) ctx.fillText(item.goods_sale_unit, l4, list_t) ctx.fillText(item.goods_piece, l5, list_t) }) console.log('3333') let goodsLength = this.goodsList.length * 150 + t6 - 85 ctx.moveTo(5, goodsLength) ctx.lineTo(2474, goodsLength) ctx.stroke() let t7 = goodsLength + 50; let t8 = t7 + 100 let lt1 = t1 + 160, lt2 = lt1 + 200; ctx.fillText('合计:', l1, t7) ctx.fillText(' ', l2, t7) ctx.fillText(this.total_num, l3, t7) ctx.fillText(' ', l4, t7) ctx.fillText(this.total_piece, l5, t7) ctx.fillText('业务员:', l1, t8) ctx.fillText(this.userName, lt1, t8) ctx.fillText(this.userMobile, lt2, t8) // this.useHeight = this.useHeight + goodsLength console.log('4444') ctx.draw(false, (()=> { console.log("this.canvasStyle", this.canvasStyle) uni.canvasToTempFilePath({ canvasId: 'confirmBillDetail', destWidth: 2479, destHeight: 3508, success: function(res) { // 在H5平台下,tempFilePath 为 base64 console.log('生成的路径', res.tempFilePath) uni.uploadFile({ url: that.$url.upload, filePath: res.tempFilePath, name: 'file', header: { token: that.$store.state.token, version: '10.00.0' }, success: function(res){ console.log("resshangchuanchenggong", JSON.parse(res.data).url) console.log("that.useHeight", that.useHeight) that.$emit('detailUrl', {url:JSON.parse(res.data).url, goodsLength: that.goodsList.length}) }, fail: function(res) { console.log("shangchuanshibai", res) } }) }, fail: function(res) { console.log("失败了", res) }, complete: function(res) { console.log("res", res) } }, that) })()) }, dataInit(e) { console.log("初始化待处理数据", e) //合同标题 this.billTitle = e.detailData.custom_name + '客户收货确认函' console.log("this.billTitle", this.billTitle) //订单编号 this.serial_number = e.detailData.serial_number //客户名称 this.custom_name = e.detailData.custom_name //商品列表 this.goodsList = e.detailData.goodsList //总主数量 this.total_num = e.detailData.total_number this.total_piece=0; //总辅数量 e.detailData.goodsList.map(item => { this.total_piece+=+item.goods_piece||0 }) //业务员名称 this.userName = e.detailData.user_name //业务员手机号 this.userMobile = e.detailData.mobile return this.createPic() } } } </script>
canvasToTempFilePath: fail canvas is empty"data: { // 图标数据 doubleColumnCanvasData: { canvasId: 'doubleColumn', }, doubleColumnTitle: "近半年已获得认可", doubleColumnUnit: [{ color: "#94df87", title: "认可我的" }, { color: "#81bdfd", title: "认可币数" } ], // 图标数据 corpId: '', authCode: '', userId: '', // 悬赏点击按钮的参考值 tankk: 1, // 点击页面切换 qiehuan: 1, // 弹出框 qqt: '', // 轮播图配置 imgUrls: [], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, // 轮播图配置 user:'', ownBadge: 0, ownCoin: 0, ownPoint: 0, starUsers: [], stDatas: '', notices: [], sessionId:'' }, /** * 组件的方法列表 */ methods: { // 图表转图片 zhuantu(){ setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'doubleColumn', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); }, fail: function (res) { console.log(res); } }); }, 500); }, onload直接调用的 [图片] 页面图表显示正常就转不了图片
2022-12-26编译一直空白 微信编辑器版本1.062206090,hbuilderx 3.4.15
微信小程序开发工具,可以编译,页面不能显示(一片空白)?系统:MacBook Pro (13-inch, M1, 2020) 工具版本号:1.06.2111300 macOS(ARM64)
2022-06-19