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

package/{lib → 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

@@ -0,0 +1,141 @@
+<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;'">
+      <template v-if="cPlaceContent">
+        <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>
+        <view class="de-re-progress de-re-progress_2" v-else>已抢光</view>
+      </template>
+      <template v-else>
+        <slot></slot>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'cvDrawProgress',
+  props: {
+    canvasId: {
+      //画布的id 同个页面需要多个画布需要定义不同id
+      type: String,
+      default: 'cv-draw-progress-canvas'
+    },
+    cSize: {
+      //圆的大小 单位px 取偶数
+      type: Number,
+      default: 80
+    },
+    cBackground: {
+      //进度条背景底色
+      type: String,
+      default: '#f4f4f4'
+    },
+    cColor: {
+      //进度条颜色
+      type: String,
+      default: '#fe9b25'
+    },
+    lineWidth: {
+      //进度条线的宽度   注意：因为圆的半径设置为画布大小的一半-2  所以注意进度条线的粗细会不会超过圆的大小
+      type: Number,
+      default: 8
+    },
+    cBili: {
+      //进度条的占比
+      type: [Number, String],
+      validator: function (val) {
+        //验证器
+        return val >= 0 && val <= 100;
+      },
+      default: 100
+    },
+    cPlaceContent: {
+      //是否显示默认提示内容
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    cBili(val) {
+      //监听比例数值的改变
+      this.drawProgress();
+    }
+  },
+  created() {
+    this.drawProgress();
+  },
+  mounted() {},
+  methods: {
+    drawProgress() {
+      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);
+
+      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(); //填充 画弧线
+
+      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.setStrokeStyle(this.cColor);
+      ctx.stroke();
+
+      setTimeout(() => {
+        //必须延迟执行 不然H5不显示
+        ctx.draw(); //画在画布上
+      }, 20);
+    }
+  }
+};
+</script>
+
+<style>
+.de-re-frame {
+  position: relative;
+}
+.de-re-place {
+  position: absolute;
+  top: 0;
+  width: 80px;
+  height: 80px;
+}
+.de-re-progress {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.de-re-progress_1 {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.de-re-progress_2 {
+  justify-content: center;
+  align-items: center;
+  color: #959595;
+  font-size: 12px;
+}
+.de-re-progress_yi {
+  color: #959595;
+  font-size: 14px;
+}
+.de-re-progress_zhi {
+  color: #181818;
+  font-size: 14px;
+}
+</style>

package/{lib → ui-cv}/cv-draw-qrcode/cv-draw-qrcode.vue

@@ -1,19 +1,19 @@
 <template>
   <view class="cv-draw-qrcode">
     <!-- #ifndef MP-ALIPAY -->
-    <canvas class="cv-draw-qrcode_canvas " :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
+    <canvas class="cv-draw-qrcode_canvas" :canvas-id="cid" :style="{ width: cpSize + 'px', height: cpSize + 'px' }" />
     <!-- #endif -->
     <!-- #ifdef MP-ALIPAY -->
-    <canvas :id="cid" :width="cpSize" :height="cpSize" class="cv-draw-qrcode_canvas " />
+    <canvas :id="cid" :width="cpSize" :height="cpSize" class="cv-draw-qrcode_canvas" />
     <!-- #endif -->
-    <image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
+    <image v-show="show" :src="result" :style="{ width: cpSize + 'px', height: cpSize + 'px' }" />
     <!-- <image class="image" v-if="img" :src="img" :style="{width: sizeSync + 'px', height: sizeSync + 'px'}" /> -->
   </view>
 </template>
 
 <script>
 import QRCode from './qrcode.js';
-let qrcode
+let qrcode;
 export default {
   name: 'cvDrawQrcode',
   props: {
@@ -80,15 +80,15 @@ export default {
     loadingText: {
       type: String,
       default: '二维码生成中'
-    },
+    }
   },
   data() {
     return {
       result: '',
       img: '',
       sizeSync: 100,
-      localIcon: '',
-    }
+      localIcon: ''
+    };
   },
 
   watch: {
@@ -112,10 +112,10 @@ export default {
   },
   computed: {
     cpSize() {
-      if (this.unit == "upx") {
-        return uni.upx2px(this.size)
+      if (this.unit == 'upx') {
+        return uni.upx2px(this.size);
       } else {
-        return this.size
+        return this.size;
       }
     }
   },
@@ -123,7 +123,7 @@ export default {
     if (this.loadMake) {
       if (!this._empty(this.val)) {
         setTimeout(() => {
-          this._makeCodeBefore()
+          this._makeCodeBefore();
         }, 30);
       }
     }
@@ -163,7 +163,7 @@ export default {
           this.urlTobase64(this.icon, (e) => {
             this.localIcon = e;
             this._makeCode();
-          })
+          });
         }
       } else {
         this.localIcon = this.icon;
@@ -190,10 +190,11 @@ export default {
           pdground: this.pdground, // 定位角点颜色
           correctLevel: this.lv, // 容错级别
           image: this.localIcon, // 二维码图标
-          imageSize: this.iconSize,// 二维码图标大小
-          cbResult: (res) => { // 生成二维码的回调
-            this._result(res)
-          },
+          imageSize: this.iconSize, // 二维码图标大小
+          cbResult: (res) => {
+            // 生成二维码的回调
+            this._result(res);
+          }
         });
       } else {
         uni.showToast({
@@ -204,12 +205,12 @@ export default {
       }
     },
     _clearCode() {
-      this._result('')
-      qrcode.clear()
+      this._result('');
+      qrcode.clear();
     },
     _saveCode() {
       let that = this;
-      if (this.result != "") {
+      if (this.result != '') {
         uni.saveImageToPhotosAlbum({
           filePath: that.result,
           success: function () {
@@ -224,23 +225,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;
     },
     //图片转base64
     urlTobase64(url, func) {
@@ -248,18 +249,20 @@ export default {
       uni.getFileSystemManager().readFile({
         filePath: url, //选择图片返回的相对路径
         encoding: 'base64', //编码格式
-        success: res => { //成功的回调
+        success: (res) => {
+          //成功的回调
           console.log(res);
-          let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
+          let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
           func(base64);
-        }, fail: (e) => {
-          console.log("图片转换失败");
+        },
+        fail: (e) => {
+          console.log('图片转换失败');
           uni.showToast({
             title: '图片转换失败',
             duration: 1000
           });
         }
-      })
+      });
       // #endif
 
       // #ifndef MP-WEIXIN
@@ -267,23 +270,23 @@ export default {
         url: url,
         method: 'GET',
         responseType: 'arraybuffer',
-        success: ress => {
-          let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
-          base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
+        success: (ress) => {
+          let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64
+          base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示的哦
           func(base64);
-        }, fail: (e) => {
+        },
+        fail: (e) => {
           uni.showToast({
             title: '图片转换失败',
             duration: 1000
           });
-          console.log("图片转换失败");
+          console.log('图片转换失败');
         }
-      })
+      });
       // #endif
-
     }
-  },
-}
+  }
+};
 </script>
 
 <style>