feat: support day poll link

ADKcodeXD · May 9, 2024 · 4d2ef2a · 4d2ef2a
1 parent e7e4d1e
commit 4d2ef2a
Show file tree

Hide file tree

Showing 17 changed files with 464 additions and 246 deletions.
diff --git a/assets/img/NotFound.png b/assets/img/NotFound.png
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -32,7 +32,7 @@ dd,
 html {
  font-size: 14px;
  color: var(--textColor);
- font: 1em/1.4 'english', 'japanese', 'chinese', 'Microsoft Yahei', 'PingFang SC', 'Avenir',
+ font: 1em/1.4 'english', 'chinese', 'japanese', 'Microsoft Yahei', 'PingFang SC', 'Avenir',
  'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
  sans-serif;
 }

diff --git a/components/MovieShowItem.vue b/components/MovieShowItem.vue
@@ -51,7 +51,10 @@
  <p>{{ $t('like') }}</p>
  </template>
  </div>
- <div class="flex flex-col items-center my-4 operitem" @click="pollMovie(movieItem)">
+ <div
+ class="flex flex-col items-center my-4 operitem"
+ @click="pollByLink(movieItem, dayPollLink)"
+ >
  <template v-if="movieItem.loginVo?.isPoll">
  <Icon name="ant-design:profile-filled" class="text-xl" />
  <p class="operitem-font">{{ movieItem.pollNums }}</p>
@@ -63,13 +66,47 @@
  </div>
  </div>
  </div>
+ <el-dialog v-model="pollDialogShow" :title="$t('PollLink')" width="400" draggable>
+ <div class="p-4">
+ <div>
+ <p v-if="dayPollLink?.bilibili">
+ <Icon name="ri:bilibili-line" size="20" class="mr-2" />{{ $t('bilibiliPoll') }}
+ <a :href="dayPollLink?.bilibili" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ <p v-if="dayPollLink?.twitter" class="my-4">
+ <Icon name="ri:twitter-x-line" size="20" class="mr-2" />{{ $t('pollTwitter') }}
+ <a :href="dayPollLink?.twitter" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ <p v-if="dayPollLink?.personalWebsite" class="my-4">
+ <Icon name="ri:twitter-x-line" size="20" class="mr-2" />{{ $t('pollByCustom') }}
+ <a :href="dayPollLink?.personalWebsite" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ </div>
+ </div>
+ </el-dialog>
 </template>
 
 <script setup lang="ts">
 import type { MovieVo } from 'Movie'
 defineProps<{
  movieItem: MovieVo | any
+ dayPollLink?: Sns | null
 }>()
+const pollDialogShow = ref(false)
+
+const pollByLink = (movie: MovieVo, dayPollLink?: Sns | null) => {
+ if (dayPollLink && (dayPollLink.bilibili || dayPollLink.twitter || dayPollLink.personalWebsite)) {
+ pollDialogShow.value = true
+ } else {
+ pollMovie(movie)
+ }
+}
 
 const { locale } = useCurrentLocale()
 const { pollMovie, likeOrUnLike, goToMovieDetail } = useMovieOperate()

diff --git a/components/MovieShowItemMobile.vue b/components/MovieShowItemMobile.vue
@@ -43,7 +43,7 @@
  <p>{{ $t('like') }}</p>
  </template>
  </div>
- <div class="flex flex-col items-center operitem" @click="pollMovie(movieItem)">
+ <div class="flex flex-col items-center operitem" @click="pollByLink(movieItem, dayPollLink)">
  <template v-if="movieItem.loginVo?.isPoll">
  <Icon name="ant-design:profile-filled" class="text-xl" />
  <p class="operitem-font">{{ movieItem.pollNums }}</p>
@@ -55,13 +55,48 @@
  </div>
  </div>
  </div>
