add video collect

2025-12-07 02:46:55 +08:00 · 2023-10-30 19:27:28 +08:00
parent 49bdea87f7
commit f42307902f
14 changed files with 1006 additions and 57 deletions
--- a/src/views/VideoCollectPublic.vue
+++ b/src/views/VideoCollectPublic.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { VideoCollectDetail, VideoCollectTable } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
+import { TURNSTILE_KEY, VIDEO_COLLECT_API_URL } from '@/data/constants'
+import { NAlert, NButton, NCard, NDivider, NInput, NInputNumber, NLayoutContent, NResult, NSpace, NText, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import VueTurnstile from 'vue-turnstile'
+
+interface AddVideoModel {
+  id: string
+  video: string
+  name: string
+  uid: number
+  description: string
+}
+
+const message = useMessage()
+const route = useRoute()
+
+const token = ref('')
+const turnstile = ref()
+
+const table = ref<VideoCollectTable | null>(await get())
+const addModel = ref({} as AddVideoModel)
+const isLoading = ref(false)
+
+async function get() {
+  try {
+    const data = await QueryGetAPI<VideoCollectDetail>(VIDEO_COLLECT_API_URL + 'get', { id: route.params.id })
+    if (data.code == 200) {
+      return data.data.table
+    }
+  } catch (err) {
+    console.error(err)
+    message.error('获取失败')
+  }
+  return null
+}
+async function add() {
+  if (!addModel.value.video) {
+    message.error('请输入视频')
+    return
+  }
+  isLoading.value = true
+  addModel.value.id = table.value?.id ?? route.params.id.toString()
+  await QueryPostAPI(VIDEO_COLLECT_API_URL + 'add', addModel.value, [['Turnstile', token.value]])
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已成功推荐视频')
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
+      } else {
+        message.error('添加失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('添加失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+      turnstile.value?.reset()
+    })
+}
+</script>
+
+<template>
+  <NLayoutContent style="position: relative; height: 100vh">
+    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+      <NResult v-if="!table" status="404" title="指定收集表不存在" description="检查一下你输入的链接吧" />
+      <NCard v-else style="width: 500px; max-width: 90vw">
+        <template #header>
+          视频征集
+          <NDivider vertical />
+          <NButton text @click="$router.push({ name: 'user-index', params: { id: table.owner?.name } })">
+            <NText depth="3" style="font-size: 14px">{{ table.owner?.name }}</NText>
+          </NButton>
+        </template>
+        <VideoCollectInfoCard :item="table" />
+        <NDivider />
+        <NAlert v-if="table.isFinish" type="error" title="该征集表已截止" />
+        <NSpace v-else vertical>
+          <NInput v-model:value="addModel.video" placeholder="B站视频链接或BVID" />
+          <NInput v-model:value="addModel.name" placeholder="(选填) 推荐人" />
+          <NInputNumber v-model:value="addModel.uid" placeholder="(选填) 推荐人UId" :show-button="false" />
+          <NInput v-model:value="addModel.description" placeholder="(选填) 推荐理由" />
+          <NButton @click="add" type="primary" :loading="isLoading || !token"> 推荐视频 </NButton>
+        </NSpace>
+      </NCard>
+      <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+    </div>
+  </NLayoutContent>
+</template>