no message

src/components/lime-painter/components/common/relation.js

@@ -1,150 +1,151 @@
-const styles = (v ='') =>  v.split(';').filter(v => v && !/^[\n\s]+$/.test(v)).map(v => {
-						const key = v.slice(0, v.indexOf(':'))
-						const value = v.slice(v.indexOf(':')+1)
-						return {
-							[key
-								.replace(/-([a-z])/g, function() { return arguments[1].toUpperCase()})
-								.replace(/\s+/g, '')
-							]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
-						}
-					})
+const styles = (v = '') =>
+  v
+    .split(';')
+    .filter(v => v && !/^[\n\s]+$/.test(v))
+    .map(v => {
+      const key = v.slice(0, v.indexOf(':'))
+      const value = v.slice(v.indexOf(':') + 1)
+      return {
+        [key
+          .replace(/-([a-z])/g, function () {
+            return arguments[1].toUpperCase()
+          })
+          .replace(/\s+/g, '')]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
+      }
+    })
 export function parent(parent) {
-	return {
-		provide() {
-			return {
-				[parent]: this
-			}
-		},
-		data() {
-			return {
-				el: {
-					id: null,
-					css: {},
-					views: []
-				},
-			}
-		},
-		watch: {
-			css: { 
-				handler(v) {
-					if(this.canvasId) {
-						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
-						this.canvasWidth = this.el.css && this.el.css.width || this.canvasWidth
-						this.canvasHeight = this.el.css && this.el.css.height || this.canvasHeight
-					}
-				},
-				immediate: true
-			}
-		}
-	}
+  return {
+    provide() {
+      return {
+        [parent]: this
+      }
+    },
+    data() {
+      return {
+        el: {
+          id: null,
+          css: {},
+          views: []
+        }
+      }
+    },
+    watch: {
+      css: {
+        handler(v) {
+          if (this.canvasId) {
+            this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+            this.canvasWidth = (this.el.css && this.el.css.width) || this.canvasWidth
+            this.canvasHeight = (this.el.css && this.el.css.height) || this.canvasHeight
+          }
+        },
+        immediate: true
+      }
+    }
+  }
 }
 export function children(parent, options = {}) {
-	const indexKey = options.indexKey || 'index'
-	return {
-		inject: {
-			[parent]: {
-				default: null
-			}
-		},
-		watch: {
-			el: {
-				handler(v, o) {
-					if(JSON.stringify(v) != JSON.stringify(o))
-						this.bindRelation()
-				},
-				deep: true,
-				immediate: true
-			},
-			src: {
-				handler(v, o) {
-					if(v != o)
-						this.bindRelation()
-				},
-				immediate: true
-			},
-			text: {
-				handler(v, o) {
-					if(v != o) this.bindRelation()
-				},
-				immediate: true
-			},
-			css: {
-				handler(v, o) {
-					if(v != o)
-						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
-				},
-				immediate: true
-			},
-			replace: {
-				handler(v, o) {
-					if(JSON.stringify(v) != JSON.stringify(o))
-						this.bindRelation()
-				},
-				deep: true,
-				immediate: true
-			}
-		},
-		created() {
-			if(!this._uid) {
-				this._uid = this._.uid
-			}
-			Object.defineProperty(this, 'parent', {
-				get: () => this[parent] || [],
-			})
-			Object.defineProperty(this, 'index', {
-				get: () =>  {
-					this.bindRelation();
-					const {parent: {el: {views=[]}={}}={}} = this
-					return views.indexOf(this.el)
-				},
-			});
-			this.el.type = this.type
-			if(this.uid) {
-				this.el.uid = this.uid
-			}
-			this.bindRelation()
-		},
-		// #ifdef VUE3
-		beforeUnmount() {
-			this.removeEl()
-		},
-		// #endif
-		// #ifdef VUE2
-		beforeDestroy() {
-			this.removeEl()
-		},
-		// #endif
-		methods: {
-			removeEl() {
-				if (this.parent) {
-					this.parent.el.views = this.parent.el.views.filter(
-						(item) => item._uid !== this._uid
-					);
-				}
-			},
-			bindRelation() {
-				if(!this.el._uid) {
-					this.el._uid = this._uid 
-				}
-				if(['text','qrcode'].includes(this.type)) {
-					this.el.text = this.$slots && this.$slots.default && this.$slots.default[0].text || `${this.text || ''}`.replace(/\\n/g, '\n')
-				}
-				if(this.type == 'image') {
-					this.el.src = this.src
-				}
-				if (!this.parent) {
-					return;
-				}
-				let views = this.parent.el.views || [];
-				if(views.indexOf(this.el) !== -1) {
-					this.parent.el.views = views.map(v => v._uid == this._uid ? this.el : v)
-				} else {
-					this.parent.el.views = [...views, this.el];
-				}
-			}
-		},
-		mounted() {
-			// this.bindRelation()
-		},
-	}
-}
+  const indexKey = options.indexKey || 'index'
+  return {
+    inject: {
+      [parent]: {
+        default: null
+      }
+    },
+    watch: {
+      el: {
+        handler(v, o) {
+          if (JSON.stringify(v) != JSON.stringify(o)) this.bindRelation()
+        },
+        deep: true,
+        immediate: true
+      },
+      src: {
+        handler(v, o) {
+          if (v != o) this.bindRelation()
+        },
+        immediate: true
+      },
+      text: {
+        handler(v, o) {
+          if (v != o) this.bindRelation()
+        },
+        immediate: true
+      },
+      css: {
+        handler(v, o) {
+          if (v != o) this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+        },
+        immediate: true
+      },
+      replace: {
+        handler(v, o) {
+          if (JSON.stringify(v) != JSON.stringify(o)) this.bindRelation()
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+    created() {
+      if (!this._uid) {
+        this._uid = this._.uid
+      }
+      Object.defineProperty(this, 'parent', {
+        get: () => this[parent] || []
+      })
+      Object.defineProperty(this, 'index', {
+        get: () => {
+          this.bindRelation()
+          const { parent: { el: { views = [] } = {} } = {} } = this
+          return views.indexOf(this.el)
+        }
+      })
+      this.el.type = this.type
+      if (this.uid) {
+        this.el.uid = this.uid
+      }
+      this.bindRelation()
+    },
+    // #ifdef VUE3
+    beforeUnmount() {
+      this.removeEl()
+    },
+    // #endif
+    // #ifdef VUE2
+    beforeDestroy() {
+      this.removeEl()
+    },
+    // #endif
+    methods: {
+      removeEl() {
+        if (this.parent) {
+          this.parent.el.views = this.parent.el.views.filter(item => item._uid !== this._uid)
+        }
+      },
+      bindRelation() {
+        if (!this.el._uid) {
+          this.el._uid = this._uid
+        }
+        if (['text', 'qrcode'].includes(this.type)) {
+          this.el.text =
+            (this.$slots && this.$slots.default && this.$slots.default[0].text) ||
+            `${this.text || ''}`.replace(/\\n/g, '\n')
+        }
+        if (this.type == 'image') {
+          this.el.src = this.src
+        }
+        if (!this.parent) {
+          return
+        }
+        let views = this.parent.el.views || []
+        if (views.indexOf(this.el) !== -1) {
+          this.parent.el.views = views.map(v => (v._uid == this._uid ? this.el : v))
+        } else {
+          this.parent.el.views = [...views, this.el]
+        }
+      }
+    },
+    mounted() {
+      // this.bindRelation()
+    }
+  }
+}

src/components/lime-painter/components/l-painter-image/l-painter-image.vue

@@ -1,28 +1,25 @@
-<template>
-	
-</template>
+<template></template>
 
 <script>
-	import {parent, children} from '../common/relation';
-	export default {
-		name: 'lime-painter-image',
-		mixins:[children('painter')],
-		props: {
-			id: String,
-			css: [String, Object],
-			src: String
-		},
-		data() {
-			return {
-				type: 'image',
-				el: {
-					css: {},
-					src: null
-				},
-			}
-		}
-	}
+import { parent, children } from '../common/relation'
+export default {
+  name: 'lime-painter-image',
+  mixins: [children('painter')],
+  props: {
+    id: String,
+    css: [String, Object],
+    src: String
+  },
+  data() {
+    return {
+      type: 'image',
+      el: {
+        css: {},
+        src: null
+      }
+    }
+  }
+}
 </script>
 
-<style>
-</style>
+<style></style>

src/components/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue

@@ -1,27 +1,25 @@
-<template>
-</template>
+<template></template>
 
 <script>
-	import {parent, children} from '../common/relation';
-	export default {
-		name: 'lime-painter-qrcode',
-		mixins:[children('painter')],
-		props: {
-			id: String,
-			css: [String, Object],
-			text: String
-		},
-		data() {
-			return {
-				type: 'qrcode',
-				el: {
-					css: {},
-					text: null
-				},
-			}
-		}
-	}
+import { parent, children } from '../common/relation'
+export default {
+  name: 'lime-painter-qrcode',
+  mixins: [children('painter')],
+  props: {
+    id: String,
+    css: [String, Object],
+    text: String
+  },
+  data() {
+    return {
+      type: 'qrcode',
+      el: {
+        css: {},
+        text: null
+      }
+    }
+  }
+}
 </script>
 
-<style>
-</style>
+<style></style>

src/components/lime-painter/components/l-painter-text/l-painter-text.vue

@@ -1,33 +1,32 @@
 <template>
-	<text style="opacity: 0;height: 0;"><slot/></text>
+  <text style="opacity: 0; height: 0"><slot /></text>
 </template>
 
 <script>
-	import {parent, children} from '../common/relation';
-	export default {
-		name: 'lime-painter-text',
-		mixins:[children('painter')],
-		props: {
-			type: {
-				type: String,
-				default: 'text'
-			},
-			uid: String,
-			css: [String, Object],
-			text: [String, Number],
-			replace: Object,
-		},
-		data() {
-			return {
-				// type: 'text',
-				el: {
-					css: {},
-					text: null
-				},
-			}
-		}
-	}
+import { parent, children } from '../common/relation'
+export default {
+  name: 'lime-painter-text',
+  mixins: [children('painter')],
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    uid: String,
+    css: [String, Object],
+    text: [String, Number],
+    replace: Object
+  },
+  data() {
+    return {
+      // type: 'text',
+      el: {
+        css: {},
+        text: null
+      }
+    }
+  }
+}
 </script>
 
-<style>
-</style>
+<style></style>

src/components/lime-painter/components/l-painter-view/l-painter-view.vue

@@ -1,34 +1,31 @@
 <template>
-	<view><slot/></view>
+  <view><slot /></view>
 </template>
 
 <script>
-	import {parent, children} from '../common/relation';
-	export default {
-		name: 'lime-painter-view',
-		mixins:[children('painter'), parent('painter')],
-		props: {
-			id: String,
-			type: {
-				type: String,
-				default: 'view'
-			},
-			css: [String, Object],
-		},
-		data() {
-			return {
-				// type: 'view',
-				el: {
-					css: {},
-					views:[]
-				},
-			}
-		},
-		mounted() {
-			
-		}
-	}
+import { parent, children } from '../common/relation'
+export default {
+  name: 'lime-painter-view',
+  mixins: [children('painter'), parent('painter')],
+  props: {
+    id: String,
+    type: {
+      type: String,
+      default: 'view'
+    },
+    css: [String, Object]
+  },
+  data() {
+    return {
+      // type: 'view',
+      el: {
+        css: {},
+        views: []
+      }
+    }
+  },
+  mounted() {}
+}
 </script>
 
-<style>
-</style>
+<style></style>

src/components/lime-painter/components/l-painter/l-painter.vue

@@ -1,461 +1,484 @@
 <template>
-	<view class="lime-painter" ref="limepainter">
-		<view v-if="canvasId && size" :style="styles">
-			<!-- #ifndef APP-NVUE -->
-			<canvas class="lime-painter__canvas" v-if="use2dCanvas" :id="canvasId" type="2d" :style="size"></canvas>
-			<canvas class="lime-painter__canvas" v-else :id="canvasId" :canvas-id="canvasId" :style="size"
-				:width="boardWidth * dpr" :height="boardHeight * dpr" :hidpi="hidpi"></canvas>
+  <view class="lime-painter" ref="limepainter">
+    <view v-if="canvasId && size" :style="styles">
+      <!-- #ifndef APP-NVUE -->
+      <canvas class="lime-painter__canvas" v-if="use2dCanvas" :id="canvasId" type="2d" :style="size"></canvas>
+      <canvas
+        class="lime-painter__canvas"
+        v-else
+        :id="canvasId"
+        :canvas-id="canvasId"
+        :style="size"
+        :width="boardWidth * dpr"
+        :height="boardHeight * dpr"
+        :hidpi="hidpi"
+      ></canvas>
 
-			<!-- #endif -->
-			<!-- #ifdef APP-NVUE -->
-			<web-view :style="size" ref="webview"
-				src="/uni_modules/lime-painter/hybrid/html/index.html"
-				class="lime-painter__canvas" @pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage">
-			</web-view>
-			<!-- #endif -->
-		</view>
-		<slot />
-	</view>
+      <!-- #endif -->
+      <!-- #ifdef APP-NVUE -->
+      <web-view
+        :style="size"
+        ref="webview"
+        src="/uni_modules/lime-painter/hybrid/html/index.html"
+        class="lime-painter__canvas"
+        @pagefinish="onPageFinish"
+        @error="onError"
+        @onPostMessage="onMessage"
+      >
+      </web-view>
+      <!-- #endif -->
+    </view>
+    <slot />
+  </view>
 </template>
 
 <script>
-	import { parent } from '../common/relation'
-	import props from './props'
-	import {toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo }from './utils';
-	//  #ifndef APP-NVUE
-	import { canIUseCanvas2d, isPC} from './utils';
-	import Painter from './painter';
-	// import Painter from '@painter'
-	const nvue = {}
-	//  #endif
-	//  #ifdef APP-NVUE
-	import nvue from './nvue'
-	//  #endif
-	export default {
-		name: 'lime-painter',
-		mixins: [props, parent('painter'), nvue],
-		data() {
-			return {
-				use2dCanvas: false,
-				canvasHeight: 150,
-				canvasWidth: null,
-				parentWidth: 0,
-				inited: false,
-				progress: 0,
-				firstRender: 0,
-				done: false,
-				tasks: []
-			};
-		},
-		computed: {
-			styles() {
-				return `${this.size}${this.customStyle||''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
-			},
-			canvasId() {
-				return `l-painter${this._ && this._.uid || this._uid}`
-			},
-			size() {
-				if (this.boardWidth && this.boardHeight) {
-					return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
-				}
-			},
-			dpr() {
-				return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
-			},
-			boardWidth() {
-				const {width = 0} = (this.elements && this.elements.css) || this.elements || this
-				const w = toPx(width||this.width)
-				return w || Math.max(w, toPx(this.canvasWidth));
-			},
-			boardHeight() {
-				const {height = 0} = (this.elements && this.elements.css) || this.elements || this
-				const h = toPx(height||this.height)
-				return h || Math.max(h, toPx(this.canvasHeight));
-			},
-			hasBoard() {
-				return this.board && Object.keys(this.board).length
-			},
-			elements() {
-				return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
-			}
-		},
-		created() {
-			this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
-		},
-		async mounted() {
-			await sleep(30)
-			await this.getParentWeith()
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.$watch('elements', this.watchRender, {
-						deep: true,
-						immediate: true
-					});
-				}, 30)
-			})
-		},
-		// #ifdef VUE3
-		unmounted() {
-			this.done = false
-			this.inited = false
-			this.firstRender = 0
-			this.progress = 0
-			this.painter = null
-			clearTimeout(this.rendertimer)
-		},
-		// #endif
-		// #ifdef VUE2
-		destroyed() {
-			this.done = false
-			this.inited = false
-			this.firstRender = 0
-			this.progress = 0
-			this.painter = null
-			clearTimeout(this.rendertimer)
-		},
-		// #endif
-		methods: {
-			async watchRender(val, old) {
-				if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
-				this.firstRender = 1
-				this.progress = 0
-				this.done = false
-				clearTimeout(this.rendertimer)
-				this.rendertimer = setTimeout(() => {
-					this.render(val);
-				}, this.beforeDelay)
-			},
-			async setFilePath(path, param) {
-				let filePath = path
-				const {pathType = this.pathType} =  param || this
-				if (pathType == 'base64' && !isBase64(path)) {
-					filePath = await pathToBase64(path)
-				} else if (pathType == 'url' && isBase64(path)) {
-					filePath = await base64ToPath(path)
-				}
-				if (param && param.isEmit) {
-					this.$emit('success', filePath);
-				}
-				return filePath
-			},
-			async getSize(args) {
-				const {width} = args.css || args
-				const {height} = args.css || args
-				if (!this.size) {
-					if (width || height) {
-						this.canvasWidth = width || this.canvasWidth
-						this.canvasHeight = height || this.canvasHeight
-						await sleep(30);
-					} else {
-						await this.getParentWeith()
-					}
-				}
-			},
-			canvasToTempFilePathSync(args) {
-				// this.stopWatch && this.stopWatch()
-				// this.stopWatch = this.$watch('done', (v) => {
-				// 	if (v) {
-				// 		this.canvasToTempFilePath(args)
-				// 		this.stopWatch && this.stopWatch()
-				// 	}
-				// }, {
-				// 	immediate: true
-				// })
-				this.tasks.push(args)
-				if(this.done){
-					this.runTask()
-				}
-			},
-			runTask(){
-				while(this.tasks.length){
-					const task = this.tasks.shift()	
-					 this.canvasToTempFilePath(task)
-				}
-			},
-			// #ifndef APP-NVUE
-			getParentWeith() {
-				return new Promise(resolve => {
-					uni.createSelectorQuery()
-						.in(this)
-						.select(`.lime-painter`)
-						.boundingClientRect()
-						.exec(res => {
-							const {width, height} = res[0]||{}
-							this.parentWidth = Math.ceil(width||0)
-							this.canvasWidth = this.parentWidth || 300
-							this.canvasHeight = height || this.canvasHeight||150
-							resolve(res[0])
-						})
-				})
-			},
-			async render(args = {}) {
-				if(!Object.keys(args).length) {
-					return console.error('空对象')
-				}
-				this.progress = 0
-				this.done = false
-				// #ifdef APP-NVUE
-				this.tempFilePath.length = 0
-				// #endif
-				await this.getSize(args)
-				const ctx = await this.getContext();
-				
-				let {
-					use2dCanvas,
-					boardWidth,
-					boardHeight,
-					canvas,
-					afterDelay
-				} = this;
-				if (use2dCanvas && !canvas) {
-					return Promise.reject(new Error('canvas 没创建'));
-				}
-				this.boundary = {
-					top: 0,
-					left: 0,
-					width: boardWidth,
-					height: boardHeight
-				};
-				this.painter = null
-				if (!this.painter) {
-					const {width} = args.css || args
-					const {height} = args.css || args
-					if(!width && this.parentWidth) {
-						Object.assign(args, {width: this.parentWidth})
-					}
-					const param = {
-						context: ctx,
-						canvas,
-						width: boardWidth,
-						height: boardHeight,
-						pixelRatio: this.dpr,
-						useCORS: this.useCORS,
-						createImage: getImageInfo.bind(this),
-						performance: this.performance,
-						listen: {
-							onProgress: (v) => {
-								this.progress = v
-								this.$emit('progress', v)
-							},
-							onEffectFail: (err) => {
-								this.$emit('faill', err)
-							}
-						}
-					}
-					this.painter = new Painter(param)
-				} 
-				try{
-					// vue3 赋值给data会引起图片无法绘制
-					const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
-					this.boundary.height = this.canvasHeight = height
-					this.boundary.width = this.canvasWidth = width
-					await sleep(this.sleep);
-					await this.painter.render()
-					await new Promise(resolve => this.$nextTick(resolve));
-					if (!use2dCanvas) {
-						await this.canvasDraw();
-					}
-					if (afterDelay && use2dCanvas) {
-						await sleep(afterDelay);
-					}
-					this.$emit('done');
-					this.done = true
-					if (this.isCanvasToTempFilePath) {
-						this.canvasToTempFilePath()
-							.then(res => {
-								this.$emit('success', res.tempFilePath)
-							})
-							.catch(err => {
-								this.$emit('fail', new Error(JSON.stringify(err)));
-							});
-					}
-					this.runTask()
-					return Promise.resolve({
-						ctx,
-						draw: this.painter,
-						node: this.node
-					});
-				}catch(e){
-					//TODO handle the exception
-				}
-				
-			},
-			canvasDraw(flag = false) {
-				return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
-					.afterDelay)));
-			},
-			async getContext() {
-				if (!this.canvasWidth) {
-					this.$emit('fail', 'painter no size')
-					console.error('[lime-painter]: 给画板或父级设置尺寸')
-					return Promise.reject();
-				}
-				if (this.ctx && this.inited) {
-					return Promise.resolve(this.ctx);
-				}
-				const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
-				const _getContext = () => {
-					return new Promise(resolve => {
-						uni.createSelectorQuery()
-							.in(this)
-							.select(`#${this.canvasId}`)
-							.boundingClientRect()
-							.exec(res => {
-								if (res) {
-									const ctx = uni.createCanvasContext(this.canvasId, this);
-									if (!this.inited) {
-										this.inited = true;
-										this.use2dCanvas = false;
-										this.canvas = res;
-									}
-									
-									// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
-									if (!ctx.measureText) {
-										function strLen(str) {
-											let len = 0;
-											for (let i = 0; i < str.length; i++) {
-												if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
-													len++;
-												} else {
-													len += 2;
-												}
-											}
-											return len;
-										}
-										ctx.measureText = text => {
-											let fontSize = ctx.state && ctx.state.fontSize || 12;
-											const font = ctx.__font
-											if (font && fontSize == 12) {
-												fontSize = parseInt(font.split(' ')[3], 10);
-											}
-											fontSize /= 2;
-											return {
-												width: strLen(text) * fontSize
-											};
-										}
-									}
-									
-									// #ifdef MP-ALIPAY
-									ctx.scale(dpr, dpr);
-									// #endif
-									this.ctx = ctx
-									resolve(this.ctx);
-								} else {
-									console.error('[lime-painter] no node')
-								}
-							});
-					});
-				};
-				if (!use2dCanvas) {
-					return _getContext();
-				}
-				return new Promise(resolve => {
-					uni.createSelectorQuery()
-						.in(this)
-						.select(`#${this.canvasId}`)
-						.node()
-						.exec(res => {
-							let {node: canvas} = res && res[0]||{};
-							if(canvas) {
-								const ctx = canvas.getContext(type);
-								if (!this.inited) {
-									this.inited = true;
-									this.use2dCanvas = true;
-									this.canvas = canvas;
-								}
-								this.ctx = ctx
-								resolve(this.ctx);
-							} else {
-								console.error('[lime-painter]: no size')
-							}
-						});
-				});
-			},
-			canvasToTempFilePath(args = {}) {
-				return new Promise(async (resolve, reject) => {
-					const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
-					const success = async (res) => {
-						try {
-							const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
-							const result = Object.assign(res, {tempFilePath})
-							args.success && args.success(result)
-							resolve(result)
-						} catch (e) {
-							this.$emit('fail', e)
-						}
-					}
-					
-					let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
-					// let destWidth = width * dpr;
-					// let destHeight = height * dpr;
-					// #ifdef MP-ALIPAY
-					// width = destWidth;
-					// height = destHeight;
-					// #endif
-					
-					const copyArgs = Object.assign({
-						// x,
-						// y,
-						// width,
-						// height,
-						// destWidth,
-						// destHeight,
-						canvasId,
-						id: canvasId,
-						fileType,
-						quality,
-					}, args, {success});
-					// if(this.isPC || use2dCanvas) {
-					// 	copyArgs.canvas = this.canvas
-					// }
-					if (use2dCanvas) {
-						copyArgs.canvas = this.canvas
-						try{
-							// #ifndef MP-ALIPAY
-							const oFilePath = this.canvas.toDataURL(`image/${args.fileType||fileType}`.replace(/pg/, 'peg'), args.quality||quality)
-							if(/data:,/.test(oFilePath)) {
-								uni.canvasToTempFilePath(copyArgs, this);
-							} else {
-								const tempFilePath = await this.setFilePath(oFilePath, args)
-								args.success && args.success({tempFilePath})
-								resolve({tempFilePath})
-							}
-							// #endif
-							// #ifdef MP-ALIPAY
-							this.canvas.toTempFilePath(copyArgs)
-							// #endif
-						}catch(e){
-							args.fail && args.fail(e)
-							reject(e)
-						}
-					} else {
-						// #ifdef MP-ALIPAY
-						if(this.ctx.toTempFilePath) {
-							// 钉钉
-							const ctx = uni.createCanvasContext(canvasId);
-							ctx.toTempFilePath(copyArgs);
-						} else {
-							my.canvasToTempFilePath(copyArgs);
-						}
-						// #endif
-						// #ifndef MP-ALIPAY
-						uni.canvasToTempFilePath(copyArgs, this);
-						// #endif
-					}
-				})
-			}
-			// #endif
-		}
-	};
+import { parent } from '../common/relation'
+import props from './props'
+import { toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo } from './utils'
+//  #ifndef APP-NVUE
+import { canIUseCanvas2d, isPC } from './utils'
+import Painter from './painter'
+// import Painter from '@painter'
+const nvue = {}
+//  #endif
+//  #ifdef APP-NVUE
+import nvue from './nvue'
+//  #endif
+export default {
+  name: 'lime-painter',
+  mixins: [props, parent('painter'), nvue],
+  data() {
+    return {
+      use2dCanvas: false,
+      canvasHeight: 150,
+      canvasWidth: null,
+      parentWidth: 0,
+      inited: false,
+      progress: 0,
+      firstRender: 0,
+      done: false,
+      tasks: []
+    }
+  },
+  computed: {
+    styles() {
+      return `${this.size}${this.customStyle || ''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
+    },
+    canvasId() {
+      return `l-painter${(this._ && this._.uid) || this._uid}`
+    },
+    size() {
+      if (this.boardWidth && this.boardHeight) {
+        return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`
+      }
+    },
+    dpr() {
+      return this.pixelRatio || uni.getSystemInfoSync().pixelRatio
+    },
+    boardWidth() {
+      const { width = 0 } = (this.elements && this.elements.css) || this.elements || this
+      const w = toPx(width || this.width)
+      return w || Math.max(w, toPx(this.canvasWidth))
+    },
+    boardHeight() {
+      const { height = 0 } = (this.elements && this.elements.css) || this.elements || this
+      const h = toPx(height || this.height)
+      return h || Math.max(h, toPx(this.canvasHeight))
+    },
+    hasBoard() {
+      return this.board && Object.keys(this.board).length
+    },
+    elements() {
+      return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
+    }
+  },
+  created() {
+    this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
+  },
+  async mounted() {
+    await sleep(30)
+    await this.getParentWeith()
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$watch('elements', this.watchRender, {
+          deep: true,
+          immediate: true
+        })
+      }, 30)
+    })
+  },
+  // #ifdef VUE3
+  unmounted() {
+    this.done = false
+    this.inited = false
+    this.firstRender = 0
+    this.progress = 0
+    this.painter = null
+    clearTimeout(this.rendertimer)
+  },
+  // #endif
+  // #ifdef VUE2
+  destroyed() {
+    this.done = false
+    this.inited = false
+    this.firstRender = 0
+    this.progress = 0
+    this.painter = null
+    clearTimeout(this.rendertimer)
+  },
+  // #endif
+  methods: {
+    async watchRender(val, old) {
+      if (
+        !val ||
+        !val.views ||
+        (!this.firstRender ? !val.views.length : !this.firstRender) ||
+        !Object.keys(val).length ||
+        JSON.stringify(val) == JSON.stringify(old)
+      )
+        return
+      this.firstRender = 1
+      this.progress = 0
+      this.done = false
+      clearTimeout(this.rendertimer)
+      this.rendertimer = setTimeout(() => {
+        this.render(val)
+      }, this.beforeDelay)
+    },
+    async setFilePath(path, param) {
+      let filePath = path
+      const { pathType = this.pathType } = param || this
+      if (pathType == 'base64' && !isBase64(path)) {
+        filePath = await pathToBase64(path)
+      } else if (pathType == 'url' && isBase64(path)) {
+        filePath = await base64ToPath(path)
+      }
+      if (param && param.isEmit) {
+        this.$emit('success', filePath)
+      }
+      return filePath
+    },
+    async getSize(args) {
+      const { width } = args.css || args
+      const { height } = args.css || args
+      if (!this.size) {
+        if (width || height) {
+          this.canvasWidth = width || this.canvasWidth
+          this.canvasHeight = height || this.canvasHeight
+          await sleep(30)
+        } else {
+          await this.getParentWeith()
+        }
+      }
+    },
+    canvasToTempFilePathSync(args) {
+      // this.stopWatch && this.stopWatch()
+      // this.stopWatch = this.$watch('done', (v) => {
+      // 	if (v) {
+      // 		this.canvasToTempFilePath(args)
+      // 		this.stopWatch && this.stopWatch()
+      // 	}
+      // }, {
+      // 	immediate: true
+      // })
+      this.tasks.push(args)
+      if (this.done) {
+        this.runTask()
+      }
+    },
+    runTask() {
+      while (this.tasks.length) {
+        const task = this.tasks.shift()
+        this.canvasToTempFilePath(task)
+      }
+    },
+    // #ifndef APP-NVUE
+    getParentWeith() {
+      return new Promise(resolve => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select(`.lime-painter`)
+          .boundingClientRect()
+          .exec(res => {
+            const { width, height } = res[0] || {}
+            this.parentWidth = Math.ceil(width || 0)
+            this.canvasWidth = this.parentWidth || 300
+            this.canvasHeight = height || this.canvasHeight || 150
+            resolve(res[0])
+          })
+      })
+    },
+    async render(args = {}) {
+      if (!Object.keys(args).length) {
+        return console.error('空对象')
+      }
+      this.progress = 0
+      this.done = false
+      // #ifdef APP-NVUE
+      this.tempFilePath.length = 0
+      // #endif
+      await this.getSize(args)
+      const ctx = await this.getContext()
+
+      let { use2dCanvas, boardWidth, boardHeight, canvas, afterDelay } = this
+      if (use2dCanvas && !canvas) {
+        return Promise.reject(new Error('canvas 没创建'))
+      }
+      this.boundary = {
+        top: 0,
+        left: 0,
+        width: boardWidth,
+        height: boardHeight
+      }
+      this.painter = null
+      if (!this.painter) {
+        const { width } = args.css || args
+        const { height } = args.css || args
+        if (!width && this.parentWidth) {
+          Object.assign(args, { width: this.parentWidth })
+        }
+        const param = {
+          context: ctx,
+          canvas,
+          width: boardWidth,
+          height: boardHeight,
+          pixelRatio: this.dpr,
+          useCORS: this.useCORS,
+          createImage: getImageInfo.bind(this),
+          performance: this.performance,
+          listen: {
+            onProgress: v => {
+              this.progress = v
+              this.$emit('progress', v)
+            },
+            onEffectFail: err => {
+              this.$emit('faill', err)
+            }
+          }
+        }
+        this.painter = new Painter(param)
+      }
+      try {
+        // vue3 赋值给data会引起图片无法绘制
+        const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
+        this.boundary.height = this.canvasHeight = height
+        this.boundary.width = this.canvasWidth = width
+        await sleep(this.sleep)
+        await this.painter.render()
+        await new Promise(resolve => this.$nextTick(resolve))
+        if (!use2dCanvas) {
+          await this.canvasDraw()
+        }
+        if (afterDelay && use2dCanvas) {
+          await sleep(afterDelay)
+        }
+        this.$emit('done')
+        this.done = true
+        if (this.isCanvasToTempFilePath) {
+          this.canvasToTempFilePath()
+            .then(res => {
+              this.$emit('success', res.tempFilePath)
+            })
+            .catch(err => {
+              this.$emit('fail', new Error(JSON.stringify(err)))
+            })
+        }
+        this.runTask()
+        return Promise.resolve({
+          ctx,
+          draw: this.painter,
+          node: this.node
+        })
+      } catch (e) {
+        //TODO handle the exception
+      }
+    },
+    canvasDraw(flag = false) {
+      return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this.afterDelay)))
+    },
+    async getContext() {
+      if (!this.canvasWidth) {
+        this.$emit('fail', 'painter no size')
+        console.error('[lime-painter]: 给画板或父级设置尺寸')
+        return Promise.reject()
+      }
+      if (this.ctx && this.inited) {
+        return Promise.resolve(this.ctx)
+      }
+      const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this
+      const _getContext = () => {
+        return new Promise(resolve => {
+          uni
+            .createSelectorQuery()
+            .in(this)
+            .select(`#${this.canvasId}`)
+            .boundingClientRect()
+            .exec(res => {
+              if (res) {
+                const ctx = uni.createCanvasContext(this.canvasId, this)
+                if (!this.inited) {
+                  this.inited = true
+                  this.use2dCanvas = false
+                  this.canvas = res
+                }
+
+                // 钉钉小程序框架不支持 measureText 方法，用此方法 mock
+                if (!ctx.measureText) {
+                  function strLen(str) {
+                    let len = 0
+                    for (let i = 0; i < str.length; i++) {
+                      if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
+                        len++
+                      } else {
+                        len += 2
+                      }
+                    }
+                    return len
+                  }
+                  ctx.measureText = text => {
+                    let fontSize = (ctx.state && ctx.state.fontSize) || 12
+                    const font = ctx.__font
+                    if (font && fontSize == 12) {
+                      fontSize = parseInt(font.split(' ')[3], 10)
+                    }
+                    fontSize /= 2
+                    return {
+                      width: strLen(text) * fontSize
+                    }
+                  }
+                }
+
+                // #ifdef MP-ALIPAY
+                ctx.scale(dpr, dpr)
+                // #endif
+                this.ctx = ctx
+                resolve(this.ctx)
+              } else {
+                console.error('[lime-painter] no node')
+              }
+            })
+        })
+      }
+      if (!use2dCanvas) {
+        return _getContext()
+      }
+      return new Promise(resolve => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select(`#${this.canvasId}`)
+          .node()
+          .exec(res => {
+            let { node: canvas } = (res && res[0]) || {}
+            if (canvas) {
+              const ctx = canvas.getContext(type)
+              if (!this.inited) {
+                this.inited = true
+                this.use2dCanvas = true
+                this.canvas = canvas
+              }
+              this.ctx = ctx
+              resolve(this.ctx)
+            } else {
+              console.error('[lime-painter]: no size')
+            }
+          })
+      })
+    },
+    canvasToTempFilePath(args = {}) {
+      return new Promise(async (resolve, reject) => {
+        const { use2dCanvas, canvasId, dpr, fileType, quality } = this
+        const success = async res => {
+          try {
+            const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
+            const result = Object.assign(res, { tempFilePath })
+            args.success && args.success(result)
+            resolve(result)
+          } catch (e) {
+            this.$emit('fail', e)
+          }
+        }
+
+        let { top: y = 0, left: x = 0, width, height } = this.boundary || this
+        // let destWidth = width * dpr;
+        // let destHeight = height * dpr;
+        // #ifdef MP-ALIPAY
+        // width = destWidth;
+        // height = destHeight;
+        // #endif
+
+        const copyArgs = Object.assign(
+          {
+            // x,
+            // y,
+            // width,
+            // height,
+            // destWidth,
+            // destHeight,
+            canvasId,
+            id: canvasId,
+            fileType,
+            quality
+          },
+          args,
+          { success }
+        )
+        // if(this.isPC || use2dCanvas) {
+        // 	copyArgs.canvas = this.canvas
+        // }
+        if (use2dCanvas) {
+          copyArgs.canvas = this.canvas
+          try {
+            // #ifndef MP-ALIPAY
+            const oFilePath = this.canvas.toDataURL(
+              `image/${args.fileType || fileType}`.replace(/pg/, 'peg'),
+              args.quality || quality
+            )
+            if (/data:,/.test(oFilePath)) {
+              uni.canvasToTempFilePath(copyArgs, this)
+            } else {
+              const tempFilePath = await this.setFilePath(oFilePath, args)
+              args.success && args.success({ tempFilePath })
+              resolve({ tempFilePath })
+            }
+            // #endif
+            // #ifdef MP-ALIPAY
+            this.canvas.toTempFilePath(copyArgs)
+            // #endif
+          } catch (e) {
+            args.fail && args.fail(e)
+            reject(e)
+          }
+        } else {
+          // #ifdef MP-ALIPAY
+          if (this.ctx.toTempFilePath) {
+            // 钉钉
+            const ctx = uni.createCanvasContext(canvasId)
+            ctx.toTempFilePath(copyArgs)
+          } else {
+            my.canvasToTempFilePath(copyArgs)
+          }
+          // #endif
+          // #ifndef MP-ALIPAY
+          uni.canvasToTempFilePath(copyArgs, this)
+          // #endif
+        }
+      })
+    }
+    // #endif
+  }
+}
 </script>
 <style>
