add song request from web

src/views/view/SongListView.vue

@@ -1,16 +1,28 @@
 <template>
   <NSpin v-if="isLoading" show />
-  <component v-else :is="componentType" :user-info="userInfo" :bili-info="biliInfo" :currentData="currentData" />
+  <component
+    v-else
+    :is="componentType"
+    :user-info="userInfo"
+    :bili-info="biliInfo"
+    :currentData="currentData"
+    :song-request-settings="settings"
+    :song-request-active="songs"
+    @request-song="requestSong"
+  />
 </template>
 
 <script lang="ts" setup>
-import { SongsInfo } from '@/api/api-models'
+import { Setting_SongRequest, SongRequestInfo, SongsInfo } from '@/api/api-models'
 import DefaultSongListTemplate from '@/views/view/songListTemplate/DefaultSongListTemplate.vue'
 import { computed, onMounted, ref } from 'vue'
 import { UserInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { SONG_API_URL } from '@/data/constants'
+import { QueryGetAPI, QueryPostAPIWithParams } from '@/api/query'
+import { SONG_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
 import { NSpin, useMessage } from 'naive-ui'
+import { useAccount } from '@/api/account'
+
+const accountInfo = useAccount()
 
 const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -39,7 +51,22 @@ const isLoading = ref(true)
 const message = useMessage()
 
 const errMessage = ref('')
+const songs = ref<SongRequestInfo[]>([])
+const settings = ref<Setting_SongRequest>({} as Setting_SongRequest)
 
+async function getSongRequestInfo() {
+  try {
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_SongRequest }>(SONG_REQUEST_API_URL + 'get-active-and-settings', {
+      id: props.userInfo?.id,
+    })
+    if (data.code == 200) {
+      return data.data
+    }
+  } catch (err) {
+    console.error(err)
+  }
+  return {} as { songs: SongRequestInfo[]; setting: Setting_SongRequest }
+}
 async function getSongs() {
   isLoading.value = true
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
@@ -61,10 +88,33 @@ async function getSongs() {
       isLoading.value = false
     })
 }
+async function requestSong(song: SongsInfo) {
+  if (props.userInfo && accountInfo.value?.id != props.userInfo?.id) {
+    try {
+      const data = await QueryPostAPIWithParams(SONG_REQUEST_API_URL + 'add-from-web', {
+        target: props.userInfo?.id,
+        song: song.key,
+      })
+
+      if (data.code == 200) {
+        message.success('点歌成功')
+      } else {
+        message.error('点歌失败: ' + data.message)
+      }
+    } catch (err) {
+      message.error('点歌失败: ' + err)
+    }
+  }
+}
 
 onMounted(async () => {
   if (!props.fakeData) {
     await getSongs()
+    const r = await getSongRequestInfo()
+    if (r) {
+      songs.value = r.songs
+      settings.value = r.setting
+    }
   } else {
     currentData.value = props.fakeData
     isLoading.value = false

src/views/view/songListTemplate/DefaultSongListTemplate.vue

@@ -2,19 +2,71 @@
 import { useAccount } from '@/api/account'
 import { SongsInfo, UserInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
-import { NDivider } from 'naive-ui'
+import { CloudAdd20Filled } from '@vicons/fluent'
+import { NButton, NDivider, NIcon, NTooltip, useMessage } from 'naive-ui'
+import { h, ref } from 'vue'
+import { Setting_SongRequest, SongRequestInfo } from '@/api/api-models'
 
 const accountInfo = useAccount()
 
-defineProps<{
+const props = defineProps<{
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
+  songRequestSettings: Setting_SongRequest
+  songRequestActive: SongRequestInfo[]
   currentData: SongsInfo[] | undefined
 }>()
+const emits = defineEmits(['requestSong'])
+
+const isLoading = ref('')
+const message = useMessage()
+
+const buttoms = (song: SongsInfo) => [
+  accountInfo.value?.id != props.userInfo?.id
+    ? h(
+        NTooltip,
+        { trigger: 'hover' },
+        {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'warning',
+                size: 'small',
+                circle: true,
+                loading: isLoading.value == song.key,
+                disabled: !accountInfo,
+                onClick: () => {
+                  if (song.paidSong || !props.songRequestSettings.allowFromWeb) {
+                    navigator.clipboard.writeText(`${props.songRequestSettings.orderPrefix} ${song.name}`)
+                    message.success('复制成功')
+                  } else {
+                    isLoading.value = song.key
+                    emits('requestSong', song)
+                    isLoading.value = ''
+                  }
+                },
+              },
+              {
+                icon: () => h(NIcon, { component: CloudAdd20Filled }),
+              }
+            ),
+          default: () =>
+            !props.songRequestSettings.allowFromWeb
+              ? '点歌 | 用户不允许从网页点歌, 点击后将复制点歌内容到剪切板'
+              : song.paidSong
+              ? '点歌 | 这是付费SC歌曲, 点击后将复制点歌内容到剪切板'
+              : !accountInfo
+              ? '点歌 | 你需要登录后才能点歌'
+              : '点歌',
+        }
+      )
+    : undefined,
+]
 </script>
 
 <template>
   <NDivider style="margin-top: 10px" />
-  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" :extra-buttom="buttoms" v-bind="$attrs" />
   <NDivider />
 </template>

src/views/view/songListTemplate/SimpleSongListTemplate.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { Setting_SongRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models';
+import { NGridItem, NGrid } from 'naive-ui'
 
-import { NGridItem,NGrid } from 'naive-ui';
+const props = defineProps<{
+  userInfo: UserInfo | undefined
+  biliInfo: any | undefined
+  songRequestSettings: Setting_SongRequest
+  songRequretActive: SongRequestInfo[]
+  currentData: SongsInfo[] | undefined
+}>()
 </script>
 <template>
   <NGrid>
-    <NGridItem>
-      
-    </NGridItem>
+    <NGridItem> </NGridItem>
   </NGrid>
-</template>
+</template>