feat: 抽奖ui

frontend_nuxt/pages/new-post.vue

@@ -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 class="prize-count-input-field" type="number" v-model.number="prizeCount" min="1" />
-            <input type="number" v-model.number="prizeCount" min="1" />
-            <button type="button" @click="incPrizeCount">+</button>
           </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 {
+.prize-name-input {
-  width: 24px;
+  height: 30px;
-  height: 24px;
+  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) {

frontend_nuxt/pages/posts/[id]/index.vue

@@ -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);