Skybtcs_H5/pages/auth/senior.vue

<template>
    <div class="layout-page" :style="themeStyle">
        <v-header :title="$t('auth.a4')"></v-header>
        <main class="layout-main">
            <div class="form-item   p-md m-md">
                <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">
                        <img src="static/img/fill6.png"/>
                    </div>
                    <div
                        @click="getFile('front_img')"
                        class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
						style="position: relative;"
                    >
                        <van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph"/>
                        <img v-else :src="form.front_img" alt/>
						<progress v-if="uploadPercentbol" :percent="uploadPercent" show-info stroke-width="3" style="width: 150px;position: absolute;bottom: -20px;right: 0px;" />
                    </div>
                </div>
            </div>
            <div class="form-item  p-md m-md">
                <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">
                        <img src="static/img/fill7.png"/>
                    </div>
                    <div
                        @click="getFile('back_img')"
                        class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
						style="position: relative;"
                    >
                        <van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph"/>
                        <img v-else :src="form.back_img" alt/>
						<progress v-if="uploadPercentbol1" :percent="uploadPercent1" show-info stroke-width="3" style="width: 150px;position: absolute;bottom: -20px;right: 0px;" />
                    </div>
                </div>
            </div>
        </main>
        <div class="p-md">
            <v-button block type="green" class="w-max rounded-lg" @click="topAuth" ref="btn">{{$t('common.submit')}}
            </v-button>
        </div>
        <!-- <van-toast id="van-toast"/> -->
    </div>
</template>
<script>
import utils from "@/utils";
import Profile from "@/api/profile";
import Member from "@/api/member";
import {mapGetters} from "vuex";

export default {
    data() {
        return {
            detail: {},
            countryList: [],
            imgBase: undefined,
			uploadPercent: 0,
			uploadPercentbol:true,
			uploadPercentbol1:true,
			uploadPercent1: 0,
            form: {
                hand_img: "",
                back_img: "",
                front_img: "",
            },
        };
    },
    computed: {
        ...mapGetters(['themeStyle']),
    },
    methods: {
        getFile(name) {
            // console.log(name)
            this.$getFile({count: 1}).then((res) => {
                // this.upLoadImg(res, name);
				const MAX_SIZE = 5 * 1024 * 1024;
				if(res.tempFiles[0]&&res.tempFiles[0].size > MAX_SIZE){
				this.$toast(this.$t('auth.d6')+'5M');
				}else{
				this.upLoadImg(res, name);
				}
            })
        },
        // 上传图片
        upLoadImg(chooseImageRes, name1) {
			if(name1=='front_img'){
				this.uploadPercent = 0;
				this.uploadPercentbol = true;
				const uploadTask = uni.uploadFile({
					url: 'https://skyada.skybtcss.com/api/app/uploadImage',
					filePath: chooseImageRes.tempFiles[0].path,
					name: 'image',
					header: {
						'authorization': uni.getStorageSync('token')
					},
					success: response => {
					  // console.log('上传成功', response)
					  const img = JSON.parse(response.data);
					  this.form[name1] = img.data.url
					  this.uploadPercent = 100
					},
					fail: err => {
						uni.showToast({ title: '上传失败', icon: 'none' })
					}
				})
				
				uploadTask.onProgressUpdate((res) => {
					// console.log('上传进度' + res.progress);
					this.uploadPercent = res.progress
					if(this.uploadPercent==100){
						setTimeout(()=>{
							this.uploadPercentbol = false
						},1000)
					}
				});
			}else{
				this.uploadPercent1 = 0;
				this.uploadPercentbol1 = true;
				const uploadTask = uni.uploadFile({
					url: 'https://skyada.skybtcss.com/api/app/uploadImage',
					filePath: chooseImageRes.tempFiles[0].path,
					name: 'image',
					header: {
						'authorization': uni.getStorageSync('token')
					},
					success: response => {
					  // console.log('上传成功', response)
					  const img = JSON.parse(response.data);
					  this.form[name1] = img.data.url
					  this.uploadPercent1 = 100
					},
					fail: err => {
						uni.showToast({ title: '上传失败', icon: 'none' })
					}
				})
				
				uploadTask.onProgressUpdate((res) => {
					// console.log('上传进度' + res.progress);
					this.uploadPercent1 = res.progress
					if(this.uploadPercent1==100){
						setTimeout(()=>{
							this.uploadPercentbol1 = false
						},1000)
					}
				});
			}
			
            // Member.uploadImage(chooseImageRes).then((res) => {
            //     this.form[name] = res.data.url;
            //     this.$toast.success(this.$t('auth.c1'));
            // });
        },
        // 提交审核
        topAuth() {
            let data = this.form;
            // if (!data.hand_img) {
            //   this.$toast(this.$t('auth.b7'));
            //   return;
            // }
            if (!data.back_img) {
                this.$toast(this.$t('auth.c2'));
                return;
            }
            if (!data.front_img) {
                this.$toast(this.$t('auth.c3'));
                return;
            }
            Profile.topAuth(data, {btn: this.$refs.btn})
                .then(() => {
                    // alert($t('auth.c4') );
                    this.$toast.success(this.$t('auth.c4') + "。");
                    clearTimeout(this.timer); //清除延迟执行
                    this.timer = setTimeout(()=>{  //设置延迟执行
                        this.$router.push("/pages/base/index");
                    },1000);
                    // this.$back();
                })
                .catch(() => {
                });
        },
    }
};
</script>
<style lang="scss" scoped>
	.layout-page{
		background-color: #fff !important;
		background: none;
	}
.examples {
    width: 122px;
    height: 70px;
    display: flex;
    align-items: center;

    img {
        width: 100%;
    }
}

.upload-box {
    width: 150px;
    height: 100px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.bg-panel-3{
	background-color: #fff;
}
::v-deep .uni-progress-info{
	font-size: 12px;
	margin-left: 8px;
}
</style>