auto commit

common/css/common.css

@@ -44,7 +44,7 @@
 
 /* 头部轮播 */
 .swiper-wrap{margin: 0 auto 32rpx;height: 320rpx;overflow: hidden;position: relative;}
-.swiper{height: 100%;}
+.swiper{height: 100%;text-align: center;background-color: #fbfffd;}
 .adv-item{height: 100%;}
 .swiper-wrap .pic{width: 100%;height: 100%;}
 

components/lime-painter/canvas.js

@@ -1,5 +1,44 @@
+import { CHAR_WIDTH_SCALE_MAP } from './utils'
+const _expand = ctx => {
+	return {
+		setFont({fontFamily: ff = 'sans-serif', fontSize: fs = 14, fontWeight: fw = 'normal' , textStyle: ts = 'normal'}) {
+			// let ctx = this.ctx
+			// 设置属性
+			// #ifndef MP-TOUTIAO
+			// fw = fw == 'bold' ? 'bold' : 'normal'
+			// ts = ts == 'italic' ? 'italic' : 'normal'
+			// #endif
+			// #ifdef MP-TOUTIAO
+			fw = fw == 'bold' ? 'bold' : ''
+			ts =  ts == 'italic' ? 'italic' : ''
+			// #endif
+			// fs = toPx(fs)
+			ctx.font = `${ts} ${fw} ${fs}px ${ff}`;
+		},
+		measureText(text, fontSize) {
+			// #ifndef APP-PLUS
+			return ctx._measureText(text)
+			// #endif
+			// #ifdef APP-PLUS
+			// app measureText为0需要累加计算0
+			return {
+				width: text.split("").reduce((widthScaleSum, char) => {
+				let code = char.charCodeAt(0);
+				let widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
+				return widthScaleSum + widthScale;
+			  }, 0) * fontSize
+			};
+			// #endif
+		}
+	}
+}
+export function expand(ctx) {
+	ctx._measureText = ctx.measureText
+	return Object.assign(ctx, _expand(ctx))
+}
 export function adaptor(ctx) {
-	return Object.assign(ctx, {
+	ctx._measureText = ctx.measureText
+	return Object.assign(ctx, _expand(ctx), {
 		setStrokeStyle(val) {
 			ctx.strokeStyle = val;
 		},
@@ -39,4 +78,4 @@ export function adaptor(ctx) {
 		createCircularGradient() {},
 		draw() {},
 	});
-}
+}

components/lime-painter/draw.js

@@ -1,15 +1,14 @@
-import { toPx, CHAR_WIDTH_SCALE_MAP, isNumber, getImageInfo  } from './utils'
+import { toPx, isNumber, getImageInfo  } from './utils'
 import { GD } from './gradient'
 import QR from './qrcode'
-let id = 0
 
 export class Draw {
-	constructor(context, canvas, use2dCanvas = false, isH5PathToBase64 = false, boundary) {
+	constructor(context, canvas, use2dCanvas = false, isH5PathToBase64 = false, sleep) {
 		this.ctx = context
 		this.canvas = canvas || null
-		this.root = boundary
 		this.use2dCanvas = use2dCanvas
 		this.isH5PathToBase64 = isH5PathToBase64
+		this.sleep = sleep
 	}
 	roundRect(x, y, w, h, r, fill = false, stroke = false, ) {
 		if (r < 0) return
@@ -26,7 +25,6 @@ export class Draw {
 				borderBottomRightRadius: br = r || 0,
 				borderBottomLeftRadius: bl = r || 0
 			} = r || {r,r,r,r}
-			ctx.beginPath()
 			// 右下角
 			ctx.arc(x + w - br, y + h - br, br, 0, Math.PI * 0.5)
 			ctx.lineTo(x + bl, y + h)
@@ -44,34 +42,6 @@ export class Draw {
 		if (stroke) ctx.stroke()
 		if (fill) ctx.fill()
 	}
-	measureText(text, fontSize) {
-		const { ctx } = this
-		// #ifndef APP-PLUS
-		return ctx.measureText(text).width
-		// #endif
-		// #ifdef APP-PLUS
-		// app measureText为0需要累加计算0
-		return text.split("").reduce((widthScaleSum, char) => {
-			let code = char.charCodeAt(0);
-			let widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
-			return widthScaleSum + widthScale;
-		  }, 0) * fontSize;
-		// #endif
-	}
-	setFont({fontFamily: ff = 'sans-serif', fontSize: fs = 14, fontWeight: fw = 'normal' , textStyle: ts = 'normal'}) {
-		let ctx = this.ctx
-		// 设置属性
-		// #ifndef MP-TOUTIAO
-		// fw = fw == 'bold' ? 'bold' : 'normal'
-		// ts = ts == 'italic' ? 'italic' : 'normal'
-		// #endif
-		// #ifdef MP-TOUTIAO
-		fw = fw == 'bold' ? 'bold' : ''
-		ts =  ts == 'italic' ? 'italic' : ''
-		// #endif
-		// fs = toPx(fs)
-		ctx.font = `${ts} ${fw} ${fs}px ${ff}`;
-	}
 	setTransform(box, {transform}) {
 		const {ctx} = this
 		const {
@@ -118,13 +88,11 @@ export class Draw {
 		}
 	}
 	setShadow({boxShadow: bs = []}) {
-		// #ifndef APP-NVUE
 		const {ctx} = this
 		if (bs.length) {
 			const [x, y, b, c] = bs
 			ctx.setShadow(x, y, b, c)
 		}
-		// #endif
 	}
 	setBorder(box, style) {
 		const {ctx} = this
@@ -263,8 +231,10 @@ export class Draw {
 			const {
 				borderRadius = 0,
 				mode,
+				padding = {},
 				backgroundColor: bg,
 			} = style
+			const {paddingTop: pt = 0, paddingLeft: pl= 0, paddingRight: pr= 0, paddingBottom: pb = 0} = padding
 			let {
 				left: x,
 				top: y,
@@ -283,6 +253,10 @@ export class Draw {
 			}
 			ctx.clip()
 			const _modeImage = (img) => {
+				x += pl
+				y += pt
+				w = w - pl - pr
+				h = h - pt - pb
 				// 获得图片原始大小
 				let rWidth = img.width
 				let rHeight = img.height
@@ -291,17 +265,33 @@ export class Draw {
 				// 绘画区域比例
 				const cp = w / h
 				// 原图比例
+				// 如果大于1 是宽度长
+				// 如果小于1 是高度长
 				const op = rWidth / rHeight
-				if (cp >= op) {
-					rHeight = rWidth / cp;
-					// startY = Math.round((h - rHeight) / 2)
-				} else {
-					rWidth = rHeight * cp;
-					startX = Math.round(((img.width || w) - rWidth) / 2)
-				}
+				
 				if (mode === 'scaleToFill' || !img.width) {
 					ctx.drawImage(img.src, x, y, w, h);
+				} else if(mode === 'aspectFit') {
+					if(cp >= op) {
+						rWidth = h * op;
+						rHeight = h
+						startX = x + Math.round(w - rWidth) / 2 
+						startY = y
+					} else {
+						rWidth = w
+						rHeight = w / op;
+						startX = x
+						startY = y + Math.round(h - rHeight) / 2 
+					}
+					ctx.drawImage(img.src, startX, startY, rWidth, rHeight);
 				} else {
+					if (cp >= op) {
+						rHeight = rWidth / cp;
+						// startY = Math.round((h - rHeight) / 2)
+					} else {
+						rWidth = rHeight * cp;
+						startX = Math.round(((img.width || w) - rWidth) / 2)
+					}
 					// 百度小程序 开发工具 顺序有问题 暂不知晓真机
 					// #ifdef MP-BAIDU
 					ctx.drawImage(img.src, x, y, w, h, startX, startY, rWidth, rHeight)
@@ -334,7 +324,7 @@ export class Draw {
 				this.setBorder(box, style)
 				setTimeout(() => {
 					resolve(true)
-				}, this.root.sleep)
+				}, this.sleep)
 			}
 			if(typeof img === 'string') {
 				const {path: src, width, height} = await getImageInfo(img, this.isH5PathToBase64)
@@ -364,24 +354,31 @@ export class Draw {
 			verticalAlign: va = 'top',
 			backgroundColor: bg,
 			maxLines,
+			display,
+			padding = {},
+			borderRadius = 0,
 			textDecoration: td
 		} = style
+		const {paddingTop: pt = 0, paddingLeft: pl = 0} = padding
 		lineHeight = toPx(lineHeight, fontSize)
 		
 		if (!text) return
 		ctx.save()
-		
 		this.setOpacity(style)
 		this.setTransform(box, style)
 		x = -w/2
 		y = -h/2
 		ctx.setTextBaseline(va)
-		this.setFont({fontFamily, fontSize, fontWeight, textStyle})
+		ctx.setFont({fontFamily, fontSize, fontWeight, textStyle})
 		ctx.setTextAlign(textAlign)
 		
 		if(bg) {
 			this.setBackground(bg, w, h)
-			this.roundRect(x, y, w, h, 1, bg)
+			this.roundRect(x, y, w, h, borderRadius, 1, 0)
+		 }
+		 if(display && display.includes('lock')) {
+			x += pl
+			y += pt 
 		 }
 		this.setShadow(style)
 		ctx.setFillStyle(color)
@@ -418,7 +415,7 @@ export class Draw {
 			default:
 				break
 		}
-		const textWidth = this.measureText(text, fontSize)
+		const textWidth = ctx.measureText(text, fontSize).width
 		const actualHeight = Math.ceil(textWidth / w) * lineHeight
 		let paddingTop = Math.ceil((h - actualHeight) / 2)
 		if (paddingTop < 0) paddingTop = 0
@@ -497,7 +494,6 @@ export class Draw {
 				ctx.stroke();
 			}
 		}
-		
 		const _reset = (text, x, y) => {
 			const rs = Object.keys(rulesObj)
 			for (let i = 0; i < rs.length; i++) {
@@ -513,9 +509,9 @@ export class Draw {
 		}
 		const _setText = (isReset, char) => {
 			if(isReset) {
-				const t1 = Math.round(this.measureText('\u0020', fontSize))
-				const t2 = Math.round(this.measureText('\u3000', fontSize))
-				const t3 = Math.round(this.measureText(char, fontSize))
+				const t1 = Math.round(ctx.measureText('\u0020', fontSize).width)
+				const t2 = Math.round(ctx.measureText('\u3000', fontSize).width)
+				const t3 = Math.round(ctx.measureText(char, fontSize).width)
 				let _char = ''
 				let _num = 1
 				if(t3 == t2){
@@ -547,7 +543,7 @@ export class Draw {
 					const t = _text[index]
 					let char = _setText(rulesObj[index], t) 
 					_text[index] = char
-					_setRulesObj(t, index, x + this.measureText(text.substring(0, index), fontSize), y + inlinePaddingTop)
+					_setRulesObj(t, index, x + ctx.measureText(text.substring(0, index), fontSize).width, y + inlinePaddingTop)
 				}
 				_reset()
 			}
@@ -565,7 +561,6 @@ export class Draw {
 		// 逐行绘制
 		let line = ''
 		let lineIndex = 0
-		
 		for(let index = 0 ; index <= chars.length; index++){
 			let ch = chars[index] || ''
 			const isLine = ch === '\n'
@@ -573,25 +568,26 @@ export class Draw {
 			ch = isLine ? '' : ch;
 			
 			let textline = line + _setText(rulesObj[index], ch)
-			let textWidth = this.measureText(textline, fontSize)
-			
-			
+			let textWidth = ctx.measureText(textline, fontSize).width
 			// 绘制行数大于最大行数，则直接跳出循环
 			if (lineIndex >= maxLines) {
 				break;
 			}
 			if(lineIndex == 0) {
 				textWidth = textWidth + ol
-				_x += ol
+				_x = x + ol
+			} else {
+				textWidth = textWidth
+				_x = x
 			}
 			if(rulesObj[index]) {
-				_setRulesObj(ch, index, _x + this.measureText(line, fontSize), y + inlinePaddingTop)
+				_setRulesObj(ch, index, _x + ctx.measureText(line, fontSize).width, y + inlinePaddingTop)
 			}
 			if (textWidth > w || isLine || isRight) {
 				lineIndex++
 				line = isRight && textWidth <= w ? textline : line
 				if(lineIndex === maxLines && textWidth > w) {
-					while( this.measureText(`${line}...`, fontSize) > w) {
+					while( ctx.measureText(`${line}...`, fontSize).width > w) {
 						if (line.length <= 1) {
 							// 如果只有一个字符时，直接跳出循环
 							break;
@@ -619,299 +615,6 @@ export class Draw {
 		ctx.restore()
 		this.setBorder(box, style)
 	}
-	async findNode(element, parent = {}, index = 0, siblings = [], source) {
-		let computedStyle = Object.assign({}, this.getComputedStyle(element, parent, index));
-		let attributes = await this.getAttributes(element)
-		let node = {
-			id: id++,
-			parent,
-			computedStyle,
-			rules: element.rules,
-			attributes: Object.assign({}, attributes),
-			name: element?.type || 'view',
-		}
-		if(JSON.stringify(parent) === '{}' && !element.type) {
-			const {left = 0, top = 0, width = 0, height = 0 } = computedStyle
-			node.layoutBox = {left, top, width, height }
-		} else {
-			node.layoutBox = Object.assign({left: 0, top: 0}, this.getLayoutBox(node, parent, index, siblings, source))
-		}
-		
-		if (element?.views) {
-			let childrens = []
-			node.children = []
-			for (let i = 0; i < element.views.length; i++) {
-				let v = element.views[i]
-				childrens.push(await this.findNode(v, node, i, childrens, element))
-			}
-			 node.children = childrens
-		}
-		return node
-	}
-	getComputedStyle(element, parent = {}, index = 0) {
-		const style = {}
-		const node = JSON.stringify(parent) == '{}' && !element.type ? element :  element.css;
-		if(parent.computedStyle) {
-			for (let value of Object.keys(parent.computedStyle)){
-				const item = parent.computedStyle[value]
-				if(['color', 'fontSize', 'lineHeight', 'verticalAlign', 'fontWeight', 'textAlign'].includes(value)) {
-					style[value] = /em|px$/.test(item) ? toPx(item, node?.fontSize) : item
-				}
-			}
-		}
-		if(!node) return style
-		for (let value of Object.keys(node)) {
-			const item = node[value]
-			if(value == 'views') {
-				continue
-			}
-			if (['boxShadow', 'shadow'].includes(value)) {
-				let shadows = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
-				style.boxShadow = shadows
-				continue
-			}
-			if (value.includes('border') && !value.includes('adius')) {
-				const prefix = value.match(/^border([BTRLa-z]+)?/)[0]
-				const type = value.match(/[W|S|C][a-z]+/)
-				let v = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
-				
-				if(v.length > 1) {
-					style[prefix] = {
-						[prefix + 'Width'] : v[0] || 1,
-						[prefix + 'Style'] : v[1] || 'solid',
-						[prefix + 'Color'] : v[2] || 'black'
-					}
-				} else {
-					style[prefix] = {
-						[prefix + 'Width'] :  1,
-						[prefix + 'Style'] : 'solid',
-						[prefix + 'Color'] : 'black'
-					}
-					style[prefix][prefix + type[0]] = v[0]
-				}
-				continue
-			}
-			if (['background', 'backgroundColor'].includes(value)) {
-				style['backgroundColor'] = item
-				continue
-			}
-			if(value.includes('padding') || value.includes('margin') || value.includes('adius')) {
-				let isRadius = value.includes('adius')
-				let prefix = isRadius ? 'borderRadius' : value.match(/[a-z]+/)[0]
-				let pre = [0,0,0,0].map((item, i) => isRadius ? ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'][i] : [prefix + 'Top', prefix + 'Right', prefix + 'Bottom', prefix + 'Left'][i] )
-				if(value === 'padding' || value === 'margin' || value === 'radius' || value === 'borderRadius') {
-					let v = item?.split(' ').map((item) => /^\d/.test(item) && toPx(item, node['width']), []) ||[0];
-					let type = isRadius ? 'borderRadius' : value;
-					if(v.length == 1) {
-						style[type] = v[0]
-					} else {
-						let [t, r, b, l] = v
-						style[type] = {
-							[pre[0]]: t,
-							[pre[1]]: isNumber(r) ? r : t,
-							[pre[2]]: isNumber(b) ? b : t,
-							[pre[3]]: isNumber(l) ? l : r
-						}
-					}
-				} else {
-					if(typeof style[prefix] === 'object') {
-						style[prefix][value] = toPx(item, node['width'])
-					} else {
-						style[prefix] = {
-							[pre[0]]: style[prefix] || 0,
-							[pre[1]]: style[prefix] || 0,
-							[pre[2]]: style[prefix] || 0,
-							[pre[3]]: style[prefix] || 0
-						}
-						style[prefix][value] = toPx(item, node['width'])
-					}
-				}
-				continue
-			}
-			if(value.includes('width') || value.includes('height')) {
-				if(/%$/.test(item)) {
-					style[value] = toPx(item, parent.layoutBox[value])
-				} else {
-					style[value] = /px|rpx$/.test(item) ? toPx(item) : item
-				}
-				continue
-			}
-			if(value.includes('transform')) {
-				style[value]= {}
-				item.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g, (g1, g2, g3) => {
-					const v = g3.split(',').map(k => k.replace(/(^\s*)|(\s*$)/g,''))
-					const transform = (v, r) => {
-						return v.includes('deg') ? v * 1 : toPx(v, r)
-					}
-					if(g2.includes('matrix')) {
-						style[value][g2] = v.map(v => v * 1)
-					} else if(g2.includes('rotate')) {
-						style[value][g2] = g3.match(/\d+/)[0] * 1
-					}else if(/[X, Y]/.test(g2)) {
-						style[value][g2] = /[X]/.test(g2) ? transform(v[0], node['width']) : transform(v[0], node['height'])
-					} else {
-						style[value][g2+'X'] = transform(v[0], node['width'])
-						style[value][g2+'Y'] = transform(v[1] || v[0], node['height'])
-					}
-				})
-				continue
-			}
-			if(/em$/.test(item) && !value.includes('lineHeight')) {
-				style[value] =  Math.ceil(parseFloat(item.replace('em')) * toPx(node['fontSize'] || 14))
-			} else {
-				style[value] = /%|px|rpx$/.test(item) ? toPx(item, node['width']) : item
-			}
-		}
-		if((element.name == 'image' || element.type == 'image') && !style.mode) {
-			style.mode = 'aspectFill'
-			if((!node.width || node.width == 'auto') && (!node.height || node.width == 'auto') ) {
-				style.mode = ''
-			} 
-		}
-		return style
-	}
-	getLayoutBox(element, parent = {}, index = 0, siblings = [], source = {}) {
-		let box = {}
-		let {name, computedStyle: cstyle, layoutBox, attributes} = element || {}
-		if(!name) return box
-		const {ctx} = this
-		const pbox = parent.layoutBox || this.root
-		const pstyle = parent.computedStyle
-		let { 
-			verticalAlign: v, 
-			left: x, 
-			top: y,
-			width: w,
-			height: h,
-			fontSize = 14,
-			lineHeight = '1.4em',
-			maxLines,
-			fontWeight,
-			fontFamily,
-			textStyle,
-			position,
-			display
-			}  = cstyle;
-		
-		const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0, } = cstyle.padding || {}
-		const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0, } = cstyle.margin || {}
-		
-		if(position == 'relative') {
-			x += pbox.left
-			y += pbox.top
-		}
-		if(name === 'text') {
-			const text = attributes.text ||''
-			lineHeight = toPx(lineHeight, fontSize)
-			ctx.save()
-			this.setFont({fontFamily, fontSize, fontWeight, textStyle})
-			const {layoutBox: lbox, computedStyle: ls} = siblings[index - 1] || {}
-			const {layoutBox: rbox, computedStyle: rs} = siblings[index + 1] || {}
-			const isLeft = index == 0
-			const isblock = display === 'block' || ls?.display === 'block'
-			const isOnly = isLeft && !rbox || !parent?.id
-			const lboxR = isLeft || isblock ? 0 : lbox.offsetRight || 0
-			let texts = text.split('\n')
-			let lineIndex = 1
-			let line = ''
-			const textIndent = cstyle.textIndent || 0
-			if(!isOnly) {
-				texts.map((t, i) => {
-					lineIndex += i
-					const chars = t.split('')
-					for (let j = 0; j < chars.length; j++) {
-						let ch = chars[j]
-						let textline = line + ch
-						let textWidth = this.measureText(textline, fontSize)
-						if(lineIndex == 1) {
-							textWidth = textWidth + (isblock ? 0 : lboxR) +  textIndent
-						}
-						if(textWidth > pbox.width) {
-							lineIndex++
-							line = ch
-						} else {
-							line = textline
-						}
-					}
-				})
-			} else {
-				line = text
-				lineIndex = Math.max(texts.length, Math.ceil(this.measureText(text, fontSize) / ((w || pbox.width) - this.measureText('0', fontSize))))
-			}
-			box.offsetLeft = (isNumber(x) || isblock || isOnly ? textIndent : lboxR) +  pl + ml;
-			// 剩下的字宽度
-			const remain = (this.measureText(line, fontSize))
-			let width =  lineIndex > 1 ? pbox.width : remain + box.offsetLeft;
-			box.offsetRight = box.offsetLeft + (w ? w : (isblock ? pbox.width : remain)) + pr + mr;
-			
-			
-			const _getLeft = () => {
-				return (x || pbox.left)
-			}
-			const _getWidth = () => {
-				return w || (isOnly ? pbox.width : (width > pbox.width - box.left || lineIndex > 1 ?  pbox.width - box.left : width))
-			}
-			const _getHeight = () => {
-				if(h) {
-					return h
-				} else if(lineIndex > 1 ) {
-					return (maxLines || lineIndex) * lineHeight + pt + pb + mt + mb
-				} else {
-					return lineHeight + pt + pb + mt + mb
-				}
-			}
-			const _getTop = () => {
-				let _y = y
-				if(_y) {
-					return _y + pt + mt
-				}
-				if(isLeft) {
-					_y = pbox.top
-				} else if(lbox.width < pbox.width) {
-					_y = lbox.top
-				} else {
-					_y = lbox.top + lbox.height - (ls?.lineHeight || 0)
-				}
-				return _y + pt + mt + (isblock && ls?.lineHeight || 0 )
-			}
-			box.left = _getLeft() 
-			box.width = _getWidth() 
-			box.height = _getHeight()
-			box.top = _getTop()
-			ctx.restore()
-		} else if(['view', 'qrcode'].includes(name)) {
-			box.left = x || pbox.left
-			box.width = (w || pbox?.width) - pl - pr
-			box.height = h || 0
-			box.top = y || pbox.top
-		} else if(name === 'image') {
-			box.left = x || pbox.left
-			box.width = (w || pbox?.width) - pl - pr
-			const {
-				width: rWidth,
-				height: rHeight
-			} = attributes
-			box.height = h || box.width * rHeight / rWidth 
-			box.top = y || pbox.top
-		}
-		return box
-	}
-	async getAttributes(element) {
-		let arr = { }
-		if(element?.url || element?.src) {
-			arr.src = element.url || element?.src;
-			const {width = 0, height = 0, path: src} = await getImageInfo(arr.src, this.isH5PathToBase64) || {}
-			arr = Object.assign({}, arr, {width, height, src})
-		}
-		if(element?.text) {
-			arr.text = element.text
-		}
-		return arr
-	}
-	async drawBoard(element) {
-		const node = await this.findNode(element)
-		return this.drawNode(node)
-	}
 	async drawNode(element) {
 		const {
 			layoutBox,

components/lime-painter/index.vue

@@ -1,14 +1,37 @@
 <template>
-	<canvas v-if="use2dCanvas" :id="canvasId" type="2d" :style="style"></canvas>
-	<canvas v-else :canvas-id="canvasId" :style="style" :id="canvasId" :width="boardWidth * dpr" :height="boardHeight * dpr"></canvas>
+	<canvas 
+		v-if="use2dCanvas" 
+		:id="canvasId" 
+		type="2d" 
+		:style="style"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@touchcancel="onTouchCancel" 
+		>
+	</canvas>
+	<canvas
+		v-else 
+		:canvas-id="canvasId" 
+		:style="style" 
+		:id="canvasId" 
+		:width="boardWidth * dpr" 
+		:height="boardHeight * dpr"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@touchcancel="onTouchCancel" 
+		>
+	</canvas>
 </template>
 
 <script>
 import { toPx, base64ToPath, compareVersion} from './utils';
 import { Draw } from './draw';
-import { adaptor } from './canvas';
+import { Layout } from './layout';
+import { adaptor, expand } from './canvas';
 export default {
-	// version: '1.5.9.2',
+	// version: '1.5.9.3',
 	name: 'l-painter',
 	props: {
 		board: Object,
@@ -47,7 +70,8 @@ export default {
 			use2dCanvas: false,
 			// #endif
 			draw: null,
-			ctx: null
+			ctx: null,
+			layout: null
 		};
 	},
 	computed: {
@@ -88,6 +112,15 @@ export default {
 			})
 	},
 	methods: {
+		onTouchStart(e) {
+			 const {x,y} = e.touches[0]
+			console.log('e', {x,y})
+			console.log(this.node)
+			// this.ctx.isPointInPath(x, y)
+		},
+		onTouchMove(e) {},
+		onTouchEnd(e) {},
+		onTouchCancel(e) {},
 		async render(args = {}, single = false) {
 			const ctx = await this.getContext()
 			const { use2dCanvas, boardWidth, boardHeight, board, canvas, isBase64ToPath, isH5PathToBase64, sleep } = this;
@@ -100,17 +133,22 @@ export default {
 				  left: 0,
 				  width: boardWidth,
 				  height: boardHeight,
-				  sleep
 				}
 			}
 			if(!single) {
 				ctx.clearRect(0, 0, boardWidth, boardHeight);
 			}
 			if(!this.draw) {
-				this.draw = new Draw(ctx, canvas, use2dCanvas, isH5PathToBase64, this.boundary);
+				this.draw = new Draw(ctx, canvas, use2dCanvas, isH5PathToBase64, sleep);
 			} 
+			if(!this.layout) {
+				this.layout = new Layout(ctx, {}, this.boundary, this.isH5PathToBase64)
+			}
 			if(JSON.stringify(args) != '{}' || board && JSON.stringify(board) != '{}') {
-				await this.draw.drawBoard(JSON.stringify(args) != '{}' ? args : board);
+				this.node = await this.layout.calcNode(JSON.stringify(args) != '{}' ? args : board)
+			}
+			if(this.node) {
+				await this.draw.drawNode(this.node);
 			}
 			await new Promise(resolve => this.$nextTick(resolve)) 
 			if (!use2dCanvas && !single) {
@@ -176,8 +214,8 @@ export default {
 							// #ifdef MP-ALIPAY
 							ctx.scale(dpr, dpr);
 							// #endif
-							this.ctx = ctx
-							resolve(ctx);
+							this.ctx = expand(ctx)
+							resolve(this.ctx);
 						}
 					})
 				})
@@ -210,7 +248,7 @@ export default {
 							ctx.scale(dpr, dpr);
 						}
 						this.ctx = adaptor(ctx)
-						resolve(adaptor(ctx));
+						resolve(this.ctx);
 					});
 				
 			});

components/lime-painter/layout.js

@@ -0,0 +1,350 @@
+import { toPx, isNumber, getImageInfo  } from './utils'
+let uuid = 0;
+export class Layout {
+	constructor(context, element, root, isH5PathToBase64) {
+	    //this.element = element
+		this.ctx = context
+		this.root = root
+		this.isH5PathToBase64 = isH5PathToBase64
+	}
+	async getNodeTree(element, parent = {}, index = 0, siblings = [], source) {
+		let computedStyle = Object.assign({}, this.getComputedStyle(element, parent, index));
+		let attributes = await this.getAttributes(element)
+		let node = {
+			id: uuid++,
+			parent,
+			computedStyle,
+			rules: element.rules,
+			attributes: Object.assign({}, attributes),
+			name: element?.type || 'view',
+		}
+		if(JSON.stringify(parent) === '{}' && !element.type) {
+			const {left = 0, top = 0, width = 0, height = 0 } = computedStyle
+			node.layoutBox = {left, top, width, height }
+		} else {
+			node.layoutBox = Object.assign({left: 0, top: 0}, this.getLayoutBox(node, parent, index, siblings, source))
+		}
+		if (element?.views) {
+			let childrens = []
+			node.children = []
+			for (let i = 0; i < element.views.length; i++) {
+				let v = element.views[i]
+				childrens.push(await this.getNodeTree(v, node, i, childrens, element))
+			}
+			 node.children = childrens
+		}
+		return node
+	}
+	getComputedStyle(element, parent = {}, index = 0) {
+		const style = {}
+		const node = JSON.stringify(parent) == '{}' && !element.type ? element :  element.css;
+		if(parent.computedStyle) {
+			for (let value of Object.keys(parent.computedStyle)){
+				const item = parent.computedStyle[value]
+				if(['color', 'fontSize', 'lineHeight', 'verticalAlign', 'fontWeight', 'textAlign'].includes(value)) {
+					style[value] = /em|px$/.test(item) ? toPx(item, node?.fontSize) : item
+				}
+			}
+		}
+		if(!node) return style
+		for (let value of Object.keys(node)) {
+			const item = node[value]
+			if(value == 'views') {
+				continue
+			}
+			if (['hadow'].includes(value)) {
+				let shadows = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				style.boxShadow = shadows
+				continue
+			}
+			if (value.includes('border') && !value.includes('adius')) {
+				const prefix = value.match(/^border([BTRLa-z]+)?/)[0]
+				const type = value.match(/[W|S|C][a-z]+/)
+				let v = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				
+				if(v.length > 1) {
+					style[prefix] = {
+						[prefix + 'Width'] : v[0] || 1,
+						[prefix + 'Style'] : v[1] || 'solid',
+						[prefix + 'Color'] : v[2] || 'black'
+					}
+				} else {
+					style[prefix] = {
+						[prefix + 'Width'] :  1,
+						[prefix + 'Style'] : 'solid',
+						[prefix + 'Color'] : 'black'
+					}
+					style[prefix][prefix + type[0]] = v[0]
+				}
+				continue
+			}
+			if (['background'].includes(value)) {
+				style['backgroundColor'] = item
+				continue
+			}
+			if(value.includes('padding') || value.includes('margin') || value.includes('adius')) {
+				let isRadius = value.includes('adius')
+				let prefix = isRadius ? 'borderRadius' : value.match(/[a-z]+/)[0]
+				let pre = [0,0,0,0].map((item, i) => isRadius ? ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'][i] : [prefix + 'Top', prefix + 'Right', prefix + 'Bottom', prefix + 'Left'][i] )
+				if(value === 'padding' || value === 'margin' || value === 'radius' || value === 'borderRadius') {
+					let v = item?.split(' ').map((item) => /^\d/.test(item) && toPx(item, node['width']), []) ||[0];
+					let type = isRadius ? 'borderRadius' : value;
+					if(v.length == 1) {
+						// style[type] = v[0]
+						style[type] = {
+							[pre[0]]: v[0],
+							[pre[1]]: v[0],
+							[pre[2]]: v[0],
+							[pre[3]]: v[0]
+						}
+					} else {
+						let [t, r, b, l] = v
+						style[type] = {
+							[pre[0]]: t,
+							[pre[1]]: isNumber(r) ? r : t,
+							[pre[2]]: isNumber(b) ? b : t,
+							[pre[3]]: isNumber(l) ? l : r
+						}
+					}
+				} else {
+					if(typeof style[prefix] === 'object') {
+						style[prefix][value] = toPx(item, node['width'])
+					} else {
+						style[prefix] = {
+							[pre[0]]: style[prefix] || 0,
+							[pre[1]]: style[prefix] || 0,
+							[pre[2]]: style[prefix] || 0,
+							[pre[3]]: style[prefix] || 0
+						}
+						style[prefix][value] = toPx(item, node['width'])
+					}
+				}
+				continue
+			}
+			if(value.includes('width') || value.includes('height')) {
+				if(/%$/.test(item)) {
+					style[value] = toPx(item, parent.layoutBox[value])
+				} else {
+					style[value] = /px|rpx$/.test(item) ? toPx(item) : item
+				}
+				continue
+			}
+			if(value.includes('transform')) {
+				style[value]= {}
+				item.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g, (g1, g2, g3) => {
+					const v = g3.split(',').map(k => k.replace(/(^\s*)|(\s*$)/g,''))
+					const transform = (v, r) => {
+						return v.includes('deg') ? v * 1 : toPx(v, r)
+					}
+					if(g2.includes('matrix')) {
+						style[value][g2] = v.map(v => v * 1)
+					} else if(g2.includes('rotate')) {
+						style[value][g2] = g3.match(/\d+/)[0] * 1
+					}else if(/[X, Y]/.test(g2)) {
+						style[value][g2] = /[X]/.test(g2) ? transform(v[0], node['width']) : transform(v[0], node['height'])
+					} else {
+						style[value][g2+'X'] = transform(v[0], node['width'])
+						style[value][g2+'Y'] = transform(v[1] || v[0], node['height'])
+					}
+				})
+				continue
+			}
+			if(/em$/.test(item) && !value.includes('lineHeight')) {
+				style[value] =  Math.ceil(parseFloat(item.replace('em')) * toPx(node['fontSize'] || 14))
+			} else {
+				style[value] = /%|px|rpx$/.test(item) ? toPx(item, node['width']) : item
+			}
+		}
+		if((element.name == 'image' || element.type == 'image') && !style.mode) {
+			style.mode = element.mode || 'aspectFill' // 'scaleToFill'
+			if((!node.width || node.width == 'auto') && (!node.height || node.width == 'auto') ) {
+				style.mode = ''
+			} 
+		}
+		return style
+	}
+	getLayoutBox(element, parent = {}, index = 0, siblings = [], source = {}) {
+		let box = {}
+		let {name, computedStyle: cstyle, layoutBox, attributes} = element || {}
+		if(!name) return box
+		const {ctx} = this
+		const pbox = parent.layoutBox || this.root
+		const pstyle = parent.computedStyle
+		let { 
+			verticalAlign: v, 
+			left: x, 
+			top: y,
+			width: w,
+			height: h,
+			fontSize = 14,
+			lineHeight = '1.4em',
+			maxLines,
+			fontWeight,
+			fontFamily,
+			textStyle,
+			position,
+			display
+			}  = cstyle;
+		
+		const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0, } = cstyle.padding || {}
+		const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0, } = cstyle.margin || {}
+		const {layoutBox: lbox, computedStyle: ls, name: lname} = siblings[index - 1] || {}
+		const {layoutBox: rbox, computedStyle: rs, name: rname} = siblings[index + 1] || {}
+		if(position == 'relative') {
+			x += pbox.left
+			y += pbox.top
+		}
+		if(name === 'text') {
+			const text = attributes.text ||''
+			lineHeight = toPx(lineHeight, fontSize)
+			ctx.save()
+			ctx.setFont({fontFamily, fontSize, fontWeight, textStyle})
+			const isLeft = index == 0 
+			const islineBlock = display === 'inlineBlock'
+			const isblock = display === 'block' || ls?.display === 'block' 
+			const isOnly = isLeft && !rbox || !parent?.id
+			const lboxR = isLeft || isblock ? 0 : lbox.offsetRight || 0
+			let texts = text.split('\n')
+			let lineIndex = 1
+			let line = ''
+			const textIndent = cstyle.textIndent || 0
+			if(!isOnly && !islineBlock) {
+				texts.map((t, i) => {
+					lineIndex += i
+					const chars = t.split('')
+					for (let j = 0; j < chars.length; j++) {
+						let ch = chars[j]
+						let textline = line + ch
+						let textWidth = ctx.measureText(textline, fontSize).width
+						if(lineIndex == 1) {
+							textWidth = textWidth + (isblock ? 0 : lboxR) +  textIndent
+						}
+						if(textWidth > pbox.width) {
+							lineIndex++
+							line = ch
+						} else {
+							line = textline
+						}
+					}
+				})
+			} else {
+				line = text
+				lineIndex = Math.max(texts.length, Math.ceil(ctx.measureText(text, fontSize).width / ((w || pbox.width) - ctx.measureText('0', fontSize).width)))
+			}
+			if(!islineBlock) {
+				box.offsetLeft =  (isNumber(x) || isblock || isOnly ? textIndent : lboxR) +  pl + ml;
+			}
+			
+			// 剩下的字宽度
+			const remain = ctx.measureText(line, fontSize).width
+			let width =  lineIndex > 1 ? pbox.width : remain + (box?.offsetLeft || 0);
+			if(!islineBlock) {
+				box.offsetRight = (x || 0) + box.offsetLeft + (w ? w : (isblock ? pbox.width : remain)) + pr + mr;
+			}
+			const lboxOffset = lbox ? lbox.left + lbox.width : 0;
+			const _getLeft = () => {
+				if(islineBlock) {
+					return (lboxOffset +  width > pbox.width || isLeft ? pbox.left : lboxOffset + (ls?.margin?.marginRight||0)) + ml
+				}
+				return (x || pbox.left)
+			}
+			const _getWidth = () => {
+				if(islineBlock) {
+					return width + pl + pr > pbox.width - box.left ? pbox.width - box.left : (width + pl + pr)
+				}
+				return w || (!isOnly || isblock ? pbox.width : (width > pbox.width - box.left || lineIndex > 1 ?  pbox.width - box.left : width))
+			}
+			const _getHeight = () => {
+				if(h) {
+					return h
+				} else if(lineIndex > 1 ) {
+					return (maxLines || lineIndex) * lineHeight + pt + pb 
+				} else {
+					return lineHeight + pt + pb 
+				}
+			}
+			const _getTop = () => {
+				let _y = y
+				if(_y) {
+					return _y + pt + mt
+				}
+				if(isLeft) {
+					_y = pbox.top
+				} else if((lineIndex == 1 && width < pbox.width && lname === 'text' && !isblock && !islineBlock) || lbox.width < pbox.width && !(islineBlock && (lboxOffset +  width > pbox.width))) {
+					_y = lbox.top
+				} else {
+					_y = lbox.top + lbox.height - (ls?.lineHeight || 0)
+				}
+				if (v === 'bottom') {
+					_y = pbox.top + (pbox.height - box.height || 0)
+				}
+				if (v === 'middle') {
+					_y = pbox.top + (pbox.height - box.height || 0) / 2
+				}
+				return _y + mt + (isblock && ls?.lineHeight || 0 ) + (lboxOffset +  width > pbox.width ? (ls?.margin?.marginBottom||0) : 0)
+			}
+			box.left = _getLeft() 
+			box.width = _getWidth() 
+			box.height = _getHeight()
+			box.top = _getTop()
+			if(pstyle && !pstyle.height) {
+				pbox.height = box.top - pbox.top + box.height
+			}
+			ctx.restore()
+		} else if(['view', 'qrcode'].includes(name)) {
+			box.left = x || pbox.left
+			box.width = (w || pbox?.width) - pl - pr
+			box.height = h || 0
+			if(isNumber(y)) {
+				box.top = y
+			} else {
+				box.top = lbox && (lbox.top + lbox.height) || pbox.top
+			}
+			
+		} else if(name === 'image') {
+			const {
+				width: rWidth,
+				height: rHeight
+			} = attributes
+			const limageOffset = lbox && (lbox.left + lbox.width)
+			if(isNumber(x)) {
+				box.left = x
+			} else {
+				box.left = lbox && (limageOffset < pbox.width ? limageOffset : pbox.left) || pbox.left
+			}
+			if(isNumber(w)) {
+				box.width = w // - pl - pr 
+			} else {
+				box.width = Math.round(isNumber(h) ? rWidth * h / rHeight : pbox?.width) // - pl - pr
+			}
+			if(isNumber(h)) {
+				box.height = h
+			} else {
+				const cH = Math.round(box.width * rHeight / rWidth )
+				box.height = Math.min(cH, pbox?.height)
+			}
+			if(isNumber(y)) {
+				box.top = y
+			} else {
+				box.top = lbox && (limageOffset < pbox.width ? limageOffset : (lbox.top + lbox.height)) || pbox.top
+			}
+		}
+		return box
+	}
+	async getAttributes(element) {
+		let arr = { }
+		if(element?.url || element?.src) {
+			arr.src = element.url || element?.src;
+			const {width = 0, height = 0, path: src} = await getImageInfo(arr.src, this.isH5PathToBase64) || {}
+			arr = Object.assign({}, arr, {width, height, src})
+		}
+		if(element?.text) {
+			arr.text = element.text
+		}
+		return arr
+	}
+	async calcNode(element) {
+		const node = element || this.element
+		return await this.getNodeTree(node)
+	}
+}

components/lime-painter/utils.js

@@ -366,44 +366,71 @@ const getLocalFilePath = (path)=> {
 // #endif
 
 export function getImageInfo(img, isH5PathToBase64) {
-		return new Promise(async (resolve, reject) => {
-			const base64Reg = /^data:image\/(\w+);base64/
-			const localReg = /^\.|^\/(?=[^\/])/;
-			const networkReg = /^(http|\/\/)/
-			// #ifdef H5
-			if(networkReg.test(img) && isH5PathToBase64) {
-				img = await pathToBase64(img)
-			}
-			// #endif
-			// #ifndef MP-ALIPAY 
-			if(base64Reg.test(img)) {
-				if(!cache[img]) {
-					const imgName = img
-					img = await base64ToPath(img)
-					cache[imgName] = img
-				} else {
-					img = cache[img]
-				}
-			}
-			// #endif
-			if(cache[img] && cache[img].errMsg) {
-				resolve(cache[img])
+	return new Promise(async (resolve, reject) => {
+		const base64Reg = /^data:image\/(\w+);base64/
+		const localReg = /^\.|^\/(?=[^\/])/;
+		const networkReg = /^(http|\/\/)/
+		// #ifdef H5
+		if(networkReg.test(img) && isH5PathToBase64) {
+			img = await pathToBase64(img)
+		}
+		// #endif
+		// #ifndef MP-ALIPAY 
+		if(base64Reg.test(img)) {
+			if(!cache[img]) {
+				const imgName = img
+				img = await base64ToPath(img)
+				cache[imgName] = img
 			} else {
-				uni.getImageInfo({
-					src: img,
-					success: (image) => {
-						// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
-						image.path = localReg.test(img) ?  `/${image.path}` : image.path;
-						// #endif
-						// image.path = /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile|ttfile|blob)/.test(image.path) ? image.path : `/${image.path}`;
-						cache[img] = image
-						resolve(cache[img])
-					},
-					fail(err) {
-						resolve({path: img})
-						console.error(`getImageInfo:fail ${img} failed ${JSON.stringify(err)}`);
-					}
-				})
+				img = cache[img]
 			}
-		})
-	}
+		}
+		// #endif
+		if(cache[img] && cache[img].errMsg) {
+			resolve(cache[img])
+		} else {
+			uni.getImageInfo({
+				src: img,
+				success: (image) => {
+					// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+					image.path = localReg.test(img) ?  `/${image.path}` : image.path;
+					// #endif
+					// image.path = /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile|ttfile|blob)/.test(image.path) ? image.path : `/${image.path}`;
+					cache[img] = image
+					resolve(cache[img])
+				},
+				fail(err) {
+					resolve({path: img})
+					console.error(`getImageInfo:fail ${img} failed ${JSON.stringify(err)}`);
+				}
+			})
+		}
+	})
+}
+	
+	
+	
+export class DataUtil {
+  /**
+   * 设置差异数据
+   * @param component
+   * @param data
+   */
+  setDiffData(component, data) {
+	const diffData = {};
+
+	// 遍历获取到有差异的数据
+	Object.keys(data).forEach(key => {
+	  if (component[key] !== data[key]) {
+		diffData[key] = data[key];
+	  }
+	});
+
+	// 设置数据
+	if (Object.keys(diffData).length) {
+	  // component.setData(diffData);
+	}
+  }
+}
+// const dataUtil = new DataUtil;
+// export dataUtil;

pages/product/product.vue

@@ -8,7 +8,7 @@
 			:autoplay="swiper.autoplay"
 			:interval="swiper.interval" :duration="swiper.duration">
 				<swiper-item v-for="(item, index) in bannerList" :key="index">
-					<view class="adv-item" ><image :src="$onlineImg +item" class="pic" mode="scaleToFill"></image></view>
+					<view class="adv-item" ><image :src="$onlineImg +item" class="pic" mode="heightFix"></image></view>
 				</swiper-item>
 			</swiper>
 		</view>

pages/usercenter/certificateList/certificate/certificate.vue

@@ -1,7 +1,16 @@
 <template>
 	<view class="pages">
-		<!-- <l-painter :board="base"/> 画板待调试 -->
-		<view class="container" id="wrapper">
+		<!-- 画板 -->		
+		<l-painter ref="painter" :board="base"/>
+		<view class="bottom-btn-wrap">
+			<view class="bottom-btn-wrap-bg">
+				<view class="bottom-btn btn" @click="download">
+					下载图片
+				</view>
+			</view>
+		</view>
+		<!-- <button class="generate-btn" id="mycanvas" @click="download()"></button> -->
+		<!-- <view class="container" id="wrapper">
 			<view class="image-wrapper draw">
 			  <image :src="$getimg+'cqtanhui-cert.jpg'" class="draw page-bg" mode="scaleToFill"></image>
 			</view>
@@ -18,22 +27,7 @@
 			<view class="cart-text">
 				感谢您为生态文明建设和全球应对气候变化所做出的贡献
 			</view>
-			
-			
-			
-		 <!-- <text class="title draw" data-text="Hello there">Hello there</text>
-		  <text class="info draw" data-text="小程序是一种新的开放能力，开发者可以快速地开发一个小程序。">
-		   小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
-		  </text>
-		  <view class="image-wrapper draw">
-		    <image class="draw" :src="$getimg + 'guide02.png'"/>
-			<image class="draw" src="../../../../static/img/icon_use_active.png"/>
-		  </view> -->
-		  
-		  <!-- <button class="generate-btn" @click="drawCanvas">generate</button> -->
-		</view>
-		
-		<canvas canvas-id="canvas" class="share-canvas"></canvas>
+		</view> -->
 	</view>
 </template>
 
@@ -49,6 +43,7 @@
 				thetoken:'',
 				orderid:'',
 				item:[],
+				path:'',
 				params:{
 				},
 				base: {
@@ -67,18 +62,69 @@
 						},
 						{
 							type: 'text',
-							text: '左对齐,下划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
-							// 可以指定关键字颜色
-							rules: {
-								word: ['到地'],
-								color: 'red'
-							},
+							text: '',
 							css: {
-								left: '0rpx',
-								top: '10rpx',
+								left: '100rpx',
+								top: '350rpx',
+								width: '550rpx',
+								color:'#26D18B',
+								textAlign: 'center',
+								display:'block',
+							}
+						},
+						{
+							type: 'text',
+							text: '',
+							css: {
+								left: '100rpx',
+								top: '398rpx',
+								width: '550rpx',
 								fontSize: '28rpx',
 								lineHeight: '36rpx',
-								textDecoration: 'underline'
+								color:'#333',
+								textAlign: 'left',
+							}
+						},
+						{
+							type: 'text',
+							text: '',
+							css: {
+								width: '550rpx',
+								left: '100rpx',
+								top: '446rpx',
+								fontSize: '28rpx',
+								lineHeight: '36rpx',
+								color:'#333',
+								textAlign: 'left',
+								textIndent: '2em'
+							}
+						},
+						{
+							type: 'text',
+							text: '该笔碳汇可用于抵消您的碳排放',
+							css: {
+								width: '550rpx',
+								left: '100rpx',
+								top: '566rpx',
+								fontSize: '28rpx',
+								lineHeight: '36rpx',
+								color:'#333',
+								textAlign: 'left',
+								textIndent: '2em'
+							}
+						},
+						{
+							type: 'text',
+							text: '感谢您为生态文明建设和全球应对气候变化所做出的贡献',
+							css: {
+								width: '550rpx',
+								left: '100rpx',
+								top: '614rpx',
+								fontSize: '28rpx',
+								lineHeight: '36rpx',
+								color:'#333',
+								textAlign: 'left',
+								textIndent: '2em'
 							}
 						},
 					]
@@ -105,6 +151,10 @@
 				// this.info = Object.assign(this.info, data);
 				// this.info.url = '/static/html2canvas/index.html?key=' + this.orderid;
 				this.item = res.data.retBody;
+				console.log('this.base.views',this.base.views);
+				this.base.views[1].text = `证书编号:${res.data.retBody.credentialNo}`;
+				this.base.views[2].text = `尊敬的 ${res.data.retBody.customerName}:`;
+				this.base.views[3].text = `感谢您对“碳汇+”生态产品价值实现的支持，您购买了 ${res.data.retBody.year}年度碳汇量${res.data.retBody.carbonAmount}kg，您购碳资金${res.data.retBody.orderAmount}元，已全额转入${res.data.retBody.farmerName}的银行账户。`;
 				console.log('res',JSON.parse(JSON.stringify(res.data.retBody)));
 			}).catch(err =>{
 				console.log('err',err)
@@ -112,41 +162,54 @@
 
 		},
 		methods: {
-			drawCanvas: function() {
-				const wrapperId = '#wrapper'
-				const drawClassName = '.draw'
-				const canvasId = 'canvas'
+			onRender() {
+				// 支持通过调用render传入参数
+				const painter = this.$refs.painter
+				painter.render(this.base)
+			},
+			// canvasToTempFilePath() {
+			// 	const painter = this.$refs.painter
+			// 	// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
+			// 	painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath)
+			// },
+			// // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
+			// onCanvasToTempFilePath() {
+			// 	const painter = this.$refs.custom
+			// 	painter.canvasToTempFilePath({dpr:2}).then(res => this.path = res.tempFilePath)
 				
-				wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
-					uni.showLoading({
-						title: '生成中'
-					});
-					uni.canvasToTempFilePath({
-					  x: 0,
-					  y: 0,
-					  // width: 500,
-					  // height: 500,
-					  // destWidth: 100,
-					  // destHeight: 100,
-					  canvasId: 'canvas',
-					  success: function(res) {
+			// },
+			download(){
+				let self = this;
+				const painter = this.$refs.painter;
+				painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath);
+				console.log('this.path',this.path);
+				uni.showLoading({
+					title: '生成中'
+				});
+				setTimeout(this.saveImg,500);
+			},
+			saveImg(){
+				let self = this;
+				uni.saveImageToPhotosAlbum({
+					filePath:this.path,
+					success:function(res){
 						uni.hideLoading();
-						uni.showLoading({
-							title: '保存中'
-						});
-					    console.log(res.tempFilePath);
-						uni.saveImageToPhotosAlbum({
-							filePath:res.tempFilePath,
-							success:function(res){
-								uni.hideLoading();
-							}							
-						})
-					  } 
-					})
-				  // canvas has been drawn
-				  // can save the image with wx.canvasToTempFilePath and wx.saveImageToPhotosAlbum 
-				})
-		  }
+						self.$api.msg('生成成功');
+					},
+					fail:function(err){						
+						uni.hideLoading();
+						if(err.errMsg =="saveImageToPhotosAlbum:fail cancel"){
+							return true;
+						}
+						self.$api.msg('生成失败请重试!');
+						// self.$api.msg(err.errMsg);
+						// if(err.errMsg == 'saveImageToPhotosAlbum:fail The "path" argument must be of type string. Received type object'){
+						// 	self.$api.msg('生成失败请重试!')
+						// }
+						console.log('err',err)
+					}
+				});				
+			}
 
 		}
 	}

pages/usercenter/certificateList/certificateList.vue

@@ -79,7 +79,7 @@
 				let pageSize = page.size; // 页长, 默认每页10条
 				this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});				
 				let thetoken = this.tokenhead + ' ' + this.token;
-				console.log('thetoken',thetoken);
+				// console.log('thetoken',thetoken);
 				// this.$api.http.post(this.config.apiBaseurl+'/carbon-h5/wap/order/searchCredentialList',{params:this.params,header: {Authorization:thetoken}})
 				this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/order/searchCredentialList',this.params,{
 					header: {