加入公司/新建公司页面

src/router/modules/remaining.js

@@ -31,6 +31,24 @@ const remainingRouter = [
       title: '隐私政策'
     }
   },
+  {
+    path: '/home',
+    component: () => import('@/views/Home/index'),
+    name: 'home',
+    meta: {
+      hidden: true,
+      title: '首页'
+    }
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/enterprise/components/register'),
+    name: 'register',
+    meta: {
+      hidden: true,
+      title: '注册企业'
+    }
+  },
   ...items
 ]
 

src/views/Home/components/enterprise.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    企业用户首页
+  </div>
+</template>
+<script setup>
+defineOptions({ name:'enterprise-index'})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/Home/components/personal.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div>个人用户首页</div>
+    <v-btn color="primary" class="white--text mt-2" min-width="298" @click="changeRole">切换为企业用户</v-btn>
+    <!-- 加入公司/新建公司 -->
+    <Dialog :visible="show" :footer="true" title="企业注册" widthType="1">
+      <enterpriseRegister ref="enterpriseRegisterRef"></enterpriseRegister>
+    </Dialog>
+  </div>
+</template>
+<script setup>
+import Dialog from '@/components/Dialog'
+import enterpriseRegister from '@/views/enterprise/components/register.vue'
+import { ref } from 'vue';
+defineOptions({ name:'personal-index'})
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const userType = ref(1) // 0企业用户、1个人用户
+const show = ref(false)
+const changeRole = () => {
+  if (userType.value) {
+    show.value = true
+  } else {
+    router.push({ path: '/' })
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/Home/index.vue

@@ -1,11 +1,16 @@
-<script setup>
-defineOptions({ name:'home-index'})
-</script>
 <template>
   <div>
-    <v-btn color="primary" class="white--text mt-2" min-width="298" @click="changeRole">切换企业为用户</v-btn>
+    <enterprise v-if="type" ref="enterpriseRef"></enterprise>
+    <personal v-else ref="personalRef"></personal>
   </div>
 </template>
+<script setup>
+defineOptions({ name:'home-index'})
+import { ref } from 'vue';
+import enterprise from './components/enterprise.vue'
+import personal from './components/personal.vue'
+const type = ref(0)
+</script>
 <style lang="scss" scoped>
 
 </style>

src/views/enterprise/components/register.vue

@@ -1,12 +1,107 @@
 <!-- 企业注册表单 -->
-<script setup>
-defineOptions({ name:'register-form'})
-</script>
 <template>
   <div>
-    企业注册表单
+    <!-- （输入提示框-> 如果是选择了某个公司，带出公司信息，展开预览信息，点击加入） -->
+    <!-- 多个招聘专员注册多个boss账号，但这些账号只能认证一个公司主体。新建的需要门墩后台审核，加入的由公司主体账户审核 -->
+      <v-tabs v-model="tab" align-tabs="center" color="#00897B">
+        <v-tab :value="1">加入公司</v-tab>
+        <v-tab :value="2">新建公司</v-tab>
+      </v-tabs>
+      <v-window v-model="tab" class="mt-9">
+        <v-window-item :value="1">
+          <!-- 加入公司 -->
+          <!-- <div>头像</div> -->
+          <v-form v-model="valid">
+            <v-text-field
+              v-model="addInForm.username"
+              label="姓名"
+              placeholder="请输入姓名" 
+              color="#00897B" 
+              variant="outlined" 
+              density="compact" 
+              :rules="[v=> !!v || '请输入姓名']"
+            ></v-text-field>
+            <v-autocomplete
+              v-model="addInForm.company"
+              label="公司名称"
+              placeholder="请输入公司名称" 
+              color="#00897B" 
+              variant="outlined" 
+              density="compact" 
+              return-object
+              :items="[{value: 'Alibaba', title: '阿里巴巴', shortName: '阿里' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }]"
+              :rules="[v=> !!v || '请输入公司名称']"
+              @update:search-input="companySearch"
+            ></v-autocomplete>
+            <v-text-field
+              v-model="addInForm.duties"
+              label="职务"
+              placeholder="请输入职务" 
+              variant="outlined" 
+              density="compact"
+              color="#00897B"
+              :rules="[v=> !!v || '请输入职务']"
+            ></v-text-field>
+          </v-form>
+        </v-window-item>
+        <v-window-item :value="2">
+          <!-- 新建公司 -->
+          <div>公司全称（需要与营业执照完全一致）</div>
+          <div>公司简称（选填）</div>
+          <div>营业执照</div>
+          <div>公司行业</div>
+          <div>人员规模</div>
+          <div>法人招聘授权书</div>
+          <div>法人身份证照片</div>
+          <v-form v-model="valid">
+            <v-text-field
+              v-model="addInForm.username"
+              label="公司全称（需要与营业执照完全一致）"
+              placeholder="请输入姓名" 
+              color="#00897B" 
+              variant="outlined" 
+              density="compact" 
+              :rules="[v=> !!v || '请输入姓名']"
+            ></v-text-field>
+            <v-autocomplete
+              v-model="addInForm.company"
+              label="公司名称"
+              placeholder="请输入公司名称" 
+              color="#00897B" 
+              variant="outlined" 
+              density="compact" 
+              return-object
+              :items="[{value: 'Alibaba', title: '阿里巴巴', shortName: '阿里' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }]"
+              :rules="[v=> !!v || '请输入公司名称']"
+              @update:search-input="companySearch"
+            ></v-autocomplete>
+            <v-text-field
+              v-model="addInForm.duties"
+              label="职务"
+              placeholder="请输入职务" 
+              variant="outlined" 
+              density="compact"
+              color="#00897B"
+              :rules="[v=> !!v || '请输入职务']"
+            ></v-text-field>
+          </v-form>
+        </v-window-item>
+      </v-window>
+    <!-- 新建 -->
   </div>
 </template>
+<script setup>
+import { reactive, ref } from 'vue';
+defineOptions({ name:'register-form'})
+
+const tab = ref(1)
+const valid = ref(false)
+const addInForm = reactive({ username: '', company: '', duties: '' })
+const companySearch = (val) => {
+  console.log('companySearch', val)
+}
+
+</script>
 <style lang="scss" scoped>
 
 </style>