Merge branch 'dev-1.5.4' of https://git.banshouhui.com/lijundan/self-support into dev-1.5.4

src/components/upload-progress/upload-progress.vue

 <template>
   <view class="upload-progress">
-    <view :class="['u-flex', 'suspension', {'error': uploadStatus === 3, 'no-active': clicked <= 0}]" @click="openpRrogress">
+    <view
+      id="_drag_button"
+      :class="[
+        'u-flex',
+        'suspension',
+        { error: uploadStatus === 3, 'no-active': clicked <= 0 },
+      ]"
+      @touchstart.capture="touchstart"
+      @touchend.capture="touchend"
+      @touchmove.capture="touchmove"
+      :style="{
+        left: left + 'px',
+        top: top + 'px',
+      }"
+      @click="openpRrogress"
+    >
       <view class="progress" v-if="taskCount > 0">{{ uploadPercentage }}%</view>
       <view class="upload-img" v-else>
         <image class="icon" :src="icon"></image>
@@ -13,17 +28,33 @@
       mode="center"
       :animation="false"
       @close="closePopup"
-			width="690rpx">
+      width="690rpx"
+    >
       <view class="slot-content">
         <view class="upload-title">
-          <text class='status-txt'>图片上传进度</text>
+          <text class="status-txt">图片上传进度</text>
         </view>
 
         <view v-if="taskCount > 0">
           <view class="progress-circle">
-            <u-loading class="loading" v-if="!progressStatus" mode="circle"></u-loading>
-            <u-circle-progress v-if="progressStatus" :width="320" :border-width="20" inactive-color="#F4F5F7" :active-color="progressColor" :percent="uploadPercentage">
-              <view :class="['u-progress-content', {'error': uploadStatus === 3}]"> {{ uploadPercentage }}%</view>
+            <u-loading
+              class="loading"
+              v-if="!progressStatus"
+              mode="circle"
+            ></u-loading>
+            <u-circle-progress
+              v-if="progressStatus"
+              :width="320"
+              :border-width="20"
+              inactive-color="#F4F5F7"
+              :active-color="progressColor"
+              :percent="uploadPercentage"
+            >
+              <view
+                :class="['u-progress-content', { error: uploadStatus === 3 }]"
+              >
+                {{ uploadPercentage }}%</view
+              >
             </u-circle-progress>
           </view>
 
@@ -38,12 +69,16 @@
             </view>
             <view class="u-flex">
               <view class="title">状态</view>
-              <view :class="['status', {'error': uploadStatus === 3}]">{{ uploadStatusName }}</view>
+              <view :class="['status', { error: uploadStatus === 3 }]">{{
+                uploadStatusName
+              }}</view>
             </view>
           </view>
 
           <view class="upload-bottom" v-if="uploadStatus === 3">
-            <view class="button confirm" @click="$u.throttle(retry, 500)">重试</view>
+            <view class="button confirm" @click="$u.throttle(retry, 500)"
+              >重试</view
+            >
           </view>
         </view>
 
@@ -57,17 +92,40 @@
 </template>
 
 <script>
-	/**
+/**
  * upload-progress 图片上传进度
  */
