CameraMachine/frontend/src/components/login/index.vue

<template>
    <el-dialog
      v-model="showDialog"
      width="354px"
      custom-class="login-dialog"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      @close="emit('update:dialogVisible',false)"
    >
    <div class="login-box">
      <template v-if="pageStatus === 1">
        <el-tabs
            class="login-box__tabs"
            v-model="activeTab"
        >
          <el-tab-pane label="账号密码登录" name="0" />
          <el-tab-pane label="验证码登录" name="1" />
        </el-tabs>
        <el-form
            :model="loginForm"
            :rules="loginRules"
            label-position="left"
        >
          <div class="title__main">欢迎！</div>
          <div class="title_sub">登录拍照机系统</div>

          <el-form-item class="login-input" prop="username">
            <div class="login-icon">
              <img src="@/assets/images/login/login-user.svg" v-if="activeTab === '0'"/>
              <img src="@/assets/images/login/login-code.svg" v-else/>
            </div>
            <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                name="username"
                type="text"
                maxlength="30"
                style="width: 270px;"
                tabindex="1"
                autocomplete="on"
            >
            </el-input>
          </el-form-item>

          <template v-if="activeTab === '0'">
            <el-form-item
                class="login-input"
                prop="password"
            >
              <div class="login-icon">
                <img src="@/assets/images/login/login-lock.svg" />
              </div>
              <el-input
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                  type="password"
                  style="width: 270px;"
                  show-password
                  maxlength="30"
                  tabindex="2"
                  autocomplete="on"
              >
              </el-input>
            </el-form-item>
          </template>

          <template v-else>
            <el-form-item
                class="login-input"
                prop="code"
            >
              <div class="login-icon">
                <img src="@/assets/images/login/login-lock.svg" />
              </div>
              <el-input
                  v-model="loginForm.password"
                  placeholder="请输入验证码"
                  type="text"
                  maxlength="6"
                  tabindex="2"
                  style="width: 270px;"
                  autocomplete="off"
              >
                <template #append>
                  <el-button
                      :disabled="isCodeSending"
                      @click="sendVerificationCode"
                  >
                    {{ codeButtonText }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </template>

          <el-button class="login-button" type="primary" :loading="loading" @click="handleLogin">
            登录
          </el-button>
        </el-form>
      </template>
      <template v-if="pageStatus === 2">
        <div class="company-select-box">
        <div class="title__main">请选择企业身份</div>
        <div class="title_sub">您在以下企业均有任职，请问您想代表那个企业进行访问</div>


        <el-select v-model="companyId" class="mar-top-50 w-full" placeholder="请选择">
          <el-option
              v-for="item, key in company"
              :key="key"
              :label="item.abbreviation ? item.abbreviation : item.name"
              :value="item.id">
          </el-option>
        </el-select>

        <div class="mar-top-50">
        <el-button class="login-button s" type="primary"  @click="toggleCompany">
          确认
        </el-button>
        </div>
      </div>
<!--        <div class="bodyCompany">
          <div class="companyItem" :class="item.is_current == 1?'activeCompany':''" v-for="item, index in company" @click="selectnowCompany(item,index)">
            <div class="companyHeader">
              <div class="companyTitle">{{item.abbreviation ? item.abbreviation : item.name}}</div>
              <div class="companyName">主体信息：{{ item.name }}</div>
            </div>
            <div class="selectCompanyBox">
              <img src="@/assets/images/login/dagou.png" v-if="item.is_current == 1" class="selectIcon"/>
              <div class="unselect" v-else></div>
            </div>
          </div>
        </div>-->

      </template>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Login',
})
</script>
<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getAccountCompany, selectCompany, sendCode } from '@/apis/user';
import useUserInfo from "@/stores/modules/user";
const showDialog = computed(() => props.dialogVisible)

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:dialogVisible', 'login-success'])

const useUserInfoStore = useUserInfo();
const activeTab = ref('0')
const loading = ref(false)
const isCodeSending = ref(false)
const countdown = ref(60)
const loginForm = reactive({
  username: '',
  password: '',
  code: ''
})

const codeButtonText = computed(() => {
  return isCodeSending.value ? `${countdown.value}s后重新获取` : '获取验证码'
})

const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ]
})

const handleLogin = async () => {

  const  res = await  useUserInfoStore.loginAction({
    "site":1,
    "username":loginForm.username,
    "password":loginForm.password,
    "type": activeTab.value,
    "device":"aigc-photo"
  })
  switch(res.data.is_need_select_company){
    case 40006:
      showCompany()
      break;
    case 40007:
      ElMessage.error('当前没有所属组织')
      break;
    default:
      await  useUserInfoStore.getInfo()
      useUserInfoStore.updateLoginShow(false)
        break;
  }

}
const pageStatus = ref(1)
const companyId = ref('')
const company = ref([])
async function  showCompany() {
  const res = await getAccountCompany()
    company.value = res.data
    res.data.map((v)=>{
      if(v.is_current == 1){
        companyId.value = Number(v.id)
      }
    })
    pageStatus.value = 2

}

