front/front-vue/src/views/system/company/certification.vue

<template>
    <div class="myaqlDeploy">
        <div class="deplouTitle" style="margin-top:3%;margin-bottom:4%">
            <span style="margin-left:6%">申请人:<span>崔牛皮</span></span>
            <span style="margin-left:8%">申请时间:</span><span>2021/8/17</span>
            <span></span>
        </div>
        <div class="deployBox">
            <el-steps align-center :active="1 " show-icon finish-status="success">
                <el-step title="提交证件资料"></el-step>
                <el-step title="绑定对公账户"></el-step>
                <el-step title="打款验证"></el-step>
                <el-step title="实名审核"></el-step>
            </el-steps>
            <div class="basicInfo" v-if="active === 0">
                <el-container>
                    <el-main>
                        <el-row class="substance">
                            <h4>资料准备：</h4>
                            <p>1.统一社会信用代码证；</p>
                            <p>2.企业法人身份证件；</p>
                            <p>3.管理员身份证件：即当前经办人员身份证件，管理员与企业法人不是同一人时，需提供管理员身份证件，管理员将负责贵司账号的管理及操作员账号管理；</p>
                            <p>4.管理员授权委托书：管理员与法人不是同一人时，需 下载授权委托书模板并根据要求填写内容，加盖公章后上传，当前账户的小米ID为2345548738；</p>
                            <p>5.CFCA数字证书申请表：需下载机构数字证书申请表模板并根据要求填写内容，加盖公章后上传。</p>
                            <h4>资料上传要求：</h4>
                            <p>1. 营业执照及身份证请上传最新证件原件的彩色扫描件，如使用复印件请加盖公章上传；</p>
                            <p>2. 图片支持格式：jpg /jpeg /png /bmp格式，图片大小不超过20M；</p>
                            <p>3. 经微信传输过的图片会导致图片失真，请避免使用经微信传输过的图片；</p>
                            <p>4. 上传图片后，系统将自动识别并填写相关信息，请核对系统识别结果是否准确；</p>
                            <p>5. 请一并准备证件盖章复印件，与开通单项业务时需提交的增信资料统一邮寄。</p>
                        </el-row>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>营业执照</span><span>(请您按下面流程进行操作)</span><span style="color:#005CFF">请核对系统识别结果是否正确</span>
                        </el-row>
                    </el-main>
                    <el-container>
                        <el-aside><img src="" style="height: 400px;margin-left: 3%;"></el-aside>
                        <el-main>
                            <el-row>
                                <el-col :span="8" style="text-align:right;line-height: 35px;">公司名称:
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%;">
                                <el-col :span="8" style="text-align:right;line-height: 35px;"><span style="width:50px">统一社会信用代码/营业执照号:</span>
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;">住所地:
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;">法定代表人:
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;">住所地:
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;"><span class="demonstration">成立时间:</span>
                                </el-col>
                                <el-col :span="16">
                                    <div class="block">

                                        <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;"> <span class="demonstration">营业期限(止): </span>
                                </el-col>
                                <el-col :span="16">
                                    <div class="block">

                                        <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                                        </el-date-picker>
                                        <el-checkbox v-model="checked">长期有效</el-checkbox>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:2%">
                                <el-col :span="8" style="text-align:right;line-height: 35px;">企业电话:
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="请输入内容" style="width: 40%;"></el-input>
                                </el-col>
                            </el-row>
                        </el-main>
                    </el-container>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>法定代表人身份证件</span><span>(请按照要求上传法定代表人身份证证件图片)</span><span style="color:#005CFF">请核对系统识别结果是否正确</span>
                        </el-row>
                        <el-container>
                            <el-aside width="400px" style="background-color: #fff;"> 证件类型:<el-select v-model="value" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-aside>
                            <el-aside width="220px" style="background-color: #fff;">
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-aside>

                            <el-main>
                                <el-row>
                                    <el-col :span="8" style="text-align:right;line-height: 35px;">姓名:
                                    </el-col>
                                    <el-col :span="16">
                                        <el-input v-model="input" placeholder="请输入内容" style="width: 60%;"></el-input>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:2%">
                                    <el-col :span="8" style="text-align:right;line-height: 35px;">身份证号:
                                    </el-col>
                                    <el-col :span="16">
                                        <el-input v-model="input" placeholder="请输入内容" style="width: 60%;"></el-input>
                                    </el-col>
                                </el-row>
                            </el-main>
                        </el-container>
                    </el-main>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>账号管理员身份证件</span><span>(请按照要求上传法定代表人身份证证件图片)</span><span style="color:#005CFF">请核对系统识别结果是否正确</span>
                        </el-row>
                        <el-container>
                            <el-aside width="400px" style="background-color: #fff;"> 证件类型:<el-select v-model="value" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-aside>
                            <el-aside width="220px" style="background-color: #fff;">
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-aside>

                            <el-main>
                                <el-row>
                                    <el-col :span="8" style="text-align:right;line-height: 35px;">姓名:
                                    </el-col>
                                    <el-col :span="16">
                                        <el-input v-model="input" placeholder="请输入内容" style="width: 60%;"></el-input>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:2%">
                                    <el-col :span="8" style="text-align:right;line-height: 35px;">身份证号:
                                    </el-col>
                                    <el-col :span="16">
                                        <el-input v-model="input" placeholder="请输入内容" style="width: 60%;"></el-input>
                                    </el-col>
                                </el-row>
                            </el-main>
                        </el-container>
                    </el-main>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>人员信息</span>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复核人员:<el-input v-model="input" placeholder="请输入内容" style="width: 45%;"></el-input>
                            </el-col>
                            <el-col :span="12">联系电话：<el-input v-model="input" placeholder="请输入内容" style="width: 45%;"></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:3%">
                            <el-col :span="12">业务操作员：<el-input v-model="input" placeholder="请输入内容" style="width: 45%;"></el-input>
                            </el-col>
                            <el-col :span="12">联系电话：<el-input v-model="input" placeholder="请输入内容" style="width: 45%;"></el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>法人授权书：</span>
                        </el-row>
                        <el-row>
                            <!-- 下载数据模板 -->
                            <div class="div-label"><label>上传文件之前请先下载<span style="font-weight: bold">数据模板</span></label></div>
                            <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary">
                                <i class="el-icon-download el-icon--right"></i>下载数据模板
                            </el-button>
                            <!-- 上传文件 -->
                            <div class="div-label"><label>上传文件，仅支持<span style="font-weight: bold">.xlsx</span>格式的Excel文件，且大小不超过<span style="font-weight: bold;color: red">10MB</span></label></div>
                            <el-upload class="upload-demo" ref="upload" action accept=".xlsx" :limit="1" :file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :before-upload="beforeUpload" :http-request="httpRequest" :on-success="handleSuccess" :on-error="handleError">
                                <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-row>
                    </el-main>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <!-- 下载数据模板 -->
                            <div class="div-label"><label>上传文件之前请先下载<span style="font-weight: bold">数据模板</span></label></div>
                            <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary">
                                <i class="el-icon-download el-icon--right"></i>下载数据模板
                            </el-button>
                            <!-- 上传文件 -->
                            <div class="div-label"><label>上传文件，仅支持<span style="font-weight: bold">.xlsx</span>格式的Excel文件，且大小不超过<span style="font-weight: bold;color: red">10MB</span></label></div>
                            <el-upload class="upload-demo" ref="upload" action accept=".xlsx" :limit="1" :file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :before-upload="beforeUpload" :http-request="httpRequest" :on-success="handleSuccess" :on-error="handleError">
                                <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-row>
                    </el-main>
                    <el-main>
                        <el-row style="margin-top:3%">
                            <span style="font-size: 14px;"><span class="separation"></span>其他附件上传：</span>
                        </el-row>
                        <el-row>
                            <!-- 下载数据模板 -->
                            <div class="div-label"><label>上传文件之前请先下载<span style="font-weight: bold">数据模板</span></label></div>
                            <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary">
                                <i class="el-icon-download el-icon--right"></i>下载数据模板
                            </el-button>
                            <!-- 上传文件 -->
                            <div class="div-label"><label>上传文件，仅支持<span style="font-weight: bold">.xlsx</span>格式的Excel文件，且大小不超过<span style="font-weight: bold;color: red">10MB</span></label></div>
                            <el-upload class="upload-demo" ref="upload" action accept=".xlsx" :limit="1" :file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :before-upload="beforeUpload" :http-request="httpRequest" :on-success="handleSuccess" :on-error="handleError">
                                <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-row>
                    </el-main>

                    <el-footer>
                        <el-checkbox v-model="checked">我已阅读并同意</el-checkbox><a href="">《xxxxxxxx融信协议》</a>
                    </el-footer>
                </el-container>
            </div>
            <div class="basicInfo" v-if="active === 1">
                <el-container>
                    <el-main>
                        <el-row>
                            <el-col :span="8">银行开户名称:<el-input v-model="input" placeholder="请输入内容" style="width: 65%;"></el-input>
                            </el-col>
                            <el-col :span="8">开户银行:<el-input v-model="input" placeholder="请输入内容" style="width: 65%;"></el-input>
                            </el-col>
                            <el-col :span="8">银行账号:<el-input v-model="input" placeholder="请输入内容" style="width: 65%;"></el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-footer>
                    </el-footer>
                </el-container>
            </div>
            <div class="basicInfo" v-if="active === 2">
                <el-container>
                    <el-main>
                        <el-row>
                            <el-col :span="8">打款金额:<el-input v-model="input" placeholder="请输入内容" style="width: 65%;"></el-input>
                            </el-col>

                        </el-row>
                    </el-main>
                    <el-footer>
                    </el-footer>
                </el-container>
            </div>
            <div class="basicInfo" v-if="active === 3">
                <el-container>
                    <el-main>
                        <el-row>
                            <div class="approved">
                                <span style="line-height: 150px;color:#976666">实名认证审核通过</span>
                            </div>
                        </el-row>
                    </el-main>
                    <el-footer>
                    </el-footer>
                </el-container>
            </div>

            <div class="deployBtn">
                <el-button style="float:right;margin-top:12px;margin-right: 1%;" @click="next" v-if="active == 0||active == 1||active == 2">下一步</el-button>
                <el-button style="float:right;margin-top:12px;margin-right: 1%;" @click="prev" v-if="active == 1||active == 2||active == 3">上一步</el-button>
                <el-button style="float:right;margin-top:12px;" @click="prev" v-if="active == 2">保存</el-button>
                <el-button style="float:right;margin-top:12px;margin-right: 1%;" v-if="active == 3">提交</el-button>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "GoodsAdd",

    name: "Upload",
    data() {
        return {
            fileList: [{}],
            imageUrl: "",
            tabPosition: "left",
            active: "0",
            input: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
                options: [
                    {
                        value: "选项1",
                        label: "黄金糕",
                    },
                    {
                        value: "选项2",
                        label: "双皮奶",
                    },
                    {
                        value: "选项3",
                        label: "蚵仔煎",
                    },
                    {
                        value: "选项4",
                        label: "龙须面",
                    },
                ],
            },
            value1: "",
            value2: "",
        };
    },
    created() {},
    methods: {
        prev() {
            this.active;
            if (this.active < 0) this.active = 0;
        },
        next() {
            if (this.active++ > 3) this.active = 0;
        },
        // 下载本地文件
        download() {
            window.location.href =
                "http://localhost:8080/template/template.xlsx";
        },
        // 超过文件上传最大个数
        handleExceed(files, fileList) {
            this.$message.warning("很抱歉当前支持最大上传文件个数为 1 个！");
        },
        // 文件上传到服务器之前的文件校验
        beforeUpload(file) {
            const extension = file.name.substring(
                file.name.lastIndexOf(".") + 1
            );
            const size = file.size / 1024 / 1024;
            if (extension !== "xlsx") {
                // 校验文件格式
                this.$message.warning("只支持上传后缀名为.xlsx的Excel文件");
            }
            if (size > 10) {
                // 校验文件大小
                this.$message.warning("文件大小不能超过10MB");
            }
        },
        // 文件状态改变
        handleChange(file, fileList) {
            if (file) {
                this.fileList = fileList.slice(-3);
            }
        },
        // 文件删除时
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList = []; // 文件列表置空
        },
        // 点击文件列表中已上传的文件时的钩子
        handlePreview(file) {
            console.log(file);
        },
        // 文件上传成功
        handleSuccess(response, file, fileList) {
            console.log("-------handleSuccess-------");
            console.log(response);
            this.$message.success("文件 [" + file.name + "] 上传成功");
        },
        // 文件上传失败
        handleError(err, file, fileList) {
            console.log("-------handleError-------");
            console.log(err);
            this.$message.error("文件上传失败");
        },
        // 覆盖默认的上传行为，可以自定义上传的实现
        httpRequest(param) {
            console.log(param);
            const fileObj = param.file; // 获取file文件
            const formData = new FormData(); // FormData对象
            formData.append("file", fileObj); // file封装到FormData里
            // 请求后台上传数据的接口
            this.$http
                .post("/upload", formData, {
                    headers: { "Content-Type": "multipart/form-data" },
                    // url: '/upload',
                    // data: formData
                    // method: 'post'
                })
                .then(
                    (res) => {
                        console.log("-------res--------");
                        console.log(res);
                        if (res.data.meta.status === "200") {
                            this.$message.success(res.data.meta.msg);
                            // 清空文件列表
                            this.fileList = [];
                        } else {
                            this.$message.error(res.data.meta.msg);
                        }
                    },
                    (err) => {
                        console.log("-------err--------");
                        console.log(err);
                        this.$message.error(
                            "上传文件内容有问题，请保证上传文件字段均不为空且正确"
                        );
                    }
                );
        },
        // 上传文件
        submitUpload() {
            if (this.fileList.length === 0) {
                // 上传文件列表为空
                this.$message.warning("请选择一个上传文件");
            } else {
                // 执行上传操作
                this.$refs.upload.submit();
            }
        },
        next() {
            if (this.active++ > 2) {
                this.active = 0;
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>
<style>
.substance p {
    font-family: "微软雅黑", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    letter-spacing: normal;
    color: #666666;
    line-height: normal;
    margin: 0px;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}
.substance h4 {
    font-family: "微软雅黑", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    letter-spacing: normal;
    color: #666666;
    line-height: normal;
    margin: 0px;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}
.separation {
    width: 200px;
    height: 60px;
    margin-top: 10px;
    border-right: 5px solid #005cff;
}
.approved {
    height: 150px;
    width: 60%;
    /* background-color: #f2f2f2; */
    text-align: center;
    border: 1px solid #f2f2f2;
    margin-left: 20%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.div-label {
    padding: 20px 0;
    width: 100%;
}
</style>