From 594a8804941eca90d05024f0859e4fba3e24a865 Mon Sep 17 00:00:00 2001 From: BTMuli Date: Fri, 30 Jun 2023 10:08:02 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E5=BE=AE=E8=B0=83=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../userCharacter/tuc-detail-overlay.vue | 120 ++++++++++++------ src/components/userCharacter/tuc-role-box.vue | 6 +- src/pages/User/Characters.vue | 16 ++- 3 files changed, 92 insertions(+), 50 deletions(-) diff --git a/src/components/userCharacter/tuc-detail-overlay.vue b/src/components/userCharacter/tuc-detail-overlay.vue index 9231029d..438f9e94 100644 --- a/src/components/userCharacter/tuc-detail-overlay.vue +++ b/src/components/userCharacter/tuc-detail-overlay.vue @@ -30,6 +30,7 @@
- + - +
@@ -90,16 +86,26 @@ interface ToUcDetailProps { } interface ToUcDetailEmits { - (e: "update:modelValue", value: TGApp.Sqlite.Character.UserRole): void; - + (e: "update:modelValue", value: boolean): void; (e: "cancel"): void; } +interface ToUcDetailData { + weapon: TGApp.Sqlite.Character.RoleWeapon; + constellation: TGApp.Sqlite.Character.RoleConstellation[]; + reliquary: { + 1: TGApp.Sqlite.Character.RoleReliquary | false; + 2: TGApp.Sqlite.Character.RoleReliquary | false; + 3: TGApp.Sqlite.Character.RoleReliquary | false; + 4: TGApp.Sqlite.Character.RoleReliquary | false; + 5: TGApp.Sqlite.Character.RoleReliquary | false; + }; + costume: TGApp.Sqlite.Character.RoleCostume[]; + bg: string; +} + const emits = defineEmits(); -const props = withDefaults(defineProps(), { - modelValue: false, - dataVal: {} as TGApp.Sqlite.Character.UserRole, -}); +const props = defineProps(); const visible = computed({ get: () => props.modelValue, set: (value) => emits("update:modelValue", value), @@ -107,24 +113,27 @@ const visible = computed({ const showCostumeSwitch = ref(false); // data -const data = ref({ - weapon: {} as TGApp.Sqlite.Character.RoleWeapon, - constellation: [] as TGApp.Sqlite.Character.RoleConstellation[], +const data = ref({ + weapon: {}, + constellation: [], reliquary: { - 1: false as TGApp.Sqlite.Character.RoleReliquary | false, - 2: false as TGApp.Sqlite.Character.RoleReliquary | false, - 3: false as TGApp.Sqlite.Character.RoleReliquary | false, - 4: false as TGApp.Sqlite.Character.RoleReliquary | false, - 5: false as TGApp.Sqlite.Character.RoleReliquary | false, + 1: false, + 2: false, + 3: false, + 4: false, + 5: false, }, - costume: [] as TGApp.Sqlite.Character.RoleCostume[], - bg: "" as string, + costume: [], + bg: "", }); +const selectConstellation = ref( + {}, +); +const selectWeapon = ref({}); +const selectRelic = ref( + {}, +); const selected = ref({ - data: {} as - | TGApp.Sqlite.Character.RoleConstellation - | TGApp.Sqlite.Character.RoleWeapon - | TGApp.Sqlite.Character.RoleReliquary, type: "武器" || "命之座" || "圣遗物", pos: 0, // 用于标记选中的是哪个位置 }); @@ -132,21 +141,38 @@ const selected = ref({ // 加载数据 function loadData() { if (!props.modelValue) return; - data.value.weapon = JSON.parse(props.dataVal.weapon) as TGApp.Sqlite.Character.RoleWeapon; - data.value.constellation = JSON.parse( - props.dataVal.constellation, - ) as TGApp.Sqlite.Character.RoleConstellation[]; + data.value.weapon = JSON.parse(props.dataVal.weapon); + data.value.constellation = JSON.parse(props.dataVal.constellation); if (props.dataVal.reliquary !== "") { - const relics = JSON.parse(props.dataVal.reliquary) as TGApp.Sqlite.Character.RoleReliquary[]; + const relics = >JSON.parse(props.dataVal.reliquary); relics.map((item) => { - data.value.reliquary[item.pos] = item; + switch (item.pos) { + case 1: + data.value.reliquary["1"] = item; + break; + case 2: + data.value.reliquary["2"] = item; + break; + case 3: + data.value.reliquary["3"] = item; + break; + case 4: + data.value.reliquary["4"] = item; + break; + case 5: + data.value.reliquary["5"] = item; + break; + default: + break; + } + return item; }); } - data.value.costume = JSON.parse(props.dataVal.costume) as TGApp.Sqlite.Character.RoleCostume[]; + data.value.costume = JSON.parse(props.dataVal.costume); data.value.bg = props.dataVal.img; showCostumeSwitch.value = false; + selectWeapon.value = data.value.weapon; selected.value = { - data: data.value.weapon, type: "武器", pos: 0, }; @@ -180,12 +206,24 @@ function showDetail( | TGApp.Sqlite.Character.RoleWeapon | TGApp.Sqlite.Character.RoleReliquary | false, - type: string, + type: "命座" | "武器" | "圣遗物", pos: number = 0, ) { if (!item) return; + switch (type) { + case "命座": + selectConstellation.value = item; + break; + case "武器": + selectWeapon.value = item; + break; + case "圣遗物": + selectRelic.value = item; + break; + default: + break; + } selected.value = { - data: item, type, pos, }; @@ -246,10 +284,10 @@ function switchBg() { left: 0; width: 100%; color: var(--common-color-white); - font-family: var(--font-text); + font-family: var(--font-title); font-size: 16px; text-align: center; - text-shadow: 0 0 10px var(--common-color-yellow); + text-shadow: 0 0 10px rgb(0 0 0 / 50%); } .tuc-do-show { diff --git a/src/components/userCharacter/tuc-role-box.vue b/src/components/userCharacter/tuc-role-box.vue index f5ef48d4..82d9ad9b 100644 --- a/src/components/userCharacter/tuc-role-box.vue +++ b/src/components/userCharacter/tuc-role-box.vue @@ -154,7 +154,7 @@ onUnmounted(() => { justify-content: space-between; padding: 5px; border-radius: 5px; - background: var(--common-shadow-2); + border: 1px inset var(--common-bg-1); font-family: var(--font-title); font-size: 12px; } @@ -218,7 +218,6 @@ onUnmounted(() => { justify-content: space-between; padding: 5px; border-radius: 5px; - backdrop-filter: blur(5px); } .tuc-rbb-talent { @@ -238,7 +237,8 @@ onUnmounted(() => { justify-content: center; padding: 5px; border-radius: 50%; - background: var(--common-shadow-4); + background: rgb(0 0 0 /0.4); + box-shadow: 0 0 10px rgb(255 255 255/0.4); } .tuc-rbb-talent :nth-child(2) { diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue index 7f2b8c8d..5cfa28be 100644 --- a/src/pages/User/Characters.vue +++ b/src/pages/User/Characters.vue @@ -26,7 +26,12 @@
- +
@@ -53,13 +58,13 @@ const loadingTitle = ref(""); // data const isEmpty = ref(true); -const roleList = ref([] as TGApp.Sqlite.Character.UserRole[]); +const roleList = ref>([]); const roleCookie = computed(() => userStore.getCookieGroup4()); const user = computed(() => userStore.getCurAccount()); // overlay const visible = ref(false); -const dataVal = ref({} as TGApp.Sqlite.Character.UserRole); +const dataVal = ref({}); // grid const gridGap = ref("10px"); @@ -114,7 +119,7 @@ async function refreshTalent() { user.value.gameUid, role.cid, ); - if (!Object.hasOwnProperty("retcode")) { + if ("skill_list" in res) { const talent: TGApp.Sqlite.Character.RoleTalent[] = []; const avatar = res; avatar.skill_list.map((skill, index) => { @@ -137,7 +142,7 @@ async function refreshTalent() { } async function shareRoles() { - const rolesBox = document.querySelector(".uc-box") as HTMLElement; + const rolesBox = document.querySelector(".uc-box"); const fileName = `【角色列表】-${user.value.gameUid}`; await generateShareImg(fileName, rolesBox); } @@ -155,7 +160,6 @@ function getUpdateTime() { function selectRole(role: TGApp.Sqlite.Character.UserRole) { dataVal.value = role; - console.log(dataVal.value); visible.value = true; }