jufubao-base 1.0.243-beta201 → 1.0.243-beta202

package/src/components/JfbBaseSavingDetail/components/echarts.vue

@@ -0,0 +1,254 @@
+<template>
+	<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
+	<canvas type="2d" class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart"
+		@touchmove="touchMove" @touchend="touchEnd" />
+	<!-- #endif -->
+	<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+	<canvas :key="canvasId" style="border-radius: 20rpx;" class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart" @touchmove="touchMove"
+		@touchend="touchEnd" />
+	<!-- #endif -->
+
+</template>
+<script>
+	
+	/**
+	 * echartsForUniApp echart兼容uni-app
+	 * @description echart兼容uni-app
+	 * @property {Object} option 图表数据
+	 * @property {String} canvasId 画布id
+	 * @example <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
+	 */
+	import WxCanvas from './wx-canvas.js';
+	import * as echarts from './echarts.min.js';	
+	
+	var chartList = {}
+	export default {
+		props: {
+			canvasId: {
+				type: String,
+				default: 'echarts'
+			},
+			option: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+		},
+		watch: {
+			option(newValue, oldValue) {
+				if(newValue.series){
+					this.initChart(newValue)
+				}
+			}
+		},
+		data() {
+			return {
+				ctx:null
+			}
+		},
+		
+		mounted() {
+			// Disable prograssive because drawImage doesn't support DOM as parameter
+			// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+			console.log(echarts,'echartsechartsecharts');
+			
+			echarts.registerPreprocessor(option => {
+				console.log(option,'optionoptionoption');
+				
+				if (option && option.series) {
+					if (option.series.length > 0) {
+						option.series.forEach(series => {
+							series.progressive = 0;
+						});
+					} else if (typeof option.series === 'object') {
+						option.series.progressive = 0;
+					}
+				}
+			});
+
+		},
+
+		methods: {
+			getCanvasAttr2d() {
+				return new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this)
+					query
+						.select('#' + this.canvasId)
+						.fields({
+							node: true,
+							size: true
+						})
+						.exec(res => {
+							const canvasNode = res[0].node
+							this.canvasNode = canvasNode
+							const canvasDpr = uni.getSystemInfoSync().pixelRatio
+							const canvasWidth = res[0].width
+							const canvasHeight = res[0].height
+							const canvasRadius = res[0].borderRadius
+							this.ctx = canvasNode.getContext('2d')
+			
+							const canvas = new WxCanvas(this.ctx, this.canvasId, true, canvasNode)
+							echarts.setCanvasCreator(() => {
+								return canvas
+							})
+							resolve({
+								canvas,
+								canvasWidth,
+								canvasHeight,
+								canvasDpr,
+								canvasRadius
+							})
+						})
+				});
+			},
+			getCanvasAttr() {
+				return new Promise((resolve, reject) => {
+					this.ctx = uni.createCanvasContext(this.canvasId, this);
+					var canvas = new WxCanvas(this.ctx, this.canvasId, false);
+					echarts.setCanvasCreator(() => {
+						return canvas;
+					});
+					const canvasDpr = 1
+					var query = uni.createSelectorQuery()
+						// #ifndef MP-ALIPAY
+						.in(this)
+					// #endif
+					query.select('#' + this.canvasId).boundingClientRect(res => {
+						const canvasWidth = res.width
+						const canvasHeight = res.height
+						const canvasRadius = res.borderRadius
+						resolve({
+							canvas,
+							canvasWidth,
+							canvasHeight,
+							canvasDpr,
+							canvasRadius
+						})
+					}).exec();
+				});
+			},
+			// #ifdef H5
+			//H5绘制图表
+			initChart(option) {
+				this.ctx = uni.createCanvasContext(this.canvasId, this);				
+				chartList[this.canvasId] = echarts.init(document.getElementById(this.canvasId));
+				chartList[this.canvasId].setOption(option?option:this.option);
+				console.log(chartList[this.canvasId],this.canvasId,'canvasIdcanvasId');
+			},
+			//H5生成图片
+			canvasToTempFilePath(opt) {
+				const base64 = chartList[this.canvasId].getDataURL()
+				opt.success && opt.success({tempFilePath:base64})
+			},
+			// #endif
+			// #ifndef H5
+			//绘制图表
+			async initChart(option) {
+				// #ifdef MP-WEIXIN || MP-TOUTIAO 
+				const canvasAttr = await this.getCanvasAttr2d();
+				// #endif
+				// #ifndef MP-WEIXIN || MP-TOUTIAO
+				const canvasAttr = await this.getCanvasAttr();
+				// #endif
+				const {
+					canvas,
+					canvasWidth,
+					canvasHeight,
+					canvasDpr,
+					canvasRadius
+				} = canvasAttr
+				chartList[this.canvasId] = echarts.init(canvas, null, {
+					width: canvasWidth,
+					height: canvasHeight,
+					devicePixelRatio: canvasDpr, // new
+					borderRadius: canvasRadius
+				});
+				canvas.setChart(chartList[this.canvasId]);
+				chartList[this.canvasId].setOption(option?option:this.option);
+			},
+			//生成图片
+			canvasToTempFilePath(opt) {
+				// #ifdef MP-WEIXIN || MP-TOUTIAO
+				var query = uni.createSelectorQuery()
+				// #ifndef MP-ALIPAY
+					.in(this)
+				// #endif
+				query.select('#' + this.canvasId).fields({ node: true, size: true }).exec(res => {
+					const canvasNode = res[0].node
+					opt.canvas = canvasNode
+					uni.canvasToTempFilePath(opt, this)
+				})
+				// #endif
+				// #ifndef MP-WEIXIN || MP-TOUTIAO
+				if (!opt.canvasId) {
+					opt.canvasId = this.canvasId;
+				}
+				this.ctx.draw(true, () => {
+					uni.canvasToTempFilePath(opt, this);
+				});
+				// #endif
+			},
+			// #endif
+			
+			touchStart(e) {
+				if (chartList[this.canvasId] && e.touches.length > 0) {
+					var touch = e.touches[0];
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mousedown', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.dispatch('mousemove', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'start');
+				}
+			},
+			touchMove(e) {
+				if (chartList[this.canvasId] && e.touches.length > 0) {
+					var touch = e.touches[0];
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mousemove', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'change');
+				}
+			},
+
+			touchEnd(e) {
+				if (chartList[this.canvasId]) {
+					const touch = e.changedTouches ? e.changedTouches[0] : {};
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mouseup', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.dispatch('click', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'end');
+				}
+			}
+		}
+	}
+
+	function wrapTouch(event) {
+		for (let i = 0; i < event.touches.length; ++i) {
+			const touch = event.touches[i];
+			touch.offsetX = touch.x;
+			touch.offsetY = touch.y;
+		}
+		return event;
+	}
+</script>
+<style lang="scss" scoped>
+	.echarts {
+		width: 100%;
+		height: 100%;
+		border-radius: 40rpx;
+	}
+</style>

