131 lines
4.0 KiB
Vue
131 lines
4.0 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 CalcButton from '@/components/calc/button/index.vue'
|
|
import router from '@/router'
|
|
import { useDnfHelperStore } from '@/stores/dnfhelper'
|
|
import { computed, h } 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, show, close, randomId } = useDialog()
|
|
|
|
const currentRoleInfo = computed(() => {
|
|
return list.value.find((item) => item.roleId === acitveRoleId.value)
|
|
})
|
|
|
|
const importRole = async () => {
|
|
const role = currentRoleInfo.value
|
|
if (!role) return
|
|
const alter = await api.alterByName(role.roleJob)
|
|
if (!alter) {
|
|
return await alert({
|
|
content: '当前职业尚在开发中，敬请期待。',
|
|
})
|
|
}
|
|
|
|
const openRole = (value: string) => {
|
|
return window.open(
|
|
`/character/equipment/${value}?roleId=${encodeURIComponent(role.roleId)}`,
|
|
'_blank',
|
|
)
|
|
}
|
|
const options = alter.options ?? []
|
|
if (options.length > 0) {
|
|
const id = randomId()
|
|
return await show({
|
|
id,
|
|
content: '请选择职业版本',
|
|
action: () =>
|
|
h(
|
|
'div',
|
|
{ class: 'flex items-center justify-around flex-wrap', style: 'width:200px' },
|
|
options.map((option) =>
|
|
h(
|
|
CalcButton,
|
|
{
|
|
key: option.name,
|
|
class: '!w-40% !mb-2',
|
|
onClick: () => {
|
|
openRole(option.value || option.name)
|
|
close(id, 'ok')
|
|
},
|
|
},
|
|
() => option.title,
|
|
),
|
|
),
|
|
),
|
|
})
|
|
}
|
|
return openRole(alter.value || alter.name)
|
|
}
|
|
</script>
|