Pārlūkot izejas kodu

feature_20260506_增加照片上传进度UI效果

zhujindu 2 dienas atpakaļ
vecāks
revīzija
41d5e32977
1 mainītis faili ar 10 papildinājumiem un 10 dzēšanām
  1. 10 10
      src/components/uploadVNormalTaskPhoto.vue

+ 10 - 10
src/components/uploadVNormalTaskPhoto.vue

@@ -49,7 +49,7 @@
             <div class="ring-filename" id="d2name">-</div>
             <div class="ring-list" id="d2dots">
               <div
-                v-for="(value, index) in uploadImgDemo"
+                v-for="(value, index) in uploadImgTotal"
                 class="ring-dot"
                 :id="`dot${index}`"></div>
             </div>
@@ -457,7 +457,7 @@ export default {
       // area.style.display = 'flex';
       // const dots = document.getElementById('d2dots');
       // dots.innerHTML = '';
-      // for (let i = 0; i < this.uploadImgDemo; i++) {
+      // for (let i = 0; i < this.uploadImgTotal; i++) {
       //   const d = document.createElement('div');
       //   d.className = 'ring-dot';
       //   d.id = `dot${i}`;
@@ -467,15 +467,15 @@ export default {
     },
     runD2(delay) {
       //   this.NAMES = Array.from(
-      //     { length: this.uploadImgDemo },
+      //     { length: this.uploadImgTotal },
       //     (_, i) => `IMG_${String(2001 + i).padStart(4, '0')}.jpg`,
       //   );
-      if (this.d2count >= this.uploadImgDemo) {
+      if (this.d2count >= this.uploadImgTotal) {
         document.getElementById('d2sub').textContent = '完成';
         document.getElementById('d2name').textContent = '全部上传成功 ✅';
         return;
       }
-      if (this.uploadImgDemo >= 2) {
+      if (this.uploadImgTotal >= 2) {
         this.d2timer = setTimeout(() => {
           if (this.d2count > 0) {
             document.getElementById(`dot${this.d2count - 1}`).className = 'ring-dot done';
@@ -483,12 +483,12 @@ export default {
           document.getElementById(`dot${this.d2count}`).className = 'ring-dot active';
           document.getElementById('d2name').textContent = '正在上传。。。';
           this.d2count++;
-          const pct = Math.round((this.d2count / this.uploadImgDemo) * 100);
+          const pct = Math.round((this.d2count / this.uploadImgTotal) * 100);
           document.getElementById('d2pct').textContent = pct + '%';
-          const offset = 251.2 * (1 - this.d2count / this.uploadImgDemo);
+          const offset = 251.2 * (1 - this.d2count / this.uploadImgTotal);
           document.getElementById('d2ring').style.strokeDashoffset = offset;
-          document.getElementById('d2sub').textContent = `${this.d2count}/${this.uploadImgDemo}`;
-          if (this.d2count >= this.uploadImgDemo * 0.7) {
+          document.getElementById('d2sub').textContent = `${this.d2count}/${this.uploadImgTotal}`;
+          if (this.d2count >= this.uploadImgTotal * 0.7) {
             clearTimeout(this.d2timer);
           }
           this.runD2();
@@ -499,7 +499,7 @@ export default {
         document.getElementById('d2name').textContent = '正在上传。。。';
         document.getElementById('d2pct').textContent = '30%';
         document.getElementById('d2ring').style.strokeDashoffset = 30;
-        document.getElementById('d2sub').textContent = `0/${this.uploadImgDemo}`;
+        document.getElementById('d2sub').textContent = `0/${this.uploadImgTotal}`;
       }
     },
   },