diff --git a/frontend_nuxt/pages/new-post.vue b/frontend_nuxt/pages/new-post.vue index 51e1bee8e..8a5ddabf2 100644 --- a/frontend_nuxt/pages/new-post.vue +++ b/frontend_nuxt/pages/new-post.vue @@ -43,16 +43,19 @@
+
+ 奖品名称 + +
奖品数量
- - - +
@@ -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 } } } @@ -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) { diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue index 174ddf450..be2e9da9f 100644 --- a/frontend_nuxt/pages/posts/[id]/index.vue +++ b/frontend_nuxt/pages/posts/[id]/index.vue @@ -77,6 +77,71 @@
+
+
+
+
+
+ prize + +
+
ChatGPT Plus For 1 month
+
x 12
+
+
+
离结束还有
+
12:00:00
+ +
+
参与抽奖
+
+
+
+
+
+ avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + +
+ + 获奖者: + avatar +
+
+
+ @@ -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);