bxs-tools-ui 3.2.0 → 3.3.0

package/packages/canvas-poster/index.vue

@@ -6,92 +6,93 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import './index.less'
 
 @Component({})
 export default class CanvasPoster extends Vue {
   @Prop({
     default: window.innerWidth
   })
-  canvasWidth!: number;
+  canvasWidth!: number
 
   @Prop({
     default: window.innerHeight
   })
-  canvasHeight!: number;
+  canvasHeight!: number
 
   @Prop({
     default() {
-      return [];
+      return []
     }
   })
-  posterData!: Array<any>;
+  posterData!: Array<any>
 
   created() {}
   mounted() {
-    this.drawPoster();
+    this.drawPoster()
   }
 
   drawPoster() {
-    let sequence: any = Promise.resolve();
+    let sequence: any = Promise.resolve()
     this.posterData.map(ele => {
       sequence = sequence.then(() => {
-        let drawFn: any = null;
+        let drawFn: any = null
         switch (ele.type) {
           case 'image':
-            drawFn = this.drawImage;
-            break;
+            drawFn = this.drawImage
+            break
           case 'text':
-            drawFn = this.drawText;
-            break;
+            drawFn = this.drawText
+            break
           case 'rect':
-            drawFn = this.drawRect;
-            break;
+            drawFn = this.drawRect
+            break
         }
-        return drawFn(ele);
-      });
-    });
+        return drawFn(ele)
+      })
+    })
   }
 
   drawImage({ type, url, crossOrigin, point = [0, 0], width, height, radius }) {
     return new Promise((resolve: any) => {
-      const canvas: any = document.getElementById('canvasPoster');
+      const canvas: any = document.getElementById('canvasPoster')
       if (canvas.getContext) {
-        const ctx: any = canvas.getContext('2d');
-        const image: any = new Image();
+        const ctx: any = canvas.getContext('2d')
+        const image: any = new Image()
         if (crossOrigin) {
-          image.crossOrigin = crossOrigin;
+          image.crossOrigin = crossOrigin
         }
         image.onload = () => {
           if (radius) {
-            ctx.save();
-            this.roundRect(ctx, point[0], point[1], width || image.width, height || image.height, radius);
-            ctx.clip();
-            ctx.drawImage(image, point[0], point[1], width || image.width, height || image.height);
-            ctx.restore();
+            ctx.save()
+            this.roundRect(ctx, point[0], point[1], width || image.width, height || image.height, radius)
+            ctx.clip()
+            ctx.drawImage(image, point[0], point[1], width || image.width, height || image.height)
+            ctx.restore()
           } else {
-            ctx.drawImage(image, point[0], point[1], width || image.width, height || image.height);
+            ctx.drawImage(image, point[0], point[1], width || image.width, height || image.height)
           }
-          resolve();
-        };
-        image.src = url;
+          resolve()
+        }
+        image.src = url
       }
-    });
+    })
   }
   roundRect(ctx, x, y, w, h, r) {
-    const min_size = Math.min(w, h);
+    const min_size = Math.min(w, h)
     if (r > min_size / 2) {
-      r = min_size / 2;
+      r = min_size / 2
     }
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.arcTo(x + w, y, x + w, y + h, r);
-    ctx.arcTo(x + w, y + h, x, y + h, r);
-    ctx.arcTo(x, y + h, x, y, r);
-    ctx.arcTo(x, y, x + w, y, r);
-    ctx.closePath();
-    return Promise.resolve();
+    ctx.beginPath()
+    ctx.moveTo(x + r, y)
+    ctx.arcTo(x + w, y, x + w, y + h, r)
+    ctx.arcTo(x + w, y + h, x, y + h, r)
+    ctx.arcTo(x, y + h, x, y, r)
+    ctx.arcTo(x, y, x + w, y, r)
+    ctx.closePath()
+    return Promise.resolve()
   }
 
   drawText({
@@ -108,65 +109,53 @@ export default class CanvasPoster extends Vue {
     point = [0, 0]
   }) {
     return new Promise((resolve: any) => {
-      const canvas: any = document.getElementById('canvasPoster');
+      const canvas: any = document.getElementById('canvasPoster')
       if (canvas.getContext) {
-        const ctx: any = canvas.getContext('2d');
-        ctx.fillStyle = color;
-        ctx.font = `normal normal ${fontWeight} ${fontSize}px ${fontFamily}`;
-        ctx.textAlign = textAlign;
+        const ctx: any = canvas.getContext('2d')
+        ctx.fillStyle = color
+        ctx.font = `normal normal ${fontWeight} ${fontSize}px ${fontFamily}`
+        ctx.textAlign = textAlign
         if (autoLine) {
-          this.drawTextAutoLine(
-            ctx,
-            tx,
-            point[0],
-            point[1] + fontSize,
-            right,
-            lineHeight || fontSize,
-            this.canvasWidth
-          );
+          this.drawTextAutoLine(ctx, tx, point[0], point[1] + fontSize, right, lineHeight || fontSize, this.canvasWidth)
         } else {
-          ctx.fillText(tx, point[0], point[1] + fontSize);
+          ctx.fillText(tx, point[0], point[1] + fontSize)
         }
-        resolve();
+        resolve()
       }
-    });
+    })
   }
   drawTextAutoLine(ctx, str, x, y, right, lineHeight, canvasWidth) {
-    let lineWidth = 0;
-    let lastSubStrIndex = 0;
+    let lineWidth = 0
+    let lastSubStrIndex = 0
     for (let i = 0; i < str.length; i++) {
-      lineWidth += ctx.measureText(str[i]).width;
+      lineWidth += ctx.measureText(str[i]).width
       if (lineWidth > canvasWidth - (x + right)) {
-        ctx.fillText(str.substring(lastSubStrIndex, i), x, y);
-        y += lineHeight;
-        lineWidth = ctx.measureText(str[i]).width;
-        lastSubStrIndex = i;
+        ctx.fillText(str.substring(lastSubStrIndex, i), x, y)
+        y += lineHeight
+        lineWidth = ctx.measureText(str[i]).width
+        lastSubStrIndex = i
       }
       if (i == str.length - 1) {
-        ctx.fillText(str.substring(lastSubStrIndex, i + 1), x, y);
+        ctx.fillText(str.substring(lastSubStrIndex, i + 1), x, y)
       }
     }
   }
 
   drawRect({ type, color, point = [0, 0], width = window.innerWidth, height = window.innerHeight, radius }) {
     return new Promise((resolve: any) => {
-      const canvas: any = document.getElementById('canvasPoster');
+      const canvas: any = document.getElementById('canvasPoster')
       if (canvas.getContext) {
-        const ctx: any = canvas.getContext('2d');
-        ctx.fillStyle = color;
+        const ctx: any = canvas.getContext('2d')
+        ctx.fillStyle = color
         if (radius) {
-          this.roundRect(ctx, point[0], point[1], width, height, radius);
-          ctx.fill();
+          this.roundRect(ctx, point[0], point[1], width, height, radius)
+          ctx.fill()
         } else {
-          ctx.fillRect(point[0], point[1], width, height);
+          ctx.fillRect(point[0], point[1], width, height)
         }
-        resolve();
+        resolve()
       }
-    });
+    })
   }
 }
 </script>
