Skip to content

phsl / client

Go to a project
Commit b72e438a by 赵月辉
Options

完成审核认证静态内容

parent 59c97754
Showing with 621 additions and 147 deletions
src/layout/manage-layout.vue
......@@ -145,4 +145,10 @@ function setLayout () {
.mobile .fixed-header {
width: 100%;
}
.app-main {
height: calc(100vh - 50px);
min-height: auto;
overflow-y: auto;
}
</style>
src/views/console/authentication.vue
<template>
<div>审核</div>
<div class="authentication">
<el-steps
class="steps"
:active="stepActive"
simple>
<el-step title="提交个人身份资料">
<template #icon>
<div class="step-icon">1</div>
</template>
</el-step>
<el-step title="提交企业资料">
<template #icon>
<div class="step-icon">2</div>
</template>
</el-step>
<el-step title="提交承诺书">
<template #icon>
<div class="step-icon">3</div>
</template>
</el-step>
<el-step title="确认信息">
<template #icon>
<div class="step-icon">4</div>
</template>
</el-step>
<el-step title="认证完成">
<template #icon>
<div class="step-icon">5</div>
</template>
</el-step>
</el-steps>
<div class="step-content">
<step0 ref="step0Ref" v-if="stepActive === 0"></step0>
<step1 ref="step1Ref" v-if="stepActive === 1"></step1>
<step2 ref="step2Ref" v-if="stepActive === 2"></step2>
<step3 ref="step3Ref" v-if="stepActive === 3"></step3>
<step4 ref="step4Ref" v-if="stepActive === 4"></step4>
<div class="footer-bar">
<el-button @click="prev">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</div>
</div>
</div>
</template>
<script setup name="Authentication">
<script>
import step0 from './components/step-0.vue'
import step1 from './components/step-1.vue'
import step2 from './components/step-2.vue'
import step3 from './components/step-3.vue'
import step4 from './components/step-4.vue'
export default {
name: 'Authentication',
components: {
step0,
step1,
step2,
step3,
step4
},
data () {
return {
stepActive: 0
}
},
methods: {
prev () {
if (this.stepActive > 0) {
this.stepActive -= 1
}
},
next () {
if (this.stepActive < 4) {
this.stepActive += 1
}
}
}
}
</script>
<style scoped lang="scss">
.authentication {
height: 100%;
}
.step-content {
padding: 20px;
height: calc(100% - 58px);
box-sizing: border-box;
position: relative;
}
.el-steps {
background-color: #FFFFFF;
:deep(.el-step.is-simple) {
.el-step__head {
&.is-process {
.step-icon {
border-color: var(--el-text-color-primary);
color: var(--el-text-color-primary);
}
}
&.is-finish {
.step-icon {
background-color: var(--el-color-primary);
border-color: var(--el-color-primary);
color: #FFFFFF;
}
}
}
.el-step__title.is-finish {
font-weight: 700;
& + .el-step__arrow {
&::before {
background-color: var(--el-color-primary);
}
&::after {
background-color: var(--el-color-primary);
}
}
}
.el-step__icon {
width: 32px;
height: 32px
}
}
.step-icon {
width: 32px;
height: 32px;
border-radius: 32px;
border: 2px solid #D6D7D8;
text-align: center;
line-height: 30px;
//display: flex;
//align-items: center;
//justify-content: center;
font-size: 16px;
color: #949899;
font-weight: 500;
}
}
.footer-bar {
position: absolute;
bottom: 0;
right: 0;
background-color: #FFFFFF;
width: 100%;
padding: 20px;
text-align: right;
}
</style>
src/views/console/components/base.scss 0 → 100644
.el-card {
border: none;
margin-bottom: 20px;
:deep(.el-card__header) {
padding-top: 10px !important;
padding-bottom: 8px !important;
}
:deep(.el-card__body) {
padding: 30px !important;
}
}
.card-header {
font-weight: 500;
font-size: 16px;
color: #33312D;
}
.el-form-item{
margin-bottom: 20px;
}
.component-upload-image {
:deep(.el-upload-list--picture-card) {
--el-upload-list-picture-card-size: 180px !important;
}
:deep(.el-upload--picture-card) {
--el-upload-picture-card-size: 180px !important;
color: #949899;
&:hover {
color: var(--el-color-primary);
}
}
}
src/views/console/components/step-0.vue 0 → 100644
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>请上传您的身份证件（人像面、国徽面）</span>
</div>
</template>
<div class="">
<el-form label-width="145px" label-position="left">
<el-form-item label="姓名">
<el-input placeholder="请输入姓名" size="large" style="width: 343px"></el-input>
</el-form-item>
<el-form-item label="身份证">
<el-input placeholder="请输入身份证号" size="large" style="width: 343px"></el-input>
</el-form-item>
<el-form-item label="身份证图片">
<image-upload style="margin-right: 20px" :limit="1">
<template #uploader-icon>
<div style="text-align: center">
<el-icon class="avatar-uploader-icon" size="32px">
<CirclePlusFilled/>
</el-icon>
<div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
仅支JPG，PNG，GIF，大小小于2M，最多1张
</div>
</div>
</template>
<template #tip>
<div style="text-align: center;font-size: 14px;color: #626566;">人像面</div>
</template>
</image-upload>
<image-upload :limit="1">
<template #uploader-icon>
<div style="text-align: center">
<el-icon class="avatar-uploader-icon" size="32px">
<CirclePlusFilled/>
</el-icon>
<div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
仅支JPG，PNG，GIF，大小小于2M，最多1张
</div>
</div>
</template>
<template #tip>
<div style="text-align: center;font-size: 14px;color: #626566;">国徽面</div>
</template>
</image-upload>
</el-form-item>
</el-form>
</div>
</el-card>
</template>
<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
</script>
<style scoped lang="scss">
@import url('./base.scss');
</style>
src/views/console/components/step-1.vue 0 → 100644
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>请上传企业资料</span>
</div>
</template>
<div class="">
<el-form label-width="145px" label-position="left">
<el-form-item label="企业名称">
<el-input placeholder="请输入企业名称" size="large" style="width: 343px"></el-input>
</el-form-item>
<el-form-item label="法人代表">
<el-input placeholder="请输入法人代表" size="large" style="width: 343px"></el-input>
</el-form-item>
<el-form-item label="企业营业执照">
<image-upload :limit="1" :is-show-tip="false">
<template #uploader-icon>
<div style="text-align: center">
<el-icon class="avatar-uploader-icon" size="32px">
<CirclePlusFilled/>
</el-icon>
<div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
仅支JPG，PNG，GIF，大小小于2M，最多1张
</div>
</div>
</template>
</image-upload>
</el-form-item>
</el-form>
</div>
</el-card>
</template>
<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
</script>
<style scoped lang="scss">
@import url('./base.scss');
</style>
src/views/console/components/step-2.vue 0 → 100644
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>请提交承诺书</span>
</div>
</template>
<div class="">
<el-form label-width="145px" label-position="left">
<el-form-item label="手机号">
<el-input placeholder="请输入手机号" size="large" style="width: 343px"></el-input>
</el-form-item>
<el-form-item label="承诺书模板">
<el-button link type="primary">下载模板</el-button>
</el-form-item>
<el-form-item label="承诺书上传">
<image-upload :limit="1" :is-show-tip="false">
<template #uploader-icon>
<div style="text-align: center">
<el-icon class="avatar-uploader-icon" size="32px">
<CirclePlusFilled/>
</el-icon>
<div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
仅支JPG，PNG，GIF，大小小于2M，最多1张
</div>
</div>
</template>
</image-upload>
</el-form-item>
</el-form>
</div>
</el-card>
</template>
<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
</script>
<style scoped lang="scss">
@import url('./base.scss');
</style>
src/views/console/components/step-3.vue 0 → 100644
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>确认信息</span>
</div>
</template>
<div class="">
<el-row>
<el-col :span="12">
<el-form label-width="145px" label-position="left">
<el-form-item label="姓名">
姓名
</el-form-item>
<el-form-item label="身份证">
身份证号
</el-form-item>
<el-form-item label="身份证图片">
<div class="mr20">
<el-image style="width: 200px; height: 130px" fit="cover"/>
<div style="text-align: center;font-size: 14px;color: #626566;">人像面</div>
</div>
<div>
<el-image style="width: 200px; height: 130px" fit="cover"/>
<div style="text-align: center;font-size: 14px;color: #626566;">国徽面</div>
</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form label-width="145px" label-position="left">
<el-form-item label="企业名称">
企业名称
</el-form-item>
<el-form-item label="法人代表">
法人代表
</el-form-item>
<el-form-item label="企业营业执照">
<div class="mr20">
<el-image style="width: 200px; height: 130px" fit="cover"/>
<div style="text-align: center;font-size: 14px;color: #626566;">人像面</div>
</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form label-width="145px" label-position="left" style="padding-top: 30px">
<el-form-item label="手机号">
手机号
</el-form-item>
<el-form-item label="承诺书模板">
承诺书模板
</el-form-item>
<el-form-item label="承诺书上传">
<div class="mr20">
<el-image style="width: 132px; height: 200px" fit="cover"/>
<div style="text-align: center;font-size: 14px;color: #626566;">人像面</div>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</el-card>
</template>
<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
</script>
<style scoped lang="scss">
@import url('./base.scss');
.el-form-item {
margin-bottom: 5px;
}
</style>
src/views/console/components/step-4.vue 0 → 100644
<template>
<div class="result">
<img src="@/assets/images/order-success.png" alt="">
<div class="text">提交成功</div>
<div class="sub-text">恭喜您已提交申请，3个工作日内反馈</div>
<div>
<el-button type="primary" @click="$router.replace('/console/overview')">返回首页</el-button>
</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.result {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
.text {
font-weight: bold;
font-size: 24px;
color: #303233;
margin-bottom: 10px;
}
.sub-text {
font-weight: 400;
font-size: 14px;
color: #626566;
margin-bottom: 10px;
}
.el-button {
width: 368px;
height: 46px;
margin-top: 16px;
font-weight: 400;
font-size: 20px;
}
}
</style>
src/views/console/myOrder.vue
......@@ -278,38 +278,38 @@
<span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- label="操作"-->
<!-- align="center"-->
<!-- class-name="small-padding fixed-width"-->
<!-- >-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']"-->
<!-- >详情</el-button-->
<!-- >-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['computility:order:remove']"-->
<!-- >删除</el-button-->
<!-- >-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']"-->
<!-- >修改</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width">
<template #default="scope">
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']">-->
<!-- 详情-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['computility:order:remove']">-->
<!-- 删除-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']">-->
<!-- 修改-->
<!-- </el-button>-->
</template>
</el-table-column>
</el-table>
<pagination
......@@ -428,7 +428,6 @@
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment