96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<div class="flex-1 overflow-hidden w-full flex items-center justify-center p-20 box-border">
|
|
<div
|
|
class="max-h-full w-full overflow-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
|
|
>
|
|
<template v-for="item in sortedList" :key="item.roleId">
|
|
<div
|
|
class="mx-auto w-full max-w-52 h-65 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 cursor-pointer px-3 py-4 box-border"
|
|
:style="{
|
|
borderColor: acitveRoleId == item.roleId ? '#F4C08A' : '',
|
|
}"
|
|
@click="chooseRole(item)"
|
|
@dblclick.prevent="importRole()"
|
|
>
|
|
<img
|
|
:src="item.avatarLink"
|
|
alt="avatar"
|
|
class="h-auto w-40 rounded-full object-cover border-2 border-white/50 shrink-0"
|
|
/>
|
|
<div class="w-full text-center flex flex-col items-center leading-6">
|
|
<span class="text-sm text-#DED29A">{{ item.roleName }}</span>
|
|
<span class="text-sm text-#908150">{{ item.roleJob }}</span>
|
|
<span class="text-sm text-[#3ea74e]">名望: {{ formatFame(item.fame) }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/10 h-15 mt-auto w-full flex items-center">
|
|
<div class="flex-1"></div>
|
|
<calc-button class="h-10 w-30" @click="importRole">导入角色</calc-button>
|
|
<div class="flex-1 flex justify-end px-10 gap-5">
|
|
<calc-button @click="navToHome">选择职业</calc-button>
|
|
<calc-button @click="helperStore.refreshHelperInfo(helperStore.helperInfo?.id)">
|
|
刷新
|
|
</calc-button>
|
|
<calc-button @click="helperStore.logout">取消绑定</calc-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts" name="dnfhelper-list">
|
|
import api from '@/api'
|
|
import { useDialog } from '@/components/hooks/dialog'
|
|
import router from '@/router'
|
|
import { useDnfHelperStore } from '@/stores/dnfhelper'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
list: {
|
|
roleId: string
|
|
roleName: string
|
|
roleJob: string
|
|
avatarLink: string
|
|
fame: number
|
|
}[]
|
|
}>()
|
|
|
|
const { list } = toRefs(props)
|
|
const acitveRoleId = ref<string | null>(null)
|
|
const helperStore = useDnfHelperStore()
|
|
|
|
const sortedList = computed(() => {
|
|
return [...list.value].sort((left, right) => right.fame - left.fame)
|
|
})
|
|
|
|
const formatFame = (fame: number) => {
|
|
return new Intl.NumberFormat('zh-CN').format(fame)
|
|
}
|
|
|
|
const navToHome = () => {
|
|
router.push({ path: '/' })
|
|
}
|
|
|
|
const chooseRole = ({ roleId }: { roleId: string }) => {
|
|
acitveRoleId.value = roleId
|
|
}
|
|
|
|
const { alert } = useDialog()
|
|
|
|
const currentRoleInfo = computed(() => {
|
|
return list.value.find((item) => item.roleId === acitveRoleId.value)
|
|
})
|
|
|
|
const importRole = async () => {
|
|
if (!acitveRoleId.value) return
|
|
const alter = await api.alterByName(currentRoleInfo.value?.roleJob || '')
|
|
if (!alter) {
|
|
return await alert({
|
|
content: '当前职业尚在开发中，敬请期待。',
|
|
})
|
|
} else {
|
|
return window.open(`/character/equipment/${alter.value}?roleId=${acitveRoleId.value}`, '_blank')
|
|
}
|
|
}
|
|
</script>
|