+
+ <el-dialog v-model="pollDialogShow" :title="$t('PollLink')" width="400" draggable>
+ <div class="p-4">
+ <div>
+ <p v-if="dayPollLink?.bilibili">
+ <Icon name="ri:bilibili-line" size="20" class="mr-2" />{{ $t('bilibiliPoll') }}
+ <a :href="dayPollLink?.bilibili" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ <p v-if="dayPollLink?.twitter" class="my-4">
+ <Icon name="ri:twitter-x-line" size="20" class="mr-2" />{{ $t('pollTwitter') }}
+ <a :href="dayPollLink?.twitter" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ <p v-if="dayPollLink?.personalWebsite" class="my-4">
+ <Icon name="ri:twitter-x-line" size="20" class="mr-2" />{{ $t('pollByCustom') }}
+ <a :href="dayPollLink?.personalWebsite" target="_blank" style="color: #abf7ff">{{
+ $t('clickJump')
+ }}</a>
+ </p>
+ </div>
+ </div>
+ </el-dialog>
 </template>
 
 <script setup lang="ts">
 import type { MovieVo } from 'Movie'
 defineProps<{
  movieItem: MovieVo | any
+ dayPollLink?: Sns | null
 }>()
+const pollDialogShow = ref(false)
+
+const pollByLink = (movie: MovieVo, dayPollLink?: Sns | null) => {
+ if (dayPollLink && (dayPollLink.bilibili || dayPollLink.twitter || dayPollLink.personalWebsite)) {
+ pollDialogShow.value = true
+ } else {
+ pollMovie(movie)
+ }
+}
 
 const { locale } = useCurrentLocale()
 const { pollMovie, likeOrUnLike, goToMovieDetailMobile } = useMovieOperate()

diff --git a/composables/useMovieDetail.ts b/composables/useMovieDetail.ts
@@ -15,7 +15,9 @@ export const useMovieDetail = () => {
  const body = ref()
  const content = ref('')
  const isFocus = ref(false)
+ const pollDialogShow = ref(false)
 
+ const { days, getDays } = useActivityMain()
  const localeNaviGate = useLocaleNavigate()
  const { t } = useI18n()
  const { userInfo } = useUserStore()
@@ -25,6 +27,10 @@ export const useMovieDetail = () => {
  return parseInt(route.params.movieId.toString()) || 0
  })
 
+ const currentDayItem = computed(() => {
+ return days.value?.find(item => item.day === movieDetail.value?.day) || null
+ })
+
  const total = ref(0)
  const comments = ref<CommentVo[]>([])
  const playSource = ref<any[]>([])
@@ -64,7 +70,7 @@ export const useMovieDetail = () => {
  )
  }
  }
- 
+
  const getVideoByDay = async () => {
  if (movieDetail.value?.activityVo && movieDetail.value.day) {
  const { data } = await getMovieByActivityId(
@@ -106,6 +112,10 @@ export const useMovieDetail = () => {
  }
  }
 
+ watchEffect(() => {
+ getDays(movieDetail.value?.activityVo?.activityId || 0)
+ })
+
  return {
  total,
  playSource,
@@ -119,10 +129,13 @@ export const useMovieDetail = () => {
  content,
  isFocus,
  getComment,
+ pollDialogShow,
  sentComment,
  getVideoByDay,
  backToMain,
  movieId,
- getMovieDetail
+ getMovieDetail,
+ getDays,
+ currentDayItem
  }
 }
diff --git a/i18n/locales/cn.json b/i18n/locales/cn.json
@@ -129,5 +129,10 @@
  "googleDownloadLink": "谷歌下载链接",
  "loginorRegister": "登陆&注册",
  "SnsAccountSet": "社交媒体账号设置",
- "personalWebsite": "个人网站"
+ "personalWebsite": "个人网站",
+ "bilibiliPoll": "通过Bilibili进行投票",
+ "pollTwitter": "通过X(Twitter)进行投票",
+ "PollLink": "投票链接",
+ "pollByCustom": "通过主办方链接投票",
+ "contact-us": "联系我们"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -128,5 +128,10 @@
  "googleDownloadLink": "Download via google cloud",
  "loginorRegister": "Login & Register",
  "SnsAccountSet": "SMS Account Setting",
- "personalWebsite": "Blog Web"
+ "personalWebsite": "Blog Web",
+ "bilibiliPoll": "Poll your fav movie via Bilibili",
+ "pollTwitter": "Poll your fav movie via X(Twitter)",
+ "PollLink": "Poll Links",
+ "pollByCustom": "Poll by Cutom link",
+ "contact-us": "Contact Us"
 }
diff --git a/i18n/locales/jp.json b/i18n/locales/jp.json
@@ -126,5 +126,10 @@
  "googleDownloadLink": "Googleダウンロードリンク",
  "loginorRegister": "Login & Register",
  "SnsAccountSet": "SMSアカウント設定",
- "personalWebsite": "ブロック"
+ "personalWebsite": "ブロック",
+ "bilibiliPoll": "ビリビリ動画で投票する",
+ "pollTwitter": "X（Twitter）で投票する",
+ "PollLink": "投票する！",
+ "pollByCustom": "特定なサイトで投票する",
+ "contact-us": "Contact Us"
 }
diff --git a/pages/activity/[activityId]/history.vue b/pages/activity/[activityId]/history.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col items-center w-full">
  <div class="line"></div>
- <p class="absolute text-light-50 right-1/2 text-3xl top-36 mr-4">To Be Continue.....</p>
+ <p class="absolute text-light-50 right-3/4 text-3xl top-36 mr-4">To Be Continue.....</p>
  <div
  class="activity-content h-40 relative flex items-center w-4/5 my-8"
  v-for="activity in activityList?.result"
@@ -16,9 +16,9 @@
  <div class="ongoing">
  <p v-if="isOngoing(activity.startTime, activity.endTime)" class="flex items-center">
  <ElImage :src="loading" class="mr-2 h-4"></ElImage>
- 进行中!
+ {{ $t('progress') }}
  </p>
- <p v-else class="flex items-center"><span class="dot"></span>已谢幕!</p>
+ <p v-else class="flex items-center"><span class="dot"></span>{{ $t('owaru') }}</p>
  </div>
  </div>
  <div class="right-logo">
@@ -66,9 +66,9 @@ const isOngoing = (dateStr1: any, dateStr2: any) => {
 }
 
 const strictLength = (htmlStr: string) => {
- return htmlStr && htmlStr.length > 600
- ? `${htmlStr.slice(0, 600)}...`
- : htmlStr.slice(0, 600) || '暂无介绍'
+ return htmlStr && htmlStr.length > 350
+ ? `${htmlStr.slice(0, 350)}...`
+ : htmlStr.slice(0, 350) || '暂无介绍'
 }
 
 watchEffect(() => {
@@ -85,14 +85,14 @@ watchEffect(() => {
  height: 90%;
  top: 150px;
  bottom: 0;
- left: 50%;
+ left: 34%;
  transform: translateX(-50%);
  right: 0;
 }
 
 .ball {
  position: absolute;
- left: 50%;
+ left: 30%;
  transform: translateX(-50%);
  transition: all ease 0.2s;
  cursor: pointer;
@@ -104,18 +104,18 @@ watchEffect(() => {
 
 .left-time {
  position: absolute;
- left: 50%;
+ left: 30%;
  transform: translateX(-110%);
  color: white;
  font-size: 1.5rem;
- font-weight: 600;
+ font-weight: 350;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
 }
 .right-logo {
  position: absolute;
- right: 50%;
+ right: 70%;
  transform: translateX(105%);
  display: flex;
  align-items: center;

diff --git a/pages/activity/[activityId]/main.vue b/pages/activity/[activityId]/main.vue
@@ -6,7 +6,10 @@
  <div class="video-content" v-if="movies.length">
  <Transition :name="currentAnime" mode="out-in">
  <div v-if="activeVideo" class="flex-1" :key="activeVideo.movieId">
- <MovieShowItem :movie-item="activeVideo" />
+ <MovieShowItem
+ :movie-item="activeVideo"
+ :day-poll-link="currentDayItem?.dayPollLink"
+ />
  </div>
  <ElEmpty v-else />
  </Transition>
@@ -43,9 +46,12 @@
  </div>
  </ElScrollbar>
  </div>
- <p class="title" v-else-if="movies.length === 0 && !isLoading">
- {{ $t('notFoundDays') }}
- </p>
+ <div class="flex flex-col" v-else-if="movies.length === 0 && !isLoading">
+ <div class="h-48">
+ <MyCustomImage :img="Image404" />
+ </div>
+ <p class="title">{{ $t('notFoundDays') }}</p>
+ </div>
  <MyCustomLoading v-else />
  </Transition>
  </div>
@@ -107,6 +113,8 @@
 
 <script setup lang="ts">
 import { useGlobalStore } from '~~/stores/global'
+import Image404 from '@/assets/img/NotFound.png'
+
 definePageMeta({
  key: route => route.fullPath
 })