修改登录注册

.env.development

@@ -7,4 +7,6 @@ VITE_APP_PORT = 3002
 # 代理前缀
 VITE_APP_BASE_API = '/ts/frame/api'
 
-VITE_APP_HOST = "http://192.168.1.197"
+VITE_APP_HOST = "http://192.168.1.197"
+
+VITE_APP_HOME = "http://localhost:3000/"

.env.production

@@ -7,4 +7,6 @@ VITE_APP_PORT = 3002
 # 代理前缀
 VITE_APP_BASE_API = '/prod-api'
 
-VITE_APP_HOST = "https://broadcast.waityou24.cn"
+VITE_APP_HOST = "https://broadcast.waityou24.cn"
+
+VITE_APP_HOME = "https://broadcast.waityou24.cn"

src/layout/index.vue

@@ -16,10 +16,20 @@
         </el-col>
         <el-col :span="3">
           <el-row :gutter="20">
-            <el-col :span="5">
-              <SearchOutlined />
+            <el-col :span="12" v-if="user && user._id" class="top_3">
+              <el-dropdown>
+                <el-button type="primary">
+                  {{ user.nick_name || '游客' }}
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="toOpen">管理中心</el-dropdown-item>
+                    <el-dropdown-item @click="toLogout">注销</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </el-col>
-            <el-col :span="12" class="top_3">
+            <el-col :span="12" v-else class="top_3">
               <text @click="toLogin(1)">登录</text>
               <text>|</text>
               <text @click="toLogin(2)">注册</text>
@@ -72,6 +82,9 @@ import { SearchOutlined } from '@ant-design/icons-vue'
 const router = useRouter()
 const route = useRoute()
 const current = ref(route.name || 'home')
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
 // 图片引入
 import code from '@/assets/code.png'
 import unit from '@/assets/unit.png'
