feat,wip: 유니크 입찰 기본 구현

2022-06-09 01:21:21 +09:00
parent 4d6b3d1a53
commit a12e15eb78
6 changed files with 206 additions and 51 deletions
@@ -1,7 +1,150 @@
 <template>
-<div>유니크 경매장</div>
+  <div class="bg0">
+    <div class="bg2">유니크 경매장</div>
+    <div>내 가명: {{ obfuscatedName }}</div>
+    <template v-if="currentAuction !== undefined">
+      <div class="bg1">상세</div>
+      <div class="row gx-0">
+        <div class="col-4 col-md-2 bg2">경매 번호</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 bg2">주최자(익명)</div>
+        <div class="col-4 col-md-2">{{ currentAuction.auction.hostName }}</div>
+
+        <div class="col-4 col-md-2 bg2">종료시점</div>
+        <div class="col-4 col-md-2">{{ currentAuction.auction.closeDate }}</div>
+
+        <div class="col-4 col-md-2 bg2">연장 허용</div>
+        <div class="col-4 col-md-2">{{ currentAuction.auction.remainCloseDateExtensionCnt }}회</div>
+      </div>
+      <div class="bg1">입찰자 목록</div>
+      <div class="row gx-0 bg2">
+        <div class="col-4">입찰자</div>
+        <div class="col-4">입찰포인트</div>
+        <div class="col-4">시각</div>
+      </div>
+      <div v-for="bidder of currentAuction.bidList" :key="bidder.amount" class="row gx-0">
+        <div class="col-4">{{ bidder.generalName }}</div>
+        <div class="col-4">{{ bidder.amount }}</div>
+        <div class="col-4">{{ bidder.date }}</div>
+      </div>
+      <div class="bg1">입찰하기</div>
+      <div class="row">
+        <div class="col">
+          <NumberInputWithInfo
+            v-model="bidAmount"
+            :int="true"
+            :min="currentAuction.bidList[0].amount"
+            title="유산포인트"
+            :step="1"
+          ></NumberInputWithInfo>
+        </div>
+        <div><BButton @click="bidAuction">입찰</BButton></div>
+      </div>
+    </template>
+
+    <div class="bg1">목록</div>
+    <div v-for="[auctionID, auction] of auctionList" :key="auctionID" class="row" @click="currentAuctionID = auctionID">
+      <div class="col">{{ auction.id }}</div>
+      <div class="col">{{ auction.finished ? "종료됨" : "진행중" }}</div>
+      <div class="col">{{ auction.title }}</div>
+      <div class="col">{{ auction.hostName }}</div>
+      <div class="col">{{ auction.closeDate }}</div>
+      <div class="col">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
+      <div class="col">{{ auction.highestBid.generalName }}</div>
+      <div class="col">{{ auction.highestBid.amount }}</div>
+    </div>
+  </div>
 </template>

 <script lang="ts" setup>
+import type { UniqueItemAuctionDetail, UniqueItemAuctionList } from "@/defs/API/Auction";
+import { SammoAPI } from "@/SammoAPI";
+import { unwrap } from "@/util/unwrap";
+import { useToast, BButton } from "bootstrap-vue-3";
+import { isString } from "lodash";
+import { onMounted, ref, watch } from "vue";
+import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";

-</script>
+type AuctionItemInfo = UniqueItemAuctionList["list"][0];
+
+const currentAuctionID = ref<number>();
+const currentAuction = ref<UniqueItemAuctionDetail | undefined>(undefined);
+const bidAmount = ref<number>(5000);
+watch(currentAuctionID, async (auctionID) => {
+  if (auctionID === undefined) {
+    return;
+  }
+  try {
+    currentAuction.value = await SammoAPI.Auction.GetUniqueItemAuctionDetail({ auctionID });
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      unwrap(useToast()).danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+});
+const auctionList = ref(new Map<number, AuctionItemInfo>());
+const obfuscatedName = ref("");
+
+const toasts = unwrap(useToast());
+
+async function refresh() {
+  try {
+    const result = await SammoAPI.Auction.GetUniqueItemAuctionList();
+    obfuscatedName.value = result.obfuscatedName;
+    auctionList.value = new Map(result.list.map((auction) => [auction.id, auction]));
+    if (currentAuctionID.value === undefined && result.list.length > 0) {
+      currentAuctionID.value = result.list[0].id;
+      bidAmount.value = result.list[0].highestBid.amount;
+    }
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+}
+
+async function bidAuction(){
+  if(currentAuction.value === undefined){
+    return;
+  }
+
+
+  const amount = bidAmount.value;
+  const auctionInfo = currentAuction.value.auction;
+
+  if(confirm(`${auctionInfo.title}에 ${amount}유산포인트를 입찰하시겠습니까?`)){
+    try{
+      await SammoAPI.Auction.BidUniqueAuction({ auctionID: auctionInfo.id, amount });
+      toasts.success({
+        title: "성공",
+        body: "입찰이 완료되었습니다.",
+      });
+      await refresh();
+    }catch(e){
+      console.error(e);
+      if(isString(e)){
+        toasts.danger({
+          title: "에러",
+          body: e,
+        });
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  void refresh();
+});
+</script>