bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icon

This commit is contained in:
wlikett 2023-12-01 12:21:43 +08:00
parent 4ac47c8940
commit 0f636f2be8
6 changed files with 577 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^10.6.1",
"axios": "^1.6.2",
"element-plus": "^2.4.3",

3
pnpm-lock.yaml
View File

@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.3.4)
'@vueuse/core':
specifier: ^10.6.1
version: 10.6.1(vue@3.3.4)

65
src/compontents/uploadImg.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="uploadImg" :style="`width:${width}px;height:${width}px`">
<el-upload
:disabled="disable"
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-change="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar">
<!-- <el-icon v-else class="avatar-uploader-icon" :style="`line-height: ${width}px`"><Plus /></el-icon>-->
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import { Plus } from '@element-plus/icons-vue'
const props = defineProps(['disable','width'])
const imageUrl = ref('')
const handleAvatarSuccess = (res, file) => {
imageUrl.value = URL.createObjectURL(res.raw);
}
const emit = defineEmits(['onClick'])
const clickImg = () => {
if(!props.disable){
emit('onClick',{
...this.file,
baseUrl:this.imageUrl
})
}
}
</script>
<style lang="scss" scoped>
.uploadImg{
::v-deep .avatar-uploader{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dfdfdf;
overflow: hidden;
.el-upload--text{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.avatar-uploader-icon{
width: 100%;
height: 100%;
}
}
.avatar{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
</style>

4
src/main.ts
View File

@ -1,4 +1,5 @@
import './assets/main.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
@ -7,6 +8,9 @@ import App from './App.vue'
import router from './router'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)

491
src/views/EnterpriseCertification.vue Normal file
View File

@ -0,0 +1,491 @@
<template>
<div class="enterpriseCertification">
<div class="baseInfo card">
<div class="top">
<div class="title">
企业基本信息
</div>
<div class="options">
<el-button size="small" type="primary">我的邀请码</el-button>
<el-button size="small" type="primary">编辑</el-button>
</div>
</div>
<el-form class="baseForm">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="企业名称">
<el-input placeholder=""></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="统一社会信用代码">
<el-input placeholder=""></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="注册地址">
<el-row :gutter="10">
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择省份">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择市">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择区">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="15">
<el-input placeholder="请输入实际办公地址"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="经营地址">
<el-row :gutter="10">
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择省份">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择市">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="thisValue" placeholder="请选择区">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="15">
<el-input placeholder="请输入实际办公地址"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="法人证件类型">
<el-select v-model="thisValue" placeholder="请选择省份">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="法人证件号码">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="" label="营业执照">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="" label="身份证国徽面">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="" label="身份证肖像面">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="法人姓名">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邀请码">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邀请企业名称">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="经营范围">
<el-input type="textarea" :rows="5"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="personInfo card">
<div class="top">
<div class="title">
被授权人信息
</div>
</div>
<el-form class="personForm">
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="被授权人姓名">
<el-input ></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人身份证">
<el-input ></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人手机号">
<div class="phone">
<el-input ></el-input>
<div class="tip">
被授权人手机号修改且运营审核通过后，企业系统管理员权限将同步到修改后被授权手机号的登录账号。
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人邮箱">
<el-input ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="法人授权书">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人身份证国徽面">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人身份证肖像面">
<upload-img width="80" @onClick="test" />
<div class="previewExample">
<span>预览</span>
<span>查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="5" class="d-flex align-center">
<el-checkbox size="large" />
<div class="agreement ">我已阅读并同意相关条款内容《
<span class="previewExample">服务协议</span>
》 《
<span class="previewExample">隐私协议</span>
》</div>
</el-col>
</el-row>
</el-form>
</div>
<div class="bankInfo card">
<div class="top">
<div class="title">
银行账号信息
<span class="tip">开户行许可示例</span>
</div>
</div>
<el-row class="header">
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
<div class="item border-top-left" :class="i+1 == bankTableHeader.length && 'border-right'">
{{ v.label }}
</div>
</el-col>
</el-row>
<el-row class="content" v-for="(val,index) in bankTableData" :key="index">
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
<div
v-if="!v.slot"
class="item border-top-left"
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
>
{{ val[v.prop] || '' }}
</div>
<div v-else
class="item border-top-left"
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
>
上传附件
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script lang="ts" setup>
import uploadImg from '@/compontents/uploadImg.vue'
import {reactive, ref} from "vue";
const options = reactive([{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}])
const thisValue = ref('')
const imageUrl = ref('')
const bankTableHeader = reactive([
{
span:4,
label:'开户行',
prop:'bankName',
},
{
span: 2,
label: '账号名称',
prop: 'b'
},{
span: 2,
label: '银行账号',
prop: 'a'
},{
span: 2,
label: '开户行所在地',
prop: 'a'
},{
span: 2,
label: '开户许可证核准号（基本存款账号编号）',
prop: 'a'
},{
span: 2,
label: '开户行许可证/基本存款账号信息',
prop: 'a',
slot:'annex'
},
])
const bankTableData = reactive([
{
a:1,
bankName:'中国银行'
},{
a:1,
bankName:'test'
},{
a:1,
bankName:'test'
},{
a:1,
bankName:'test'
},{
a:1,
bankName:'test'
},{
a:1,
bankName:'test'
},
])
const test = () => {}
</script>
<style lang="scss" scoped>
.d-flex{
display: flex;
}
.align-center{
align-items: center;
}
::v-deep.el-form-item {
display: flex;
.el-form-item__content {
flex: 1;
}
}
.enterpriseCertification {
height: 100%;
background: #f2f2f2;
padding: 15px 10px;
.card {
border-radius: 5px;
background: white;
padding: 10px;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.title {
font-size: 16px;
font-weight: 600;
}
.options {
}
}
.baseForm {
padding: 0 10px;
}
.previewExample{
font-size: 12px;
color: blue;
cursor: pointer;
span{
margin: 0 5px;
}
}
.personInfo{
margin-top: 15px;
.personForm{
padding: 0 10px;
.phone{
.tip{
line-height: normal;
color: red;
font-size: 12px;
}
}
.agreement{
font-size: 13px !important;
margin-left: 8px;
}
}
}
.bankInfo{
margin-top: 15px;
.top{
.title{
.tip{
color: blue;
font-size: 12px;
cursor: pointer;
}
}
}
.header{
.item{
background: #e0efff;
min-height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 5px;
height: 100%;
}
}
.border-top-left{
border-top:1px solid black;
border-left: 1px solid black;
}
.border-right{
border-right: 1px solid black;
}
.border-bottom{
border-bottom: 1px solid black;
}
.content{
.item{
min-height: 40px;
display: flex;
align-items: center;
//justify-content: center;
box-sizing: border-box;
padding: 5px;
height: 100%;
}
}
}
}
</style>

13
src/views/equip/list.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="equipList">
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.equipList{
}
</style>