修改注册

src/views/center/index.vue

@@ -115,7 +115,7 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 // 加载中
 const loading = ref(false)
-const form = ref({ role: ['user'] })
+const form = ref({ role: ['User'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {

src/views/register/index.vue

@@ -43,14 +43,14 @@
   </div>
 </template>
 <script setup>
+// API 引用
+import { getCity } from '@/utils/city'
 import { siteInfo } from '@/layout/site'
 const $checkRes = inject('$checkRes')
 import { cloneDeep } from 'lodash-es'
 // 接口
-import { UserStore } from '@/store/api/user/user'
 import { DictDataStore } from '@/store/api/system/dictData'
 import { DesignStore } from '@/store/api/platform/design'
-const store = UserStore()
 const dictDataStore = DictDataStore()
 const designStore = DesignStore()
 // 组件
@@ -67,18 +67,27 @@ import Investment from './parts/Investment.vue'
 const router = useRouter()
 // 加载中
 const loading = ref(false)
-const form = ref({ role: ['user'] })
+// 表单验证
+const ruleFormRef = ref()
+// 弹框
 const dialog = ref(false)
+// 基本设置
 const configInfo = ref({})
+// 字典
 const typeList = ref([])
+const genderList = ref([])
+const fieldList = ref([])
+const educationList = ref([])
+const cityList = ref([])
+const isUseList = ref([])
+// 用户类型
 const type = ref('0')
+// 用户协议
 const isAgree = ref(false)
-const genderList = ref(false)
 // 请求
 onMounted(async () => {
   loading.value = true
   await searchOther()
-  await search()
   loading.value = false
 })
 const searchOther = async () => {
@@ -89,47 +98,25 @@ const searchOther = async () => {
   // 用户类型
   result = await dictDataStore.query({ code: 'userType', is_use: '0' })
   if ($checkRes(result)) typeList.value = result.data
+  // 专家领域
+  result = await dictDataStore.query({ code: 'userType', is_use: '0' })
+  if ($checkRes(result)) fieldList.value = result.data
+  // 学历
+  result = await dictDataStore.query({ code: 'education', is_use: '0' })
+  if ($checkRes(result)) educationList.value = result.data
+  // 是否使用
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+  if ($checkRes(result)) isUseList.value = result.data
   // 基础设置
   result = await designStore.query({})
   if ($checkRes(result)) configInfo.value = result.data[0] || {}
-}
-const search = async () => {
-  // let res: IQueryResult = await toolsAxios.dataCount();
-  // if (res.errcode == '0') {
-  //     info.value = res.data;
-  // }
+  // 城市
+  getCity().then((response) => (cityList.value = response.address))
 }
 // 选择用户类型
 const toSelect = async (data) => {
   type.value = data
 }
-// 注册
-const submitForm = async (formEl) => {
-  if (!isAgree.value) {
-    ElMessage({
-      message: '请阅读并同意用户协议和隐私政策',
-      type: 'warning'
-    })
-    return
-  }
-  if (!formEl) return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const data = cloneDeep(form.value)
-      delete data.refpassword
-      const res = await store.create(data)
-      if ($checkRes(res, true)) {
-        ElMessage({
-          message: '注册用户成功，审核中请稍后登录',
-          type: 'success'
-        })
-        router.push({ path: '/login' })
-      }
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
 // 去登录
 const toLogin = () => {
   router.push({ path: '/login' })
@@ -139,12 +126,20 @@ const toBack = () => {
   router.push({ path: '/home' })
 }
 // provide
+provide('$checkRes', $checkRes)
+provide('cloneDeep', cloneDeep)
 provide('siteInfo', siteInfo)
-provide('form', form)
 provide('dialog', dialog)
 provide('isAgree', isAgree)
+provide('ruleFormRef ', ruleFormRef)
+provide('router', router)
+// 字典
 provide('genderList', genderList)
-provide('submitForm', submitForm)
+provide('fieldList', fieldList)
+provide('educationList', educationList)
+provide('cityList', cityList)
+provide('isUseList', isUseList)
+// 方法
 provide('toLogin', toLogin)
 provide('toBack', toBack)
 </script>

src/views/register/parts/Incubator.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/Investment.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/association.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/company.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/competition.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/expert.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/state.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/unit.vue

@@ -8,71 +8,172 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
-        <el-input v-model="form.account" placeholder="请输入账号">
-          <template #prefix>
-            <el-icon>
-              <User />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="form.password"
-          type="password"
-          show-password
-          placeholder="请输入登录密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="refpassword">
-        <el-input
-          v-model="form.refpassword"
-          type="password"
-          show-password
-          placeholder="请再次确认输入密码"
-        >
-          <template #prefix>
-            <el-icon>
-              <Unlock />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="昵称" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入昵称">
-          <template #prefix>
-            <el-icon>
-              <Avatar />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
-          <el-option
-            v-for="(item, index) in genderList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
+      <el-col :span="24" class="text">基本信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="form.account" placeholder="请输入账号">
+              <template #prefix>
+                <el-icon>
+                  <User />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="请输入登录密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="确认密码" prop="refpassword">
+            <el-input
+              v-model="form.refpassword"
+              type="password"
+              show-password
+              placeholder="请再次确认输入密码"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Unlock />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="昵称" prop="nick_name">
+            <el-input v-model="form.nick_name" placeholder="请输入昵称">
+              <template #prefix>
+                <el-icon>
+                  <Avatar />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select clearable v-model="form.gender" placeholder="请选择性别">
+              <el-option
+                v-for="(item, index) in genderList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon>
+                  <Iphone />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24" class="text">专家信息</el-col>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="专家姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入专家姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="birth">
+            <el-date-picker
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              v-model="form.birth"
+              type="date"
+              placeholder="请选择出生年月"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属领域" prop="field">
+            <el-select clearable v-model="form.field" placeholder="请选择所属领域">
+              <el-option
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研究方向" prop="direction">
+            <el-input v-model="form.direction" type="direction" placeholder="请输入研究方向" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="学历" prop="education">
+            <el-select clearable v-model="form.education" placeholder="请选择学历">
+              <el-option
+                v-for="(item, index) in educationList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地区" prop="region">
+            <el-cascader
+              v-model="form.area"
+              :props="{ value: 'label', label: 'label' }"
+              :options="cityList"
+              clearable
+              placeholder="请选择所在地区"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="是否公开" prop="is_show">
+          <el-radio-group v-model="form.is_show">
+            <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="简介" prop="brief">
+          <el-input
+            v-model="form.brief"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="请输入简介"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="手机号" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入手机号">
-          <template #prefix>
-            <el-icon>
-              <Iphone />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+        </el-form-item>
+      </el-col>
       <el-col :span="24" class="remark">
         <span @click="toLogin">已有账号去登录</span>
         <span @click="toBack">返回首页</span>
@@ -89,15 +190,31 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+// 路由
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+const fieldList = inject('fieldList')
+const educationList = inject('educationList')
+const cityList = inject('cityList')
+const isUseList = inject('isUseList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User', 'Expert'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,11 +243,48 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {
+  height: calc(100vh - 40vh);
   margin: 10px 30px 0 30px;
   overflow-y: auto;
+  .text {
+    padding: 10px 0;
+    font-family: PingFangSC-Semibold;
+    font-size: 18px;
+    color: #383b40;
+    letter-spacing: 0;
+    line-height: 18px;
+    font-weight: 600;
+  }
 
   .remark {
     display: flex;

src/views/register/parts/user.vue

@@ -55,7 +55,7 @@
         </el-input>
       </el-form-item>
       <el-form-item label="性别" prop="gender">
-        <el-select v-model="form.gender" placeholder="请选择性别">
+        <el-select clearable v-model="form.gender" placeholder="请选择性别">
           <el-option
             v-for="(item, index) in genderList"
             :key="index"
@@ -89,15 +89,26 @@
   </div>
 </template>
 <script setup>
+// 基础
 const siteInfo = inject('siteInfo')
-const form = inject('form')
+const cloneDeep = inject('cloneDeep')
+const $checkRes = inject('$checkRes')
+const router = inject('router')
+// 弹框
 const dialog = inject('dialog')
+// 用户协议
 const isAgree = inject('isAgree')
-const genderList = inject('genderList')
+// 表单
 const ruleFormRef = inject('ruleFormRef')
-const submitForm = inject('submitForm')
+// 字典表
+const genderList = inject('genderList')
+// 方法
 const toLogin = inject('toLogin')
 const toBack = inject('toBack')
+// 接口
+import { UserStore } from '@/store/api/user/user'
+const store = UserStore()
+const form = ref({ role: ['User'] })
 const validatePhoneNumber = (rule, value, callback) => {
   const reg = /^1[3-9]\d{9}$/
   if (!value) {
@@ -126,6 +137,33 @@ const rules = reactive({
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
+// 注册
+const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      delete data.refpassword
+      const res = await store.create(data)
+      if ($checkRes(res, true)) {
+        ElMessage({
+          message: '注册用户成功，审核中请稍后登录',
+          type: 'success'
+        })
+        router.push({ path: '/login' })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .index {