修改注册

src/views/register/index.vue

@@ -28,40 +28,13 @@
               >
             </el-col>
             <el-col :span="24" class="content" v-show="activeName == '0'">
-              <component
-                :is="user"
-                :form="form"
-                :rules="rules"
-                :isAgree="isAgree"
-                @toLogin="toLogin"
-                @toBack="toBack"
-                @submitForm="submitForm"
-              >
-              </component>
+              <User></User>
             </el-col>
             <el-col :span="24" class="content" v-show="activeName == '1'">
-              <component
-                :is="user"
-                :form="form"
-                :rules="rules"
-                :isAgree="isAgree"
-                @toLogin="toLogin"
-                @toBack="toBack"
-                @submitForm="submitForm"
-              >
-              </component>
+              <Company></Company>
             </el-col>
             <el-col :span="24" class="content" v-show="activeName == '2'">
-              <component
-                :is="user"
-                :form="form"
-                :rules="rules"
-                :isAgree="isAgree"
-                @toLogin="toLogin"
-                @toBack="toBack"
-                @submitForm="submitForm"
-              >
-              </component>
+              <Unit></Unit>
             </el-col>
           </div>
         </el-col>
@@ -71,8 +44,11 @@
   </div>
 </template>
 <script setup>
+import { siteInfo } from '@/layout/site'
 // 组件
-import user from './parts/user.vue'
+import User from './parts/user.vue'
+import Unit from './parts/unit.vue'
+import Company from './parts/company.vue'
 // 路由
 const router = useRouter()
 // 加载中
@@ -120,6 +96,14 @@ const toLogin = () => {
 const toBack = () => {
   router.push({ path: '/home' })
 }
+// provide
+provide('siteInfo', siteInfo)
+provide('form', form)
+provide('rules', rules)
+provide('isAgree', isAgree)
+provide('submitForm', submitForm)
+provide('toLogin', toLogin)
+provide('toBack', toBack)
 </script>
 <style scoped lang="scss">
 .main {

src/views/register/parts/company.vue

@@ -8,7 +8,7 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
+      <el-form-item label="账号2" prop="account">
         <el-input v-model="form.account" placeholder="请输入账号">
           <template #prefix>
             <el-icon>
@@ -45,8 +45,8 @@
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="用户名" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+      <el-form-item label="昵称" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入昵称">
           <template #prefix>
             <el-icon>
               <Avatar />
@@ -54,6 +54,16 @@
           </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-select>
+      </el-form-item>
       <el-form-item label="联系电话" prop="phone">
         <el-input v-model="form.phone" placeholder="请输入联系电话">
           <template #prefix>
@@ -72,42 +82,21 @@
       </el-col>
       <el-col :span="24" class="agree">
         <el-checkbox v-model="isAgree"></el-checkbox>
-        <span style="margin: 0 0 0 5px">我已阅读并同意</span
-        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span>
+        <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
       </el-col>
     </el-form>
   </div>
 </template>
 <script setup>
-import { siteInfo } from '@/layout/site'
-const props = defineProps({
-  form: { type: Object },
-  rules: { type: Object },
-  isAgree: { type: Boolean, default: false }
-})
-const { form, rules, isAgree } = toRefs(props)
-const ruleFormRef = ref()
-// 选择菜单
-const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
-// 注册
-const submitForm = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// 去登录
-const toLogin = () => {
-  emit('toLogin')
-}
-// 返回
-const toBack = () => {
-  emit('toBack')
-}
+const siteInfo = inject('siteInfo')
+const form = inject('form')
+const rules = inject('rules')
+const isAgree = inject('isAgree')
+const ruleFormRef = inject('ruleFormRef')
+const submitForm = inject('submitForm')
+const toLogin = inject('toLogin')
+const toBack = inject('toBack')
 </script>
 <style scoped lang="scss">
 .user {

src/views/register/parts/unit.vue

@@ -8,7 +8,7 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号" prop="account">
+      <el-form-item label="账号1" prop="account">
         <el-input v-model="form.account" placeholder="请输入账号">
           <template #prefix>
             <el-icon>
@@ -45,8 +45,8 @@
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="用户名" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+      <el-form-item label="昵称" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入昵称">
           <template #prefix>
             <el-icon>
               <Avatar />
@@ -54,6 +54,16 @@
           </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-select>
+      </el-form-item>
       <el-form-item label="联系电话" prop="phone">
         <el-input v-model="form.phone" placeholder="请输入联系电话">
           <template #prefix>
@@ -72,42 +82,21 @@
       </el-col>
       <el-col :span="24" class="agree">
         <el-checkbox v-model="isAgree"></el-checkbox>
-        <span style="margin: 0 0 0 5px">我已阅读并同意</span
-        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span>
+        <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
       </el-col>
     </el-form>
   </div>
 </template>
 <script setup>
-import { siteInfo } from '@/layout/site'
-const props = defineProps({
-  form: { type: Object },
-  rules: { type: Object },
-  isAgree: { type: Boolean, default: false }
-})
-const { form, rules, isAgree } = toRefs(props)
-const ruleFormRef = ref()
-// 选择菜单
-const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
-// 注册
-const submitForm = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// 去登录
-const toLogin = () => {
-  emit('toLogin')
-}
-// 返回
-const toBack = () => {
-  emit('toBack')
-}
+const siteInfo = inject('siteInfo')
+const form = inject('form')
+const rules = inject('rules')
+const isAgree = inject('isAgree')
+const ruleFormRef = inject('ruleFormRef')
+const submitForm = inject('submitForm')
+const toLogin = inject('toLogin')
+const toBack = inject('toBack')
 </script>
 <style scoped lang="scss">
 .user {

src/views/register/parts/user.vue

@@ -45,8 +45,8 @@
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="用户名" prop="nick_name">
-        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+      <el-form-item label="昵称" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入昵称">
           <template #prefix>
             <el-icon>
               <Avatar />
@@ -54,6 +54,16 @@
           </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-select>
+      </el-form-item>
       <el-form-item label="联系电话" prop="phone">
         <el-input v-model="form.phone" placeholder="请输入联系电话">
           <template #prefix>
@@ -72,42 +82,21 @@
       </el-col>
       <el-col :span="24" class="agree">
         <el-checkbox v-model="isAgree"></el-checkbox>
-        <span style="margin: 0 0 0 5px">我已阅读并同意</span
-        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span>
+        <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
       </el-col>
     </el-form>
   </div>
 </template>
 <script setup>
-import { siteInfo } from '@/layout/site'
-const props = defineProps({
-  form: { type: Object },
-  rules: { type: Object },
-  isAgree: { type: Boolean, default: false }
-})
-const { form, rules, isAgree } = toRefs(props)
-const ruleFormRef = ref()
-// 选择菜单
-const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
-// 注册
-const submitForm = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// 去登录
-const toLogin = () => {
-  emit('toLogin')
-}
-// 返回
-const toBack = () => {
-  emit('toBack')
-}
+const siteInfo = inject('siteInfo')
+const form = inject('form')
+const rules = inject('rules')
+const isAgree = inject('isAgree')
+const ruleFormRef = inject('ruleFormRef')
+const submitForm = inject('submitForm')
+const toLogin = inject('toLogin')
+const toBack = inject('toBack')
 </script>
 <style scoped lang="scss">
 .user {