/*function selectnowCompany(item,index){
  companyId.value = item.id
  company.value.map((v)=>{
    v.is_current = 0
  })
  company.value[index].is_current = 1
  toggleCompany()
}*/


// 切换组织
async function toggleCompany() {
  if (!companyId.value) return false
  await selectCompany({
    id: companyId.value
  })
  await  useUserInfoStore.getInfo()
  useUserInfoStore.updateLoginShow(false)
}

const sendVerificationCode = () => {
  if (!loginForm.username) {
    ElMessage.warning('请先输入手机号')
    return
  }

  sendCode({
    phone: loginForm.username
  }).then(() => {
    isCodeSending.value = true
    countdown.value = 60

  // 这里应该调用发送验证码API
  // await sendCode(loginForm.username)

  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCodeSending.value = false
    }
  }, 1000)
  })
}

</script>
<style lang="scss">
.login-dialog {
  border-radius: 10px !important;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding-top: 10px;
    }
    .el-input-group__append{
      background-color: #fff;
      color: #2FB0FF;
    }
}
</style>
<style lang="scss" scoped>
.login-box {
  width: 100%;
  min-height: 404px;
  background-color: #fff;

  .title__main {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    text-align: left;
  }
  .title_sub {
    font-size: 16px;
    color: #666;
    text-align: left;
    line-height: 1.4;

    .selectCompanyTitle{
      font-size: 30px;
      font-weight: 600;
      color: #FFFFFF;
    }
    .selectCompanyContent{
      margin-top: 4px;
      font-size: 14px;
      color: #FFFFFF;
    }
  }

  .bodyCompany{
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;
    padding: 0 20px;
    margin-top: 30px;
    .companyItem{
      background: #454545;
      border-radius: 10px;
      padding: 20px;
      padding-right: 10px;
      color: #EEEEEE;
      width: 100%;
      margin-bottom: 15px;
      text-align: left;
      display: flex;
      align-items: center;
    }
    .activeCompany{
      border: 1px solid #EEEEEE;
    }
    .companyHeader{
      flex-grow: 1;
    }
    .companyTitle{
      font-size: 17px;
      font-weight: 600;
    }
    .companyName{
      margin-top: 10px;
      font-size: 14px;
    }
    .selectCompanyBox{
      flex-shrink: 0;
    }
    .unselect{
      width: 24px;
      height: 24px;
      border: 1px solid #C6C6C6;
      border-radius: 999px;
    }
    .selectIcon{
      width: 24px;
      height: 24px;
    }
  }

  .login-input {
    :deep(.el-form-item__content) {
      display: flex;
      align-items: center;
    }
    :deep(.el-input__inner) {
      height: 40px;
      line-height: 40px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    :deep(.el-input-group__prepend) {
      padding: 0;
      background-color: initial;
    }
    :deep(.el-input__suffix-inner) {
      line-height: 40px;
      padding: 0 10px;
    }

    .login-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right: 0;

      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 22px;
        height: 22px;
      }
    }
  }

  .login-button {
    width: 100%;
    margin-top: 10px;
    background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);

  }
  :deep(.el-form-item) + .login-button {
    margin-top: 20px;
  }

  .login-box__tabs {
    :deep(.el-tabs__nav) {
      float: initial;
      display: flex;
    }
    :deep(.el-tabs__item) {
      flex-grow: 1;
      text-align: center;
      height: 50px;
      line-height: 50px;
      padding: 0;
      margin: 0;
      &.is-active {
        color: #333;
      }
    }

    :deep(.el-tabs__active-bar) {
      height: 3px;
    }
    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
      background-color: #ebeef5;
    }
    :deep(.el-tabs__header) {
      margin-bottom: 0;
    }
    :deep(.el-tabs__active-bar) {
      background-color: initial;
      &::before {
        content: '';
        display: flex;
        width: 50px;
        height: 100%;
        background-color: var(--el-color-primary);
        margin: 0 auto;
      }
    }
    :deep(.el-tabs__content) {
      padding: 0;
    }
  }

  :deep(.el-form) {
    padding: 20px 0;
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
    margin-top: 20px;
  }

  .company-list {
    height: 220px;
    overflow-y: auto;
    .item {
      background: #fff;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 10px;
      cursor: pointer;
      &:hover {
        opacity: 0.9;
      }
      &:active {
        opacity: 0.8;
      }

      .abbreviation {
        background: #4f4f4f;
        height: 42px;
        line-height: 42px;
        padding: 0 10px;
        color: #fff;
        font-size: 14px;
      }
      &.active {
        position: relative;
      }
      &.active:before {
        content: '';
        display: block;
        width: 44px;
        height: 42px;
        background: url('/static/images/active.png');
        position: absolute;
        right: 0px;
      }
    }
  }
}
.company-select-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 404px;
}
</style>