|
|
@@ -0,0 +1,220 @@
|
|
|
+<script setup lang="ts">
|
|
|
+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();
|
|
|
+const valid = ref(true);
|
|
|
+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();
|
|
|
+
|
|
|
+watch(dialog, (newVal, oldVal) => {
|
|
|
+ if (!newVal) {
|
|
|
+ router.push("/main/progress");
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+async function Submit() {
|
|
|
+ setTimeout(() => {
|
|
|
+ dialog.value = true;
|
|
|
+ }, 2000);
|
|
|
+ await (Form as any).value.validate();
|
|
|
+ if (valid.value) {
|
|
|
+ valid.value = false;
|
|
|
+
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <v-container fluid>
|
|
|
+ <v-card class="ma-3 pa-3">
|
|
|
+ <v-card-title primary-title>
|
|
|
+ <h3 class="card-title mb-3">{{ t("makeArticle") }}</h3>
|
|
|
+ </v-card-title>
|
|
|
+ <v-card-text>
|
|
|
+ <v-form v-model="valid" ref="Form">
|
|
|
+ <v-text-field
|
|
|
+ :label="$t('articleTitle')"
|
|
|
+ v-model="title"
|
|
|
+ :rules="required"
|
|
|
+ prepend-icon="title"
|
|
|
+ >
|
|
|
+ </v-text-field>
|
|
|
+ <v-text-field :label="$t('articleLink')" prepend-icon="link">
|
|
|
+ </v-text-field>
|
|
|
+ <v-textarea
|
|
|
+ :label="$t('articleContent')"
|
|
|
+ prepend-icon="edit_document"
|
|
|
+ ></v-textarea>
|
|
|
+ </v-form>
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions>
|
|
|
+ <v-spacer></v-spacer>
|
|
|
+ <v-btn @click="Submit" :disabled="!valid">
|
|
|
+ {{ t("send") }}
|
|
|
+ </v-btn>
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+
|
|
|
+ <template>
|
|
|
+ <div class="text-center">
|
|
|
+ <v-dialog v-model="dialog" width="auto">
|
|
|
+ <v-card>
|
|
|
+ <v-card-text>
|
|
|
+ <section class="d-flex flex-column align-center">
|
|
|
+ <v-icon
|
|
|
+ style="font-size: 70px"
|
|
|
+ icon="info"
|
|
|
+ color="orange-darken-3"
|
|
|
+ />
|
|
|
+ <p class="mt-3">影片處理需要約 5-10 分鐘，敬請耐心等候</p>
|
|
|
+ </section>
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions>
|
|
|
+ <v-btn color="primary" block @click="dialog = false">{{
|
|
|
+ t("close")
|
|
|
+ }}</v-btn>
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </v-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </v-container>
|
|
|
+</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 {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 800px;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ p {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ margin: 20px auto;
|
|
|
+ color: #ea5413;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-btn {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 12px 20px;
|
|
|
+ margin-top: 25px;
|
|
|
+ border-radius: 100px;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #fff;
|
|
|
+ background: #ea5413;
|
|
|
+ transition: all 0.3s;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .point-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: baseline;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .excerpt::before {
|
|
|
+ content: "";
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ border: 5px solid #ea5413;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
