technique_web2/src/views/register/index.vue

<template>
  <div id="index">
    <el-row>
      <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="content_1">
              <div class="type-list">
                <el-tooltip
                  v-for="(item, index) in typeList"
                  :key="index"
                  effect="dark"
                  :content="item.remark"
                  placement="top"
                >
                  <span
                    class="span"
                    :class="[item.value === type ? 'active' : '']"
                    @click="toSelect(item.value)"
                    >{{ item.label }}</span
                  >
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="24" class="content_2">
              <user v-if="type == '0'"></user>
              <expert v-if="type == '1'"></expert>
              <company v-if="type == '2'"></company>
              <Incubator v-if="type == '3'"></Incubator>
              <competition v-if="type == '4'"></competition>
              <Investment v-if="type == '5'"></Investment>
              <association v-if="type == '6'"></association>
              <state v-if="type == '7'"></state>
              <unit v-if="type == '8'"></unit>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog" title="使用协议">
      <div v-html="configInfo.agreement"></div>
    </el-dialog>
  </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 { DictDataStore } from '@/store/api/system/dictData'
import { DesignStore } from '@/store/api/platform/design'
const dictDataStore = DictDataStore()
const designStore = DesignStore()
// 组件
import user from './parts/user.vue'
import association from './parts/association.vue'
import company from './parts/company.vue'
import competition from './parts/competition.vue'
import expert from './parts/expert.vue'
import Incubator from './parts/Incubator.vue'
import state from './parts/state.vue'
import unit from './parts/unit.vue'
import Investment from './parts/Investment.vue'
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
// 表单验证
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)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  loading.value = false
})
const searchOther = async () => {
  let result
  // 性别
  result = await dictDataStore.query({ code: 'gender', is_use: '0' })
  if ($checkRes(result)) genderList.value = result.data
  // 用户类型
  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] || {}
  // 城市
  getCity().then((response) => (cityList.value = response.address))
}
// 选择用户类型
const toSelect = async (data) => {
  type.value = data
}
// 去登录
const toLogin = () => {
  router.push({ path: '/login' })
}
// 返回
const toBack = () => {
  router.push({ path: '/home' })
}
// provide
provide('$checkRes', $checkRes)
provide('cloneDeep', cloneDeep)
provide('siteInfo', siteInfo)
provide('dialog', dialog)
provide('isAgree', isAgree)
provide('ruleFormRef ', ruleFormRef)
provide('router', router)
// 字典
provide('genderList', genderList)
provide('fieldList', fieldList)
provide('educationList', educationList)
provide('cityList', cityList)
provide('isUseList', isUseList)
// 方法
provide('toLogin', toLogin)
provide('toBack', toBack)
</script>
<style scoped lang="scss">
.main {
  .one {
    background-image: url(@/assets/loginbg.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    height: calc(100vh - 23vh);
    width: 100%;
    background-size: cover;
    display: flex;
    justify-content: space-evenly;

    .loginform {
      width: 800px;
      position: absolute;
      top: 50%;
      left: 50%;
      min-height: 400px;
      background: hsla(0, 0%, 100%, 0.6);
      box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-top: 10px solid #1492ff;

      .content_1 {
        text-align: center;
        padding: 10px;
        .type-list {
          margin: 10px 0 0 0;
          .span {
            padding: 0 10px;
            margin-left: 5px;
            height: 26px;
            line-height: 24px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background-color: #f4f4f4;
          }
          .span:hover {
            border-color: #3497fc;
            background-color: #d2f1fe;
          }
          .active {
            border-color: #3497fc;
            background-color: #d2f1fe;
            background-image: url(@/assets/icon_2.png);
            background-position: top right;
            background-repeat: no-repeat;
          }
        }
      }

      .content_2 {
        margin: 0 20px;
        overflow-y: auto;
      }

      .content_2::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>