-  import upload from '@/components/upload/task.js'
-	export default {
-		name:"upload-progress",
+import upload from '@/components/upload/task.js'
+const sys = uni.getSystemInfoSync()
+export default {
+  name: 'upload-progress',
+  props: {
+    // 是否启用自动停靠
+    isDock: {
+      type: Boolean,
+      default: false,
+    },
+    // 当前页面是否包含tabbar
+    existTabBar: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       open: false,
       progressStatus: false,
-		clicked: 1
+      clicked: 1,
+      top: sys.windowHeight - 80,
+      left: sys.windowWidth - 50,
+      width: 0,
+      height: 0,
+      offsetWidth: 0,
+      offsetHeight: 0,
+      windowWidth: 0,
+      windowHeight: 0,
+      isMove: true,
+      edge: 10,
     }
   },
   computed: {
@@ -86,13 +144,13 @@
       switch (this.uploadStatus) {
         case 1:
           status = '等待上传'
-            break;
+          break
         case 2:
           status = '上传中'
-            break;
+          break
         case 3:
           status = '上传中断'
-            break;
+          break
       }
       return status
     },
@@ -102,7 +160,9 @@
     uploadPercentage() {
       const num = this.uploadSuccess
       const total = this.uploadTotal
-        return total > 0 ? Math.floor(Math.round(num / total * 10000) / 100.00) : 0
+      return total > 0
+        ? Math.floor(Math.round((num / total) * 10000) / 100.0)
+        : 0
     },
   },
   watch: {
@@ -121,6 +181,30 @@
   created() {
     this.changeActive()
   },
+  mounted() {
+    this.windowWidth = sys.windowWidth
+    this.windowHeight = sys.windowHeight
+
+    // #ifdef APP-PLUS
+    this.existTabBar && (this.windowHeight -= 50)
+    // #endif
+    if (sys.windowTop) {
+      this.windowHeight += sys.windowTop
+    }
+
+    const query = uni.createSelectorQuery().in(this)
+    query
+      .select('#_drag_button')
+      .boundingClientRect((data) => {
+        this.width = data.width
+        this.height = data.height
+        this.offsetWidth = data.width / 2
+        this.offsetHeight = data.height / 2
+        // this.left = this.windowWidth - this.width - this.edge
+        // this.top = this.windowHeight - this.height - this.edge
+      })
+      .exec()
+  },
   methods: {
     closePopup() {
       this.progressStatus = false
@@ -134,34 +218,84 @@
       }, 300)
     },
     retry() {
-        if(this.uploadStatus !== 2) upload.uploadImageTask(this)
+      if (this.uploadStatus !== 2) upload.uploadImageTask(this)
     },
     changeActive() {
       setTimeout(() => {
         // 三秒不点击，算失去活跃
         this.clicked = Math.max(0, this.clicked - 1)
       }, 3000)
+    },
+    touchstart(e) {},
+    touchend(e) {
+      if (this.isDock) {
+        let edgeRigth = this.windowWidth - this.width - this.edge
+
+        if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+          this.left = this.edge
+        } else {
+          this.left = edgeRigth
+        }
       }
+
+      this.isMove = false
+    },
+    touchmove(e) {
+      // 单指触摸
+      if (e.touches.length !== 1) {
+        return false
       }
+
+      this.isMove = true
+
+      let clientY = e.touches[0].clientY - this.offsetHeight
+      // #ifdef H5
+      clientY += this.height
+      // #endif
+      let edgeBottom = this.windowHeight - this.height - this.edge
+
+      // 上下触及边界
+      if (clientY < this.edge) {
+        this.top = this.edge
+      } else if (clientY > edgeBottom) {
+        this.top = edgeBottom
+      } else {
+        this.top = clientY
       }
+
+      let clientX = e.touches[0].clientX - this.offsetWidth
+      // #ifdef H5
+      clientX += this.width
+      // #endif
+      let edgeLeft = this.windowWidth - this.width - this.edge
+
+      // 左右触及边界
+      if (clientX < this.edge) {
+        this.left = this.edge
+      } else if (clientX > edgeLeft) {
+        this.left = edgeLeft
+      } else {
+        this.left = clientX
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss">
-  .upload-progress {
+.upload-progress {
   width: 100%;
   height: 100%;
   .suspension {
     position: fixed;
-      right: 20rpx;
-      bottom: 20%;
     width: 80rpx;
     height: 80rpx;
     border-radius: 50%;
-      background: #2272FF;
+    background: #2272ff;
     z-index: 999;
     opacity: 1;
     &.error {
-        background: #FA5A49;
+      background: #fa5a49;
     }
     &.no-active {
       opacity: 0.6;
@@ -206,10 +340,10 @@
         line-height: 320rpx;
       }
       .u-progress-content {
-          color: #2272FF;
+        color: #2272ff;
         font-size: 60rpx;
         &.error {
-            color: #FA5A49;
+          color: #fa5a49;
         }
       }
     }
@@ -229,13 +363,13 @@
           color: #333;
         }
         .resolve {
-            color: #2272FF;
+          color: #2272ff;
         }
         .status {
-            color: #2272FF;
+          color: #2272ff;
           font-size: 36rpx;
           &.error {
-              color: #FA5A49;
+            color: #fa5a49;
           }
         }
       }
@@ -255,8 +389,8 @@
       }
       .confirm {
         margin: 36rpx 30rpx 52rpx 15rpx;
-          background: #2272FF;
-          color: #FFFFFF;
+        background: #2272ff;
+        color: #ffffff;
       }
     }
     .default {
@@ -273,5 +407,5 @@
       }
     }
   }
-  }
+}
 </style>