个人&企业

src/main/pc-space/src/components/SingleUpload.vue

@@ -0,0 +1,156 @@
+<template>
+    <el-upload
+        class="single-upload"
+        :action="uploadUrl"
+        :headers="headers"
+        :show-file-list="false"
+        :on-success="onSuccess"
+        :before-upload="beforeUpload"
+    >
+        <div></div>
+        <div class="wrapper">
+            <img v-if="imageUrl" :src="imageUrl" class="upload-image" />
+            <i v-else class="el-icon-plus single-uploader-icon"></i>
+            <div v-if="loading" class="loading">
+                <i class="el-icon-loading"></i>
+            </div>
+        </div>
+        <div slot="tip" class="el-upload__tip">
+            <slot></slot>
+        </div>
+    </el-upload>
+</template>
+<script>
+import resolveUrl from 'resolve-url';
+export default {
+    created() {
+        this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
+        this.updateImageUrl(this.value);
+    },
+    props: {
+        value: String,
+        usePrefix: {
+            type: Boolean,
+            default: true
+        },
+        size: {
+            tupe: Number,
+            // 单位M
+            default: 1
+        },
+        url: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            imageUrl: '',
+            loading: false,
+            uploadUrl: ''
+        };
+    },
+    computed: {
+        headers() {
+            return {
+                Authorization: 'Bearer ' + localStorage.getItem('webToken')
+            };
+        }
+    },
+    methods: {
+        onSuccess(res, file) {
+            this.loading = false;
+            this.imageUrl = URL.createObjectURL(file.raw);
+            var newVal = '';
+            if (res instanceof Array) {
+                newVal = res[0];
+            } else {
+                newVal = res;
+            }
+            this.$emit('input', newVal);
+        },
+        onError(err, file, fileList) {
+            console.log(err);
+            console.log(file);
+            console.log(fileList);
+            this.loading = false;
+        },
+        beforeUpload(file) {
+            const isLt = file.size / 1024 / 1024 < this.size;
+            const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
+            if (!isJPG) {
+                this.$message.error('上传图片只能是JPG、JPEG、PNG格式');
+            }
+            if (!isLt) {
+                this.$message.error('文件大小不能超过' + this.size + ' MB!');
+            }
+            return isJPG && isLt;
+        },
+        updateImageUrl(url) {
+            this.imageUrl = url;
+        }
+    },
+    watch: {
+        value(val) {
+            this.updateImageUrl(val);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.single-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #494a4d;
+    background: #1c1e26;
+
+    &:hover {
+        border-color: @prim;
+    }
+}
+
+.upload-image {
+    height: 178px;
+    display: block;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+        border-color: @prim;
+    }
+}
+
+.wrapper {
+    position: relative;
+}
+
+.single-upload .el-upload {
+    position: relative;
+}
+
+.loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.6);
+    color: #333;
+    font-size: 24px;
+}
+</style>

src/main/pc-space/src/main.js

@@ -7,6 +7,7 @@ import ElementUI from 'element-ui';
 import './styles/element/index.css';
 import common from './mixins/common';
 ElementUI.Dialog.props.closeOnClickModal.default = false;
+import SingleUpload from '@/components/SingleUpload';
 import './styles/font.less';
 import './styles/app.less';
 import eventBus from './eventBus';
@@ -18,7 +19,7 @@ Vue.prototype.$colors = {
 Vue.use(ElementUI);
 Vue.use(http);
 Vue.mixin(common);
-
+Vue.component('single-upload', SingleUpload);
 Vue.prototype.$EventBus = eventBus;
 
 Vue.config.productionTip = false;

src/main/pc-space/src/router/index.js

@@ -111,7 +111,23 @@ const routes = [
                 name: 'authentication',
                 component: () => import('../views/user/Authentication.vue'),
                 meta: {
-                    title: '账户与安全'
+                    title: '认证'
+                }
+            },
+            {
+                path: '/userauthentication',
+                name: 'userauthentication',
+                component: () => import('../views/user/UserAuthentication.vue'),
+                meta: {
+                    title: '个人认证'
+                }
+            },
+            {
+                path: '/enterpriseauthentication',
+                name: 'enterpriseauthentication',
+                component: () => import('../views/user/EnterpriseAuthentication.vue'),
+                meta: {
+                    title: '个人认证'
                 }
             }
         ]

src/main/pc-space/src/views/Index.vue

@@ -5,7 +5,13 @@
             <el-main class="main">
                 <router-view />
             </el-main>