-	.lime-painter,
-	.lime-painter__canvas {
-		// #ifndef APP-NVUE
-		width: 100%;
-		// #endif
-		// #ifdef APP-NVUE
-		flex: 1;
-		// #endif
-	}
+.lime-painter,
+.lime-painter__canvas {
+  // #ifndef APP-NVUE
+  width: 100%;
+  // #endif
+  // #ifdef APP-NVUE
+  flex: 1;
+  // #endif
+}
 </style>

src/components/lime-painter/components/l-painter/nvue.js

@@ -1,214 +1,203 @@
 // #ifdef APP-NVUE
-import {
-	sleep,
-	getImageInfo,
-	isBase64,
-	networkReg
-} from './utils';
+import { sleep, getImageInfo, isBase64, networkReg } from './utils'
 const dom = weex.requireModule('dom')
-import {
-	version
-} from '../../package.json'
+import { version } from '../../package.json'
 
 export default {
-	data() {
-		return {
-			tempFilePath: [],
-			isInitFile: false,
-			osName: uni.getSystemInfoSync().osName
-		}
-	},
-	methods: {
-		getParentWeith() {
-			return new Promise(resolve => {
-				dom.getComponentRect(this.$refs.limepainter, (res) => {
-					this.parentWidth = Math.ceil(res.size.width)
-					this.canvasWidth = this.canvasWidth || this.parentWidth || 300
-					this.canvasHeight = res.size.height || this.canvasHeight || 150
-					resolve(res.size)
-				})
-			})
-		},
-		onPageFinish() {
-			this.webview = this.$refs.webview
-			this.webview.evalJS(`init(${this.dpr})`)
-		},
-		onMessage(e) {
-			const res = e.detail.data[0] || null;
-			if (res.event) {
-				if (res.event == 'inited') {
-					this.inited = true
-				}
-				if (res.event == 'fail') {
-					this.$emit('fail', res)
-				}
-				if (res.event == 'layoutChange') {
-					const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
-					this.canvasWidth = Math.ceil(data.width);
-					this.canvasHeight = Math.ceil(data.height);
-				}
-				if (res.event == 'progressChange') {
-					this.progress = res.data * 1
-				}
-				if (res.event == 'file') {
-					this.tempFilePath.push(res.data)
-					if (this.tempFilePath.length > 7) {
-						this.tempFilePath.shift()
-					}
-					return
-				}
-				if (res.event == 'success') {
-					if (res.data) {
-						this.tempFilePath.push(res.data)
-						if (this.tempFilePath.length > 8) {
-							this.tempFilePath.shift()
-						}
-						if (this.isCanvasToTempFilePath) {
-							this.setFilePath(this.tempFilePath.join(''), {
-								isEmit: true
-							})
-						}
-					} else {
-						this.$emit('fail', 'canvas no data')
-					}
-					return
-				}
-				this.$emit(res.event, JSON.parse(res.data));
-			} else if (res.file) {
-				this.file = res.data;
-			} else {
-				console.info(res[0])
-			}
-		},
-		getWebViewInited() {
-			if (this.inited) return Promise.resolve(this.inited);
-			return new Promise((resolve) => {
-				this.$watch(
-					'inited',
-					async val => {
-						if (val) {
-							resolve(val)
-						}
-					}, {
-						immediate: true
-					}
-				);
-			})
-		},
-		getTempFilePath() {
-			if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
-			return new Promise((resolve) => {
-				this.$watch(
-					'tempFilePath',
-					async val => {
-						if (val.length == 8) {
-							resolve(val.join(''))
-						}
-					}, {
-						deep: true
-					}
-				);
-			})
-		},
-		getWebViewDone() {
-			if (this.progress == 1) return Promise.resolve(this.progress);
-			return new Promise((resolve) => {
-				this.$watch(
-					'progress',
-					async val => {
-						if (val == 1) {
-							this.$emit('done')
-							this.done = true
-							this.runTask()
-							resolve(val)
-						}
-					}, {
-						immediate: true
-					}
-				);
-			})
-		},
-		async render(args) {
-			try {
-				await this.getSize(args)
-				const {
-					width
-				} = args.css || args
-				if (!width && this.parentWidth) {
-					Object.assign(args, {
-						width: this.parentWidth
-					})
-				}
-				const newNode = await this.calcImage(args);
-				await this.getWebViewInited()
-				this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
-				await this.getWebViewDone()
-				await sleep(this.afterDelay)
-				if (this.isCanvasToTempFilePath) {
-					const params = {
-						fileType: this.fileType,
-						quality: this.quality
-					}
-					this.webview.evalJS(`save(${JSON.stringify(params)})`)
-				}
-				return Promise.resolve()
-			} catch (e) {
-				this.$emit('fail', e)
-			}
-		},
-		async calcImage(args) {
-			let node = JSON.parse(JSON.stringify(args))
-			const urlReg = /url\((.+)\)/
-			const {
-				backgroundImage
-			} = node.css || {}
-			const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
-			const url = node.url || node.src || isBG
-			if (['text', 'qrcode'].includes(node.type)) {
-				return node
-			}
-			if ((node.type === "image" || isBG) && url && !isBase64(url) && (this.osName == 'ios' || !networkReg
-					.test(url))) {
-				let {
-					path
-				} = await getImageInfo(url, true)
-				if (isBG) {
-					node.css.backgroundImage = `url(${path})`
-				} else {
-					node.src = path
-				}
-			} else if (node.views && node.views.length) {
-				for (let i = 0; i < node.views.length; i++) {
-					node.views[i] = await this.calcImage(node.views[i])
-				}
-			}
-			return node
-		},
-		async canvasToTempFilePath(args = {}) {
-			if (!this.inited) {
-				return this.$emit('fail', 'no init')
-			}
-			this.tempFilePath = []
-			if (args.fileType == 'jpg') {
-				args.fileType = 'jpeg'
-			}
+  data() {
+    return {
+      tempFilePath: [],
+      isInitFile: false,
+      osName: uni.getSystemInfoSync().osName
+    }
+  },
+  methods: {
+    getParentWeith() {
+      return new Promise(resolve => {
+        dom.getComponentRect(this.$refs.limepainter, res => {
+          this.parentWidth = Math.ceil(res.size.width)
+          this.canvasWidth = this.canvasWidth || this.parentWidth || 300
+          this.canvasHeight = res.size.height || this.canvasHeight || 150
+          resolve(res.size)
+        })
+      })
+    },
+    onPageFinish() {
+      this.webview = this.$refs.webview
+      this.webview.evalJS(`init(${this.dpr})`)
+    },
+    onMessage(e) {
+      const res = e.detail.data[0] || null
+      if (res.event) {
+        if (res.event == 'inited') {
+          this.inited = true
+        }
+        if (res.event == 'fail') {
+          this.$emit('fail', res)
+        }
+        if (res.event == 'layoutChange') {
+          const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
+          this.canvasWidth = Math.ceil(data.width)
+          this.canvasHeight = Math.ceil(data.height)
+        }
+        if (res.event == 'progressChange') {
+          this.progress = res.data * 1
+        }
+        if (res.event == 'file') {
+          this.tempFilePath.push(res.data)
+          if (this.tempFilePath.length > 7) {
+            this.tempFilePath.shift()
+          }
+          return
+        }
+        if (res.event == 'success') {
+          if (res.data) {
+            this.tempFilePath.push(res.data)
+            if (this.tempFilePath.length > 8) {
+              this.tempFilePath.shift()
+            }
+            if (this.isCanvasToTempFilePath) {
+              this.setFilePath(this.tempFilePath.join(''), {
+                isEmit: true
+              })
+            }
+          } else {
+            this.$emit('fail', 'canvas no data')
+          }
+          return
+        }
+        this.$emit(res.event, JSON.parse(res.data))
+      } else if (res.file) {
+        this.file = res.data
+      } else {
+        console.info(res[0])
+      }
+    },
+    getWebViewInited() {
+      if (this.inited) return Promise.resolve(this.inited)
+      return new Promise(resolve => {
+        this.$watch(
+          'inited',
+          async val => {
+            if (val) {
+              resolve(val)
+            }
+          },
+          {
+            immediate: true
+          }
+        )
+      })
+    },
+    getTempFilePath() {
+      if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
+      return new Promise(resolve => {
+        this.$watch(
+          'tempFilePath',
+          async val => {
+            if (val.length == 8) {
+              resolve(val.join(''))
+            }
+          },
+          {
+            deep: true
+          }
+        )
+      })
+    },
+    getWebViewDone() {
+      if (this.progress == 1) return Promise.resolve(this.progress)
+      return new Promise(resolve => {
+        this.$watch(
+          'progress',
+          async val => {
+            if (val == 1) {
+              this.$emit('done')
+              this.done = true
+              this.runTask()
+              resolve(val)
+            }
+          },
+          {
+            immediate: true
+          }
+        )
+      })
+    },
+    async render(args) {
+      try {
+        await this.getSize(args)
+        const { width } = args.css || args
+        if (!width && this.parentWidth) {
+          Object.assign(args, {
+            width: this.parentWidth
+          })
+        }
+        const newNode = await this.calcImage(args)
+        await this.getWebViewInited()
+        this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
+        await this.getWebViewDone()
+        await sleep(this.afterDelay)
+        if (this.isCanvasToTempFilePath) {
+          const params = {
+            fileType: this.fileType,
+            quality: this.quality
+          }
+          this.webview.evalJS(`save(${JSON.stringify(params)})`)
+        }
+        return Promise.resolve()
+      } catch (e) {
+        this.$emit('fail', e)
+      }
+    },
+    async calcImage(args) {
+      let node = JSON.parse(JSON.stringify(args))
+      const urlReg = /url\((.+)\)/
+      const { backgroundImage } = node.css || {}
+      const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
+      const url = node.url || node.src || isBG
+      if (['text', 'qrcode'].includes(node.type)) {
+        return node
+      }
+      if ((node.type === 'image' || isBG) && url && !isBase64(url) && (this.osName == 'ios' || !networkReg.test(url))) {
+        let { path } = await getImageInfo(url, true)
+        if (isBG) {
+          node.css.backgroundImage = `url(${path})`
+        } else {
+          node.src = path
+        }
+      } else if (node.views && node.views.length) {
+        for (let i = 0; i < node.views.length; i++) {
+          node.views[i] = await this.calcImage(node.views[i])
+        }
+      }
+      return node
+    },
+    async canvasToTempFilePath(args = {}) {
+      if (!this.inited) {
+        return this.$emit('fail', 'no init')
+      }
+      this.tempFilePath = []
+      if (args.fileType == 'jpg') {
+        args.fileType = 'jpeg'
+      }
 
-			this.webview.evalJS(`save(${JSON.stringify(args)})`)
-			try {
-				let tempFilePath = await this.getTempFilePath()
+      this.webview.evalJS(`save(${JSON.stringify(args)})`)
+      try {
+        let tempFilePath = await this.getTempFilePath()
 
-				tempFilePath = await this.setFilePath(tempFilePath, args)
-				args.success({
-					errMsg: "canvasToTempFilePath:ok",
-					tempFilePath
-				})
-			} catch (e) {
-				console.log('e', e)
-				args.fail({
-					error: e
-				})
-			}
-		}
-	}
+        tempFilePath = await this.setFilePath(tempFilePath, args)
+        args.success({
+          errMsg: 'canvasToTempFilePath:ok',
+          tempFilePath
+        })
+      } catch (e) {
+        console.log('e', e)
+        args.fail({
+          error: e
+        })
+      }
+    }
+  }
 }
