qiyerzhengbufengdaim
This commit is contained in:
wlikett
parent
e56507e965
commit
75852d6255
|
|
@ -0,0 +1,80 @@
|
|||
<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">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" :style="`line-height: ${width}px`"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "uploadImg",
|
||||
data() {
|
||||
return {
|
||||
imageUrl:'',
|
||||
file:null
|
||||
}
|
||||
},
|
||||
props:{
|
||||
disable:{
|
||||
type:Boolean,
|
||||
default:() => false
|
||||
},
|
||||
|
||||
width:{
|
||||
type:String | Number,
|
||||
default:() => '50'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(file,fileList){
|
||||
this.imageUrl = URL.createObjectURL(file.raw)
|
||||
this.file = file
|
||||
},
|
||||
clickImg(){
|
||||
if(!this.disable){
|
||||
this.$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>
|
||||
|
|
@ -132,9 +132,9 @@ export const constantRoutes = [
|
|||
]
|
||||
},
|
||||
{
|
||||
path: 'enterprise',
|
||||
component: () => import('@/views/index'),
|
||||
name: 'enterprise',
|
||||
path: 'enterprisecertification',
|
||||
component: () => import('@/views/enterprisecertification'),
|
||||
name: 'enterprisecertification',
|
||||
meta: { title: '企业信息', icon: 'dashboard', affix: false },
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div class="enterpriseCertification">
|
||||
<div class="baseInfo card">
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
企业基本信息
|
||||
</div>
|
||||
<div class="options">
|
||||
<el-button size="mini" type="primary">我的邀请码</el-button>
|
||||
<el-button size="mini" 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="value" 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="value" 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="value" 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="value" 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="value" 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="value" 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="value" 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="6">
|
||||
<el-form-item class="" label="营业执照">
|
||||
<upload-img width="80" @onClick="test" />
|
||||
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImg from "@/components/uploadImg/index.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: '',
|
||||
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
components:{uploadImg},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(res.raw);
|
||||
},
|
||||
test(arg){
|
||||
console.log(arg)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.d-flex{
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue