video-maker/frontend/src/views/main/Article.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useMainStore } from "@/stores/main";
import { required } from "@/utils";
import { useI18n } from "vue-i18n";
import type { ArticleCreate } from "@/interfaces";
// import Dialog from "@/components/Dialog.vue";

const mainStore = useMainStore();
const { t } = useI18n();
const valid = ref(true);
const Form = ref();
let title = ref("");
let link = ref("");
let content = ref("");

// props
// let dialog = reactive({
//   msg: "上傳成功！",
//   state: "success",
//   show: false,
// });

async function Submit() {
  // setTimeout(() => {
  //   dialog.show = true;
  // }, 2000);
  await (Form as any).value.validate();
  if (valid.value) {
    valid.value = false;

    const article_data: ArticleCreate = {
      title: title.value,
      link: link.value,
      content: content.value,
    };

    await mainStore.uploadArticle(article_data);
    // (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
            v-model="link"
            :label="$t('articleLink')"
            prepend-icon="link"
          >
          </v-text-field>
          <v-textarea
            v-model="content"
            :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">
        <Dialog
          :msg="dialog.msg"
          :state="dialog.state"
          :dialog="dialog.show"
          @close="dialog.show = false"
        ></Dialog>
      </div>
    </template> -->
  </v-container>
</template>

<style lang="scss"></style>