|
@@ -1,20 +1,15 @@
|
|
|
<script setup lang="ts">
|
|
|
-// import { appName, openRegisration } from "@/env";
|
|
|
import { ref, reactive, computed, onMounted } from "vue";
|
|
|
import { useMainStore } from "@/stores/main";
|
|
|
import { useDisplay } from "vuetify";
|
|
|
import { useRoute } from "vue-router";
|
|
|
-import { storeToRefs } from "pinia";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
-// import router from "@/router";
|
|
|
-// import { saveLocalToken } from "@/utils";
|
|
|
import { googleTokenLogin, decodeCredential } from "vue3-google-login";
|
|
|
import type { CallbackTypes } from "vue3-google-login";
|
|
|
-import Navbar from "@/components/Navbar.vue";
|
|
|
+// import Navbar from "@/components/Navbar.vue";
|
|
|
import Dialog from "@/components/Dialog.vue";
|
|
|
|
|
|
const mainStore = useMainStore();
|
|
|
-const mainStoreRef = storeToRefs(mainStore);
|
|
|
|
|
|
// variable
|
|
|
const { t } = useI18n();
|
|
@@ -24,6 +19,8 @@ const email = ref("");
|
|
|
const password = ref("");
|
|
|
let ser_no: any = ref("");
|
|
|
let showPassword = ref(false);
|
|
|
+let loginState = ref(false);
|
|
|
+let loading = ref(false);
|
|
|
let dialog = reactive({
|
|
|
msg: "",
|
|
|
state: "",
|
|
@@ -32,7 +29,6 @@ let dialog = reactive({
|
|
|
});
|
|
|
|
|
|
// getter
|
|
|
-const loginError = mainStoreRef.readLoginError;
|
|
|
const width = computed(() => {
|
|
|
switch (name.value) {
|
|
|
case "xs":
|
|
@@ -42,51 +38,97 @@ const width = computed(() => {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+function setDialog(status: Boolean, msg: String = "") {
|
|
|
+ if (status) {
|
|
|
+ dialog.show = true;
|
|
|
+ dialog.state = "success";
|
|
|
+ dialog.msg =
|
|
|
+ "儲值成功!<br/>已獲得價值 1000 元的 120 秒影片製作時間<br/>(儲值成功後即可登入電腦版進行影片製作)";
|
|
|
+ dialog.icon = "check_circle";
|
|
|
+ } else {
|
|
|
+ dialog.show = true;
|
|
|
+ dialog.state = "error";
|
|
|
+ dialog.msg = `${msg}`;
|
|
|
+ dialog.icon = "highlight_off";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// action
|
|
|
async function submit() {
|
|
|
- console.log("submit ser_no.value", ser_no.value);
|
|
|
+ loading.value = true;
|
|
|
+ if (email.value === "" || password.value === "") {
|
|
|
+ loading.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
let response = await mainStore.qrLogIn(
|
|
|
email.value,
|
|
|
password.value,
|
|
|
ser_no.value
|
|
|
);
|
|
|
- console.log("response", response);
|
|
|
- if (response?.status === 200) {
|
|
|
- console.log("加值成功");
|
|
|
+
|
|
|
+ loading.value = false;
|
|
|
+
|
|
|
+ if (response?.data.time_added === -1) {
|
|
|
+ setDialog(false, "此序號無效");
|
|
|
+ } else if (response?.status === 200) {
|
|
|
setTimeout(() => {
|
|
|
- dialog.show = true;
|
|
|
- dialog.state = "success";
|
|
|
- dialog.msg =
|
|
|
- "儲值成功!<br/>已獲得價值 1000 元的 2 分鐘影片製作時間<br/>(加值成功後即可登入電腦版進行影片製作)";
|
|
|
- dialog.icon = "check_circle";
|
|
|
+ setDialog(true);
|
|
|
}, 500);
|
|
|
- } else {
|
|
|
- dialog.show = true;
|
|
|
- dialog.state = "error";
|
|
|
- dialog.msg = "查無此帳號/序號有誤";
|
|
|
- dialog.icon = "highlight_off";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// lifecycle
|
|
|
onMounted(() => {
|
|
|
console.log("onMounted");
|
|
|
- if (route.params.ser_no) {
|
|
|
- ser_no.value = route.params.ser_no;
|
|
|
- console.log("ser_no.value", ser_no.value);
|
|
|
+ if (route.query["add_time_code"]) {
|
|
|
+ ser_no.value = route.query["add_time_code"];
|
|
|
}
|
|
|
+ mainStore.qrCheckLoggedIn();
|
|
|
+ if (mainStore.token) {
|
|
|
+ checkCode("");
|
|
|
+ } else {
|
|
|
+ loginState.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ async function checkCode(method: string = "") {
|
|
|
+ loading.value = true;
|
|
|
+ let response: any = await mainStore.qrAddTime(ser_no.value);
|
|
|
+ loading.value = false;
|
|
|
+ if (response.status === 200) {
|
|
|
+ loginState.value = true;
|
|
|
+ setDialog(true);
|
|
|
+ } else if (response.response.status === 400) {
|
|
|
+ setDialog(
|
|
|
+ false,
|
|
|
+ "此序號已被使用 <br> This serial number is already used"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (route.params.ser_no) {
|
|
|
+ // ser_no.value = route.params.ser_no;
|
|
|
+ // console.log("ser_no.value", ser_no.value);
|
|
|
+ // }
|
|
|
});
|
|
|
|
|
|
-const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
- console.log("Handle the response", response);
|
|
|
+const callback: CallbackTypes.CredentialCallback = async (response: any) => {
|
|
|
+ loading.value = true;
|
|
|
const userData: any = decodeCredential(response.credential);
|
|
|
- console.log("Handle the userData", userData);
|
|
|
- mainStore.qrGoogleLogin(userData.email, ser_no.value);
|
|
|
+ let res = await mainStore.qrGoogleLogin(userData.email, ser_no.value);
|
|
|
+ loading.value = false;
|
|
|
+ if (res?.data.time_added === -1) {
|
|
|
+ setDialog(false, "此序號無效");
|
|
|
+ } else if (res?.status === 200) {
|
|
|
+ setTimeout(() => {
|
|
|
+ setDialog(true);
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <Navbar />
|
|
|
+ <!-- <Navbar /> -->
|
|
|
<v-container fluid class="pa-0 overflow-hidden">
|
|
|
<div class="ai_anchor3_content">
|
|
|
<div class="ai_anchor3_content_box">
|
|
@@ -107,14 +149,16 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <!-- <v-row
|
|
|
+ <v-row
|
|
|
align="center"
|
|
|
+ justify="center"
|
|
|
no-gutters
|
|
|
class="overflow-hidden mx-auto login-form"
|
|
|
+ v-if="!loginState"
|
|
|
>
|
|
|
- <v-col :cols="width" class="px-6 my-8 my-md-0">
|
|
|
+ <v-col cols="12" class="px-6 my-8 my-md-0">
|
|
|
<div class="form-title">
|
|
|
- <h3>{{ t("login") }}</h3>
|
|
|
+ <h3>登入後即可獲得儲值金</h3>
|
|
|
<span></span>
|
|
|
</div>
|
|
|
<v-form ref="form" lazy-validation>
|
|
@@ -144,13 +188,13 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
>
|
|
|
</v-text-field>
|
|
|
|
|
|
- <p class="text-center">
|
|
|
+ <!-- <p class="text-center">
|
|
|
{{ t("haventAccount") }}
|
|
|
<router-link to="/signup">{{ t("register") }}</router-link> /
|
|
|
<router-link to="/recover-password">{{
|
|
|
t("forgotPsd")
|
|
|
}}</router-link>
|
|
|
- </p>
|
|
|
+ </p> -->
|
|
|
|
|
|
<div class="d-flex flex-column">
|
|
|
<v-btn rounded="pill" @click.prevent="submit" class="login-btn">
|
|
@@ -158,8 +202,14 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
</v-btn>
|
|
|
|
|
|
<section class="line">
|
|
|
- <p> 沒有帳號嗎?使用 Google 快速註冊  </p>
|
|
|
- <span></span>
|
|
|
+ <p class="d-none d-sm-block">
|
|
|
+ 沒有帳號嗎?使用 Google 快速註冊
|
|
|
+ </p>
|
|
|
+ <p class="d-block d-sm-none">
|
|
|
+ 沒有帳號嗎? <br />
|
|
|
+ 使用 Google 快速註冊
|
|
|
+ </p>
|
|
|
+ <!-- <span></span> -->
|
|
|
</section>
|
|
|
|
|
|
<div class="mx-auto mt-5" style="max-width: 235px">
|
|
@@ -173,7 +223,7 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
</div>
|
|
|
</v-form>
|
|
|
</v-col>
|
|
|
- </v-row> -->
|
|
|
+ </v-row>
|
|
|
|
|
|
<div class="ai_anchor_moichiu left-70" style="background: #67b5b5">
|
|
|
<v-row align="center" no-gutters class="px-0 mx-0">
|
|
@@ -246,11 +296,21 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
</v-row>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
-
|
|
|
+
|
|
|
+ <div class="progress-item text-center">
|
|
|
+ <v-progress-circular
|
|
|
+ indeterminate
|
|
|
+ color="primary"
|
|
|
+ :size="50"
|
|
|
+ v-if="loading"
|
|
|
+ ></v-progress-circular>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="CTA_Button_div text-center">
|
|
|
<button type="button" class="CTA_Button">
|
|
|
<!-- 點我開始製作 AI 主播!<br />Log In -->
|
|
|
- AI 三代主播系統 <br> 於 2023/04/06 正式上線!
|
|
|
+ AI 三代主播系統 <br />
|
|
|
+ 於 2023/04/06 正式上線!
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
@@ -287,6 +347,7 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
:state="dialog.state"
|
|
|
:dialog="dialog.show"
|
|
|
:icon="dialog.icon"
|
|
|
+ :qrcode="true"
|
|
|
@close="dialog.show = false"
|
|
|
></Dialog>
|
|
|
</v-container>
|
|
@@ -311,15 +372,32 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
color: #fff;
|
|
|
- background-color: #140720;
|
|
|
letter-spacing: 1px;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- border-top: 1px solid #fff;
|
|
|
- width: 400px;
|
|
|
- position: absolute;
|
|
|
- bottom: 12px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ &::after,
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 50px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 18px;
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ left: -55px;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ right: -55px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.login-btn {
|
|
@@ -453,7 +531,7 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
- margin-bottom: 80px;
|
|
|
+ margin-bottom: 15px;
|
|
|
h1 {
|
|
|
margin-bottom: -60px;
|
|
|
}
|
|
@@ -679,4 +757,10 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
|
|
|
max-width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
+.progress-item {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
</style>
|