feat: 抽奖ui

frontend_nuxt/main.js

@@ -1,5 +1,5 @@
-export const API_BASE_URL = 'https://www.open-isle.com'
+// 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://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'

frontend_nuxt/pages/new-post.vue

@@ -49,8 +49,8 @@
           </label>
         </div>
         <div class="prize-name-row">
-          <span>奖品名称</span>
+          <span>奖品描述</span>
-          <input class="prize-name-input" v-model="prizeName" placeholder="奖品名称" />
+          <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) {
+        if (!prizeDescription.value) {
-          toast.error('请输入奖品名称')
+          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>

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

@@ -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%;
 }