@10yun/cv-mobile-ui 0.5.62 → 0.5.64

package/ui-fireui/components/u-picture-cropper/u-picture-cropper.vue

@@ -21,9 +21,9 @@
       :data-imgWidth="imgWidth"
       :data-imgHeight="imgHeight"
       :data-angle="angle"
-      @touchend.stop="parse.cutTouchEnd"
-      @touchstart.stop="parse.cutTouchStart"
-      @touchmove.stop="parse.cutTouchMove"
+      @touchend="parse.cutTouchEnd"
+      @touchstart="parse.cutTouchStart"
+      @touchmove="parse.cutTouchMove"
     >
       <view class="up-content">
         <view class="up-content-top up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
@@ -57,9 +57,9 @@
       <image
         @load="imageLoad"
         @error="imageLoad"
-        @touchstart.stop="parse.touchstart"
-        @touchmove.stop="parse.touchmove"
-        @touchend.stop="parse.touchend"
+        @touchstart="parse.touchstart"
+        @touchmove="parse.touchmove"
+        @touchend="parse.touchend"
         :data-minScale="minScale"
         :data-maxScale="maxScale"
         :data-disableRotate="disableRotate"
@@ -69,8 +69,8 @@
           transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
         }"
         class="up-cropper-image"
+        :class="{ 'up-cropper__image-hidden': !imageUrl }"
         :src="imageUrl"
-        v-if="imageUrl"
         mode="widthFix"
       ></image>
     </view>