@@ -89,6 +102,15 @@ const toLogin = (status) => {
 const toHelp = (type) => {
   router.push({ path: '/help', query: { type } })
 }
+// 打开管理端
+const toOpen = async () => {
+  window.location.href = import.meta.env.VITE_APP_HOME
+}
+// 退出登录
+const toLogout = () => {
+  userStore.logOut()
+  router.push('/login')
+}
 </script>
 
 <style scoped lang="scss">
@@ -98,7 +120,7 @@ const toHelp = (type) => {
   .top {
     position: sticky;
     top: 0;
-    z-index: 99999;
+    z-index: 1;
     padding: 10px 80px;
     background: #ffffff;
 

src/router/index.js

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 export const Layout = () => import('@/layout/index.vue')
+import { UserStore } from '@/store/user'
+import axios from 'axios'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -88,5 +90,22 @@ const router = createRouter({
     }
   ]
 })
+router.beforeEach(async (to, from, next) => {
+  const userStore = UserStore()
+  document.title = `${to.meta.title} `
+  const token = localStorage.getItem('token')
+  if (token) {
+    const res = await axios.request({
+      method: 'get',
+      url: `${import.meta.env.VITE_APP_BASE_API}/token/tokenView`,
+      responseType: 'json',
+      headers: {
+        token: token
+      }
+    })
+    if (res.data.errcode == '0') userStore.setUser(res.data.data)
+    next()
+  } else next()
+})
 
 export default router

src/views/index/index.vue

@@ -25,7 +25,20 @@
                       @search="onSearch"
                     />
                   </el-col>
-                  <el-col :span="4" class="right_3">
+                  <el-col :span="4" v-if="user && user._id" class="right_3">
+                    <el-dropdown>
+                      <el-button type="primary">
+                        {{ user.nick_name || '游客' }}
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item @click="toOpen">管理中心</el-dropdown-item>
+                          <el-dropdown-item @click="toLogout">注销</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </el-col>
+                  <el-col :span="4" v-else class="right_3">
                     <text @click="toCommon(1)">登录</text>
                     <text>|</text>
                     <text @click="toCommon(2)">注册</text>
@@ -63,6 +76,9 @@
 <script setup>
 // 基础
 import { siteInfo, menuList } from '@/layout/site'
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
 // 加载中
 const loading = ref(false)
 // 路由
@@ -87,17 +103,23 @@ const onSearch = (data) => {
   console.log('or use this.value', searchValue.value)
 }
 const toCommon = (type) => {
-  if (type == 0) {
-    console.log('帮助中心')
-  } else {
-    console.log('登录或注册')
-  }
+  if (type === 1) router.push({ path: '/login' })
+  else router.push({ path: '/register' })
 }
 // 点击指定模块
 const switchMenu = async (item) => {
   localStorage.setItem('href', item.href)
   router.push({ path: '/home' })
 }
+// 打开管理端
+const toOpen = async () => {
+  window.location.href = import.meta.env.VITE_APP_HOME
+}
+// 退出登录
+const toLogout = () => {
+  userStore.logOut()
+  router.push('/login')
+}
 </script>
 <style scoped lang="scss">
 .main {

src/views/login/index.vue

@@ -17,7 +17,7 @@
                 class="title"
                 @click="toTab(1)"
                 :class="[activeName == '1' ? 'tab0' : 'tab1']"
-                >法人登录</el-col
+                >管理登录</el-col
               >
             </el-col>
             <el-col :span="24" class="content" v-show="activeName == '0'">
@@ -130,6 +130,10 @@
 <script setup>
 // 基础
 import { siteInfo } from '@/layout/site'
+import { cloneDeep } from 'lodash-es'
+// 接口
+import { LoginStore } from '@/store/api/login'
+const loginStore = LoginStore()
 // 路由
 const router = useRouter()
 // 加载中
@@ -152,13 +156,25 @@ const search = async () => {}
 // 选择
 const toTab = async (active) => {
   activeName.value = active
+  form.value = {}
 }
 // 登录
 const submitForm = async (formEl) => {
   if (!formEl) return
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log('submit!')
+      const data = cloneDeep(form.value)
+      if (activeName.value == 0) data.type = 'User'
+      else data.type = 'Admin'
+      const res = await loginStore.login(data)
+      if (res.errcode == '0') {
+        ElMessage({ message: `登录成功`, type: 'success' })
+        localStorage.setItem('token', res.data)
+        // 路由
+        router.push({ path: '/' })
+      } else {
+        ElMessage({ message: `${res.errmsg}`, type: 'error' })
+      }
     } else {
       console.log('error submit!', fields)
     }
@@ -175,7 +191,7 @@ const toRegister = () => {
     background-image: url(@/assets/loginbg.jpeg);
     background-position: center center;
     background-repeat: no-repeat;
-    height: calc(100vh - 20vh);
+    height: calc(100vh - 22.6vh);
     width: 100%;
     background-size: cover;
     display: flex;

src/views/register/index.vue

@@ -4,38 +4,9 @@
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
         <el-col :span="24" class="one">
           <div class="loginform">
-            <el-col :span="24" class="tab">
-              <el-col
-                :span="5"
-                class="title"
-                @click="toTab(0)"
-                :class="[activeName == '0' ? 'tab0' : 'tab1']"
-                >平台用户</el-col
-              >
-              <el-col
-                :span="5"
-                class="title"
-                @click="toTab(1)"
-                :class="[activeName == '1' ? 'tab0' : 'tab1']"
-                >企业用户</el-col
-              >
-              <el-col
-                :span="5"
-                class="title"
-                @click="toTab(2)"
-                :class="[activeName == '2' ? 'tab0' : 'tab1']"
-                >科研单位</el-col
-              >
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '0'">
+            <el-col :span="24" class="content">
               <User></User>
             </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '1'">
-              <Company></Company>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '2'">
-              <Unit></Unit>
-            </el-col>
           </div>
         </el-col>
       </el-col>
@@ -45,44 +16,92 @@
 </template>
 <script setup>
 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'
+const store = UserStore()
+const dictDataStore = DictDataStore()
 // 组件
 import User from './parts/user.vue'
-import Unit from './parts/unit.vue'
-import Company from './parts/company.vue'
 // 路由
 const router = useRouter()
 // 加载中
 const loading = ref(false)
-const form = ref({})
+const form = ref({ role: ['user'] })
 const dialog = ref(false)
+const validatePhoneNumber = (rule, value, callback) => {
+  const reg = /^1[3-9]\d{9}$/
+  if (!value) {
+    return callback(new Error('手机号不能为空'))
+  }
+  if (!reg.test(value)) {
+    return callback(new Error('请输入正确的手机号'))
+  }
+  callback()
+}
+const validatePassword = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error('请输入确认密码'))
+  }
+  if (form.value.password !== value) {
+    callback(new Error('两次输入的密码不一致'))
+  } else {
+    callback()
+  }
+}
 const rules = reactive({
+  nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
+  phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
   account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
 })