-// #endif
+// #endif

src/components/lime-painter/components/l-painter/props.js

@@ -1,56 +1,56 @@
 export default {
-	props: {
-		board: Object,
-		pathType: String, // 'base64'、'url'
-		fileType: {
-			type: String,
-			default: 'png'
-		},
-		hidden: Boolean,
-		quality: {
-			type: Number,
-			default: 1
-		},
-		css: [String, Object],
-		// styles: [String, Object],
-		width: [Number, String],
-		height: [Number, String],
-		pixelRatio: Number,
-		customStyle: String,
-		isCanvasToTempFilePath: Boolean,
-		// useCanvasToTempFilePath: Boolean,
-		sleep: {
-			type: Number,
-			default: 1000 / 30
-		},
-		beforeDelay: {
-			type: Number,
-			default: 100
-		},
-		afterDelay: {
-			type: Number,
-			default: 100
-		},
-		performance: Boolean,
-		// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
-		type: {
-			type: String,
-			default: '2d'
-		},
-		// #endif
-		// #ifdef APP-NVUE
-		hybrid: Boolean,
-		timeout: {
-			type: Number,
-			default: 2000
-		},
-		// #endif
-		// #ifdef H5 || APP-PLUS
-		useCORS: Boolean,
-		hidpi: {
-			type: Boolean,
-			default: true
-		}
-		// #endif
-	}
-}
+  props: {
+    board: Object,
+    pathType: String, // 'base64'、'url'
+    fileType: {
+      type: String,
+      default: 'png'
+    },
+    hidden: Boolean,
+    quality: {
+      type: Number,
+      default: 1
+    },
+    css: [String, Object],
+    // styles: [String, Object],
+    width: [Number, String],
+    height: [Number, String],
+    pixelRatio: Number,
+    customStyle: String,
+    isCanvasToTempFilePath: Boolean,
+    // useCanvasToTempFilePath: Boolean,
+    sleep: {
+      type: Number,
+      default: 1000 / 30
+    },
+    beforeDelay: {
+      type: Number,
+      default: 100
+    },
+    afterDelay: {
+      type: Number,
+      default: 100
+    },
+    performance: Boolean,
+    // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
+    type: {
+      type: String,
+      default: '2d'
+    },
+    // #endif
+    // #ifdef APP-NVUE
+    hybrid: Boolean,
+    timeout: {
+      type: Number,
+      default: 2000
+    },
+    // #endif
+    // #ifdef H5 || APP-PLUS
+    useCORS: Boolean,
+    hidpi: {
+      type: Boolean,
+      default: true
+    }
+    // #endif
+  }
+}

