投资人认证：上传名片信息，快速获取投资人认证

<template>
  <div class='authContent'>
    <div class='authItem'>
        <div class='authName'>名片上传</div>
        <van-uploader :after-read='uploadLogo' :result-type='fileResultType' :max-count='1' :accept='fileAccept' :max-size='maxSize'>
            <img class='authImg' v-if='imgUrl' :src='imgUrl' alt=''>
            <div class='authTxt' v-else>
                <div class='upTxt'>点击上传</div>
                <i class='iconfont icon-jiantou-right'></i>
            </div>
        </van-uploader>
    </div>
    <div class='authItem'>
        <div class='authName'>认证类型</div>
        <van-cell-group>
            <van-field class='authItemInput' input-align='right' v-model='authInfo.view_type' placeholder='请填写认证类型' name='view_type' />
        </van-cell-group>
    </div>
    <div class='authItem'>
        <div class='authName'>投资机构名称</div>
        <van-cell-group>
            <van-field class='authItemInput' input-align='right' v-model='authInfo.view_company'  placeholder='请填写投资机构名称' name='view_company' />
        </van-cell-group>
    </div>
    <div class='authItem'>
        <div class='authName'>投资轮次</div>
        <van-cell-group>
            <van-field class='authItemInput' input-align='right' v-model='authInfo.view_rounds'  placeholder='请填写投资轮次' name='view_rounds' />
        </van-cell-group>
    </div>
    <div class='authItem'>
        <div class='authName'>投资领域</div>
        <van-cell-group>
            <van-field class='authItemInput' input-align='right' v-model='authInfo.view_area'  placeholder='请填写投资领域' name='view_area' />
        </van-cell-group>
    </div>
    <div class='authItem'>
        <div class='authName'>企业邮箱</div>
        <van-cell-group>
            <van-field class='authItemInput' input-align='right' v-model='authInfo.view_email'  placeholder='请填写企业邮箱' name='view_email' />
        </van-cell-group>
    </div>
    <div class='authRemark'>
        <div class='authRemarkTxt'>提示：</div>
        <div class='authRemarkTxt'>认证流程：按照格式要求提交真实名片信息，提交后工作人员会在2个工作日内进行审核，审核进度请通过“我的-项目融资-投资人认证”查看。如有疑问，可发送邮件至bjkcbb@foxmail.com。</div>
    </div>
    <div class='autnBtn' @click='toSubmit' v-if='authInfo.is_view==0&&authInfo.view_img=='''>提交认证</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data(){
        return{
            to: '/user/attachments',
            fileResultType: 'file',
            fileAccept: 'file',
            imgUrl:'',
            authInfo:{
                view_type:'',
                view_company:'',
                view_rounds:'',
                view_area:'',
                view_email:'',
                view_img:''
            }
        }
    },
    computed:{
        ...mapGetters([
            'userInfo',
            'configs'
        ]),
        userId() {
            return this.userInfo ? this.userInfo.id : '--'
        },
        maxSize() {
            return 20 * 1024 * 1024
        },
    },
    created(){
        this.chkView()
    },
    methods:{
        chkView() {
            var that = this;
            that.$api.get('/project/chkView', {
                uid:that.userInfo.id,
              }).then(function(res) {
                that.authInfo = res.data.data
                if(res.data.data.is_view==1){
                    that.isAuth = res.data.data.is_view
                    that.imgUrl = res.data.data.view_img
                }else if(res.data.data.is_view==0&&res.data.data.view_img!=''){
                    that.isAuth = res.data.data.is_view
                    that.imgUrl = res.data.data.view_img
                }else{
                    that.isAuth = res.data.data.is_view
                }
            })
        },
        uploadLogo(file){
            // 此时可以自行将文件上传至服务器
            const formData = new FormData()
            formData.append('attachment', file.file)
            this.$api.upload(this.to, formData, { processMessage: '正在上传图片...' }).then(res => {
                this.imgUrl=res.data.data.url
            })
        },
        toSubmit() {
            var that = this;
            that.authInfo.view_img=that.imgUrl
            that.$api.post('/user/project/addViewImg', {
                uid:that.userInfo.id,//会员id
                img:that.authInfo.view_img,//项目logo
                view_type:that.authInfo.view_type,
                view_company:that.authInfo.view_company,
                view_rounds:that.authInfo.view_rounds,
                view_area:that.authInfo.view_area,
                view_email:that.authInfo.view_email
              }).then(function(res) {
                that.$notify('上传成功，请等待审核');
                that.chkView()
            })
        },
    }
}
</script>
<style lang='less'>
    .authContent{
        width: 100%;
        height: 100vh;
        border-top: 10px solid #f5f5f5;
        .authItem{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 54px;
            padding: 0 8px;
            border-bottom: 1px solid #F0F2F4;
            background: #fff;

            .authName{
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 500;
                color: #333333;
                line-height: 54px;
            }
            .authImg{
                width: 40px;
                height: 40px;
            }
            .authTxt{
                display: flex;
                align-items: center;
                .upTxt{
                    font-size: 16px;
                    font-family: SourceHanSansSC;
                    font-weight: 500;
                    color: #BCBBBE;
                    line-height: 54px;
                }
                .upIcon{
                    font-size: 16px;
                    color: #BCBBBE;
                }
            }
            .authItemInput{
                width: 240px;
                height: 54px;
                // padding: 0;
                font-size: 16px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #333333;
                line-height: 54px;
            }
        }
        .authRemark{
            padding: 0 12px;
            margin-top: 40px;
            .authRemarkTxt{
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                margin-top: 5px;
            }
        }
        .autnBtn{
            width: 100%;
            height: 47px;
            background: #507CF3;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 47px;
            text-align: center;
            position: fixed;
            bottom: 0;
        }
    }
</style>