Skip to content

phsl / client

Go to a project
Commit b72e438a by 赵月辉
Options

完成审核认证静态内容

parent 59c97754
Showing with 592 additions and 117 deletions
src/components/ImageUpload/index.vue
......@@ -15,21 +15,28 @@
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }"
>
<el-icon class="avatar-uploader-icon"><plus /></el-icon>
:class="{ hide: fileList.length >= limit }">
<slot name="uploader-icon">
<el-icon class="avatar-uploader-icon">
<plus/>
</el-icon>
</slot>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip">
请上传
<slot name="tip">
<div>请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
</template>
的文件
</div>
</slot>
</div>
<el-dialog
v-model="dialogVisible"
......@@ -46,162 +53,162 @@
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getToken } from '@/utils/auth'
const props = defineProps({
modelValue: [String, Object, Array],
// 图片数量限制
limit: {
type: Number,
default: 5,
default: 5
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
default: 5
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
default: () => ['png', 'jpg', 'jpeg']
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
},
});
}
})
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });
const fileList = ref([]);
const {proxy} = getCurrentInstance()
const emit = defineEmits()
const number = ref(0)
const uploadList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/upload') // 上传的图片服务器地址
const headers = ref({Authorization: 'Bearer ' + getToken()})
const fileList = ref([])
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
);
)
watch(() => props.modelValue, val => {
if (val) {
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(",");
const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组
fileList.value = list.map(item => {
if (typeof item === "string") {
if (typeof item === 'string') {
if (item.indexOf(baseUrl) === -1) {
item = { name: baseUrl + item, url: baseUrl + item };
item = {name: baseUrl + item, url: baseUrl + item}
} else {
item = { name: item, url: item };
item = {name: item, url: item}
}
}
return item;
});
return item
})
} else {
fileList.value = [];
return [];
fileList.value = []
return []
}
},{ deep: true, immediate: true });
}, {deep: true, immediate: true})
// 上传前loading加载
function handleBeforeUpload(file) {
let isImg = false;
function handleBeforeUpload (file) {
let isImg = false
if (props.fileType.length) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
let fileExtension = ''
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
}
isImg = props.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (file.type.indexOf(type) > -1) return true
if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false
})
} else {
isImg = file.type.indexOf("image") > -1;
isImg = file.type.indexOf('image') > -1
}
if (!isImg) {
proxy.$modal.msgError(
`文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
);
return false;
`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`
)
return false
}
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) {
proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
return false;
proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
return false
}
}
proxy.$modal.loading("正在上传图片，请稍候...");
number.value++;
proxy.$modal.loading('正在上传图片，请稍候...')
number.value++
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
function handleExceed () {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
}
// 上传成功回调
function handleUploadSuccess(res, file) {
function handleUploadSuccess (res, file) {
if (res.code === 200) {
uploadList.value.push({ name: res.fileName, url: res.fileName });
uploadedSuccessfully();
uploadList.value.push({name: res.fileName, url: res.fileName})
uploadedSuccessfully()
} else {
number.value--;
proxy.$modal.closeLoading();
proxy.$modal.msgError(res.msg);
proxy.$refs.imageUpload.handleRemove(file);
uploadedSuccessfully();
number.value--
proxy.$modal.closeLoading()
proxy.$modal.msgError(res.msg)
proxy.$refs.imageUpload.handleRemove(file)
uploadedSuccessfully()
}
}
// 删除图片
function handleDelete(file) {
const findex = fileList.value.map(f => f.name).indexOf(file.name);
function handleDelete (file) {
const findex = fileList.value.map(f => f.name).indexOf(file.name)
if (findex > -1 && uploadList.value.length === number.value) {
fileList.value.splice(findex, 1);
emit("update:modelValue", listToString(fileList.value));
return false;
fileList.value.splice(findex, 1)
emit('update:modelValue', listToString(fileList.value))
return false
}
}
// 上传结束处理
function uploadedSuccessfully() {
function uploadedSuccessfully () {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
number.value = 0;
emit("update:modelValue", listToString(fileList.value));
proxy.$modal.closeLoading();
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
uploadList.value = []
number.value = 0
emit('update:modelValue', listToString(fileList.value))
proxy.$modal.closeLoading()
}
}
// 上传失败
function handleUploadError() {
proxy.$modal.msgError("上传图片失败");
proxy.$modal.closeLoading();
function handleUploadError () {
proxy.$modal.msgError('上传图片失败')
proxy.$modal.closeLoading()
}
// 预览
function handlePictureCardPreview(file) {
dialogImageUrl.value = file.url;
dialogVisible.value = true;
function handlePictureCardPreview (file) {
dialogImageUrl.value = file.url
dialogVisible.value = true
}
// 对象转成指定字符串分隔
function listToString(list, separator) {
let strs = "";
separator = separator || ",";
function listToString (list, separator) {
let strs = ''
separator = separator || ','
for (let i in list) {
if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
strs += list[i].url.replace(baseUrl, "") + separator;
if (undefined !== list[i].url && list[i].url.indexOf('blob:') !== 0) {
strs += list[i].url.replace(baseUrl, '') + separator
}
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
return strs != '' ? strs.substr(0, strs.length - 1) : ''
}
</script>
......
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