src/components/lime-painter/components/l-painter/utils.js

@@ -1,192 +1,201 @@
-export const networkReg = /^(http|\/\/)/;
-export const isBase64 = (path) => /^data:image\/(\w+);base64/.test(path);
+export const networkReg = /^(http|\/\/)/
+export const isBase64 = path => /^data:image\/(\w+);base64/.test(path)
 export function sleep(delay) {
-	return new Promise(resolve => setTimeout(resolve, delay))
+  return new Promise(resolve => setTimeout(resolve, delay))
 }
-let {platform, SDKVersion} = uni.getSystemInfoSync() 
+let { platform, SDKVersion } = uni.getSystemInfoSync()
 export const isPC = /windows|mac/.test(platform)
 // 缓存图片
 let cache = {}
 export function isNumber(value) {
-	return /^-?\d+(\.\d+)?$/.test(value);
+  return /^-?\d+(\.\d+)?$/.test(value)
 }
 export function toPx(value, baseSize, isDecimal = false) {
-	// 如果是数字
-	if (typeof value === 'number') {
-		return value
-	}
-	// 如果是字符串数字
-	if (isNumber(value)) {
-		return value * 1
-	}
-	// 如果有单位
-	if (typeof value === 'string') {
-		const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
-		const results = reg.exec(value);
-		if (!value || !results) {
-			return 0;
-		}
-		const unit = results[3];
-		value = parseFloat(value);
-		let res = 0;
-		if (unit === 'rpx') {
-			res = uni.upx2px(value);
-		} else if (unit === 'px') {
-			res = value * 1;
-		} else if (unit === '%') {
-			res = value * toPx(baseSize) / 100;
-		} else if (unit === 'em') {
-			res = value * toPx(baseSize || 14);
-		}
-		return isDecimal ? res.toFixed(2) * 1 : Math.round(res);
-	}
-	return 0
+  // 如果是数字
+  if (typeof value === 'number') {
+    return value
+  }
+  // 如果是字符串数字
+  if (isNumber(value)) {
+    return value * 1
+  }
+  // 如果有单位
+  if (typeof value === 'string') {
+    const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+    const results = reg.exec(value)
+    if (!value || !results) {
+      return 0
+    }
+    const unit = results[3]
+    value = parseFloat(value)
+    let res = 0
+    if (unit === 'rpx') {
+      res = uni.upx2px(value)
+    } else if (unit === 'px') {
+      res = value * 1
+    } else if (unit === '%') {
+      res = (value * toPx(baseSize)) / 100
+    } else if (unit === 'em') {
+      res = value * toPx(baseSize || 14)
+    }
+    return isDecimal ? res.toFixed(2) * 1 : Math.round(res)
+  }
+  return 0
 }
 
 // 计算版本
 export function compareVersion(v1, v2) {
-	v1 = v1.split('.')
-	v2 = v2.split('.')
-	const len = Math.max(v1.length, v2.length)
-	while (v1.length < len) {
-		v1.push('0')
-	}
-	while (v2.length < len) {
-		v2.push('0')
-	}
-	for (let i = 0; i < len; i++) {
-		const num1 = parseInt(v1[i], 10)
-		const num2 = parseInt(v2[i], 10)
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10)
+    const num2 = parseInt(v2[i], 10)
 
-		if (num1 > num2) {
-			return 1
-		} else if (num1 < num2) {
-			return -1
-		}
-	}
-	return 0
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
 }
 
 function gte(version) {
   // #ifdef MP-ALIPAY
   SDKVersion = my.SDKVersion
   // #endif
-  return compareVersion(SDKVersion, version) >= 0;
+  return compareVersion(SDKVersion, version) >= 0
 }
 export function canIUseCanvas2d() {
-	// #ifdef MP-WEIXIN
-	return gte('2.9.2');
-	// #endif
-	// #ifdef MP-ALIPAY
-	return gte('2.7.15');
-	// #endif
-	// #ifdef MP-TOUTIAO
-	return gte('1.78.0');
-	// #endif
-	return false
+  // #ifdef MP-WEIXIN
+  return gte('2.9.2')
+  // #endif
+  // #ifdef MP-ALIPAY
+  return gte('2.7.15')
+  // #endif
+  // #ifdef MP-TOUTIAO
+  return gte('1.78.0')
+  // #endif
+  return false
 }
 
 // #ifdef MP
 export const prefix = () => {
-	// #ifdef MP-TOUTIAO
-	return tt
-	// #endif
-	// #ifdef MP-WEIXIN
-	return wx
-	// #endif
-	// #ifdef MP-BAIDU
-	return swan
-	// #endif
-	// #ifdef MP-ALIPAY
-	return my
-	// #endif
-	// #ifdef MP-QQ
-	return qq
-	// #endif
-	// #ifdef MP-360
-	return qh
-	// #endif
+  // #ifdef MP-TOUTIAO
+  return tt
+  // #endif
+  // #ifdef MP-WEIXIN
+  return wx
+  // #endif
+  // #ifdef MP-BAIDU
+  return swan
+  // #endif
+  // #ifdef MP-ALIPAY
+  return my
+  // #endif
+  // #ifdef MP-QQ
+  return qq
+  // #endif
+  // #ifdef MP-360
+  return qh
+  // #endif
 }
 // #endif
 
