fix(小程序): 顶部UI修复; 钢材列表UI修复; mpvue-echarts报错修复

klren0312 · Sep 19, 2019 · ba1ad77 · ba1ad77
1 parent 854f146
commit ba1ad77
Show file tree

Hide file tree

Showing 44 changed files with 1,597 additions and 1,407 deletions.
diff --git a/Weapp/App.vue b/Weapp/App.vue
@@ -4,7 +4,10 @@
 	export default {
 		onLaunch: function () {
 			console.log('App Launch')
-			this.getInfo()
+			this.getStatusBarInfo()
+			// #ifdef MP-WEIXIN
+			this.getInfo()			
+			// #endif
 		},
 		onShow: function () {
 			console.log('App Show')
@@ -35,6 +38,32 @@
 						}
 					}
 				})
+			},
+			getStatusBarInfo () {
+				uni.getSystemInfo({
+					success: function(e) {
+						// #ifndef MP
+						Vue.prototype.StatusBar = e.statusBarHeight;
+						if (e.platform == 'android') {
+							Vue.prototype.CustomBar = e.statusBarHeight + 50;
+						} else {
+							Vue.prototype.CustomBar = e.statusBarHeight + 45;
+						};
+						// #endif
+				
+						// #ifdef MP-WEIXIN
+						Vue.prototype.StatusBar = e.statusBarHeight;
+						let custom = wx.getMenuButtonBoundingClientRect();
+						Vue.prototype.Custom = custom;
+						Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+						// #endif		
+				
+						// #ifdef MP-ALIPAY
+						Vue.prototype.StatusBar = e.statusBarHeight;
+						Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+						// #endif
+					}
+				})
 			}
 		}
 	}

diff --git a/Weapp/components/mpvue-echarts/echarts.vue b/Weapp/components/mpvue-echarts/echarts.vue
@@ -1,152 +1,144 @@
 <template>
-  <canvas
-    v-if="canvasId"
-    class="ec-canvas"
-    :id="canvasId"
-    :canvasId="canvasId"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-    @touchend="touchEnd"
-    @error="error">
-  </canvas>
+	<canvas v-if="canvasId" class="ec-canvas" :id="canvasId" :canvasId="canvasId" @touchstart="touchStart" @touchmove="touchMove"
+	 @touchend="touchEnd" @error="error"></canvas>
 </template>
 
 <script>
-import WxCanvas from './wx-canvas';
+	import WxCanvas from './wx-canvas';
 
