|
@@ -1,8 +1,9 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watch } from "vue";
|
|
|
+import { ref, reactive, watch } from "vue";
|
|
|
import { useMainStore } from "@/stores/main";
|
|
|
import { required } from "@/utils";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
+import type { VideoCreate } from "@/interfaces";
|
|
|
import router from "@/router";
|
|
|
|
|
|
const { t } = useI18n();
|
|
@@ -11,6 +12,40 @@ const dialog = ref(false);
|
|
|
const title = ref("");
|
|
|
const zipFiles = ref();
|
|
|
const Form = ref();
|
|
|
+let anchor = ref(0);
|
|
|
+const anchorList = reactive([
|
|
|
+ {
|
|
|
+ anchor_id: 0,
|
|
|
+ language_id: 1,
|
|
|
+ name: "Angela",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ anchor_id: 1,
|
|
|
+ language_id: 1,
|
|
|
+ name: "Peggy",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ anchor_id: 2,
|
|
|
+ language_id: 1,
|
|
|
+ name: "Jocelyn",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ anchor_id: 3,
|
|
|
+ language_id: 1,
|
|
|
+ name: "Summer",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+let anchorLang = ref("中文");
|
|
|
+let items = reactive([
|
|
|
+ { lang: "中文", id: 0 },
|
|
|
+ { lang: "英文", id: 1 },
|
|
|
+]);
|
|
|
+
|
|
|
+// 取得圖片路徑
|
|
|
+const getImageUrl = (name: string) => {
|
|
|
+ return new URL(`../../assets/img/anchor/${name}.webp`, import.meta.url).href;
|
|
|
+};
|
|
|
|
|
|
const mainStore = useMainStore();
|
|
|
|
|
@@ -27,7 +62,14 @@ async function Submit() {
|
|
|
await (Form as any).value.validate();
|
|
|
if (valid.value) {
|
|
|
valid.value = false;
|
|
|
- await mainStore.uploadPlot(title.value, zipFiles.value[0]);
|
|
|
+
|
|
|
+ const video_data: VideoCreate = {
|
|
|
+ title: title.value,
|
|
|
+ anchor_id: anchor.value,
|
|
|
+ lang_id: 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ await mainStore.uploadPlot(video_data, zipFiles.value[0]);
|
|
|
// (Form as any).value.reset();
|
|
|
}
|
|
|
}
|
|
@@ -55,7 +97,45 @@ async function Submit() {
|
|
|
:label="$t('fileInput')"
|
|
|
prepend-icon="folder_zip"
|
|
|
></v-file-input>
|
|
|
+
|
|
|
+ <!-- <v-select
|
|
|
+ v-model="anchorLang"
|
|
|
+ :items="items"
|
|
|
+ item-title="lang"
|
|
|
+ item-value="id"
|
|
|
+ prepend-icon="language"
|
|
|
+ label="選擇語言"
|
|
|
+ ></v-select> -->
|
|
|
</v-form>
|
|
|
+
|
|
|
+ <v-expansion-panels class="anchor-list">
|
|
|
+ <v-expansion-panel title="選擇主播">
|
|
|
+ <v-expansion-panel-text class="p-0">
|
|
|
+ <v-sheet class="mx-auto">
|
|
|
+ <v-slide-group
|
|
|
+ v-model="anchor"
|
|
|
+ selected-class="bg-success"
|
|
|
+ show-arrows
|
|
|
+ >
|
|
|
+ <v-slide-group-item
|
|
|
+ v-for="n in anchorList"
|
|
|
+ :key="n.anchor_id"
|
|
|
+ v-slot="{ isSelected, toggle, selectedClass }"
|
|
|
+ >
|
|
|
+ <v-card
|
|
|
+ color="grey-lighten-1"
|
|
|
+ :class="['ma-4', selectedClass]"
|
|
|
+ @click="toggle"
|
|
|
+ :title="n.name"
|
|
|
+ >
|
|
|
+ <img :src="getImageUrl(n.name)" alt="" />
|
|
|
+ </v-card>
|
|
|
+ </v-slide-group-item>
|
|
|
+ </v-slide-group>
|
|
|
+ </v-sheet>
|
|
|
+ </v-expansion-panel-text>
|
|
|
+ </v-expansion-panel>
|
|
|
+ </v-expansion-panels>
|
|
|
</v-card-text>
|
|
|
<v-card-actions>
|
|
|
<v-spacer></v-spacer>
|
|
@@ -83,7 +163,8 @@ async function Submit() {
|
|
|
<li>
|
|
|
<h4>2. 準備影片內容</h4>
|
|
|
<p class="excerpt text-center">
|
|
|
- 範例的資料夾內,有 "素材資料夾" 跟 "EXCEL 檔" <br> (您也可以自行創建資料夾)
|
|
|
+ 範例的資料夾內,有 "素材資料夾" 跟 "EXCEL 檔" <br />
|
|
|
+ (您也可以自行創建資料夾)
|
|
|
</p>
|
|
|
<img src="@/assets/img/step/step-01.png" alt="" class="mb-4" />
|
|
|
<p class="excerpt">素材資料夾裡面放照片或影片</p>
|
|
@@ -96,8 +177,9 @@ async function Submit() {
|
|
|
</p>
|
|
|
<img src="@/assets/img/step/step-03.png" alt="" />
|
|
|
<ul class="point-list">
|
|
|
- <li>1. 字幕之間的斷句請使用符號【\】進行換行
|
|
|
- <br>
|
|
|
+ <li>
|
|
|
+ 1. 字幕之間的斷句請使用符號【\】進行換行
|
|
|
+ <br />
|
|
|
(建議 10 個字內,若超過請使用換行符號)
|
|
|
</li>
|
|
|
<li>2. 字幕段落勿超過中文 25 字、英文 50 字</li>
|
|
@@ -151,6 +233,35 @@ async function Submit() {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+.anchor-list {
|
|
|
+ padding-left: 40px;
|
|
|
+ img {
|
|
|
+ width: 130px;
|
|
|
+ height: 110px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .v-card-item {
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ .v-card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bg-success {
|
|
|
+ background: linear-gradient(
|
|
|
+ -225deg,
|
|
|
+ rgb(234, 84, 19) 35%,
|
|
|
+ rgb(178, 69, 146) 100%
|
|
|
+ ) !important;
|
|
|
+ }
|
|
|
+ .v-expansion-panel-title {
|
|
|
+ height: 55px;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+ .v-expansion-panel-text__wrapper {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
.step-list {
|
|
|
list-style: none;
|
|
|
img {
|