-
-
 /**
  * base64转路径
  * @param {Object} base64
  */
 export function base64ToPath(base64) {
-	const [, format] = /^data:image\/(\w+);base64,/.exec(base64) || [];
+  const [, format] = /^data:image\/(\w+);base64,/.exec(base64) || []
 
-	return new Promise((resolve, reject) => {
-		// #ifdef MP
-		const fs = uni.getFileSystemManager()
-		//自定义文件名
-		if (!format) {
-			reject(new Error('ERROR_BASE64SRC_PARSE'))
-		}
-		const time = new Date().getTime();
-		let pre = prefix()
-		// #ifdef MP-TOUTIAO
-		const filePath = `${pre.getEnvInfoSync().common.USER_DATA_PATH}/${time}.${format}`
-		// #endif
-		// #ifndef MP-TOUTIAO
-		const filePath = `${pre.env.USER_DATA_PATH}/${time}.${format}`
-		// #endif
-		fs.writeFile({
-			filePath,
-			data: base64.split(',')[1],
-			encoding: 'base64',
-			success() {
-				resolve(filePath)
-			},
-			fail(err) {
-				console.error(err)
-				reject(err)
-			}
-		})
-		// #endif
+  return new Promise((resolve, reject) => {
+    // #ifdef MP
+    const fs = uni.getFileSystemManager()
+    //自定义文件名
+    if (!format) {
+      reject(new Error('ERROR_BASE64SRC_PARSE'))
+    }
+    const time = new Date().getTime()
+    let pre = prefix()
+    // #ifdef MP-TOUTIAO
+    const filePath = `${pre.getEnvInfoSync().common.USER_DATA_PATH}/${time}.${format}`
+    // #endif
+    // #ifndef MP-TOUTIAO
+    const filePath = `${pre.env.USER_DATA_PATH}/${time}.${format}`
+    // #endif
+    fs.writeFile({
+      filePath,
+      data: base64.split(',')[1],
+      encoding: 'base64',
+      success() {
+        resolve(filePath)
+      },
+      fail(err) {
+        console.error(err)
+        reject(err)
+      }
+    })
+    // #endif
 
-		// #ifdef H5
-		// mime类型
-		let mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
-		//base64 解码
-		let byteString = atob(base64.split(',')[1]);
-		//创建缓冲数组
-		let arrayBuffer = new ArrayBuffer(byteString.length);
-		//创建视图
-		let intArray = new Uint8Array(arrayBuffer);
-		for (let i = 0; i < byteString.length; i++) {
-			intArray[i] = byteString.charCodeAt(i);
-		}
-		resolve(URL.createObjectURL(new Blob([intArray], {
-			type: mimeString
-		})))
-		// #endif
+    // #ifdef H5
+    // mime类型
+    let mimeString = base64.split(',')[0].split(':')[1].split(';')[0]
+    //base64 解码
+    let byteString = atob(base64.split(',')[1])
+    //创建缓冲数组
+    let arrayBuffer = new ArrayBuffer(byteString.length)
+    //创建视图
+    let intArray = new Uint8Array(arrayBuffer)
+    for (let i = 0; i < byteString.length; i++) {
+      intArray[i] = byteString.charCodeAt(i)
+    }
+    resolve(
+      URL.createObjectURL(
+        new Blob([intArray], {
+          type: mimeString
+        })
+      )
+    )
+    // #endif
 
-		// #ifdef APP-PLUS
-		const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
-		bitmap.loadBase64Data(base64, () => {
-			if (!format) {
-				reject(new Error('ERROR_BASE64SRC_PARSE'))
-			}
-			const time = new Date().getTime();
-			const filePath = `_doc/uniapp_temp/${time}.${format}`
-			bitmap.save(filePath, {},
-				() => {
-					bitmap.clear()
-					resolve(filePath)
-				},
-				(error) => {
-					bitmap.clear()
-					reject(error)
-				})
-		}, (error) => {
-			bitmap.clear()
-			reject(error)
-		})
-		// #endif
-	})
+    // #ifdef APP-PLUS
+    const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
+    bitmap.loadBase64Data(
+      base64,
+      () => {
+        if (!format) {
+          reject(new Error('ERROR_BASE64SRC_PARSE'))
+        }
+        const time = new Date().getTime()
+        const filePath = `_doc/uniapp_temp/${time}.${format}`
+        bitmap.save(
+          filePath,
+          {},
+          () => {
+            bitmap.clear()
+            resolve(filePath)
+          },
+          error => {
+            bitmap.clear()
+            reject(error)
+          }
+        )
+      },
+      error => {
+        bitmap.clear()
+        reject(error)
+      }
+    )
+    // #endif
+  })
 }
 
 /**
@@ -194,175 +203,180 @@ export function base64ToPath(base64) {
  * @param {Object} string
  */
 export function pathToBase64(path) {
-	if (/^data:/.test(path)) return path
-	return new Promise((resolve, reject) => {
-		// #ifdef H5
-		let image = new Image();
-		image.setAttribute("crossOrigin", 'Anonymous');
-		image.onload = function() {
-			let canvas = document.createElement('canvas');
-			canvas.width = this.naturalWidth;
-			canvas.height = this.naturalHeight;
-			canvas.getContext('2d').drawImage(image, 0, 0);
-			let result = canvas.toDataURL('image/png')
-			resolve(result);
-			canvas.height = canvas.width = 0
-		}
-		image.src = path + '?v=' + Math.random()
-		image.onerror = (error) => {
-			reject(error);
-		};
-		// #endif
+  if (/^data:/.test(path)) return path
+  return new Promise((resolve, reject) => {
+    // #ifdef H5
+    let image = new Image()
+    image.setAttribute('crossOrigin', 'Anonymous')
+    image.onload = function () {
+      let canvas = document.createElement('canvas')
+      canvas.width = this.naturalWidth
+      canvas.height = this.naturalHeight
+      canvas.getContext('2d').drawImage(image, 0, 0)
+      let result = canvas.toDataURL('image/png')
+      resolve(result)
+      canvas.height = canvas.width = 0
+    }
+    image.src = path + '?v=' + Math.random()
+    image.onerror = error => {
+      reject(error)
+    }
+    // #endif
 
-		// #ifdef MP
-		if (uni.canIUse('getFileSystemManager')) {
-			uni.getFileSystemManager().readFile({
-				filePath: path,
-				encoding: 'base64',
-				success: (res) => {
-					resolve('data:image/png;base64,' + res.data)
-				},
-				fail: (error) => {
-					console.error({error, path})
-					reject(error)
-				}
-			})
-		}
-		// #endif
+    // #ifdef MP
+    if (uni.canIUse('getFileSystemManager')) {
+      uni.getFileSystemManager().readFile({
+        filePath: path,
+        encoding: 'base64',
+        success: res => {
+          resolve('data:image/png;base64,' + res.data)
+        },
+        fail: error => {
+          console.error({ error, path })
+          reject(error)
+        }
+      })
+    }
+    // #endif
 
-		// #ifdef APP-PLUS
-		plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), (entry) => {
-			entry.file((file) => {
-				const fileReader = new plus.io.FileReader()
-				fileReader.onload = (data) => {
-					resolve(data.target.result)
-				}
-				fileReader.onerror = (error) => {
-					reject(error)
-				}
-				fileReader.readAsDataURL(file)
-			}, reject)
-		}, reject)
-		// #endif
-	})
+    // #ifdef APP-PLUS
+    plus.io.resolveLocalFileSystemURL(
+      getLocalFilePath(path),
+      entry => {
+        entry.file(file => {
+          const fileReader = new plus.io.FileReader()
+          fileReader.onload = data => {
+            resolve(data.target.result)
+          }
+          fileReader.onerror = error => {
+            reject(error)
+          }
+          fileReader.readAsDataURL(file)
+        }, reject)
+      },
+      reject
+    )
+    // #endif
+  })
 }
 
