@10yun/cv-mobile-ui 0.3.24 → 0.3.25

package/ui-cv/cv-draw-barcode/cv-draw-barcode.vue

@@ -1,36 +1,36 @@
 <template>
   <view class="cv-draw-barcode">
     <!-- #ifndef MP-ALIPAY -->
-    <canvas class="cv-draw-barcode_canvas" :canvas-id="cid" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" />
+    <canvas class="cv-draw-barcode_canvas" :canvas-id="cid" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" />
     <!-- #endif -->
     <!-- #ifdef MP-ALIPAY -->
     <canvas :id="cid" :width="canvasWidth" :height="canvasHeight" class="cv-draw-barcode_canvas" />
     <!-- #endif -->
-    <image v-show="show" :src="result" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" />
+    <image v-show="show" :src="result" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" />
   </view>
 </template>
 
 <script>
-import barCode from "./barcode.js"
+import barCode from './barcode.js';
 const opations = {
   // format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
   width: 2, //设置条之间的宽度
   height: 60, //高度
   displayValue: true, //是否在条形码下方显示文字
   // text: "1234567890",//覆盖显示的文本
-  textAlign: "center", //设置文本的水平对齐方式
-  textPosition: "bottom", //设置文本的垂直位置
+  textAlign: 'center', //设置文本的水平对齐方式
+  textPosition: 'bottom', //设置文本的垂直位置
   textMargin: 5, //设置条形码和文本之间的间距
   fontSize: 16, //设置文本的大小
-  fontColor: "#000000", //设置文本的颜色
-  lineColor: "#000000", //设置条形码的颜色
-  background: "#FFFFFF", //设置条形码的背景色
+  fontColor: '#000000', //设置文本的颜色
+  lineColor: '#000000', //设置条形码的颜色
+  background: '#FFFFFF', //设置条形码的背景色
   margin: 10, //设置条形码周围的空白边距
   marginTop: undefined, //设置条形码周围的上边距
   marginBottom: undefined, //设置条形码周围的下边距
   marginLeft: undefined, //设置条形码周围的左边距
-  marginRight: undefined, //设置条形码周围的右边距
-}
+  marginRight: undefined //设置条形码周围的右边距
+};
 export default {
   name: 'cvDrawBarcode',
   props: {
@@ -57,7 +57,7 @@ export default {
     opations: {
       type: Object,
       default: function () {
-        return {}
+        return {};
       }
     },
     onval: {
@@ -67,7 +67,7 @@ export default {
     loadMake: {
       type: Boolean,
       default: true
-    },
+    }
   },
   data() {
     return {
@@ -75,55 +75,58 @@ export default {
       canvasWidth: 0,
       canvasHeight: 0,
       defaultOpations: Object.assign({}, opations)
-    }
-  },
-  onUnload() {
-
+    };
   },
+  onUnload() {},
   methods: {
     _makeCode() {
-      let that = this
+      let that = this;
       // 合并参数
-      Object.assign(this.defaultOpations, this.opations)
-      if (that.unit == "upx") {
+      Object.assign(this.defaultOpations, this.opations);
+      if (that.unit == 'upx') {
         if (that.defaultOpations.width) {
-          that.defaultOpations.width = uni.upx2px(that.defaultOpations.width)
-          that.defaultOpations.width = uni.upx2px(that.defaultOpations.width)
+          that.defaultOpations.width = uni.upx2px(that.defaultOpations.width);
+          that.defaultOpations.width = uni.upx2px(that.defaultOpations.width);
         }
         if (that.defaultOpations.height) {
-          that.defaultOpations.height = uni.upx2px(that.defaultOpations.height)
+          that.defaultOpations.height = uni.upx2px(that.defaultOpations.height);
         }
         if (that.defaultOpations.fontSize) {
-          that.defaultOpations.fontSize = uni.upx2px(that.defaultOpations.fontSize)
+          that.defaultOpations.fontSize = uni.upx2px(that.defaultOpations.fontSize);
         }
       }
 
       if (that._empty(that.defaultOpations.text)) {
-        that.defaultOpations.text = that.val
+        that.defaultOpations.text = that.val;
       }
       if (that._empty(that.defaultOpations.format)) {
-        that.defaultOpations.format = that.format
+        that.defaultOpations.format = that.format;
       }
 
-      new barCode(that, that.cid, that.defaultOpations,
-        function (res) { // 生成条形码宽高回调
-          that.canvasWidth = res.width
-          that.canvasHeight = res.height
+      new barCode(
+        that,
+        that.cid,
+        that.defaultOpations,
+        function (res) {
+          // 生成条形码宽高回调
+          that.canvasWidth = res.width;
+          that.canvasHeight = res.height;
         },
-        function (res) { // 生成条形码的回调
+        function (res) {
+          // 生成条形码的回调
           // 返回值
-          that._result(res)
+          that._result(res);
           // 重置默认参数
-          that.defaultOpations = { ...opations }
-        },
+          that.defaultOpations = { ...opations };
+        }
       );
     },
     _clearCode() {
-      this._result('')
+      this._result('');
     },
     _saveCode() {
       let that = this;
-      if (this.result != "") {
+      if (this.result != '') {
         uni.saveImageToPhotosAlbum({
           filePath: that.result,
           success: function () {
@@ -138,23 +141,23 @@ export default {
     },
     _result(res) {
       this.result = res;
-      this.$emit('result', res)
+      this.$emit('result', res);
     },
     _empty(v) {
       let tp = typeof v,
         rt = false;
-      if (tp == "number" && String(v) == "") {
-        rt = true
-      } else if (tp == "undefined") {
-        rt = true
-      } else if (tp == "object") {
-        if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
-      } else if (tp == "string") {
-        if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
-      } else if (tp == "function") {
-        rt = false
+      if (tp == 'number' && String(v) == '') {
+        rt = true;
+      } else if (tp == 'undefined') {
+        rt = true;
+      } else if (tp == 'object') {
+        if (JSON.stringify(v) == '{}' || JSON.stringify(v) == '[]' || v == null) rt = true;
+      } else if (tp == 'string') {
+        if (v == '' || v == 'undefined' || v == 'null' || v == '{}' || v == '[]') rt = true;
+      } else if (tp == 'function') {
+        rt = false;
       }
-      return rt
+      return rt;
     }
   },
   watch: {
@@ -162,7 +165,7 @@ export default {
       if (this.onval) {
         if (n != o && !this._empty(n)) {
           setTimeout(() => {
-            this._makeCode()
+            this._makeCode();
           }, 0);
         }
       }
@@ -172,7 +175,7 @@ export default {
         if (this.onval) {
           if (!this._empty(n)) {
             setTimeout(() => {
-              this._makeCode()
+              this._makeCode();
             }, 0);
           }
         }
@@ -184,12 +187,12 @@ export default {
     if (this.loadMake) {
       if (!this._empty(this.val)) {
         setTimeout(() => {
-          this._makeCode()
+          this._makeCode();
         }, 0);
       }
     }
   }
-}
+};
 </script>
 
 <style>

package/ui-cv/cv-draw-posters/cv-draw-posters.vue

@@ -1,6 +1,5 @@
 <template>
-  <canvas canvas-id="canvasdrawer" :style="{width: width + 'px', height: height + 'px'}" class="posters-layer">
-  </canvas>
+  <canvas canvas-id="canvasdrawer" :style="{ width: width + 'px', height: height + 'px' }" class="posters-layer"></canvas>
 </template>
 <script>
 const CACHE_KEYS = 'cv_draw_posters_cache';
@@ -30,8 +29,8 @@ export default {
       tempFileList: [],
       isPainting: false,
       ctx: null,
-      cache: {},
-    }
+      cache: {}
+    };
   },
   mounted() {
     uni.removeStorageSync(CACHE_KEYS);
@@ -43,10 +42,10 @@ export default {
     createPosters(newVal) {
       if (!newVal.width || !newVal.height) {
         return;
-      };
+      }
       // newVal = newVal || { views: [] };
       newVal.views = newVal.views || [];
-      uni.removeStorageSync(CACHE_KEYS)
+      uni.removeStorageSync(CACHE_KEYS);
       this.paintingData = newVal;
       this.ctx && this.ctx.clearActions();
       if (!this.isPainting) {
@@ -54,8 +53,7 @@ export default {
           this.isPainting = true;
           try {
             this.readyPigment();
-          }
-          catch (err) {
+          } catch (err) {
             this.$emit('error');
           }
         }
@@ -80,7 +78,7 @@ export default {
             radius,
             width,
             height
-          })
+          });
           this.getImageList(views);
           this.downLoadImages(0);
         }
@@ -100,11 +98,11 @@ export default {
       const tempFileList = this.tempFileList;
       if (index < imageList.length) {
         // console.log(imageList[index])
-        this.getImageInfo(imageList[index]).then(imgInfo => {
-          tempFileList.push(imgInfo)
+        this.getImageInfo(imageList[index]).then((imgInfo) => {
+          tempFileList.push(imgInfo);
           this.tempFileList = tempFileList;
           this.downLoadImages(index + 1);
-        })
+        });
       } else {
         this.startPainting();
       }
@@ -144,7 +142,10 @@ export default {
       return data;
     },
     async startPainting() {
-      const { tempFileList, paintingData: { views } } = this;
+      const {
+        tempFileList,
+        paintingData: { views }
+      } = this;
       for (let i = 0, imageIndex = 0; i < views.length; i++) {
         if (views[i].type === 'image') {
           let _img = tempFileList[imageIndex];
@@ -175,36 +176,23 @@ export default {
           }
         } else if (views[i].type === 'rect') {
           this.drawRect(views[i]);
-        }
-        else if (views[i].type === 'round') {
+        } else if (views[i].type === 'round') {
           this.drawRound(views[i]);
         }
       }
       this.ctx.draw(true, () => {
         uni.setStorageSync(CACHE_KEYS, this.cache);
         this.saveImageToLocal();
-      })
+      });
     },
     old_drawImage(params) {
       // console.log(params)
-      const {
-        url,
-        top = 0,
-        left = 0,
-        width = 0,
-        height = 0,
-        sx = 0,
-        sy = 0,
-        ex = 0,
-        ey = 0
-      } = params;
+      const { url, top = 0, left = 0, width = 0, height = 0, sx = 0, sy = 0, ex = 0, ey = 0 } = params;
       if ('tailor' in params) {
         this.ctx.drawImage(url, sx, sy, ex, ey, left, top, width, height);
-      }
-      else if (params.round === true) {
+      } else if (params.round === true) {
         this.drawRoundImage(params);
-      }
-      else {
+      } else {
         this.ctx.drawImage(url, left, top, width, height);
       }
     },
@@ -227,13 +215,7 @@ export default {
       ctx.restore();
     },
     _drawRadiusRect(params) {
-      const {
-        top = 0,
-        left = 0,
-        width = 0,
-        height = 0,
-        radius = 0,
-      } = params;
+      const { top = 0, left = 0, width = 0, height = 0, radius = 0 } = params;
       let x = left;
       let y = top;
       let w = width;
@@ -242,14 +224,14 @@ export default {
       let r = radius;
       // let br = radius;
       this.ctx.beginPath();
-      this.ctx.moveTo(x + r, y);    // 移动到左上角的点
+      this.ctx.moveTo(x + r, y); // 移动到左上角的点
       this.ctx.lineTo(x + w - r, y);
       this.ctx.arc(x + w - r, y + r, r, 2 * Math.PI * (3 / 4), 2 * Math.PI * (4 / 4));
       this.ctx.lineTo(x + w, y + h - r);
       this.ctx.arc(x + w - r, y + h - r, r, 0, 2 * Math.PI * (1 / 4));
       this.ctx.lineTo(x + r, y + h);
       this.ctx.arc(x + r, y + h - r, r, 2 * Math.PI * (1 / 4), 2 * Math.PI * (2 / 4));
-      this.ctx.lineTo((x), (y + r));
+      this.ctx.lineTo(x, y + r);
       this.ctx.arc(x + r, y + r, r, 2 * Math.PI * (2 / 4), 2 * Math.PI * (3 / 4));
 
       // this.ctx.moveTo(x + r, y);
@@ -282,7 +264,6 @@ export default {
       if (radius) {
         this.ctx.beginPath();
 
-
         // if (radius === parseInt(width / 2)) {
         //     console.log('圆');
         //     this.ctx.beginPath();
@@ -300,8 +281,7 @@ export default {
       }
       if ('tailor' in params) {
         this.ctx.drawImage(url, sx, sy, ex, ey, left, top, width, height);
-      }
-      else {
+      } else {
         this.ctx.drawImage(url, left, top, width, height);
       }
       // this.drawImage(params);
@@ -352,7 +332,7 @@ export default {
         this.ctx.setFillStyle(color);
         this.ctx.setFontSize(fontSize);
         this.ctx.setTextAlign(textAlign);
-      }
+      };
       _setStyle();
       if (!breakWord) {
         this.ctx.fillText(content, left, top);
@@ -419,14 +399,13 @@ export default {
     },
     drawRect(params) {
       // console.log(params)
-      const { background, top = 0, left = 0, width = 0, height = 0 } = params
+      const { background, top = 0, left = 0, width = 0, height = 0 } = params;
       this.ctx.save();
       this.ctx.setFillStyle(background);
       if (params.radius) {
         this._drawRadiusRect(params);
         this.ctx.fill();
-      }
-      else {
+      } else {
         this.ctx.setFillStyle(background);
         this.ctx.fillRect(left, top, width, height);
       }
@@ -443,7 +422,7 @@ export default {
           if (objExp.test(url)) {
             uni.getImageInfo({
               src: url,
-              complete: res => {
+              complete: (res) => {
                 if (res.errMsg === 'getImageInfo:ok') {
                   const img = {
                     url,
@@ -470,35 +449,38 @@ export default {
             resolve(url);
           }
         }
-      })
+      });
     },
     saveImageToLocal() {
       const { width, height } = this;
-      uni.canvasToTempFilePath({
-        destWidth: width,
-        destHeight: height,
-        canvasId: 'canvasdrawer',
-        success: res => {
-          if (res.errMsg === 'canvasToTempFilePath:ok') {
-            this.isPainting = false;
-            this.imageList = [];
-            this.tempFileList = [];
-            this.$emit('success', {
-              width,
-              height,
-              path: res.tempFilePath
-            });
+      uni.canvasToTempFilePath(
+        {
+          destWidth: width,
+          destHeight: height,
+          canvasId: 'canvasdrawer',
+          success: (res) => {
+            if (res.errMsg === 'canvasToTempFilePath:ok') {
+              this.isPainting = false;
+              this.imageList = [];
+              this.tempFileList = [];
+              this.$emit('success', {
+                width,
+                height,
+                path: res.tempFilePath
+              });
+            }
+          },
+          fail: (error) => {
+            this.$emit('error', error);
           }
-        }, fail: (error) => {
-          this.$emit('error', error);
-        }
-      }, this);
+        },
+        this
+      );
     }
-
   }
-}
+};
 </script>
-<style >
+<style>
 .posters-layer {
   position: fixed;
   top: -5000rpx;
@@ -506,4 +488,4 @@ export default {
   /* top: 0;
   left: 0; */
 }
-</style>
+</style>

package/ui-cv/cv-draw-progress/cv-draw-progress.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="de-re-frame">
-    <canvas :canvas-id="canvasId" :style="'height:'+cSize+'px;width:'+cSize+'px;'"></canvas>
-    <view class="de-re-place" :style="'height:'+cSize+'px;width:'+cSize+'px;'">
+    <canvas :canvas-id="canvasId" :style="'height:' + cSize + 'px;width:' + cSize + 'px;'"></canvas>
+    <view class="de-re-place" :style="'height:' + cSize + 'px;width:' + cSize + 'px;'">
       <template v-if="cPlaceContent">
-        <view class="de-re-progress de-re-progress_1" v-if="cBili<100">
+        <view class="de-re-progress de-re-progress_1" v-if="cBili < 100">
           <view class="de-re-progress_yi">已抢</view>
-          <view class="de-re-progress_zhi">{{cBili}}%</view>
+          <view class="de-re-progress_zhi">{{ cBili }}%</view>
         </view>
         <view class="de-re-progress de-re-progress_2" v-else>已抢光</view>
       </template>
@@ -18,85 +18,90 @@
 
 <script>
 export default {
-  name: "cvDrawProgress",
+  name: 'cvDrawProgress',
   props: {
-    canvasId: {				//画布的id 同个页面需要多个画布需要定义不同id
+    canvasId: {
+      //画布的id 同个页面需要多个画布需要定义不同id
       type: String,
-      default: 'cv-draw-progress-canvas',
+      default: 'cv-draw-progress-canvas'
     },
-    cSize: {			//圆的大小 单位px 取偶数
+    cSize: {
+      //圆的大小 单位px 取偶数
       type: Number,
       default: 80
     },
-    cBackground: {	//进度条背景底色
+    cBackground: {
+      //进度条背景底色
       type: String,
       default: '#f4f4f4'
     },
-    cColor: {	//进度条颜色
+    cColor: {
+      //进度条颜色
       type: String,
       default: '#fe9b25'
     },
-    lineWidth: {		//进度条线的宽度   注意：因为圆的半径设置为画布大小的一半-2  所以注意进度条线的粗细会不会超过圆的大小
+    lineWidth: {
+      //进度条线的宽度   注意：因为圆的半径设置为画布大小的一半-2  所以注意进度条线的粗细会不会超过圆的大小
       type: Number,
       default: 8
     },
-    cBili: {			//进度条的占比
+    cBili: {
+      //进度条的占比
       type: [Number, String],
-      validator: function (val) {		//验证器
-        return val >= 0 && val <= 100
+      validator: function (val) {
+        //验证器
+        return val >= 0 && val <= 100;
       },
       default: 100
     },
-    cPlaceContent: {		//是否显示默认提示内容
+    cPlaceContent: {
+      //是否显示默认提示内容
       type: Boolean,
       default: true
     }
   },
   data() {
-    return {
-
-    }
+    return {};
   },
   watch: {
-    cBili(val) {		//监听比例数值的改变
+    cBili(val) {
+      //监听比例数值的改变
       this.drawProgress();
     }
   },
   created() {
     this.drawProgress();
   },
-  mounted() {
-
-  },
+  mounted() {},
   methods: {
     drawProgress() {
-      let yX = this.cSize / 2;	//圆心 x坐标
-      let yY = this.cSize / 2;	//圆心 y坐标
-      let yBanJ = this.cSize / 2 - 4;	//圆的半径  减2是因为有线条宽度
+      let yX = this.cSize / 2; //圆心 x坐标
+      let yY = this.cSize / 2; //圆心 y坐标
+      let yBanJ = this.cSize / 2 - 4; //圆的半径  减2是因为有线条宽度
 
-      const ctx = uni.createCanvasContext(this.canvasId, this)
+      const ctx = uni.createCanvasContext(this.canvasId, this);
 
-      ctx.beginPath();		//画背景
-      ctx.arc(yX, yY, yBanJ, 0.7 * Math.PI, 2.3 * Math.PI);//坐标40，40 半径38  
-      ctx.setStrokeStyle(this.cBackground);		//画颜色
+      ctx.beginPath(); //画背景
+      ctx.arc(yX, yY, yBanJ, 0.7 * Math.PI, 2.3 * Math.PI); //坐标40，40 半径38
+      ctx.setStrokeStyle(this.cBackground); //画颜色
       ctx.setLineWidth(this.lineWidth);
-      ctx.stroke();		//填充 画弧线
+      ctx.stroke(); //填充 画弧线
 
-      let value = (this.cBili / 100).toFixed(4)
-      let bX = 0.70 * Math.PI;		//进度条开始的位置 一直都是0.7
-      let eX = (0.70 + (1.6 * value)) * Math.PI;		//进度条结束的位置 100%是2.3
+      let value = (this.cBili / 100).toFixed(4);
+      let bX = 0.7 * Math.PI; //进度条开始的位置 一直都是0.7
+      let eX = (0.7 + 1.6 * value) * Math.PI; //进度条结束的位置 100%是2.3
       ctx.beginPath();
-      ctx.arc(yX, yY, yBanJ, bX, eX);  //范围是0.7-2.3之间是百分百
+      ctx.arc(yX, yY, yBanJ, bX, eX); //范围是0.7-2.3之间是百分百
       ctx.setStrokeStyle(this.cColor);
       ctx.stroke();
 
-      setTimeout(() => {	//必须延迟执行 不然H5不显示
-        ctx.draw();		//画在画布上
-      }, 20)
-
+      setTimeout(() => {
+        //必须延迟执行 不然H5不显示
+        ctx.draw(); //画在画布上
+      }, 20);
     }
   }
-}
+};
 </script>
 
 <style>