From 0f636f2be85a4b03eb583e96843e5cbb73dbd6ce Mon Sep 17 00:00:00 2001
From: wlikett <2331964395@qq.com>
Date: Fri, 1 Dec 2023 12:21:43 +0800
Subject: [PATCH] icon

---
 package.json                          |   1 +
 pnpm-lock.yaml                        |   3 +
 src/compontents/uploadImg.vue         |  65 ++++
 src/main.ts                           |   4 +
 src/views/EnterpriseCertification.vue | 491 ++++++++++++++++++++++++++
 src/views/equip/list.vue              |  13 +
 6 files changed, 577 insertions(+)
 create mode 100644 src/compontents/uploadImg.vue
 create mode 100644 src/views/EnterpriseCertification.vue
 create mode 100644 src/views/equip/list.vue

diff --git a/package.json b/package.json
index 3ce7113..1347b0e 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 185f7e7..3963f05 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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)
diff --git a/src/compontents/uploadImg.vue b/src/compontents/uploadImg.vue
new file mode 100644
index 0000000..f1da0cf
--- /dev/null
+++ b/src/compontents/uploadImg.vue
@@ -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>
diff --git a/src/main.ts b/src/main.ts
index 5dcad83..3a0909a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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)
diff --git a/src/views/EnterpriseCertification.vue b/src/views/EnterpriseCertification.vue
new file mode 100644
index 0000000..cbdcb8c
--- /dev/null
+++ b/src/views/EnterpriseCertification.vue
@@ -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>
diff --git a/src/views/equip/list.vue b/src/views/equip/list.vue
new file mode 100644
index 0000000..af967e5
--- /dev/null
+++ b/src/views/equip/list.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="equipList">
+
+  </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+  .equipList{
+
+  }
+</style>