-
-
 export function getImageInfo(path, useCORS) {
-	const isCanvas2D = this && this.canvas && this.canvas.createImage
-	return new Promise(async (resolve, reject) => {
-		// let time = +new Date()
-		let src = path.replace(/^@\//,'/')
-		if (cache[path] && cache[path].errMsg) {
-			resolve(cache[path])
-		} else {
-			try {
-				// #ifdef MP || APP-PLUS
-				if (isBase64(path) && (isCanvas2D ? isPC : true)) {
-					src = await base64ToPath(path)
-				}
-				// #endif
-				// #ifdef H5
-				if(useCORS) {
-					src = await pathToBase64(path)
-				}
-				// #endif
-			} catch (error) {
-				reject({
-					...error,
-					src
-				})
-			}
-			// #ifndef APP-NVUE
-			if(isCanvas2D && !isPC) {
-				const img = this.canvas.createImage()
-				img.onload = function() {
-					const image = {
-						path: img,
-						width:  img.width,
-						height:  img.height
-					}
-					cache[path] = image
-					resolve(cache[path])
-				}
-				img.onerror = function(err) {
-					reject({err,path})
-				}
-				img.src = src
-				return
-			}
-			// #endif
-			uni.getImageInfo({
-				src,
-				success: (image) => {
-					const localReg = /^\.|^\/(?=[^\/])/;
-					// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
-					image.path = localReg.test(src) ?  `/${image.path}` : image.path;
-					// #endif
-					if(isCanvas2D) {
-						const img = this.canvas.createImage()
-						img.onload = function() {
-							image.path = img
-							cache[path] = image
-							resolve(cache[path])
-						}
-						img.onerror = function(err) {
-							reject({err,path})
-						}
-						img.src = src
-						return
-					}
-					// #ifdef APP-PLUS
-					// console.log('getImageInfo', +new Date() - time)
-					// ios 比较严格 可能需要设置跨域
-					if(uni.getSystemInfoSync().osName == 'ios' && useCORS) {
-						pathToBase64(image.path).then(base64 => {
-							image.path = base64
-							cache[path] = image
-							resolve(cache[path])
-						}).catch(err => {
-							console.error({err, path})
-							reject({err,path})
-						})
-						return
-					}
-					// #endif
-					cache[path] = image
-					resolve(cache[path])
-				},
-				fail(err) {
-					console.error({err, path})
-					reject({err,path})
-				}
-			})
-		}
-	})
+  const isCanvas2D = this && this.canvas && this.canvas.createImage
+  return new Promise(async (resolve, reject) => {
+    // let time = +new Date()
+    let src = path.replace(/^@\//, '/')
+    if (cache[path] && cache[path].errMsg) {
+      resolve(cache[path])
+    } else {
+      try {
+        // #ifdef MP || APP-PLUS
+        if (isBase64(path) && (isCanvas2D ? isPC : true)) {
+          src = await base64ToPath(path)
+        }
+        // #endif
+        // #ifdef H5
+        if (useCORS) {
+          src = await pathToBase64(path)
+        }
+        // #endif
+      } catch (error) {
+        reject({
+          ...error,
+          src
+        })
+      }
+      // #ifndef APP-NVUE
+      if (isCanvas2D && !isPC) {
+        const img = this.canvas.createImage()
+        img.onload = function () {
+          const image = {
+            path: img,
+            width: img.width,
+            height: img.height
+          }
+          cache[path] = image
+          resolve(cache[path])
+        }
+        img.onerror = function (err) {
+          reject({ err, path })
+        }
+        img.src = src
+        return
+      }
+      // #endif
+      uni.getImageInfo({
+        src,
+        success: image => {
+          const localReg = /^\.|^\/(?=[^\/])/
+          // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+          image.path = localReg.test(src) ? `/${image.path}` : image.path
+          // #endif
+          if (isCanvas2D) {
+            const img = this.canvas.createImage()
+            img.onload = function () {
+              image.path = img
+              cache[path] = image
+              resolve(cache[path])
+            }
+            img.onerror = function (err) {
+              reject({ err, path })
+            }
+            img.src = src
+            return
+          }
+          // #ifdef APP-PLUS
+          // console.log('getImageInfo', +new Date() - time)
+          // ios 比较严格 可能需要设置跨域
+          if (uni.getSystemInfoSync().osName == 'ios' && useCORS) {
+            pathToBase64(image.path)
+              .then(base64 => {
+                image.path = base64
+                cache[path] = image
+                resolve(cache[path])
+              })
+              .catch(err => {
+                console.error({ err, path })
+                reject({ err, path })
+              })
+            return
+          }
+          // #endif
+          cache[path] = image
+          resolve(cache[path])
+        },
+        fail(err) {
+          console.error({ err, path })
+          reject({ err, path })
+        }
+      })
+    }
+  })
 }
 
-
 // #ifdef APP-PLUS
-const getLocalFilePath = (path) => {
-	if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path
-		.indexOf('_downloads') === 0) {
-		return path
-	}
-	if (path.indexOf('file://') === 0) {
-		return path
-	}
-	if (path.indexOf('/storage/emulated/0/') === 0) {
-		return path
-	}
-	if (path.indexOf('/') === 0) {
-		const localFilePath = plus.io.convertAbsoluteFileSystem(path)
-		if (localFilePath !== path) {
-			return localFilePath
-		} else {
-			path = path.substr(1)
-		}
-	}
-	return '_www/' + path
+const getLocalFilePath = path => {
+  if (
+    path.indexOf('_www') === 0 ||
+    path.indexOf('_doc') === 0 ||
+    path.indexOf('_documents') === 0 ||
+    path.indexOf('_downloads') === 0
+  ) {
+    return path
+  }
+  if (path.indexOf('file://') === 0) {
+    return path
+  }
+  if (path.indexOf('/storage/emulated/0/') === 0) {
+    return path
+  }
+  if (path.indexOf('/') === 0) {
+    const localFilePath = plus.io.convertAbsoluteFileSystem(path)
+    if (localFilePath !== path) {
+      return localFilePath
+    } else {
+      path = path.substr(1)
+    }
+  }
+  return '_www/' + path
 }
 // #endif
-
-

src/pages/repairConfirmation.vue

@@ -22,13 +22,13 @@
               <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                 <l-painter-text
                   text="鉴于格力电器售后服务过程中存在用户未自行提供产品标配之外辅材配件（如：空气开关、铜管、支架、地架等格力指定专供辅材及配件）需要用户额外付费配置的现象，按照格力电器售后服务要求：为避免安装维修人员使用劣质辅材配件影响产品质量有损品牌名誉以及乱收费从而扰乱格力售后服务市场，本人承诺：本人务必在指定售后服务网点自行采购辅材配件以供备用，在从事安装工单或维修工单中涉及产品标配以外辅材配件按照指导价销售给用户并需要将应当收取用户的辅材配件费用录入系统内对应工单，并要用户扫码付款（即“电子支付”）后，再由广州嘉讯茂机电工程有限公司通过微信分账形式直接支付到本人微信钱包中，产生的微信支付手续费（辅材配件费用的千分之六）由本人自行承担。"
-                  css="font-size: 26rpx;text-indent: 2em;"
+                  css="font-size: 26rpx;text-indent: 2em;display: inline;"
                 />
               </l-painter-view>
               <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                 <l-painter-text
                   text="本人通过售卖自行购入的安装维修服务过程中需使用到非产品标配辅材配件，此费用由用户在格力售后系统平台结算后，平台通过微信分账形式返还给本人，产生的微信支付手续费（辅材配件费用的千分之六）由本人自行承担。                                "
-                  css="font-size: 26rpx;text-indent: 2em;"
+                  css="font-size: 26rpx;text-indent: 2em;display: inline;"
                 />
               </l-painter-view>
               <l-painter-view
@@ -75,7 +75,7 @@
               <l-painter-text :text="getNowDate()" css="font-size: 28rpx;" />
             </l-painter-view>
             <l-painter-view css="margin-top: 20rpx;">
-              <l-painter-text text="工程师签名：" css="font-size: 28rpx; color: #666666;" />
+              <l-painter-text text="服务人员签名：" css="font-size: 28rpx; color: #666666;" />
             </l-painter-view>
             <template v-if="signNameUrl">
               <l-painter-image