企业登录下拉选项封装

src/views/login/components/companySelect.vue

@@ -0,0 +1,39 @@
+<template>
+  <autocompleteUI
+    v-model="value"
+    :item="item"
+    @change="valueChange"
+  ></autocompleteUI>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import autocompleteUI from '@/components/FormUI/autocomplete'
+defineOptions({ name: 'enterpriseLogin-companySelect' })
+const props = defineProps({ modelValue: String })
+const emit = defineEmits(['update:modelValue'])
+
+const value = ref(props.modelValue)
+
+// 企业登录
+const companyList = JSON.parse(localStorage.getItem('companyInfo'))
+if (companyList?.length) {
+  const id = companyList[0].enterpriseId
+  value.value = id
+  emit('update:modelValue', id)
+}
+// onMounted(() => {})
+
+const item = ref({
+  // type: 'autocomplete',
+  // width: 250,
+  itemText: 'enterpriseName',
+  itemValue: 'enterpriseId',
+  label: '请选择要登录的企业',
+  items: companyList
+})
+
+const valueChange = (val) => {
+  if (val) emit('update:modelValue', val)
+}
+</script>

src/views/login/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-box">
-    <div class="login-content">
+    <div class="login-content" :style="{height: loginType ? '492px' : '430px'}">
       <div class="login-header mt-1 ml-1">
         <div class="left">
           <div ref="phone" :class="['left-qrCode', {'phone-switch': isPhone}]" @click="handlePhone">
@@ -38,7 +38,10 @@
             <v-tab :value="1">{{ $t('login.smsLogin') }}</v-tab>
             <v-tab :value="2">{{ $t('login.passwordLogin') }}</v-tab>
           </v-tabs>
-          <v-window v-model="tab" class="mt-9">
+          <div v-if="loginType" class="mt-9">
+            <companySelect v-model="enterpriseId"></companySelect>
+          </div>
+          <v-window v-model="tab" :class="{'mt-9': !loginType}">
               <!-- 验证码登录 -->
             <v-window-item :value="1">
               <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
@@ -51,6 +54,9 @@
         </div>
         <div v-else>
           <!-- 微信扫码登录 -->
+          <div v-if="loginType" class="my-3">
+            <companySelect v-model="enterpriseId"></companySelect>
+          </div>
           <qr-code></qr-code>
         </div>
         <v-btn v-if="!isPhone" :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
@@ -64,6 +70,11 @@
       </div>
     </div>
   </div>
+  <!-- <CtDialog :visible="showCompanySelect" title="选择企业" :footer="true" widthType="" @submit="handleSubmit">
+    <div  style="min-height: 10px">
+      <autocompleteUI></autocompleteUI>
+    </div>
+  </CtDialog> -->
 </template>
 
 <script setup>
@@ -71,6 +82,7 @@ import { ref } from 'vue'
 import passwordFrom from './components/passwordPage.vue'
 import phoneFrom from '@/components/VerificationCode'
 import qrCode from './components/qrCode.vue'
+import companySelect from './components/companySelect.vue'
 
 import { useUserStore } from '@/store/user'
 import { useRoute, useRouter } from 'vue-router'
@@ -82,6 +94,7 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const loginType = ref(route.query?.loginType - 0 || null)
+const enterpriseId = ref('')
 
 const phone = ref()
 let isPhone = ref(false)
@@ -107,14 +120,7 @@ const handleLogin = async () => {
     if (tab.value === 1) { params = { ...phoneRef.value.loginData }; api = 'handleSmsLogin'}
     else { params = { ...passRef.value.loginData }; api = 'handlePasswordLogin'}
     // 企业登录
-    if (type === 330) {
-      const companyList = JSON.parse(localStorage.getItem('companyInfo'))
-      if (companyList?.length) {
-        params.loginType = type // 前端判断是否是企业登录标识 330 为企业否者为个人
-        const companyInfo = companyList[0]
-        params.enterpriseId = companyInfo.enterpriseId
-      }
-    }
+    if (type === 330)  params.enterpriseId = enterpriseId.value
     // await userStore.handlePasswordLogin({ ...passRef.value.loginData, type }) //tab.value === 1
     // await userStore.handleSmsLogin({ ...phoneRef.value.loginData, type })
     await userStore[api](params)
@@ -144,13 +150,14 @@ const switchToPersonalLogin = () => {
 <style lang="scss" scoped>
 .loginType {
   position: absolute;
-  top: 10px;
+  top: 16px;
   right: 0;
   // width: 100%;
   color: #fff;
-  padding: 4px 15px 4px 30px;
+  padding: 4px 15px 4px 32px;
   border-radius: 8px 0 0 8px;
-  background-color: #ffba5d;
+  // background-color: #ffba5d;
+  background-color: #fa9c3e;
   font-size: 16px;
 }
 .login-box {
@@ -166,7 +173,7 @@ const switchToPersonalLogin = () => {
   left: 50%;
   translate: -50% -50%;
   width: 450px;
-  height: 430px;
+  // height: 430px;
   background-color: #fff;
   border-radius: 10px;
 }