1011

src/views/view/QuestionBoxView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, useMessage } from 'naive-ui'
+import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, NUpload, UploadFileInfo, useMessage } from 'naive-ui'
 import GraphemeSplitter from 'grapheme-splitter'
 import { computed, onMounted, ref } from 'vue'
 import { useAccount } from '@/api/account'
 import { useUser } from '@/api/user'
 import { QAInfo, UserInfo } from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
+import { QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
 import { QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import VueTurnstile from 'vue-turnstile'
 
@@ -22,6 +22,7 @@ const isSelf = computed(() => {
 })
 
 const questionMessage = ref('')
+const fileList = ref<UploadFileInfo[]>([])
 
 const isAnonymous = ref(true)
 const isSending = ref(false)
@@ -41,13 +42,14 @@ async function SendQuestion() {
       Target: userInfo.value?.id,
       IsAnonymous: !accountInfo.value || isAnonymous.value,
       Message: questionMessage.value,
-      Image: '',
+      ImageBase64: fileList.value?.length > 0 ? await getBase64(fileList.value[0].file) : undefined,
     },
     [['Turnstile', token.value]]
   )
     .then((data) => {
       if (data.code == 200) {
         message.success('成功发送棉花糖')
+        questionMessage.value = ''
       } else {
         message.error(data.message)
       }
@@ -61,6 +63,24 @@ async function SendQuestion() {
       turnstile.value?.reset()
     })
 }
+function getBase64(file: File | undefined | null) {
+  if (!file) return null
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result?.toString().split(',')[1])
+    reader.onerror = (error) => reject(error)
+  })
+}
+function OnFileListChange(files: UploadFileInfo[]) {
+  if (files.length == 1) {
+    var file = files[0]
+    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
+      message.error('文件大小不能超过10MB')
+      fileList.value = []
+    }
+  }
+}
 
 onMounted(async () => {
   userInfo.value = await useUser()
@@ -72,6 +92,20 @@ onMounted(async () => {
     <NSpace vertical>
       <NInput :disabled="isSelf" show-count maxlength="1000" type="textarea" :count-graphemes="countGraphemes" v-model:value="questionMessage"> </NInput>
       <NDivider style="margin: 10px 0 10px 0" />
+      <NSpace align="center">
+        <NUpload
+          :max="1"
+          accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
+          list-type="image-card"
+          :disabled="!accountInfo || isSelf"
+          :default-upload="false"
+          v-model:file-list="fileList"
+          @update:file-list="OnFileListChange"
+        >
+          + 上传图片
+        </NUpload>
+        <NAlert v-if="!accountInfo && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+      </NSpace>
       <NSpace vertical>
         <NCheckbox v-if="accountInfo" :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
       </NSpace>

src/views/view/SongListView.vue

@@ -6,18 +6,24 @@ import { SONG_API_URL, USER_API_URL } from '@/data/constants'
 import { onMounted, ref } from 'vue'
 import { useRouteParams } from '@vueuse/router'
 import { useAccount } from '@/api/account'
+import { NAlert } from 'naive-ui'
 
 const accountInfo = useAccount()
 const songs = ref<SongsInfo[]>()
 const uId = useRouteParams('id', '-1', { transform: Number })
 
+const errMessage = ref('')
+
 async function getSongs() {
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
-    uId: uId.value,
+    id: uId.value,
   }).then((data) => {
     if (data.code == 200) {
       songs.value = data.data
     }
+    else {
+      errMessage.value = data.message
+    }
   })
 }
 
@@ -27,6 +33,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  歌单
-  <SongList :songs="songs ?? []" />
+  <SongList v-if="songs" :songs="songs ?? []" />
+  <NAlert v-else-if="errMessage" type="error">
+    {{ errMessage }}
+  </NAlert>
 </template>