-const activeName = ref(0)
 const isAgree = ref(false)
+const genderList = ref(false)
 // 请求
 onMounted(async () => {
   loading.value = true
-  search()
+  await searchOther()
+  await search()
   loading.value = false
 })
+const searchOther = async () => {
+  let result
+  // 性别
+  result = await dictDataStore.query({ code: 'gender', is_use: '0' })
+  if ($checkRes(result)) genderList.value = result.data
+}
 const search = async () => {
   // let res: IQueryResult = await toolsAxios.dataCount();
   // if (res.errcode == '0') {
   //     info.value = res.data;
   // }
 }
-// 选择
-const toTab = async (active) => {
-  activeName.value = active
-}
 // 注册
 const submitForm = async (formEl) => {
+  if (!isAgree.value) {
+    ElMessage({
+      message: '请阅读并同意用户协议和隐私政策',
+      type: 'warning'
+    })
+    return
+  }
   if (!formEl) return
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log('submit!')
+      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)
     }
@@ -90,7 +109,7 @@ const submitForm = async (formEl) => {
 }
 // 去登录
 const toLogin = () => {
-  router.push({ path: '/login', query: { status: '0' } })
+  router.push({ path: '/login' })
 }
 // 返回
 const toBack = () => {
@@ -101,6 +120,7 @@ provide('siteInfo', siteInfo)
 provide('form', form)
 provide('rules', rules)
 provide('isAgree', isAgree)
+provide('genderList', genderList)
 provide('submitForm', submitForm)
 provide('toLogin', toLogin)
 provide('toBack', toBack)
@@ -111,18 +131,18 @@ provide('toBack', toBack)
     background-image: url(@/assets/loginbg.jpeg);
     background-position: center center;
     background-repeat: no-repeat;
-    height: calc(100vh - 20vh);
+    height: calc(100vh - 22.6vh);
     width: 100%;
     background-size: cover;
     display: flex;
     justify-content: space-evenly;
 
     .loginform {
+      width: 800px;
       position: absolute;
       top: 50%;
       left: 50%;
       min-height: 460px;
-      padding: 20px 85px;
       background: hsla(0, 0%, 100%, 0.6);
       box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
       -webkit-transform: translate(-50%, -50%);
@@ -159,7 +179,6 @@ provide('toBack', toBack)
 
       .content {
         margin: 30px 30px 0 30px;
-        height: 340px;
         overflow-y: auto;
 
         .remark {

src/views/register/parts/company.vue

@@ -8,7 +8,7 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号2" prop="account">
+      <el-form-item label="账号" prop="account">
         <el-input v-model="form.account" placeholder="请输入账号">
           <template #prefix>
             <el-icon>
@@ -101,7 +101,6 @@ const toBack = inject('toBack')
 <style scoped lang="scss">
 .user {
   margin: 30px 30px 0 30px;
-  height: 340px;
   overflow-y: auto;
 
   .remark {

src/views/register/parts/unit.vue

@@ -8,7 +8,7 @@
       class="form"
       label-position="left"
     >
-      <el-form-item label="账号1" prop="account">
+      <el-form-item label="账号" prop="account">
         <el-input v-model="form.account" placeholder="请输入账号">
           <template #prefix>
             <el-icon>
@@ -101,7 +101,6 @@ const toBack = inject('toBack')
 <style scoped lang="scss">
 .user {
   margin: 30px 30px 0 30px;
-  height: 340px;
   overflow-y: auto;
 
   .remark {

src/views/register/parts/user.vue

@@ -64,8 +64,8 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="联系电话" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入联系电话">
+      <el-form-item label="手机号" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入手机号">
           <template #prefix>
             <el-icon>
               <Iphone />
@@ -93,6 +93,7 @@ const siteInfo = inject('siteInfo')
 const form = inject('form')
 const rules = inject('rules')
 const isAgree = inject('isAgree')
+const genderList = inject('genderList')
 const ruleFormRef = inject('ruleFormRef')
 const submitForm = inject('submitForm')
 const toLogin = inject('toLogin')
@@ -101,7 +102,6 @@ const toBack = inject('toBack')
 <style scoped lang="scss">
 .user {
   margin: 30px 30px 0 30px;
-  height: 340px;
   overflow-y: auto;
 
   .remark {