-export default {
-  props: {
-    echarts: {
-      required: true,
-      type: Object,
-      default() {
-        return null;
-      },
-    },
-    onInit: {
-      required: true,
-      type: Function,
-      default: null,
-    },
-    canvasId: {
-      type: String,
-      default: 'ec-canvas',
-    },
-    lazyLoad: {
-      type: Boolean,
-      default: false,
-    },
-    disableTouch: {
-      type: Boolean,
-      default: false,
-    },
-    throttleTouch: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  onReady() {
-    if (!this.echarts) {
-      console.warn('组件需绑定 echarts 变量，例：<ec-canvas id="mychart-dom-bar" '
-        + 'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>');
-      return;
-    }
+	export default {
+		props: {
+			canvasId: {
+				type: String,
+				default: 'ec-canvas'
+			},
+			lazyLoad: {
+				type: Boolean,
+				default: false
+			},
+			disableTouch: {
+				type: Boolean,
+				default: false
+			},
+			throttleTouch: {
+				type: Boolean,
+				default: false
+			}
+		},
+		// #ifdef H5
+		mounted() {
+			if (!this.lazyLoad) this.init();
+		},
+		// #endif
+		// #ifndef H5
+		onReady() {
+			if (!this.lazyLoad) this.init();
+		},
+		// #endif
+		methods: {
+			setChart(chart) {
+				this.chart = chart
+			},
+			init() {
+				const {
+					canvasId
+				} = this;
+				this.ctx = wx.createCanvasContext(canvasId, this);
 
-    if (!this.lazyLoad) this.init();
-  },
-  methods: {
-    init() {
-      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
-      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
-        || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
-      if (!isValid) {
-        console.error('微信基础库版本过低，需大于等于 1.9.91。'
-          + '参见：https://github.com/ecomfe/echarts-for-weixin'
-          + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
-        return;
-      }
+				this.canvas = new WxCanvas(this.ctx, canvasId);
 
-      if (!this.onInit) {
-        console.warn('请传入 onInit 函数进行初始化');
-        return;
-      }
+				const query = wx.createSelectorQuery().in(this);
+				query
+					.select(`#${canvasId}`)
+					.boundingClientRect(res => {
+						if (!res) {
+							setTimeout(() => this.init(), 50);
+							return;
+						}
+						// this.$emit('onInit', {
+						// 	width: res.width,
+						// 	height: res.height
+						// });
+						this.$emit('onInit', {
+							width: res.width,
+							height: res.height,
+							canvas: this.canvas
+						});
+					})
+					.exec();
+			},
+			canvasToTempFilePath(opt) {
+				const {
+					canvasId
+				} = this;
+				this.ctx.draw(true, () => {
+					wx.canvasToTempFilePath({
+						canvasId,
+						...opt
+					});
+				});
+			},
+			touchStart(e) {
+				const {
+					disableTouch,
+					chart
+				} = this;
+				if (disableTouch || !chart || !e.mp.touches.length) return;
+				const touch = e.mp.touches[0];
+				chart._zr.handler.dispatch('mousedown', {
+					zrX: touch.x,
+					zrY: touch.y
+				});
+				chart._zr.handler.dispatch('mousemove', {
+					zrX: touch.x,
+					zrY: touch.y
+				});
+			},
+			touchMove(e) {
+				const {
+					disableTouch,
+					throttleTouch,
+					chart,
+					lastMoveTime
+				} = this;
+				if (disableTouch || !chart || !e.mp.touches.length) return;
 
-      const { canvasId } = this;
-      this.ctx = wx.createCanvasContext(canvasId);
+				if (throttleTouch) {
+					const currMoveTime = Date.now();
+					if (currMoveTime - lastMoveTime < 240) return;
+					this.lastMoveTime = currMoveTime;
+				}
 
-      const canvas = new WxCanvas(this.ctx, canvasId);
-
-      this.echarts.setCanvasCreator(() => canvas);
-
-      const query = wx.createSelectorQuery();
-      query.select(`#${canvasId}`).boundingClientRect((res) => {
-        if (!res) {
-          setTimeout(() => this.init(), 50);
-          return;
-        }
-        this.chart = this.onInit(canvas, res.width, res.height);
-      }).exec();
-    },
-    canvasToTempFilePath(opt) {
-      const { canvasId } = this;
-      this.ctx.draw(true, () => {
-        wx.canvasToTempFilePath({
-          canvasId,
-          ...opt,
-        });
-      });
-    },
-    touchStart(e) {
-      const { disableTouch, chart } = this;
-      if (disableTouch || !chart || !e.mp.touches.length) return;
-      const touch = e.mp.touches[0];
-      chart._zr.handler.dispatch('mousedown', {
-        zrX: touch.x,
-        zrY: touch.y,
-      });
-      chart._zr.handler.dispatch('mousemove', {
-        zrX: touch.x,
-        zrY: touch.y,
-      });
-    },
-    touchMove(e) {
-      const {
-        disableTouch, throttleTouch, chart, lastMoveTime,
-      } = this;
-      if (disableTouch || !chart || !e.mp.touches.length) return;
-
-      if (throttleTouch) {
-        const currMoveTime = Date.now();
-        if (currMoveTime - lastMoveTime < 240) return;
-        this.lastMoveTime = currMoveTime;
-      }
-
-      const touch = e.mp.touches[0];
-      chart._zr.handler.dispatch('mousemove', {
-        zrX: touch.x,
-        zrY: touch.y,
-      });
-    },
-    touchEnd(e) {
-      const { disableTouch, chart } = this;
-      if (disableTouch || !chart) return;
-      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
-      chart._zr.handler.dispatch('mouseup', {
-        zrX: touch.x,
-        zrY: touch.y,
-      });
-      chart._zr.handler.dispatch('click', {
-        zrX: touch.x,
-        zrY: touch.y,
-      });
-    },
-  },
-};
+				const touch = e.mp.touches[0];
+				chart._zr.handler.dispatch('mousemove', {
+					zrX: touch.x,
+					zrY: touch.y
+				});
+			},
+			touchEnd(e) {
+				const {
+					disableTouch,
+					chart
+				} = this;
+				if (disableTouch || !chart) return;
+				const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
+				chart._zr.handler.dispatch('mouseup', {
+					zrX: touch.x,
+					zrY: touch.y
+				});
+				chart._zr.handler.dispatch('click', {
+					zrX: touch.x,
+					zrY: touch.y
+				});
+			}
+		}
+	};
 </script>
 
 <style scoped>
-.ec-canvas {
-  width: 100%;
-  height: 100%;
-}
+	.ec-canvas {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+	}
 </style>
diff --git a/Weapp/components/mpvue-echarts/wx-canvas.js b/Weapp/components/mpvue-echarts/wx-canvas.js
@@ -70,4 +70,4 @@ export default class WxCanvas {
       };
     });
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,4 +70,4 @@ export default class WxCanvas { @@
           };
         });
       }
-    }
+    }