@@ -97,7 +97,8 @@
  *也可直接转成base64（不建议）
  * */
 export default {
-  name: 'fuiPictureCropper',
+  name: 'tuiPictureCropper',
+  emits: ['ready', 'cropper', 'initAngle', 'imageLoad'],
   props: {
     //图片路径
     imageUrl: {
@@ -105,9 +106,9 @@ export default {
       default: ''
     },
     /*
-					 默认正方形，可修改大小控制比例
-					 裁剪框高度 px
-					*/
+			 默认正方形，可修改大小控制比例
+			 裁剪框高度 px
+			*/
     height: {
       type: Number,
       default: 280
@@ -337,6 +338,20 @@ export default {
     }, 200);
   },
   methods: {
+    //网络图片转成本地文件[同步执行]
+    async getLocalImage(url) {
+      return await new Promise((resolve, reject) => {
+        uni.downloadFile({
+          url: url,
+          success: (res) => {
+            resolve(res.tempFilePath);
+          },
+          fail: (res) => {
+            reject(false);
+          }
+        });
+      });
+    },
     //返回裁剪后图片信息
     getImage() {
       if (!this.imageUrl) {
@@ -347,7 +362,7 @@ export default {
         return;
       }
       this.loadding && this.showLoading();
-      let draw = () => {
+      let draw = async () => {
         //图片实际大小
         let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
         let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
@@ -357,7 +372,13 @@ export default {
         //旋转画布
         this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
         this.ctx.rotate((this.angle * Math.PI) / 180);
-        this.ctx.drawImage(this.imageUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+        let imgUrl = this.imageUrl;
+        // #ifdef APP-PLUS || MP-WEIXIN
+        if (~this.imageUrl.indexOf('https:')) {
+          imgUrl = await this.getLocalImage(this.imageUrl);
+        }
+        // #endif
+        this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
         this.ctx.draw(false, () => {
           let params = {
             width: this.canvasWidth * this.scaleRatio,
@@ -385,7 +406,7 @@ export default {
             this.ctx.toTempFilePath({
               ...params,
               success: (res) => {
-                data.url = res.tempFilePath;
+                data.url = res.apFilePath;
                 this.loadding && uni.hideLoading();
                 this.$emit('cropper', data);
               }
@@ -394,24 +415,54 @@ export default {
           // #endif
 
           // #ifndef MP-ALIPAY
+          let isBase64 = this.isBase64;
           // #ifdef MP-BAIDU || MP-TOUTIAO || H5
-          this.isBase64 = false;
+          isBase64 = false;
           // #endif
-          if (this.isBase64) {
-            uni.canvasGetImageData({
-              canvasId: 'up-image-cropper',
-              x: 0,
-              y: 0,
-              width: this.canvasWidth * this.scaleRatio,
-              height: Math.round(this.canvasHeight * this.scaleRatio),
-              success: (res) => {
-                const arrayBuffer = new Uint8Array(res.data);
-                const base64 = uni.arrayBufferToBase64(arrayBuffer);
-                data.base64 = base64;
-                this.loadding && uni.hideLoading();
-                this.$emit('cropper', data);
-              }
-            });
+          if (isBase64) {
+            // #ifdef MP-WEIXIN
+            uni.canvasToTempFilePath(
+              {
+                ...params,
+                canvasId: 'up-image-cropper',
+                success: (res) => {
+                  data.url = res.tempFilePath;
+                  const fs = wx.getFileSystemManager();
+                  // 读取文件， base64 格式
+                  const base64Str = fs.readFileSync(res.tempFilePath, 'base64');
+                  const imgBase64 = `data:image/png;base64,${base64Str}`;
+                  data.base64 = imgBase64;
+
+                  this.loadding && uni.hideLoading();
+                  this.$emit('cropper', data);
+                },
+                fail(res) {
+                  console.log(res);
+                }
+              },
+              this
+            );
+            // #endif
+
+            // #ifndef MP-WEIXIN
+            uni.canvasGetImageData(
+              {
+                canvasId: 'up-image-cropper',
+                x: 0,
+                y: 0,
+                width: this.canvasWidth * this.scaleRatio,
+                height: Math.round(this.canvasHeight * this.scaleRatio),
+                success: (res) => {
+                  const arrayBuffer = new Uint8Array(res.data);
+                  const base64 = uni.arrayBufferToBase64(arrayBuffer);
+                  data.base64 = base64;
+                  this.loadding && uni.hideLoading();
+                  this.$emit('cropper', data);
+                }
+              },
+              this
+            );
+            // #endif
           } else {
             uni.canvasToTempFilePath(
               {
@@ -451,10 +502,10 @@ export default {
     change(e) {
       this.cutX = e.cutX || 0;
       this.cutY = e.cutY || 0;
-      this.canvasWidth = e.canvasWidth || 100;
-      this.canvasHeight = e.canvasHeight || 100;
-      this.imgWidth = e.imgWidth || 100;
-      this.imgHeight = e.imgHeight || 100;
+      this.canvasWidth = e.canvasWidth || this.width;
+      this.canvasHeight = e.canvasHeight || this.height;
+      this.imgWidth = e.imgWidth || this.imgWidth;
+      this.imgHeight = e.imgHeight || this.imgHeight;
       this.scale = e.scale || 1;
       this.angle = e.angle || 0;
       this.imgTop = e.imgTop || 0;
@@ -463,7 +514,7 @@ export default {
     imageReset() {
       this.scale = 1;
       this.angle = 0;
-      let sys = this.sysInfo.windowHeight || uni.getSystemInfoSync();
+      let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
       this.imgTop = sys.windowHeight / 2;
       this.imgLeft = sys.windowWidth / 2;
       this.resetChange++;
@@ -490,7 +541,7 @@ export default {
           imgHeight = (height / width) * imgWidth;
         }
       } else {
-        let sys = this.sysInfo || uni.getSystemInfoSync();
+        let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
         imgWidth = sys.windowWidth;
         imgHeight = 0;
       }
@@ -543,6 +594,7 @@ export default {
 .up-container {
   width: 100vw;
   height: 100vh;
+  padding: 0;
   background-color: rgba(0, 0, 0, 0.6);
   position: fixed;
   top: 0;
@@ -559,6 +611,7 @@ export default {
 .up-content {
   width: 100vw;
   height: 100vh;
+  padding: 0;
   position: absolute;
   z-index: 9;
   display: flex;
@@ -606,6 +659,11 @@ export default {
   transform-origin: center;
 }
 
+.up-cropper__image-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+
 .up-cropper-canvas {
   position: fixed;
   z-index: 10;

package/ui-fireui/components/u-picture-cropper/u-picture-cropper.wxs

@@ -246,17 +246,20 @@ if (currentX > right_x1 && currentX
 			cutY = cropper.cutY,
 			cutX = cropper.cutX;
 
-		function size_correct() {
+		var size_correct = function() {
 			width = width
-<= cropper.maxWidth ? (width>= cropper.minWidth ? width : cropper.minWidth) : cropper.maxWidth;
+<= cropper.maxWidth ? (width>= cropper.minWidth ? width : cropper.minWidth) : cropper
+.maxWidth;
 height = height
-<= cropper.maxHeight ? (height>= cropper.minHeight ? height : cropper.minHeight) : cropper.maxHeight;
+<= cropper.maxHeight ? (height>= cropper.minHeight ? height : cropper.minHeight) :
+cropper.maxHeight;
 }
 
-function size_inspect() {
+var size_inspect = function() {
 if ((width > cropper.maxWidth || width
 < cropper.minWidth || height> cropper.maxHeight || height
-< cropper.minHeight ) &&
+<
+					cropper.minHeight ) &&
   lockRatio) {
   size_correct();
   return false;
@@ -330,7 +333,7 @@ function cutDetectionPosition(ins) {
 	var windowHeight = cropper.windowHeight,
 		windowWidth = cropper.windowWidth;
 
-	function cutDetectionPositionTop() {
+	var cutDetectionPositionTop = function() {
 		//检测上边距是否在范围内
 		if (cropper.cutY
 < 0) {
@@ -341,7 +344,7 @@ cropper.cutY = windowHeight - cropper.canvasHeight;
 }
 }
 
-function cutDetectionPositionLeft() {
+var cutDetectionPositionLeft = function() {
 //检测左边距是否在范围内
 if (cropper.cutX
 < 0) {
@@ -410,11 +413,13 @@ if (imgWidth * scale
   }
   left= cropper.cutX + (imgWidth * scale) / 2>= left ? left : cropper.cutX + (imgWidth * scale) / 2;
 left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2
-<= left ? left : cropper.cutX + cropper.canvasWidth -
+<= left ? left : cropper.cutX + cropper
+		.canvasWidth -
 		(imgWidth * scale) / 2;
 	top = cropper.cutY + (imgHeight * scale) / 2>= top ? top : cropper.cutY + (imgHeight * scale) / 2;
 top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2
-<= top ? top : cropper.cutY + cropper.canvasHeight -
+<= top ? top : cropper.cutY + cropper
+		.canvasHeight -
 		(imgHeight * scale) / 2;
 
 	cropper.imgLeft = left;
@@ -453,17 +458,22 @@ cropper.cutY = cropper.windowHeight - cropper.cutY;
 
 function styleUpdate(ins) {
 if (!ins) return;
-ins.selectComponent('.up-cropper-box').setStyle({
+var tcb = ins.selectComponent('.up-cropper-box');
+var tcm = ins.selectComponent('.up-content-middle')
+var tct = ins.selectComponent('.up-content-top')
+var twb = ins.selectComponent('.up-wxs-bg')
+if (!tcb || !tcm || !tct || !twb) return;
+tcb.setStyle({
 'width': cropper.canvasWidth + 'px',
 'height': cropper.canvasHeight + 'px'
 })
-ins.selectComponent('.up-content-middle').setStyle({
+tcm.setStyle({
 'height': cropper.canvasHeight + 'px'
 })
-ins.selectComponent('.up-content-top').setStyle({
+tct.setStyle({
 'height': cropper.cutY + 'px'
 })
-ins.selectComponent('.up-wxs-bg').setStyle({
+twb.setStyle({
 'width': cropper.cutX + 'px'
 })
 
@@ -475,8 +485,8 @@ if (!owner) return
 var x = cropper.imgLeft - cropper.imgWidth / 2;
 var y = cropper.imgTop - cropper.imgHeight / 2;
 owner.setStyle({
-'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' +
-cropper.angle + 'deg)'
+'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper
+.angle + 'deg)'
 })
 }
 
@@ -536,7 +546,7 @@ if (cropper.canvasWidth
 			cropper.windowHeight = +dataset.windowheight;
 			cropper.windowWidth = +dataset.windowwidth;
 			cropper.init = false
-		} else if (type == 2) {
+		} else if (type == 2 || type == 3) {
 			cropper.imgWidth = +dataset.imgwidth;
 			cropper.imgHeight = +dataset.imgheight;
 		}
@@ -571,7 +581,7 @@ if (cropper.canvasWidth
 	}
 }
 
-export default {
+module.exports = {
 	touchstart: touchstart,
 	touchmove: touchmove,
 	touchend: touchend,

package/ui-fireui/components/u-rate/u-rate.vue

@@ -0,0 +1,197 @@
+<template>
+  <view class="up-rate-box" @touchmove="touchMove">
+    <block v-for="(item, index) in numbers" :key="index">
+      <view
+        class="up-icon"
+        :class="[
+          'up-relative',
+          'up-icon-collection' + (hollow && (current <= index || (disabled && current <= index + 1)) ? '' : '-fill')
+        ]"
+        :data-index="index"
+        @tap="handleTap"
+        :style="{ fontSize: size + 'px', color: current > index + 1 || (!disabled && current > index) ? getActiveColor : normal }"
+      >
+        <view
+          class="up-icon"
+          :class="['up-icon-main', 'up-icon-collection-fill']"
+          v-if="disabled && current == index + 1"
+          :style="{ fontSize: size + 'px', color: getActiveColor, width: percent + '%' }"
+        ></view>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tuiRate',
+  emits: ['change'],
+  props: {
+    //数量
+    quantity: {
+      type: [Number, String],
+      default: 5
+    },
+    //当前选中
+    current: {
+      type: Number,
+      default: 0
+    },
+    //当前选中星星分数(大于0，小于等于1的数)
+    score: {
+      type: [Number, String],
+      default: 1
+    },
+    //禁用点击
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    //大小
+    size: {
+      type: Number,
+      default: 20
+    },
+    //未选中颜色
+    normal: {
+      type: String,
+      default: '#b2b2b2'
+    },
+    //选中颜色
+    active: {
+      type: String,
+      default: ''
+    },
+    //未选中是否为空心
+    hollow: {
+      type: Boolean,
+      default: false
+    },
+    //自定义参数
+    params: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  computed: {
+    getActiveColor() {
+      return this.active || (uni && uni.$tui && uni.$tui.color.danger) || '#EB0909';
+    }
+  },
+  data() {
+    return {
+      pageX: 0,
+      percent: 0,
+      numbers: []
+    };
+  },
+  created() {
+    this.handleQuantity(this.quantity);
+    this.percent = Number(this.score || 0) * 100;
+  },
+  watch: {
+    score(newVal, oldVal) {
+      this.percent = Number(newVal || 0) * 100;
+    },
+    quantity(val) {
+      this.handleQuantity(val);
+    }
+  },
+  methods: {
+    handleTap(e) {
+      if (this.disabled) {
+        return;
+      }
+      const index = e.currentTarget.dataset.index;
+      this.$emit('change', {
+        index: Number(index) + 1,
+        params: this.params
+      });
+    },
+    touchMove(e) {
+      if (this.disabled) {
+        return;
+      }
+      if (!e.changedTouches[0]) {
+        return;
+      }
+      const movePageX = e.changedTouches[0].pageX;
+      const distance = movePageX - this.pageX;
+
+      if (distance <= 0) {
+        return;
+      }
+      let index = Math.ceil(distance / this.size);
+      index = index > this.quantity ? this.quantity : index;
+      this.$emit('change', {
+        index: index,
+        params: this.params
+      });
+    },
+    handleQuantity(quantity) {
+      quantity = Number(quantity) || 5;
+      quantity = Math.ceil(quantity);
+      this.numbers = Array.from(new Array(quantity + 1).keys()).slice(1);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        const className = '.up-rate-box';
+        let query = uni.createSelectorQuery().in(this);
+        query
+          .select(className)
+          .boundingClientRect((res) => {
+            this.pageX = res.left || 0;
+          })
+          .exec();
+      }, 80);
+    });
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'rateFont';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT4AA0AAAAAB4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE3AAAABoAAAAciBprQUdERUYAAAS8AAAAHgAAAB4AKQALT1MvMgAAAaAAAABDAAAAVj1YSN1jbWFwAAAB+AAAAEIAAAFCAA/qlmdhc3AAAAS0AAAACAAAAAj//wADZ2x5ZgAAAkgAAADwAAABZLMTdXtoZWFkAAABMAAAADAAAAA2FZKISmhoZWEAAAFgAAAAHQAAACQHYgOFaG10eAAAAeQAAAARAAAAEgx6AHpsb2NhAAACPAAAAAwAAAAMAEYAsm1heHAAAAGAAAAAHgAAACABEQBPbmFtZQAAAzgAAAFJAAACiCnmEVVwb3N0AAAEhAAAAC0AAABHLO3vkXjaY2BkYGAA4t2/VF7G89t8ZeBmYQCBm9ZKMnC6ikGMuYXpP5DLwcAEEgUAHPQJOXjaY2BkYGBu+N/AEMPCAALMLQyMDKiABQBQwgLwAAAAeNpjYGRgYGBlcGZgYgABEMkFhAwM/8F8BgAPigFhAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PXj17zdzwv4EhhrmBoQEozAiSAwD/YA2wAHjaY2GAABYIrmKoAgACggEBAAAAeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP6z1///A8lX//9LSkJVMjCyMcCYDIxMQIKJARUwMgx7AAA/9QiLAAAAAAAAAAAAAABGALJ42mNgZKhiEGNuYfrPoMnAwGimps+ox6jPqKbEz8jHCMLyjHJAmk1czMie0cxInlHMDChrZs6cJyaosI+NlzmU34I/lImPdb+CoHgXCyujIosYtzTfKlYBtlWyuqwKjKwsjNvFTdlkGDnZ1srKrmXjZJRhMxVvZxFgA+rgYI9iYoriV1TYzybAwsDABHeLBIMT0DUg29VBTjEHucvcjtGeUVyOUZ6JaFcybefnZ5HuFdEX6ZVm5uMvniemxuXmzqUmNs+FeOfHCeiKzfPi4vKaJ6YrUCDOIiM8YYKwDIu4OMRbrOtkZdex4vMWACzGM5B42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwaJMjEyMzPzJ+Tk5qcklmfl58WmZOTlcCD4Ak9QKlAAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAQAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPRNayUZGA0AM8UETgAA)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.up-icon {
+  font-family: 'rateFont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: block;
+}
+
+.up-relative {
+  position: relative;
+}
+
+.up-icon-main {
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.up-icon-collection-fill:before {
+  content: '\e6ea';
+}
+
+.up-icon-collection:before {
+  content: '\e6eb';
+}
+
+.up-rate-box {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+</style>