fix: shortpassword、circleProgress、Progress优化 (#579)

* fix: taro drag

* feat: v3 progress taro

* feat: progress 百分比不同尺寸样式增加

* feat: circleProgress taro

* fix: avatar圆角修复

* fix: shortpassword 键盘弹起优化

* fix: progress cricleprogress taro 适配

src/packages/__VUE/circleprogress/index.scss

@@ -7,13 +7,38 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .nut-circleprogress__right {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: right;
+  }
+  .nut-circleprogress__left {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: left;
+  }
 
   .nut-circleprogress__line {
     position: absolute;
-    width: 50%;
+    width: 100%;
     height: 100%;
     top: 0;
     overflow: hidden;
+    &.nut-circleprogress__l {
+      top: 0px;
+      transform: rotate(0deg);
+      left: 0px;
+    }
+
+    &.nut-circleprogress__r {
+      top: 0px;
+      transform: rotate(180deg);
+      right: 0px;
+    }
   }
 
   .nut-circleprogress__progress {
@@ -27,18 +52,6 @@
     color: rgba(29, 29, 33, 1);
   }
 
-  .nut-circleprogress__l {
-    top: 0px;
-    transform: rotate(0deg);
-    left: 0px;
-  }
-
-  .nut-circleprogress__r {
-    top: 0px;
-    transform: rotate(180deg);
-    right: 0px;
-  }
-
   .nut-circleprogress__line__c {
     width: 200%;
     height: 100%;

src/packages/__VUE/circleprogress/index.taro.vue

@@ -1,12 +1,16 @@
 <template>
   <div :class="classes" :style="pieStyle">
-    <div v-if="!isMobile">
-      <div class="nut-circleprogress__line nut-circleprogress__r">
-        <div class="nut-circleprogress__line__c" :style="RightStyle"></div>
+    <div :style="mobileStyle" v-if="!isMobile">
+      <div class="nut-circleprogress__right">
+        <div class="nut-circleprogress__line nut-circleprogress__r">
+          <div class="nut-circleprogress__line__c" :style="RightStyle"></div>
+        </div>
       </div>
-      <div class="nut-circleprogress__progress">{{ progress }}%</div>
-      <div class="nut-circleprogress__line nut-circleprogress__l">
-        <div class="nut-circleprogress__line__c" :style="LeftStyle"></div>
+      <div class="nut-circleprogress__progress">{{ progress }} %</div>
+      <div class="nut-circleprogress__left">
+        <div class="nut-circleprogress__line nut-circleprogress__l">
+          <div class="nut-circleprogress__line__c" :style="LeftStyle"></div>
+        </div>
       </div>
     </div>
     <div v-else>
@@ -120,11 +124,17 @@ export default create({
         height: (cricleData.radius + cricleData.strokeOutWidth) * 2 + 'px'
       };
     });
+    const mobileStyle = computed(() => {
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    });
     const RightStyle = computed(() => {
       // taro转的h5不支持使用border-top这种边框属性，目前解决方案，taro转的h5使用svg实现
       return {
         transform: `rotate(${rotateRight.value + 'deg'})`,
-        transition: `all 0.2s`,
+        transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
         borderLeft: `${InnerWidth.value + 'px'} solid  ${
           cricleData.backColor
@@ -141,7 +151,7 @@ export default create({
       // taro转的h5不支持使用border-top这种边框属性
       return {
         transform: `rotate(${rotateLeft.value + 'deg'})`,
-        transition: `all 0.2s`,
+        transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
         borderLeft: `${InnerWidth.value + 'px'} solid  ${
           cricleData.backColor
@@ -191,7 +201,8 @@ export default create({
       RightStyle,
       LeftStyle,
       option,
-      arcLength
+      arcLength,
+      mobileStyle
     };
   }
 });

src/packages/__VUE/progress/index.scss

@@ -92,7 +92,7 @@
     border-radius: 5px;
     position: absolute;
     transition: all 0.4s;
-    top: -26%;
+    top: -42%;
   }
   .nut-icon-success,
   .nut-icon-fail {

src/packages/__VUE/progress/index.taro.vue

@@ -97,7 +97,7 @@ export default create({
   },
   setup(props, { emit }) {
     const height = ref(props.strokeWidth + 'px');
-    const progressOuter = ref();
+    const progressOuter = ref<any>();
     const left = ref();
     const bgStyle = computed(() => {
       return {
@@ -112,13 +112,13 @@ export default create({
     });
     const slideLeft = async (values: String | Number) => {
       if (Taro.getEnv() === 'WEB') {
-        left.value =
-          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+        setTimeout(() => {
+          left.value =
+            progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+        }, 200);
       } else {
         setTimeout(() => {
-          const query = (Taro.createSelectorQuery() as any).in(
-            getCurrentInstance
-          );
+          const query = Taro.createSelectorQuery() as any;
           query
             .select('.nut-progress-outer')
             .boundingClientRect((rec: any) => {

src/packages/__VUE/progress/index.vue

@@ -120,13 +120,13 @@ export default create({
         console.log('values', values);
 
         left.value =
-          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+          progressOuter.value.offsetWidth * Number(values) * 0.01 - 5 + 'px';
       }
     );
     onMounted(() => {
       left.value =
         progressOuter.value.offsetWidth * Number(props.percentage) * 0.01 -
-        4 +
+        5 +
         'px';
     });
     return {

src/packages/__VUE/shortpassword/index.scss

@@ -29,16 +29,36 @@
     height: 41px;
     border-radius: 4px;
   }
-  input {
+  .nut-input-real {
+    position: absolute;
+    right: 247px;
+    width: 247px;
+    height: 41px;
+  }
+}
+.nut-input-normalw {
+  padding: 0px 0 10px 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  .nut-input-site {
     width: 247px;
     height: 41px;
     border-radius: 4px;
   }
   .nut-input-real {
-    padding: 0 12px;
-    opacity: 0;
+    padding: 0 1200px 0 0;
+    width: 0;
+    position: absolute;
+    right: 0;
+    width: 247px;
+    height: 41px;
+  }
+  .nut-shortpsd-fake {
+    top: 5%;
   }
 }
+
 .nut-input-real-taro {
   width: 0;
   padding: 0 12px;
@@ -62,7 +82,7 @@
   position: absolute;
   left: 0;
   top: 29%;
-  z-index: 0;
+  z-index: 10;
 }
 
 .nut-shortpsd-li {

src/packages/__VUE/shortpassword/index.taro.vue

@@ -15,6 +15,7 @@
       <view class="nut-shortpsd-title">{{ title }}</view>
       <view class="nut-shortpsdWx-subtitle">{{ desc }}</view>
       <input
+        v-if="isWx"
         class="nut-input-real-taro"
         type="number"
         :maxlength="length"
@@ -22,6 +23,15 @@
         @input="changeValue"
       />
       <view class="nut-input-w">
+        <input
+          v-if="!isWx"
+          ref="realpwd"
+          class="nut-input-real"
+          type="number"
+          maxlength="6"
+          v-model="realInput"
+          @input="changeValue"
+        />
         <view class="nut-input-site"></view>
         <view class="nut-shortpsd-fake" @click="focus">
           <view
@@ -109,15 +119,19 @@ export default create({
     const realpwd = ref();
     const comLen = computed(() => range(Number(props.length)));
     const show = ref(props.visible);
+    const isWx = ref(false); // 判断是否为微信端
     // 方法
     function sureClick() {
       emit('ok', realInput.value);
     }
     function focus() {
-      let a = document.getElementsByClassName('nut-input-real-taro')[0] as any;
-      let h = a.children[0];
-      a.focus();
-      if (h) {
+      let a: any = '';
+      if (isWx.value) {
+        a = document.getElementsByClassName('nut-input-real-taro')[0] as any;
+        a.focus();
+      } else {
+        a = document.getElementsByClassName('nut-input-real')[0] as any;
+        let h = a.children[0];
         h.focus();
       }
     }
@@ -156,6 +170,13 @@ export default create({
     }
     onMounted(() => {
       eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
+      console.log(Taro.getEnv());
+
+      if (Taro.getEnv() === 'WEB') {
+        isWx.value = false;
+      } else {
+        isWx.value = true;
+      }
     });
     return {
       comLen,
@@ -168,7 +189,8 @@ export default create({
       onTips,
       focus,
       show,
-      closeIcon
+      closeIcon,
+      isWx
     };
   }
 });

src/packages/__VUE/shortpassword/index.vue

@@ -14,7 +14,8 @@
     >
       <view class="nut-shortpsd-title">{{ title }}</view>
       <view class="nut-shortpsd-subtitle">{{ desc }}</view>
-      <view class="nut-input-w">
+
+      <div class="nut-input-normalw">
         <input
           ref="realpwd"
           class="nut-input-real"
@@ -23,6 +24,7 @@
           v-model="realInput"
           @input="changeValue"
         />
+        <div class="nut-input-site"></div>
         <view class="nut-shortpsd-fake" @click="focus">
           <view
             class="nut-shortpsd-li"
@@ -35,7 +37,7 @@
             ></view>
           </view>
         </view>
-      </view>
+      </div>
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
         <view class="nut-shortpsd-forget" v-if="tips">