fashion-ssr-vue3/components/common/loginAndDownload/comp/account/list.vue

<script lang='ts' setup>
import useLoginAndDownload from '../../useLoginAndDownload'
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
const defaultName = 'EJET Spark'
const { loginedAccountList } = storeToRefs(commonStore)

const { onSelectAccount } = useLoginAndDownload()
function selectOtherLogin() {
  commonStore.setLoginType('choice')
}
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px">
      <span class="custom-title-bg03">Sign In</span> to EJET Spark
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-22px">
      You alredy have the following EJET Spark accounts, select one to continue.
    </div>

    <div class="flex flex-col gap-20px">
      <div v-for="item, index in loginedAccountList" :key="index" class="flex py-15px px-35px b-rd-10px b-#D8D8D b-1px b-solid cursor-pointer hover:b-#9B6CFF" @click="onSelectAccount(item)">
        <!-- 获取首字母 -->
        <div class="w-50px h-50px bg-#F2E5F2 text-#9B6CFF fw-800 text-24px flex justify-center b-rd-50% items-center mr-28px">
          {{ item.name ? item.name.charAt(0).toUpperCase() : defaultName.charAt(0).toUpperCase() }}
        </div>
        <div>
          <div class="text-18px fw-bold text-#333 custom-title-font">
            {{ item.name || defaultName }}
          </div>
          <div class="text-#9B6CFF mt-8px">
            {{ item.email }}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-20px text-#333">
      Continue with another account. <span class="text-#9B6CFF cursor-pointer hover:underline" @click="selectOtherLogin">Click here⁠.</span>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>