-<style>
-@import 'base.css';
-@import './index.css';
-</style>

package/packages/canvas-poster/readme.md

@@ -31,72 +31,72 @@ export default {
 </template>
 
 <script>
-import { CanvasPoster } from 'bxs-tools-ui';
-
-export default {
-  components: { CanvasPoster },
-  data() {
-    return {
-      posterData: [
-        {
-          type: 'image',
-          url: 'https://media.winbaoxian.com/xxx.jpeg',
-          width: window.innerWidth,
-          height: window.innerHeight
-        },
-        {
-          type: 'image',
-          url: 'https://media.winbaoxian.com/avatar.jpeg',
-          point: [200, 250],
-          width: 100,
-          height: 100,
-          radius: 50
-        },
-        {
-          type: 'text',
-          tx: '单行标题文本',
-          textAlign: 'center',
-          point: [window.innerWidth / 2, 20]
-        },
-        {
-          type: 'text',
-          tx: '支持自动换行的长文本内容，超出宽度后会自动折行显示。',
-          color: '#fff',
-          fontWeight: 'bold',
-          fontSize: 18,
-          fontFamily: 'Times',
-          lineHeight: 36,
-          autoLine: true,
-          right: 50,
-          point: [50, 60]
-        },
-        {
-          type: 'rect',
-          color: '#267a9a',
-          point: [50, window.innerHeight - 250],
-          width: window.innerWidth * 0.4,
-          height: 100,
-          radius: 20
-        },
-        {
-          type: 'rect',
-          color: 'rgba(255, 255, 0, 0.5)',
-          point: [0, window.innerHeight - 130],
-          width: window.innerWidth,
-          height: 130
-        },
-        {
-          type: 'image',
-          url: 'https://media.winbaoxian.com/QR_code.jpeg',
-          point: [window.innerWidth - 115, window.innerHeight - 115],
-          width: 100,
-          height: 100,
-          radius: 5
-        }
-      ]
-    };
-  }
-};
+  import { CanvasPoster } from 'bxs-tools-ui';
+
+  export default {
+    components: { CanvasPoster },
+    data() {
+      return {
+        posterData: [
+          {
+            type: 'image',
+            url: 'https://media.winbaoxian.com/xxx.jpeg',
+            width: window.innerWidth,
+            height: window.innerHeight
+          },
+          {
+            type: 'image',
+            url: 'https://media.winbaoxian.com/avatar.jpeg',
+            point: [200, 250],
+            width: 100,
+            height: 100,
+            radius: 50
+          },
+          {
+            type: 'text',
+            tx: '单行标题文本',
+            textAlign: 'center',
+            point: [window.innerWidth / 2, 20]
+          },
+          {
+            type: 'text',
+            tx: '支持自动换行的长文本内容，超出宽度后会自动折行显示。',
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 18,
+            fontFamily: 'Times',
+            lineHeight: 36,
+            autoLine: true,
+            right: 50,
+            point: [50, 60]
+          },
+          {
+            type: 'rect',
+            color: '#267a9a',
+            point: [50, window.innerHeight - 250],
+            width: window.innerWidth * 0.4,
+            height: 100,
+            radius: 20
+          },
+          {
+            type: 'rect',
+            color: 'rgba(255, 255, 0, 0.5)',
+            point: [0, window.innerHeight - 130],
+            width: window.innerWidth,
+            height: 130
+          },
+          {
+            type: 'image',
+            url: 'https://media.winbaoxian.com/QR_code.jpeg',
+            point: [window.innerWidth - 115, window.innerHeight - 115],
+            width: 100,
+            height: 100,
+            radius: 5
+          }
+        ]
+      };
+    }
+  };
 </script>
 ```
 
@@ -106,61 +106,58 @@ export default {
 
 #### 根级 props
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `poster-data` | 必传，海报绘制元素数组 | Array | `[]` |
-| `canvas-width` | 可选，Canvas 画布宽度 | Number | `window.innerWidth` |
-| `canvas-height` | 可选，Canvas 画布高度 | Number | `window.innerHeight` |
-
+| 参数            | 说明                   | 类型   | 默认值               |
+| --------------- | ---------------------- | ------ | -------------------- |
+| `poster-data`   | 必传，海报绘制元素数组 | Array  | `[]`                 |
+| `canvas-width`  | 可选，Canvas 画布宽度  | Number | `window.innerWidth`  |
+| `canvas-height` | 可选，Canvas 画布高度  | Number | `window.innerHeight` |
 
 #### 绘制元素：image（图片）
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `type` | 必传，固定值 `'image'` | String | — |
-| `url` | 必传，图片地址 | String | — |
-| `crossOrigin` | 允许跨源加载，可解除 `getImageData` / `toBlob` / `toDataURL` 限制 | String | — |
-| `point` | 绘制起点坐标 `[x, y]` | Array | `[0, 0]` |
-| `width` | 图片宽度 | Number | 图片自身宽度 |
-| `height` | 图片高度 | Number | 图片自身高度 |
-| `radius` | 圆角半径 | Number | — |
-
+| 参数          | 说明                                                              | 类型   | 默认值       |
+| ------------- | ----------------------------------------------------------------- | ------ | ------------ |
+| `type`        | 必传，固定值 `'image'`                                            | String | —            |
+| `url`         | 必传，图片地址                                                    | String | —            |
+| `crossOrigin` | 允许跨源加载，可解除 `getImageData` / `toBlob` / `toDataURL` 限制 | String | —            |
+| `point`       | 绘制起点坐标 `[x, y]`                                             | Array  | `[0, 0]`     |
+| `width`       | 图片宽度                                                          | Number | 图片自身宽度 |
+| `height`      | 图片高度                                                          | Number | 图片自身高度 |
+| `radius`      | 圆角半径                                                          | Number | —            |
 
 #### 绘制元素：text（文本）
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `type` | 必传，固定值 `'text'` | String | — |
-| `tx` | 必传，绘制的文本内容 | String | — |
-| `color` | 字体颜色 | String | `'#333'` |
-| `fontWeight` | 字体加粗（如 `'bold'`） | String | — |
-| `fontSize` | 字体大小（px） | Number | `12` |
-| `fontFamily` | 字体族 | String | `'Arial'` |
-| `textAlign` | 文本对齐方式 | String | `'start'` |
-| `point` | 绘制起点坐标 `[x, y]` | Array | `[0, 0]` |
-| `autoLine` | 是否自动换行 | Boolean | `false` |
-| `right` | 文本与右边界的距离，仅 `autoLine` 为 `true` 时有效 | Number | `0` |
-| `lineHeight` | 行距，仅 `autoLine` 为 `true` 时有效 | Number | 与 `fontSize` 相同 |
-
+| 参数         | 说明                                               | 类型    | 默认值             |
+| ------------ | -------------------------------------------------- | ------- | ------------------ |
+| `type`       | 必传，固定值 `'text'`                              | String  | —                  |
+| `tx`         | 必传，绘制的文本内容                               | String  | —                  |
+| `color`      | 字体颜色                                           | String  | `'#333'`           |
+| `fontWeight` | 字体加粗（如 `'bold'`）                            | String  | —                  |
+| `fontSize`   | 字体大小（px）                                     | Number  | `12`               |
+| `fontFamily` | 字体族                                             | String  | `'Arial'`          |
+| `textAlign`  | 文本对齐方式                                       | String  | `'start'`          |
+| `point`      | 绘制起点坐标 `[x, y]`                              | Array   | `[0, 0]`           |
+| `autoLine`   | 是否自动换行                                       | Boolean | `false`            |
+| `right`      | 文本与右边界的距离，仅 `autoLine` 为 `true` 时有效 | Number  | `0`                |
+| `lineHeight` | 行距，仅 `autoLine` 为 `true` 时有效               | Number  | 与 `fontSize` 相同 |
 
 #### 绘制元素：rect（矩形）
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `type` | 必传，固定值 `'rect'` | String | — |
-| `color` | 必传，填充颜色，支持 `rgba` | String | — |
-| `point` | 绘制起点坐标 `[x, y]` | Array | `[0, 0]` |
-| `width` | 矩形宽度 | Number | `window.innerWidth` |
-| `height` | 矩形高度 | Number | `window.innerHeight` |
-| `radius` | 圆角半径 | Number | — |
+| 参数     | 说明                        | 类型   | 默认值               |
+| -------- | --------------------------- | ------ | -------------------- |
+| `type`   | 必传，固定值 `'rect'`       | String | —                    |
+| `color`  | 必传，填充颜色，支持 `rgba` | String | —                    |
+| `point`  | 绘制起点坐标 `[x, y]`       | Array  | `[0, 0]`             |
+| `width`  | 矩形宽度                    | Number | `window.innerWidth`  |
+| `height` | 矩形高度                    | Number | `window.innerHeight` |
+| `radius` | 圆角半径                    | Number | —                    |
 
 ---
 
 ### Methods
 
-| 方法名 | 说明 | 参数 |
-| --- | --- | --- |
-| `drawPoster` | 按 `posterData` 顺序依次绘制所有元素（`mounted` 时自动调用一次）；**`posterData` 变更后不会自动重绘**，需通过 `$refs` 手动调用此方法或重新挂载组件 | — |
+| 方法名       | 说明                                                                                                                                               | 参数 |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| `drawPoster` | 按 `posterData` 顺序依次绘制所有元素（`mounted` 时自动调用一次）；**`posterData` 变更后不会自动重绘**，需通过 `$refs` 手动调用此方法或重新挂载组件 | —    |
 
 > **注意**：组件 canvas 的 `id` 固定为 `canvasPoster`，同一页面中存在多个实例时会发生 DOM id 冲突，请避免同时渲染多个实例。
 
@@ -174,6 +171,6 @@ export default {
 
 ### Slot
 
-| 插槽名 | 说明 |
-| --- | --- |
+| 插槽名    | 说明                                                           |
+| --------- | -------------------------------------------------------------- |
 | `default` | 位于 `<canvas>` 标签内部，作为浏览器不支持 Canvas 时的降级内容 |

package/packages/index.ts

@@ -50,6 +50,6 @@ export {
 }
 
 export default {
-  version: '3.2.0',
+  version: '3.3.0',
   install
 }

package/packages/insure-calculate/demo/index.vue

@@ -14,14 +14,14 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import Vant, { Dialog } from 'vant';
-import { get as _get } from 'lodash';
-import InsureCalculate from '../index.vue';
+import { Component, Vue } from 'vue-property-decorator'
+import Vant, { Dialog } from 'vant'
+import { get as _get } from 'lodash'
+import InsureCalculate from '../index.vue'
 
-import { insureCalculate, checkInsureCalculate } from 'packages/bxs-utils/index';
+import { insureCalculate, checkInsureCalculate } from 'packages/bxs-utils/index'
 
-Vue.use(Vant);
+Vue.use(Vant)
 
 @Component({
   components: {
@@ -29,22 +29,22 @@ Vue.use(Vant);
   }
 })
 export default class InsureCalculateDemo extends Vue {
-  productId: number | string = 110019; // 104367 100585 104733 102805 104931 110019;
-  uuid = '';
+  productId: number | string = 110019 // 104367 100585 104733 102805 104931 110019;
+  uuid = ''
   planParams = {
     detail_age: '',
     detail_sex: '2',
     detail_relation: '1',
     detail_applicant_age: '2',
     detail_applicant_sex: '2'
-  };
+  }
   planParams2 = {
     detail_age: '39周岁',
     detail_sex: '1',
     detail_relation: '14',
     detail_applicant_age: '35周岁',
     detail_applicant_sex: '2'
-  };
+  }
   postParams = {
     product_id: '104367',
     current_data: [
@@ -89,10 +89,10 @@ export default class InsureCalculateDemo extends Vue {
       { risk: '1876', k: 'detail_applicant_sex', v: '2' }
     ],
     scenario: 'h5Widget'
-  };
+  }
   postParams2 = {
     product_id: '104367'
-  };
+  }
   created() {
     // insureCalculate(null, this.postParams, this.planParams)
     //   .then(res => {
@@ -111,20 +111,20 @@ export default class InsureCalculateDemo extends Vue {
     // );
   }
   sureInsureCalculate() {
-    const vmCalculate = this.$refs.calculate;
+    const vmCalculate = this.$refs.calculate
     if (vmCalculate && vmCalculate['confirm']) {
       vmCalculate['confirm']().then(res => {
-        const currentData = _get(res, 'data.current_data') || [];
+        const currentData = _get(res, 'data.current_data') || []
         const resultData = currentData.reduce((acc, item) => {
-          acc[item.k] = item.v;
-          return acc;
-        }, {});
+          acc[item.k] = item.v
+          return acc
+        }, {})
         Dialog.alert({
           title: '试算结果',
           message: JSON.stringify(resultData)
-        });
-        console.log('组件试算结果获取：', res);
-      });
+        })
+        console.log('组件试算结果获取：', res)
+      })
     }
   }
 }