Browse Source

新增加载条

master
liaoxinyu 11 months ago
parent
commit
00b028cd95
  1. 2
      api/member.js
  2. 4
      element/index.js
  3. 108
      pages/auth/certification.vue
  4. 1
      pages/base/mine.vue

2
api/member.js

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

4
element/index.js

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

108
pages/auth/certification.vue

@ -76,7 +76,7 @@
<v-input v-model="form.phone" :placeholder="$t('auth.d0')"></v-input> <v-input v-model="form.phone" :placeholder="$t('auth.d0')"></v-input>
</view> </view>
</view> </view>
<div class="form-item border-b p-md"> <div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
<div class="color-light p-b-xs">1{{$t('auth.b5')}}</div> <div class="color-light p-b-xs">1{{$t('auth.b5')}}</div>
<div class="d-flex justify-between m-t-md "> <div class="d-flex justify-between m-t-md ">
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm"> <div class="examples m-r-xs bg-panel-4 p-md rounded-sm">
@ -88,8 +88,15 @@
<img v-else :src="form.front_img" alt /> <img v-else :src="form.front_img" alt />
</div> </div>
</div> </div>
<el-progress
v-if="boll"
:percentage="uploadProgress"
:status="uploadStatus"
:stroke-width="10"
class="my-2"
></el-progress>
</div> </div>
<div class="form-item border-b p-md"> <div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
<div class="color-light p-b-xs">2{{$t('auth.b6')}}</div> <div class="color-light p-b-xs">2{{$t('auth.b6')}}</div>
<div class="d-flex justify-between m-t-md"> <div class="d-flex justify-between m-t-md">
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm"> <div class="examples m-r-xs bg-panel-4 p-md rounded-sm">
@ -101,6 +108,13 @@
<img v-else :src="form.back_img" alt /> <img v-else :src="form.back_img" alt />
</div> </div>
</div> </div>
<el-progress
v-if="boll1"
:percentage="uploadProgress1"
:status="uploadStatus1"
:stroke-width="10"
class="my-2"
></el-progress>
</div> </div>
<view class="p-md "> <view class="p-md ">
<v-button block type="white" class="w-max rounded-md" ref="btn" <v-button block type="white" class="w-max rounded-md" ref="btn"
@ -146,6 +160,15 @@
value: 2, value: 2,
text: this.$t('auth.d3') text: this.$t('auth.d3')
}], }],
uploadProgress: 0, //
uploadStatus: null,//
progressInterval: null,
boll:false,
uploadProgress1: 0, //
uploadStatus1: null,//
boll1:false,
continueUploading:true,
continueUploading1:true
}; };
}, },
computed: { computed: {
@ -167,9 +190,72 @@
}, },
// //
upLoadImg(chooseImageRes, name) { 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() * 3) + 1;
setTimeout(() => {
this.continueUploading = false;
// 3
setTimeout(() => {
this.continueUploading = true;
}, 1000); // 30003
}, 1000);
}else if(this.uploadProgress1 < 100&&name=='back_img'&&this.continueUploading1){
this.uploadProgress1 += Math.floor(Math.random() * 4) + 1;
setTimeout(() => {
this.continueUploading1 = false;
// 3
setTimeout(() => {
this.continueUploading1 = true;
}, 1600); // 30003
}, 1000);
}
}, 50);
Member.uploadImage(chooseImageRes).then((res) => { Member.uploadImage(chooseImageRes).then((res) => {
this.form[name] = res.data.url; 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)
}
}
// this.$toast.success(this.$t('auth.c1'));
}).catch(() => {
if(name=='front_img'){
this.uploadStatus = 'exception'
this.uploadProgress = 100
}else{
this.uploadStatus1 = 'exception'
this.uploadProgress1 = 100
}
}); });
}, },
getAuthInfo() { getAuthInfo() {
@ -379,4 +465,20 @@
// object-fit: cover; // object-fit: cover;
} }
} }
.el-progress {
position: absolute;
bottom: 8px;
right:-15px;
width: 300rpx;
// margin-top: 10px;
&-bar {
padding-right: 45px;
}
&__text {
font-size: 12px!important;
}
}
</style> </style>

1
pages/base/mine.vue

@ -429,6 +429,7 @@ export default {
}, },
methods: { methods: {
price1(item,index){ price1(item,index){
if (this.hideMoney) return "******";
if (item) { if (item) {
let price = item.toFixed(index).toString(); let price = item.toFixed(index).toString();
let parts = price.split("."); let parts = price.split(".");

Loading…
Cancel
Save