Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] fix product detail #206

Merged
merged 4 commits into from
Jan 17, 2024
Merged

[FIX] fix product detail #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5db9bff
[FIX] 모두 다운로드 이후에 ref array의 index 객체 직접 바꾸도록 변경
CessnaJ Jan 17, 2024
7016ef6
[FEAT] product detail view에서 최적혜택가
CessnaJ Jan 17, 2024
8479e88
[FIX] fix product detail
CokeLee777 Jan 17, 2024
1e7f054
Merge pull request #205 from lotteon2/fix/promotional-price-on-produc…
CokeLee777 Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/promotion/coupon/productdetail/ProductDetailCouponModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ import {
import { defineEmits } from 'vue'
import { successModal, warningModal } from '@/utils/Modal'

const emit = defineEmits(['close-coupon-modal', 'total-price-updated'])
const emit = defineEmits([
'close-coupon-modal',
'total-price-updated',
'best-promotional-price-updated'
])

const { showModal, productId, categoryId, productPriceValue } = defineProps({
showModal: {
Expand Down Expand Up @@ -111,6 +115,7 @@ const handleDownloadMultipleCoupons = async () => {
const downloadableCouponInfoIds = coupons.value
.filter((coupon) => coupon.isDownloadable)
.map((coupon) => coupon.couponInfoId)

if (downloadableCouponInfoIds.length === 0) {
await warningModal('알림', '이미 모든 쿠폰을 다운로드 받았습니다.')
// console.log('다운로드 가능한 쿠폰이 없습니다.')
Expand All @@ -120,17 +125,18 @@ const handleDownloadMultipleCoupons = async () => {
try {
const downloadResponse: MultipleCouponDownloadResponse =
await downloadMultipleCoupons(downloadableCouponInfoIds)

await successModal(
'알림',
downloadResponse.successfulIds.length + '개의 쿠폰을 다운로드 했습니다.'
)
console.log('다운로드된 couponInfoId 목록:', downloadResponse.successfulIds)
console.log('다운로드 실패한 couponInfoId 목록:', downloadResponse.failedIds)

coupons.value.forEach((coupon) => {
coupons.value.forEach((coupon, index) => {
// 다운로드 된 쿠폰들 상태변경
if (downloadResponse.successfulIds.includes(coupon.couponInfoId)) {
coupon.isDownloadable = false
coupons.value[index].isDownloadable = false
}
})
} catch (error) {
Expand Down Expand Up @@ -173,6 +179,9 @@ const maxDiscountAmount = computed(() => {
console.log(`갱신 후 임시 maxDiscount:${maxDiscount}`)
}
console.log(`최종 계산완료 된 maxDiscount:${maxDiscount}`)

emit('best-promotional-price-updated', maxDiscount) // computed로 변경시 emit

return maxDiscount
})

Expand Down
55 changes: 36 additions & 19 deletions src/views/ProductDetailView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
const route = useRoute()
const product = ref()

const bestPromotionalPrice = ref<number>(0)
const bestPromotionalRate = ref<number>(0)

const referralCode = ref()

const isDescribeImages = ref<boolean>(true)
Expand Down Expand Up @@ -101,6 +104,7 @@ const selectedOriginalPrice = ref<number>(0)
const initData = async () => {
product.value = await getProductDetail(Number(route.params.id))
productPriceValue.value = product.value.price
bestPromotionalPrice.value = product.value.price // product가 any라서 기본값 0으로 두고 초기화시 같이 init
referralCode.value = route.query.code === null ? null : route.query.code
if (localStorage.getItem('accessToken')) {
wishLists.value = (await readWishListFromProduct(Number(route.params.id))).responses
Expand Down Expand Up @@ -214,6 +218,16 @@ const validation = (): boolean => {
return true
}

const bestPromotionalPriceUpdatedHandler = (maxDiscount: number) => {
// ProductDetailCouponModal 모달에서 computed 변화시 함수 발동
// -> life cycle상 bestPromotionalPrice가 init에서 product.value.price로 업데이트된 뒤에 다시 업데이트.
if (bestPromotionalPrice && product.value.price) {
// product.value.price로 zero division error 방지
bestPromotionalPrice.value = product.value.price - maxDiscount
bestPromotionalRate.value = Math.floor((maxDiscount / product.value.price) * 100)
}
}

onBeforeMount(initData)

watch(selectedQuantity, () => {
Expand All @@ -229,6 +243,7 @@ watch(selectedProductSize, () => {
<ProductDetailCouponModal
@close-coupon-modal="closeCouponModal"
@total-price-updated="handleTotalPriceUpdated"
@best-promotional-price-updated="bestPromotionalPriceUpdatedHandler"
:showModal="showCouponModal"
:productId="productId"
:categoryId="product.categoryId"
Expand Down Expand Up @@ -288,13 +303,15 @@ watch(selectedProductSize, () => {
<div class="price-info-row">
<h1>데일리온가</h1>
<!-- TODO : 여기에 할인 적용된 금액 들어가나요? -->
<h2>{{ productPriceValue.toLocaleString() }}</h2>
<h2>{{ bestPromotionalPrice.toLocaleString() }}</h2>
<!-- TODO : 여기에 최대 할인율? 할인 금액 나오는건가요? -->
<h3>할인율</h3>
<h3 v-show="bestPromotionalRate">{{ bestPromotionalRate }}</h3>
</div>
<div class="price-info-row">
<h1>&nbsp;</h1>
<div class="dash">{{ productPriceValue.toLocaleString() }}</div>
<div v-show="productPriceValue !== bestPromotionalPrice" class="dash">
{{ productPriceValue.toLocaleString() }}
</div>
</div>
<div class="price-info-row">
<h1>프로모션</h1>
Expand Down Expand Up @@ -322,24 +339,24 @@ watch(selectedProductSize, () => {
</div>
<div class="price-info-row">
<span>상품 옵션</span>
<Select v-model.lazy.number='selectedProductSize'>
<SelectOption v-for="(productStock, index) in product.productStocks"
:key="index"
:value="productStock">
{{ productStock.productSizeName }}
{{ productStock.quantity <= 100 ? ' - ' + productStock.quantity + '개' : '' }}
</SelectOption>
</Select>
<!-- <select v-model.lazy.number="selectedProductSize">-->
<!-- <option-->
<!-- v-for="(productStock, index) in product.productStocks"-->
<!-- :key="index"-->
<!-- :value="productStock"-->
<!-- >-->
<!-- <Select v-model.lazy.number='selectedProductSize'>-->
<!-- <SelectOption v-for="(productStock, index) in product.productStocks"-->
<!-- :key="index"-->
<!-- :value="productStock">-->
<!-- {{ productStock.productSizeName }}-->
<!-- {{ productStock.quantity <= 100 ? ' - ' + productStock.quantity + '개' : '' }}-->
<!-- </option>-->
<!-- </select>-->
<!-- </SelectOption>-->
<!-- </Select>-->
<select v-model.lazy.number="selectedProductSize">
<option
v-for="(productStock, index) in product.productStocks"
:key="index"
:value="productStock"
>
{{ productStock.productSizeName }}
{{ productStock.quantity <= 100 ? ' - ' + productStock.quantity + '개' : '' }}
</option>
</select>
</div>
<div class="option-container">
<div class="plus-minus-wrapper">
Expand Down