feat: 抽奖ui

This commit is contained in:
tim
2025-08-11 09:56:15 +08:00
parent e7d0f7fb0e
commit 5360529327
3 changed files with 33 additions and 10 deletions

View File

@@ -1,5 +1,5 @@
export const API_BASE_URL = 'https://www.open-isle.com'
// export const API_BASE_URL = 'http://127.0.0.1:8081'
// export const API_BASE_URL = 'https://www.open-isle.com'
export const API_BASE_URL = 'http://127.0.0.1:8081'
// export const API_BASE_URL = 'http://30.211.97.238:8081'
export const GOOGLE_CLIENT_ID = '777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com'
export const GITHUB_CLIENT_ID = 'Ov23liVkO1NPAX5JyWxJ'

View File

@@ -49,8 +49,8 @@
</label>
</div>
<div class="prize-name-row">
<span>奖品名称</span>
<input class="prize-name-input" v-model="prizeName" placeholder="奖品名称" />
<span>奖品描述</span>
<input class="prize-name-input" v-model="prizeDescription" placeholder="奖品描述" />
</div>
<div class="prize-count-row">
<span>奖品数量</span>
@@ -98,7 +98,9 @@ export default {
const showPrizeCropper = ref(false)
const prizeName = ref('')
const prizeCount = ref(1)
const prizeDescription = ref('')
const endTime = ref(null)
const startTime = ref(null)
const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
const isWaitingPosting = ref(false)
const isAiLoading = ref(false)
@@ -158,8 +160,10 @@ export default {
prizeIconFile.value = null
tempPrizeIcon.value = ''
showPrizeCropper.value = false
prizeDescription.value = ''
prizeCount.value = 1
endTime.value = null
startTime.value = null
// 删除草稿
const token = getToken()
@@ -297,8 +301,8 @@ export default {
toast.error('奖品数量必须大于0')
return
}
if (!prizeName.value) {
toast.error('请输入奖品名称')
if (!prizeDescription.value) {
toast.error('请输入奖品描述')
return
}
if (!endTime.value) {
@@ -341,7 +345,10 @@ export default {
prizeIcon: postType.value === 'LOTTERY' ? prizeIconUrl : undefined,
prizeName: postType.value === 'LOTTERY' ? prizeName.value : undefined,
prizeCount: postType.value === 'LOTTERY' ? prizeCount.value : undefined,
endTime: postType.value === 'LOTTERY' ? new Date(endTime.value).toISOString() : undefined
prizeDescription: postType.value === 'LOTTERY' ? prizeDescription.value : undefined,
startTime: postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
// 将时间转换为 UTC+8.5 时区 todo: 需要优化
endTime: postType.value === 'LOTTERY' ? new Date(new Date(endTime.value).getTime() + 8.02 * 60 * 60 * 1000).toISOString() : undefined
})
})
const data = await res.json()
@@ -365,7 +372,7 @@ export default {
isWaitingPosting.value = false
}
}
return { title, content, selectedCategory, selectedTags, postType, prizeIcon, prizeCount, endTime, submitPost, saveDraft, clearPost, isWaitingPosting, aiGenerate, isAiLoading, isLogin, onPrizeIconChange, onPrizeCropped, showPrizeCropper, tempPrizeIcon, dateConfig, prizeName }
return { title, content, selectedCategory, selectedTags, postType, prizeIcon, prizeCount, endTime, submitPost, saveDraft, clearPost, isWaitingPosting, aiGenerate, isAiLoading, isLogin, onPrizeIconChange, onPrizeCropped, showPrizeCropper, tempPrizeIcon, dateConfig, prizeName, prizeDescription }
}
}
</script>

View File

@@ -82,7 +82,7 @@
<div class="prize-info">
<div class="prize-info-left">
<div class="prize-icon">
<img v-if="lottery.prizeIcon" :src="lottery.prizeIcon" alt="prize" />
<img class="prize-icon-img" v-if="lottery.prizeIcon" :src="lottery.prizeIcon" alt="prize" />
<i v-else class="fa-solid fa-gift default-prize-icon"></i>
</div>
<div class="prize-name">{{ lottery.prizeDescription }}</div>
@@ -94,7 +94,7 @@
<div v-if="loggedIn && !hasJoined && !lotteryEnded" class="join-prize-button" @click="joinLottery">
<div class="join-prize-button-text">参与抽奖</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button">
<div v-else-if="hasJoined" class="join-prize-button disabled">
<div class="join-prize-button-text">已参与</div>
</div>
</div>
@@ -1137,6 +1137,11 @@ export default {
opacity: 0.5;
}
.prize-icon-img {
width: 100%;
height: 100%;
}
.prize-name {
font-size: 13px;
opacity: 0.7;
@@ -1192,9 +1197,20 @@ export default {
background-color: var(--primary-color-hover);
}
.join-prize-button.disabled {
background-color: var(--background-color-disabled);
cursor: not-allowed;
}
.join-prize-button.disabled:hover {
background-color: var(--background-color-disabled);
cursor: not-allowed;
}
.prize-member-avatar {
width: 30px;
height: 30px;
margin-left: 3px;
border-radius: 50%;
}