package/src/components/JfbBaseSavingDetail/components/wx-canvas.js

@@ -0,0 +1,105 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

package/src/components/JfbBaseShare/Api.js

@@ -0,0 +1,20 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Share
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: "getInviteCardList",
+    title: "获取邀请卡列表",
+    path: "/dist/v1/invitation_card",
+    isRule: false,
+    params: {
+      page_token: ['当前页', 'Number', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: false,
+  },
+];

package/src/components/JfbBaseShare/Attr.js

@@ -0,0 +1,59 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '发送朋友按钮背景图:', //label
+        ele: 'xd-upload', //package 名称
+        valueKey: 'shareImage', //form[valueKey]
+        value: data.shareImage || null, //v-model
+        defaultValue: data.shareImage || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 150, //单个图片显示宽度
+        oneHeight: 40, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议尺寸为300*80px。',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+        rules: [
+          { required: true, message: '请上传图片', trigger: ['blur', 'change'] },
+        ]
+      },
+      {
+        label: '保存到相册按钮背景图:', //label
+        ele: 'xd-upload', //package 名称
+        valueKey: 'savaImage', //form[valueKey]
+        value: data.savaImage || null, //v-model
+        defaultValue: data.savaImage || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 150, //单个图片显示宽度
+        oneHeight: 40, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议尺寸为300*80px。',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+        rules: [
+          { required: true, message: '请上传图片', trigger: ['blur', 'change'] },
+        ]
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};