mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-22 22:21:09 +08:00
feat: 抽奖ui
This commit is contained in:
tim
@@ -43,16 +43,19 @@
|
||||
<div class="prize-row">
|
||||
<label class="prize-container">
|
||||
<img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
|
||||
<i v-else class="fa-solid fa-image default-prize-icon"></i>
|
||||
<div class="prize-overlay">上传奖品图片</div>
|
||||
<input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="prize-name-row">
|
||||
<span>奖品名称</span>
|
||||
<input class="prize-name-input" v-model="prizeName" placeholder="奖品名称" />
|
||||
</div>
|
||||
<div class="prize-count-row">
|
||||
<span>奖品数量</span>
|
||||
<div class="prize-count-input">
|
||||
<button type="button" @click="decPrizeCount">-</button>
|
||||
<input type="number" v-model.number="prizeCount" min="1" />
|
||||
<button type="button" @click="incPrizeCount">+</button>
|
||||
<input class="prize-count-input-field" type="number" v-model.number="prizeCount" min="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="prize-time-row">
|
||||
@@ -78,6 +81,7 @@ import 'flatpickr/dist/flatpickr.css'
|
||||
import { API_BASE_URL, toast } from '../main'
|
||||
import { getToken, authState } from '../utils/auth'
|
||||
import LoginOverlay from '../components/LoginOverlay.vue'
|
||||
import BaseInput from '../components/BaseInput.vue'
|
||||
|
||||
export default {
|
||||
name: 'NewPostPageView',
|
||||
@@ -92,6 +96,7 @@ export default {
|
||||
const prizeIconFile = ref(null)
|
||||
const tempPrizeIcon = ref('')
|
||||
const showPrizeCropper = ref(false)
|
||||
const prizeName = ref('')
|
||||
const prizeCount = ref(1)
|
||||
const endTime = ref(null)
|
||||
const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
|
||||
@@ -116,14 +121,6 @@ export default {
|
||||
prizeIcon.value = url
|
||||
}
|
||||
|
||||
const incPrizeCount = () => {
|
||||
prizeCount.value++
|
||||
}
|
||||
|
||||
const decPrizeCount = () => {
|
||||
if (prizeCount.value > 1) prizeCount.value--
|
||||
}
|
||||
|
||||
watch(prizeCount, val => {
|
||||
if (!val || val < 1) prizeCount.value = 1
|
||||
})
|
||||
@@ -300,6 +297,10 @@ export default {
|
||||
toast.error('奖品数量必须大于0')
|
||||
return
|
||||
}
|
||||
if (!prizeName.value) {
|
||||
toast.error('请输入奖品名称')
|
||||
return
|
||||
}
|
||||
if (!endTime.value) {
|
||||
toast.error('请选择抽奖结束时间')
|
||||
return
|
||||
@@ -338,6 +339,7 @@ export default {
|
||||
tagIds: selectedTags.value,
|
||||
type: postType.value,
|
||||
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
|
||||
})
|
||||
@@ -363,7 +365,7 @@ export default {
|
||||
isWaitingPosting.value = false
|
||||
}
|
||||
}
|
||||
return { title, content, selectedCategory, selectedTags, postType, prizeIcon, prizeCount, endTime, submitPost, saveDraft, clearPost, isWaitingPosting, aiGenerate, isAiLoading, isLogin, onPrizeIconChange, onPrizeCropped, incPrizeCount, decPrizeCount, showPrizeCropper, tempPrizeIcon, dateConfig }
|
||||
return { title, content, selectedCategory, selectedTags, postType, prizeIcon, prizeCount, endTime, submitPost, saveDraft, clearPost, isWaitingPosting, aiGenerate, isAiLoading, isLogin, onPrizeIconChange, onPrizeCropped, showPrizeCropper, tempPrizeIcon, dateConfig, prizeName }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -498,6 +500,12 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.default-prize-icon {
|
||||
font-size: 100px;
|
||||
opacity: 0.5;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.prize-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -537,16 +545,31 @@ export default {
|
||||
.prize-count-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.prize-count-input button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.prize-name-input {
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.prize-count-input-field {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.time-picker {
|
||||
max-width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@@ -77,6 +77,71 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prize-container">
|
||||
<div class="prize-content">
|
||||
<div class="prize-info">
|
||||
<div class="prize-info-left">
|
||||
<div class="prize-icon">
|
||||
<img v-if="prizeIcon" :src="prizeIcon" alt="prize" />
|
||||
<i v-else class="fa-solid fa-gift default-prize-icon"></i>
|
||||
</div>
|
||||
<div class="prize-name">ChatGPT Plus For 1 month</div>
|
||||
<div class="prize-count">x 12</div>
|
||||
</div>
|
||||
<div class="prize-end-time prize-info-right">
|
||||
<div class="prize-end-time-title">离结束还有</div>
|
||||
<div class="prize-end-time-value">12:00:00</div>
|
||||
|
||||
<div class="join-prize-button">
|
||||
<div class="join-prize-button-text">参与抽奖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prize-member-container">
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
|
||||
<div class="prize-member-winner">
|
||||
<i class="fas fa-medal medal-icon"></i>
|
||||
<span class="prize-member-winner-name">获奖者: </span>
|
||||
<img class="prize-member-avatar" src="https://avatars.githubusercontent.com/u/135014430?s=400&u=1a3db99cc7376462f1d47856091cb0c06220e367&v=4"alt="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommentEditor @submit="postComment" :loading="isWaitingPostingComment" :disabled="!loggedIn"
|
||||
:show-login-overlay="!loggedIn" :parent-user-name="author.username" />
|
||||
|
||||
@@ -1011,6 +1076,111 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prize-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background-color: var(--normal-background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.prize-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prize-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.default-prize-icon {
|
||||
font-size: 24px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.prize-name {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.prize-count {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
margin-left: 10px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.prize-end-time {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.prize-end-time-title {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.prize-end-time-value {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.prize-info-left,
|
||||
.prize-info-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.join-prize-button {
|
||||
margin-left: 10px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.join-prize-button:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
.prize-member-avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.prize-member-winner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.medal-icon {
|
||||
font-size: 16px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.prize-member-winner-name {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.post-page-main-container {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
Reference in New Issue
Block a user