新增加载条和报错提示

api/member.js

@@ -86,7 +86,7 @@ class Member {
      */
     static uploadImage(data) {
         
-        return server.uploadFile(`/uploadImage`,data);
+        return server.uploadFile(`/uploadImage`,data,{loading:false});
     }
 
     // 页面底部信息

element/index.js

@@ -1,8 +1,12 @@
 // 导入自己需要的组件
-import { Slider } from 'element-ui'
+import { Slider,Progress,Steps,Step,Select,Option } from 'element-ui'
+const components = [Slider,Progress,Steps,Step,Select,Option]
 const element = {
   install: function (Vue) {
-    Vue.use(Slider)
+    // Vue.use(Slider)
+	components.forEach(component => {
+	  Vue.use(component)
+	})
   }
 }
 export default element

i18n/lang/en.json

@@ -295,7 +295,8 @@
 		"d2": "Passport",
 		"d3": "ID card",
 		"d4": "Select date",
-		"d5": "Please select"
+		"d5": "Please select",
+		"uploadfailed": "Upload failed, please upload again."
 	},
 	"exchange": {
 		"a0": "Spot Trading",

i18n/lang/zh-TW.json

@@ -295,7 +295,8 @@
 		"d2": "護照",
 		"d3": "身份證",
 		"d4": "選擇日期",
-		"d5": "請選擇"
+		"d5": "請選擇",
+		"uploadfailed": "上傳失敗，請重新上傳"
 	},
 	"exchange": {
 		"a0": "幣幣",

pages/auth/senior.vue

@@ -30,7 +30,7 @@
                 </view>
             </view> -->
 
-            <div class="form-item   p-md m-md">
+            <div class="form-item   p-md m-md" style="padding-bottom: 30px !important;position: relative;">
                 <div class="color-light p-b-xs">1、{{$t('auth.b5')}}</div>
                 <div class="d-flex justify-between m-t-md ">
                     <div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
@@ -44,8 +44,15 @@
                         <img v-else :src="form.front_img" alt/>
                     </div>
                 </div>
+				<el-progress
+				  v-if="boll"
+				  :percentage="uploadProgress"
+				  :status="uploadStatus"
+				  :stroke-width="10"
+				  class="my-2"
+				></el-progress>
             </div>
-            <div class="form-item  p-md m-md">
+            <div class="form-item  p-md m-md" style="padding-bottom: 30px !important;position: relative;">
                 <div class="color-light p-b-xs">2、{{$t('auth.b6')}}</div>
                 <div class="d-flex justify-between m-t-md">
                     <div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
@@ -59,6 +66,13 @@
                         <img v-else :src="form.back_img" alt/>
                     </div>
                 </div>
+				<el-progress
+				  v-if="boll1"
+				  :percentage="uploadProgress1"
+				  :status="uploadStatus1"
+				  :stroke-width="10"
+				  class="my-2"
+				></el-progress>
             </div>
             <!-- <div class="form-item p-md m-md ">
               <div class="color-light  p-b-xs">3、{{$t('auth.b7')}}</div>
@@ -105,6 +119,15 @@ export default {
                 back_img: "",
                 front_img: "",
             },
+			uploadProgress: 0,    // 新增进度状态
+			uploadStatus: null,// 新增状态类型
+			progressInterval: null,
+			boll:false,
+			uploadProgress1: 0,    // 新增进度状态
+			uploadStatus1: null,// 新增状态类型
+			boll1:false,
+			continueUploading:true,
+			continueUploading1:true
         };
     },
     computed: {
@@ -157,10 +180,75 @@ export default {
         },
         // 上传图片
         upLoadImg(chooseImageRes, name) {
+			if(name=='front_img'){
+				this.uploadStatus = null // 重置状态
+				this.uploadProgress = 0 // 重置进度
+				this.boll = true
+			}else{
+				this.uploadStatus1 = null // 重置状态
+				this.uploadProgress1 = 0 // 重置进度
+				this.boll1 = true
+			}
+			
+			clearInterval(this.progressInterval); // 清除之前的定时器
+			
+			this.progressInterval = setInterval(() => {
+			  if (this.uploadProgress < 100&&name=='front_img'&&this.continueUploading) {
+			    this.uploadProgress += Math.floor(Math.random() * 1) + 1;
+				setTimeout(() => {
+				  this.continueUploading = false;
+				  // 暂停3秒后继续累加
+				  setTimeout(() => {
+				    this.continueUploading = true;
+				  }, 3000); // 这里的3000毫秒表示暂停3秒后继续
+				}, 1000);
+			  }else if(this.uploadProgress1 < 100&&name=='back_img'&&this.continueUploading1){
+				this.uploadProgress1 += Math.floor(Math.random() * 1) + 1;
+				setTimeout(() => {
+				  this.continueUploading1 = false;
+				  // 暂停3秒后继续累加
+				  setTimeout(() => {
+				    this.continueUploading1 = true;
+				  }, 2600); // 这里的3000毫秒表示暂停3秒后继续
+				}, 1000);
+			  }
+			}, 50);
+			
+			let _thas = this
             Member.uploadImage(chooseImageRes).then((res) => {
                 this.form[name] = res.data.url;
                 this.$toast.success(this.$t('auth.c1'));
-            });
+				if(res.data.url){
+					if(name=='front_img'){
+						setTimeout(() => {
+						  this.uploadStatus = 'success'
+						  this.uploadProgress = 100
+						  clearInterval(this.progressInterval); // 清除之前的定时器
+						  setTimeout(() => {
+						  	this.boll = false
+						  },3000)
+						}, 2000)
+					}else{
+						setTimeout(() => {
+						  this.uploadStatus1 = 'success'
+						  this.uploadProgress1 = 100
+						  clearInterval(this.progressInterval); // 清除之前的定时器
+						  setTimeout(() => {
+						  	this.boll1 = false
+						  },3000)
+						}, 2000)
+					}
+				}
+            }).catch(() => {
+				_thas.$toast(_thas.$t('auth.uploadfailed'));
+				if(name=='front_img'){
+					this.uploadStatus = 'exception'
+					this.uploadProgress = 100
+				}else{
+					this.uploadStatus1 = 'exception'
+					this.uploadProgress1 = 100
+				}
+			});
         },
         // 提交审核
         topAuth() {
@@ -233,4 +321,19 @@ export default {
 .bg-panel-3{
 	background-color: #242424;
 }
+.el-progress {
+  position: absolute;
+  bottom: 8px;
+  right: 5px;
+  width: 300rpx;
+  // margin-top: 10px;
+  
+  &-bar {
+    padding-right: 45px;
+  }
+  
+  &__text {
+    font-size: 12px!important;
+  }
+}
 </style>