devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

refac: 유니크 경매 UI 수정

Browse Source
This commit is contained in:
Hide_D
2022-06-10 02:07:05 +09:00
parent a039fb871b
commit 6fb2358161
5 changed files with 152 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/sammo/API/Auction/GetUniqueItemAuctionDetail.php
+11
View File
@@ -9,8 +9,11 @@ use sammo\DB;
use sammo\DTO\AuctionBidItem; use sammo\DTO\AuctionBidItem;
use sammo\DTO\AuctionInfo; use sammo\DTO\AuctionInfo;
use sammo\Enums\AuctionType; use sammo\Enums\AuctionType;
use sammo\Enums\InheritanceKey;
use sammo\InheritancePointManager;
use sammo\TimeUtil; use sammo\TimeUtil;
use sammo\Validator; use sammo\Validator;
use sammo\General;
class GetUniqueItemAuctionDetail extends \sammo\BaseAPI class GetUniqueItemAuctionDetail extends \sammo\BaseAPI
{ {
@@ -69,6 +72,13 @@ class GetUniqueItemAuctionDetail extends \sammo\BaseAPI
]; ];
} }
$inheritMgr = InheritancePointManager::getInstance();
//preveious라서 column을 최대한 비울 수 있다.
$remainPoint = $inheritMgr->getInheritancePoint(
General::createGeneralObjFromDB($generalID, ['owner'], 0),
InheritanceKey::previous
);
$obfuscatedName = AuctionUniqueItem::genObfuscatedName($generalID); $obfuscatedName = AuctionUniqueItem::genObfuscatedName($generalID);
return [ return [
@@ -86,6 +96,7 @@ class GetUniqueItemAuctionDetail extends \sammo\BaseAPI
], ],
'bidList' => $responseBid, 'bidList' => $responseBid,
'obfuscatedName' => $obfuscatedName, 'obfuscatedName' => $obfuscatedName,
'remainPoint' => $remainPoint,
]; ];
} }
} }
hwe/ts/PageAuction.vue
+2 -2
View File
@@ -22,7 +22,7 @@ import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "./components/BottomBar.vue"; import BottomBar from "./components/BottomBar.vue";
import AuctionResource from "@/components/AuctionResource.vue"; import AuctionResource from "@/components/AuctionResource.vue";
import AuctionUniqueItem from "@/components/AuctionUniqueItem.vue"; import AuctionUniqueItem from "@/components/AuctionUniqueItem.vue";
import { ref, toRef } from "vue"; import { ref } from "vue";
const props = defineProps({ const props = defineProps({
isResAuction: { isResAuction: {
@@ -34,7 +34,7 @@ const props = defineProps({
const auctionResource = ref<InstanceType<typeof AuctionResource> | null>(null); const auctionResource = ref<InstanceType<typeof AuctionResource> | null>(null);
const auctionUniqueItem = ref<InstanceType<typeof AuctionUniqueItem> | null>(null); const auctionUniqueItem = ref<InstanceType<typeof AuctionUniqueItem> | null>(null);
const isResAuction = toRef(props, "isResAuction"); const isResAuction = ref(props.isResAuction);
async function tryReload() { async function tryReload() {
console.log(auctionResource.value); console.log(auctionResource.value);
hwe/ts/components/AuctionUniqueItem.vue
+135 -47
View File
@@ -1,61 +1,121 @@
<template> <template>
<div class="bg0"> <div class="bg0">
<div class="bg2">유니크 경매장</div> <div>
<div>내 가명: {{ obfuscatedName }}</div> 내 가명: <span class="isMe">{{ obfuscatedName }}</span>
</div>
<template v-if="currentAuction !== undefined"> <template v-if="currentAuction !== undefined">
<div class="bg1">상세</div> <div class="bg2">경매 {{ currentAuction.auction.id }}번 상세</div>
<div class="row gx-0"> <div class="row gx-0 text-center">
<div class="col-4 col-md-2 bg2">경매 번호</div> <div class="col-2 col-md-1 bg1">경매명</div>
<div class="col-4 col-md-2">{{ currentAuction.auction.id }}</div>
<div class="col-4 col-md-2 bg2">경매명</div>
<div class="col-4 col-md-2">{{ currentAuction.auction.title }}</div> <div class="col-4 col-md-2">{{ currentAuction.auction.title }}</div>
<div class="col-4 col-md-2 bg2">주최자(익명)</div> <div class="col-2 col-md-1 bg1">주최자(익명)</div>
<div class="col-4 col-md-2">{{ currentAuction.auction.hostName }}</div> <div :class="['col-4 col-md-2', currentAuction.auction.isCallerHost ? 'isMe' : '']">
{{ currentAuction.auction.hostName }}
</div>
<div class="col-4 col-md-2 bg2">종료시점</div> <div class="col-2 col-md-1 bg1">종료일시</div>
<div class="col-4 col-md-2">{{ currentAuction.auction.closeDate }}</div> <div class="col-4 col-md-2 f_tnum">{{ cutDateTime(currentAuction.auction.closeDate, true) }}</div>
<div class="col-4 col-md-2 bg2">최대지연</div> <div class="col-2 col-md-1 bg1">최대지연</div>
<div class="col-4 col-md-2">{{ currentAuction.auction.availableLatestBidCloseDate }}</div> <div class="col-4 col-md-2 f_tnum">
{{ cutDateTime(currentAuction.auction.availableLatestBidCloseDate, true) }}
</div>
</div> </div>
<div class="bg1">입찰자 목록</div> <div class="bg1">입찰자 목록</div>
<div class="row gx-0 bg2"> <div
<div class="col-4">입찰자</div> class="row gx-0 px-md-5 text-center"
<div class="col-4">입찰포인트</div> :style="{
<div class="col-4">시각</div> borderBottom: 'solid 1px white',
}"
>
<div class="col-4 offset-md-2 col-md-3">입찰자</div>
<div class="col-4 col-md-2 text-end px-5">입찰포인트</div>
<div class="col-4 col-md-3">시각</div>
</div> </div>
<div v-for="bidder of currentAuction.bidList" :key="bidder.amount" class="row gx-0"> <div v-for="bidder of currentAuction.bidList" :key="bidder.amount" class="row gx-0 px-md-5 text-center">
<div class="col-4">{{ bidder.generalName }}</div> <div :class="['col-4 offset-md-2 col-md-3', bidder.isCallerHighestBidder ? 'isMe' : '']">{{ bidder.generalName }}</div>
<div class="col-4">{{ bidder.amount }}</div> <div class="col-4 col-md-2 text-end px-5 f_tnum">{{ bidder.amount.toLocaleString() }}</div>
<div class="col-4">{{ bidder.date }}</div> <div class="col-4 col-md-3 f_tnum">{{ cutDateTime(bidder.date) }}</div>
</div> </div>
<div class="bg1">입찰하기</div> <div class="bg1">입찰하기</div>
<div class="row"> <div class="row">
<div class="col"> <label class="col-5 offset-md-3 col-md-3 col-form-label text-center">유산포인트 (잔여: {{ currentAuction.remainPoint.toLocaleString() }}포인트)</label>
<div class="col-4 col-md-2">
<NumberInputWithInfo <NumberInputWithInfo
v-model="bidAmount" v-model="bidAmount"
:int="true" :int="true"
:min="currentAuction.bidList[0].amount" :min="currentAuction.bidList[0].amount"
title="유산포인트" :max="currentAuction.remainPoint"
title=""
:step="1" :step="1"
></NumberInputWithInfo> ></NumberInputWithInfo>
</div> </div>
<div class="col"><BButton @click="bidAuction">입찰</BButton></div> <div class="col-3 col-md-1 d-grid"><BButton @click="bidAuction">입찰</BButton></div>
</div> </div>
</template> </template>
<div class="bg1">목록</div> <div class="bg1">진행중인 경매 목록</div>
<div v-for="[auctionID, auction] of auctionList" :key="auctionID" class="row" @click="currentAuctionID = auctionID"> <div
<div class="col">{{ auction.id }}</div> class="row gx-0 text-center"
<div class="col">{{ auction.finished ? "종료됨" : "진행중" }}</div> :style="{
<div class="col">{{ auction.title }}</div> borderBottom: 'solid 1px white',
<div class="col">{{ auction.hostName }}</div> }"
<div class="col">{{ auction.closeDate }}</div> >
<div class="col">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div> <div class="col-1">번호</div>
<div class="col">{{ auction.highestBid.generalName }}</div> <div class="col-4">경매명</div>
<div class="col">{{ auction.highestBid.amount }}</div> <div class="col-1">주최자</div>
<div class="col-2">종료일시</div>
<div class="col-1">연장</div>
<div class="col-1">1순위</div>
<div class="col-2 text-end px-2">포인트</div>
</div>
<div
v-for="[auctionID, auction] of ongoingAuctionList"
:key="auctionID"
class="row gx-0 text-center clickableRow"
@click="currentAuctionID = auctionID"
>
<div class="col-1">{{ auction.id }}</div>
<div class="col-4">{{ auction.title }}</div>
<div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
<div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
<div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
<div :class="['col-1', auction.highestBid.isCallerHighestBidder ? 'isMe' : '']">
{{ auction.highestBid.generalName }}
</div>
<div class="col-2 text-end px-2 f_tnum">{{ auction.highestBid.amount.toLocaleString() }}</div>
</div>
<div class="bg1">종료된 경매 목록</div>
<div
class="row gx-0 text-center"
:style="{
borderBottom: 'solid 1px white',
}"
>
<div class="col-1">번호</div>
<div class="col-4">경매명</div>
<div class="col-1">주최자</div>
<div class="col-2">종료일시</div>
<div class="col-1">연장</div>
<div class="col-1">1순위</div>
<div class="col-2 text-end px-2">포인트</div>
</div>
<div
v-for="[auctionID, auction] of finishedAuctionList"
:key="auctionID"
class="row gx-0 text-center clickableRow"
@click="currentAuctionID = auctionID"
>
<div class="col-1">{{ auction.id }}</div>
<div class="col-4">{{ auction.title }}</div>
<div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
<div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
<div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
<div :class="['col-1', auction.highestBid.isCallerHighestBidder ? 'isMe' : '']">
{{ auction.highestBid.generalName }}
</div>
<div class="col-2 text-end px-2 f_tnum">{{ auction.highestBid.amount.toLocaleString() }}</div>
</div> </div>
</div> </div>
</template> </template>
@@ -95,19 +155,35 @@ async function refreshDetail() {
watch(currentAuctionID, () => { watch(currentAuctionID, () => {
void refreshDetail(); void refreshDetail();
}); });
const auctionList = ref(new Map<number, AuctionItemInfo>()); const ongoingAuctionList = ref(new Map<number, AuctionItemInfo>());
const finishedAuctionList = ref(new Map<number, AuctionItemInfo>());
const obfuscatedName = ref(""); const obfuscatedName = ref("");
const toasts = unwrap(useToast()); const toasts = unwrap(useToast());
function cutDateTime(dateTime: string, showSecond = false) {
if (showSecond) {
return dateTime.substring(5, 19);
}
return dateTime.substring(5, 16);
}
async function refreshList() { async function refreshList() {
try { try {
const result = await SammoAPI.Auction.GetUniqueItemAuctionList(); const result = await SammoAPI.Auction.GetUniqueItemAuctionList();
obfuscatedName.value = result.obfuscatedName; obfuscatedName.value = result.obfuscatedName;
auctionList.value = new Map(result.list.map((auction) => [auction.id, auction])); finishedAuctionList.value = new Map(
if (currentAuctionID.value === undefined && result.list.length > 0) { result.list.filter((auction) => auction.finished).map((auction) => [auction.id, auction])
currentAuctionID.value = result.list[0].id; );
bidAmount.value = result.list[0].highestBid.amount; ongoingAuctionList.value = new Map(
result.list.filter((auction) => !auction.finished).map((auction) => [auction.id, auction])
);
if (currentAuctionID.value === undefined && ongoingAuctionList.value.size > 0) {
const auctionIterator = ongoingAuctionList.value.values().next();
if (!auctionIterator.done) {
currentAuctionID.value = auctionIterator.value.id;
bidAmount.value = auctionIterator.value.highestBid.amount;
}
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -148,19 +224,31 @@ async function bidAuction() {
} }
} }
async function refresh(){ async function refresh() {
const waiters = [ const waiters = [refreshList(), refreshDetail()];
refreshList(),
refreshDetail(),
];
await Promise.all(waiters); await Promise.all(waiters);
} }
defineExpose({ defineExpose({
refresh refresh,
}) });
onMounted(() => { onMounted(() => {
void refreshList(); void refreshList();
}); });
</script> </script>
<style>
.isMe {
font-weight: bold;
color: aquamarine;
}
.clickableRow{
cursor: pointer;
}
.clickableRow:hover{
background-color: rgba(255, 255, 255, 0.3);
}
</style>
hwe/ts/components/NumberInputWithInfo.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="row form-group number-input-with-info"> <div class="row form-group number-input-with-info">
<label v-if="!right" class="col-6 col-form-label">{{ title }}</label> <label v-if="!right && title" class="col col-form-label">{{ title }}</label>
<div class="col-6"> <div class="col">
<input <input
ref="input" ref="input"
v-model="rawValue" v-model="rawValue"
@@ -23,7 +23,7 @@
@focus="onFocusText" @focus="onFocusText"
/> />
</div> </div>
<label v-if="right" class="col-6 col-form-label">{{ title }}</label> <label v-if="right && title" class="col col-form-label">{{ title }}</label>
</div> </div>
<div style="text-align: right"> <div style="text-align: right">
<small class="form-text text-muted"><slot /></small> <small class="form-text text-muted"><slot /></small>
hwe/ts/defs/API/Auction.ts
+1
View File
@@ -57,6 +57,7 @@ export type UniqueItemAuctionDetail = ValidResponse & {
auction: UniqueItemAuctionInfo; auction: UniqueItemAuctionInfo;
bidList: UniqueItemAuctionBidder[]; bidList: UniqueItemAuctionBidder[];
obfuscatedName: string; obfuscatedName: string;
remainPoint: number;
}; };
export type OpenAuctionResponse = ValidResponse & { export type OpenAuctionResponse = ValidResponse & {