-            <el-footer v-if="this.$route.name !== 'security' && this.$route.name !== 'authentication'">
+            <el-footer
+                v-if="
+                    this.$route.name !== 'security' &&
+                    this.$route.name !== 'authentication' &&
+                    this.$route.name !== 'userauthentication'
+                "
+            >
                 <div class="footer center-content">
                     <div class="footer-l">
                         <img class="logo" src="../assets/img/nav_logo@3x.png" alt="" />

src/main/pc-space/src/views/user/EnterpriseAuthentication.vue

@@ -0,0 +1,258 @@
+<template>
+    <div class="container center-content">
+        <div class="title">认证信息</div>
+        <div class="box">
+            <div class="name">企业认证 <span>账户实名认证后不能修改</span></div>
+            <div class="border"></div>
+            <el-form ref="form" :label-position="labelPosition" :model="sizeForm" :rules="registerRule">
+                <el-form-item label="法人姓名" prop="nickname">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入您的真实姓名"
+                        v-model="sizeForm.nickname"
+                    ></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="手机号码" prop="phone">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入您的联系方式"
+                        :disabled="true"
+                        v-model="sizeForm.phone"
+                    ></el-input>
+                </el-form-item> -->
+
+                <el-form-item label="本人身份证 (正面图)" prop="photoFront">
+                    <single-upload class="upload" v-model="sizeForm.photoFront"></single-upload>
+                </el-form-item>
+                <div class="description">{{ explain }}</div>
+                <el-form-item label="本人身份证 (反面图)" prop="photoBackside">
+                    <single-upload class="upload" v-model="sizeForm.photoBackside"></single-upload>
+                </el-form-item>
+                <div class="description">{{ explain }}</div>
+                <el-form-item label="企业名称" prop="email">
+                    <el-input style="width: 300px" placeholder="请输入企业名称" v-model="sizeForm.email"></el-input>
+                </el-form-item>
+                <el-form-item label="工商营业执照注册号/统一社会信用代码" prop="documentNumber">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入18位身份证号"
+                        v-model="sizeForm.documentNumber"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="营业执照" prop="photoBackside">
+                    <single-upload class="upload" v-model="sizeForm.photoBackside"></single-upload>
+                </el-form-item>
+                <div class="description">请上传清晰图片，格式JPG或PNG，大小不得超过 2 M</div>
+            </el-form>
+            <div class="btn">
+                <el-button type="primary" @click="onSubmit">提交审核</el-button>
+                <div class="btn1" @click="Jump">返回</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            labelPosition: 'right',
+            sizeForm: {
+                nickname: '',
+                documentNumber: '',
+                photoFront: '',
+                photoBackside: '',
+                phone: '',
+                email: '',
+                avatar: 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg',
+                type: 'ID_CARD'
+            },
+            typeFl: {},
+            registerRule: {
+                documentNumber: { required: true, message: '请输入您的证件编号', trigger: 'blur' },
+                nickname: { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
+                phone: { required: true, message: '请输入您的联系方式', trigger: 'blur' },
+                email: { type: 'email', required: true, message: '请输入您的邮箱', trigger: 'blur' },
+                photoFront: { required: true, message: '请添加您的身份证（正面）', trigger: 'blur' },
+                photoBackside: { required: true, message: '请添加您的身份证（反面）', trigger: 'blur' }
+            }
+        };
+    },
+    computed: {
+        ...mapState(['userInfo', 'personalInfo']),
+        explain() {
+            const list = [
+                '请上传身份证图片，格式JPG或PNG或JPEG，大小不超过1M',
+                '请上传证件照图片，格式JPG或PNG或JPEG，大小不超过1M'
+            ];
+            return list[this.typeFl == 'ID_CARD' ? 0 : 1];
+        },
+        type() {
+            return this.userInfo.authorities.find(item => {
+                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
+            });
+        }
+    },
+    created() {
+        this.$http
+            .get('/personal/my')
+            .then(res => {
+                this.sizeForm = {
+                    ...res,
+                    nickname: this.userInfo.nickname,
+                    phone: this.userInfo.phone,
+                    avatar: this.userInfo.avatar,
+                    email: this.userInfo.email
+                };
+            })
+            .catch(e => {
+                console.log(e);
+            });
+        this.sizeForm.nickname == this.userInfo.nickname, this.sizeForm.phone == this.userInfo.phone;
+    },
+    methods: {
+        Jump() {},
+        onSubmit() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$confirm('提交资料需要审核，确定吗?', '提示', { type: 'warning' }).then(() => {
+                        this.preservation();
+                    });
+                }
+            });
+        },
+        preservation() {
+            let data = { ...this.sizeForm };
+            delete data.nickname;
+            delete data.phone;
+            delete data.email;
+            data.userId = this.userInfo.id;
+            this.saving = true;
+            let userInfo = {
+                ...this.userInfo,
+                nickname: this.sizeForm.nickname,
+                phone: this.sizeForm.phone,
+                avatar: this.sizeForm.avatar,
+                email: this.sizeForm.email
+            };
+            userInfo.authorities = [
+                ...userInfo.authorities,
+                {
+                    name: 'ROLE_PERSONAL'
+                }
+            ];
+
+            this.$http
+                .post('user/save', userInfo, {
+                    body: 'json'
+                })
+                .then(res => {
+                    this.sizeForm.avatar = res.avatar;
+                    this.$store.dispatch('getUserInfo');
+                    return this.$http.post('/personal/save', data, { body: 'json' }).then(res => {
+                        console.log(res);
+                        this.sizeForm = res;
+                        this.saving = false;
+                        this.$store.dispatch('getUserInfo');
+                        this.$router.push('/Authentication');
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    /deep/ .el-form-item__label {
+        width: 294px;
+        text-align: right;
+        color: #ffffff;
+    }
+    /deep/ .el-form {
+        padding-left: 175px;
+    }
+    /deep/ .el-input__inner {
+        border: 1px solid #494a4d;
+        background: #1c1e26;
+        color: #ffffff;
+    }
+    /deep/ .el-form-item__error {
+        margin-left: 294px;
+    }
+    /deep/ .el-button {
+        width: 130px;
+        height: 36px;
+        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+        border-radius: 4px;
+        margin: 0 !important;
+    }
+    .btn {
+        display: flex;
+        justify-content: center;
+        margin: 65px 0 0 58px;
+        .btn1 {
+            width: 130px;
+            height: 36px;
+            background: #c4c7cc;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 13px;
+            text-align: center;
+            line-height: 36px;
+            margin-left: 20px;
+        }
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .description {
+        font-size: 14px;
+        font-weight: 400;
+        color: #494a4d;
+        line-height: 24px;
+        margin: -11px 0 20px 294px;
+    }
+    .box {
+        height: 1277px;
+        background: #1c1e26;
+        padding: 17px 16px;
+        .border {
+            height: 1px;
+            background: #494a4d;
+            margin: 17px 0 60px;
+        }
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+            span {
+                font-size: 12px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 22px;
+            }
+        }
+        /deep/ .el-button {
+            width: 130px;
+            height: 36px;
+            background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+            border-radius: 4px;
+            margin-top: 60px;
+            color: #ffffff;
+        }
+    }
+}
+</style>

src/main/pc-space/src/views/user/UserAuthentication.vue

@@ -0,0 +1,253 @@
+<template>
+    <div class="container center-content">
+        <div class="title">认证信息</div>
+        <div class="box">
+            <div class="name">个人认证 <span>账户实名认证后不能修改</span></div>
+            <div class="border"></div>
+            <el-form ref="form" :label-position="labelPosition" :model="sizeForm" :rules="registerRule">
+                <el-form-item label="姓名" prop="nickname">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入您的真实姓名"
+                        v-model="sizeForm.nickname"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="手机号码" prop="phone">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入您的联系方式"
+                        :disabled="true"
+                        v-model="sizeForm.phone"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="电子邮箱" prop="email">
+                    <el-input style="width: 300px" placeholder="请输入邮箱" v-model="sizeForm.email"></el-input>
+                </el-form-item>
+                <el-form-item label="身份证号" prop="documentNumber">
+                    <el-input
+                        style="width: 300px"
+                        placeholder="请输入18位身份证号"
+                        v-model="sizeForm.documentNumber"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="本人身份证 (正面图)" prop="photoFront">
+                    <single-upload class="upload" v-model="sizeForm.photoFront"></single-upload>
+                </el-form-item>
+                <div class="description">{{ explain }}</div>
+                <el-form-item label="本人身份证 (反面图)" prop="photoBackside">
+                    <single-upload class="upload" v-model="sizeForm.photoBackside"></single-upload>
+                </el-form-item>
+                <div class="description">{{ explain }}</div>
+            </el-form>
+            <div class="btn">
+                <el-button type="primary" @click="onSubmit">提交审核</el-button>
+                <div class="btn1" @click="Jump">返回</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            labelPosition: 'right',
+            sizeForm: {
+                nickname: '',
+                documentNumber: '',
+                photoFront: '',
+                photoBackside: '',
+                phone: '',
+                email: '',
+                avatar: 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg',
+                type: 'ID_CARD'
+            },
+            typeFl: {},
+            registerRule: {
+                documentNumber: { required: true, message: '请输入您的身份证号', trigger: 'blur' },
+                nickname: { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
+                phone: { required: true, message: '请输入您的联系方式', trigger: 'blur' },
+                email: { type: 'email', required: true, message: '请输入您的邮箱', trigger: 'blur' },
+                photoFront: { required: true, message: '请添加您的身份证（正面）', trigger: 'blur' },
+                photoBackside: { required: true, message: '请添加您的身份证（反面）', trigger: 'blur' }
+            }
+        };
+    },
+    computed: {
+        ...mapState(['userInfo', 'personalInfo']),
+        explain() {
+            const list = [
+                '请上传身份证图片，格式JPG或PNG或JPEG，大小不超过1M',
+                '请上传证件照图片，格式JPG或PNG或JPEG，大小不超过1M'
+            ];
+            return list[this.typeFl == 'ID_CARD' ? 0 : 1];
+        },
+        type() {
+            return this.userInfo.authorities.find(item => {
+                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
+            });
+        }
+    },
+    created() {
+        this.$http
+            .get('/personal/my')
+            .then(res => {
+                this.sizeForm = {
+                    ...res,
+                    nickname: this.userInfo.nickname,
+                    phone: this.userInfo.phone,
+                    avatar: this.userInfo.avatar,
+                    email: this.userInfo.email
+                };
+            })
+            .catch(e => {
+                console.log(e);
+            });
+        this.sizeForm.nickname == this.userInfo.nickname, this.sizeForm.phone == this.userInfo.phone;
+    },
+    methods: {
+        Jump() {},
+        onSubmit() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$confirm('提交资料需要审核，确定吗?', '提示', { type: 'warning' }).then(() => {
+                        this.preservation();
+                    });
+                }
+            });
+        },
+        preservation() {
+            let data = { ...this.sizeForm };
+            delete data.nickname;
+            delete data.phone;
+            delete data.email;
+            data.userId = this.userInfo.id;
+            this.saving = true;
+            let userInfo = {
+                ...this.userInfo,
+                nickname: this.sizeForm.nickname,
+                phone: this.sizeForm.phone,
+                avatar: this.sizeForm.avatar,
+                email: this.sizeForm.email
+            };
+            userInfo.authorities = [
+                ...userInfo.authorities,
+                {
+                    name: 'ROLE_PERSONAL'
+                }
+            ];
+
+            this.$http
+                .post('user/save', userInfo, {
+                    body: 'json'
+                })
+                .then(res => {
+                    this.sizeForm.avatar = res.avatar;
+                    this.$store.dispatch('getUserInfo');
+                    return this.$http.post('/personal/save', data, { body: 'json' }).then(res => {
+                        console.log(res);
+                        this.sizeForm = res;
+                        this.saving = false;
+                        this.$store.dispatch('getUserInfo');
+                        this.$router.push('/Authentication');
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    /deep/ .el-form-item__label {
+        width: 94px;
+        text-align: right;
+        color: #ffffff;
+    }
+    /deep/ .el-form {
+        padding-left: 390px;
+    }
+    /deep/ .el-input__inner {
+        border: 1px solid #494a4d;
+        background: #1c1e26;
+        color: #ffffff;
+    }
+    /deep/ .el-form-item__error {
+        margin-left: 94px;
+    }
+    /deep/ .el-button {
+        width: 130px;
+        height: 36px;
+        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+        border-radius: 4px;
+        margin: 0 !important;
+    }
+    .btn {
+        display: flex;
+        justify-content: center;
+        margin: 65px 0 0 78px;
+        .btn1 {
+            width: 130px;
+            height: 36px;
+            background: #c4c7cc;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 13px;
+            text-align: center;
+            line-height: 36px;
+            margin-left: 20px;
+        }
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .description {
+        font-size: 14px;
+        font-weight: 400;
+        color: #494a4d;
+        line-height: 24px;
+        margin: -11px 0 20px 94px;
+    }
+    .box {
+        height: 1000px;
+        background: #1c1e26;
+        padding: 17px 16px;
+        .border {
+            height: 1px;
+            background: #494a4d;
+            margin: 17px 0 60px;
+        }
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+            span {
+                font-size: 12px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 22px;
+            }
+        }
+        /deep/ .el-button {
+            width: 130px;
+            height: 36px;
+            background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+            border-radius: 4px;
+            margin-top: 60px;
+            color: #ffffff;
+        }
+    }
+}
+</style>