|
@@ -3,28 +3,19 @@ import { ref, reactive, watch, computed } from "vue";
|
|
|
import { useMainStore } from "@/stores/main";
|
|
|
import { required } from "@/utils";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
-import { useDisplay } from "vuetify";
|
|
|
import type { VideoCreate } from "@/interfaces";
|
|
|
import router from "@/router";
|
|
|
+import Dialog from "@/components/Dialog.vue";
|
|
|
|
|
|
-const { t } = useI18n();
|
|
|
-const { name } = useDisplay();
|
|
|
-const width = computed(() => {
|
|
|
- switch (name.value) {
|
|
|
- case "xs":
|
|
|
- return 6;
|
|
|
- case "sm":
|
|
|
- return 4;
|
|
|
- case "md":
|
|
|
- return 3;
|
|
|
- case "lg":
|
|
|
- return 2;
|
|
|
- }
|
|
|
- return "auto";
|
|
|
+// props
|
|
|
+let dialog = reactive({
|
|
|
+ msg: "影片處理需要約 5-10 分鐘,敬請耐心等候",
|
|
|
+ state: "info",
|
|
|
+ show: false,
|
|
|
});
|
|
|
|
|
|
+const { t } = useI18n();
|
|
|
const valid = ref(true);
|
|
|
-const dialog = ref(false);
|
|
|
const title = ref("");
|
|
|
const zipFiles = ref();
|
|
|
const Form = ref();
|
|
@@ -35,102 +26,102 @@ const anchorList = reactive([
|
|
|
{
|
|
|
anchor_id: 0,
|
|
|
language_id: 1,
|
|
|
- name: "Peggy",
|
|
|
+ name: "Angela",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 1,
|
|
|
language_id: 1,
|
|
|
- name: "Jocelyn",
|
|
|
+ name: "半身主播-1",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 2,
|
|
|
language_id: 1,
|
|
|
- name: "Summer",
|
|
|
+ name: "半身主播-2",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 3,
|
|
|
language_id: 1,
|
|
|
- name: "Angela",
|
|
|
+ name: "半身主播-3",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 4,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-1",
|
|
|
+ name: "半身主播-4",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 5,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-2",
|
|
|
+ name: "半身主播-5",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 6,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-3",
|
|
|
+ name: "半身主播-6",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 7,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-4",
|
|
|
+ name: "半身主播-7",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 8,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-5",
|
|
|
+ name: "半身主播-8",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 9,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-6",
|
|
|
+ name: "半身主播-9",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 10,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-7",
|
|
|
+ name: "半身主播-10",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 11,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-8",
|
|
|
+ name: "半身主播-11",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 12,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-9",
|
|
|
+ name: "半身主播-12",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 13,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-10",
|
|
|
+ name: "半身主播-13",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 14,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-11",
|
|
|
+ name: "半身主播-14",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 15,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-12",
|
|
|
+ name: "半身主播-15",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 16,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-13",
|
|
|
+ name: "半身主播-16",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 17,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-14",
|
|
|
+ name: "Peggy",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 18,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-15",
|
|
|
+ name: "Jocelyn",
|
|
|
},
|
|
|
{
|
|
|
anchor_id: 19,
|
|
|
language_id: 1,
|
|
|
- name: "半身主播-16",
|
|
|
+ name: "Summer",
|
|
|
},
|
|
|
]);
|
|
|
|
|
@@ -169,20 +160,23 @@ let items = reactive([
|
|
|
|
|
|
// 取得圖片路徑
|
|
|
const getImageUrl = (imgFolder: string, name: string) => {
|
|
|
- return new URL(`../../assets/img/${imgFolder}/${name}.webp`, import.meta.url).href;
|
|
|
+ return new URL(`../../assets/img/${imgFolder}/${name}.webp`, import.meta.url)
|
|
|
+ .href;
|
|
|
};
|
|
|
|
|
|
const mainStore = useMainStore();
|
|
|
|
|
|
watch(dialog, (newVal, oldVal) => {
|
|
|
- if (!newVal) {
|
|
|
- router.push("/main/progress");
|
|
|
+ if (!newVal.show) {
|
|
|
+ setTimeout(() => {
|
|
|
+ router.push("/main/progress");
|
|
|
+ }, 500);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
async function Submit() {
|
|
|
setTimeout(() => {
|
|
|
- dialog.value = true;
|
|
|
+ dialog.show = true;
|
|
|
}, 2000);
|
|
|
await (Form as any).value.validate();
|
|
|
if (valid.value) {
|
|
@@ -247,9 +241,22 @@ async function Submit() {
|
|
|
dark
|
|
|
@click="toggle"
|
|
|
:title="n.name"
|
|
|
+ :disabled="n.anchor_id !== 0"
|
|
|
>
|
|
|
<v-scroll-y-transition>
|
|
|
- <img :src="getImageUrl('anchor', n.name)" alt="" />
|
|
|
+ <div v-if="n.anchor_id !== 0" class="img-disabled">
|
|
|
+ <img
|
|
|
+ :src="getImageUrl('anchor', n.name)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>Coming Soon</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="getImageUrl('anchor', n.name)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</v-scroll-y-transition>
|
|
|
</v-card>
|
|
|
</v-item>
|
|
@@ -287,7 +294,6 @@ async function Submit() {
|
|
|
>
|
|
|
<v-icon icon="done" color="white" />
|
|
|
</span>
|
|
|
- <img :src="getImageUrl('template', n.img)" alt="" />
|
|
|
<div :class="{ 'img-disabled': n.template_id !== 0 }">
|
|
|
<img :src="getImageUrl('template', n.img)" alt="" />
|
|
|
<p v-if="n.template_id !== 0">Coming Soon</p>
|
|
@@ -346,9 +352,8 @@ async function Submit() {
|
|
|
<br />
|
|
|
(建議 10 個字內,若超過請使用換行符號)
|
|
|
</li>
|
|
|
- <li>2. 字幕段落勿超過中文 25 字、英文 50 字</li>
|
|
|
- <li>3. 大標字數勿超過中文 15 字、英文 30 字</li>
|
|
|
- <li>4. 音檔請留空白</li>
|
|
|
+ <li>2. 大標字數勿超過中文 15 字、英文 30 字</li>
|
|
|
+ <li>3. 音檔請留空白</li>
|
|
|
</ul>
|
|
|
<p class="mt-5 excerpt">以下為顯示效果:</p>
|
|
|
<img src="@/assets/img/step/step-04.png" alt="" />
|
|
@@ -372,7 +377,7 @@ async function Submit() {
|
|
|
|
|
|
<template>
|
|
|
<div class="text-center">
|
|
|
- <v-dialog v-model="dialog" width="auto">
|
|
|
+ <!-- <v-dialog v-model="dialog" width="auto">
|
|
|
<v-card>
|
|
|
<v-card-text>
|
|
|
<section class="d-flex flex-column align-center">
|
|
@@ -390,7 +395,14 @@ async function Submit() {
|
|
|
}}</v-btn>
|
|
|
</v-card-actions>
|
|
|
</v-card>
|
|
|
- </v-dialog>
|
|
|
+ </v-dialog> -->
|
|
|
+
|
|
|
+ <Dialog
|
|
|
+ :msg="dialog.msg"
|
|
|
+ :state="dialog.state"
|
|
|
+ :dialog="dialog.show"
|
|
|
+ @close="dialog.show = false"
|
|
|
+ ></Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
</v-container>
|
|
@@ -522,4 +534,29 @@ async function Submit() {
|
|
|
margin-bottom: 2px;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+.img-disabled {
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #ccc;
|
|
|
+ margin-bottom: -5px;
|
|
|
+ img {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ color: #fff;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-shadow: 2px 2px 6px #000;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.v-card--disabled > :not(.v-card__loader) {
|
|
|
+ opacity: 1 !important;
|
|
|
+}
|
|
|
+</style>
|