|
|
|
|
@ -10,19 +10,16 @@
|
|
|
|
|
<!-- Email Input start -->
|
|
|
|
|
<div class="input-box">
|
|
|
|
|
<input type="tel" placeholder="手機號碼" required class="form-control" v-model="form.username" />
|
|
|
|
|
<i data-feather="at-sign"></i>
|
|
|
|
|
<i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify"
|
|
|
|
|
>{{ getVerifyMsg }}
|
|
|
|
|
<template v-if="countdown > 0">({{ countdown }})</template>
|
|
|
|
|
</i>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Email Input End -->
|
|
|
|
|
|
|
|
|
|
<!-- Password Input start -->
|
|
|
|
|
<div class="input-box">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder="驗證碼"
|
|
|
|
|
required
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.password"
|
|
|
|
|
/>
|
|
|
|
|
<input type="password" placeholder="驗證碼" required class="form-control" v-model="form.password" />
|
|
|
|
|
<i class="iconly-Hide icli showHidePassword"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Password Input End -->
|
|
|
|
|
@ -53,47 +50,168 @@
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
|
|
|
|
|
// import liff from '@line/liff'
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import { ref, watch, onUnmounted } from "vue";
|
|
|
|
|
|
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
|
|
|
|
|
import { login } from "@/services/auth";
|
|
|
|
|
import { useShopStore } from "@/store/Shop"
|
|
|
|
|
|
|
|
|
|
import { showToast } from "vant";
|
|
|
|
|
import "vant/es/toast/style";
|
|
|
|
|
|
|
|
|
|
import { login, sendVerify } from "@/services/auth";
|
|
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
console.log("callback");
|
|
|
|
|
const shopStore = useShopStore()
|
|
|
|
|
|
|
|
|
|
const form = ref({
|
|
|
|
|
username: "0983214434",
|
|
|
|
|
password: "123456",
|
|
|
|
|
username: "",
|
|
|
|
|
password: "",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const getVerifyMsg = ref("獲取驗證碼");
|
|
|
|
|
const showGetVerifyBtn = ref(false);
|
|
|
|
|
const countdown = ref(0);
|
|
|
|
|
|
|
|
|
|
const handleGetVerify = async () => {
|
|
|
|
|
if(!showGetVerifyBtn.value){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!form.value.username) {
|
|
|
|
|
return showToast({
|
|
|
|
|
message: "請輸入手機號",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let res = await sendVerify(form.value.username);
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
getVerifyMsg.value = "重新發送";
|
|
|
|
|
countdown.value = 60;
|
|
|
|
|
showToast({
|
|
|
|
|
message: "驗證碼已發送",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
countdown.value = res.data.countdown;
|
|
|
|
|
showToast({
|
|
|
|
|
message: res.message,
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => form.value.username,
|
|
|
|
|
(nVal) => {
|
|
|
|
|
//檢查vVal是否為電話號碼
|
|
|
|
|
let reg = /^09[0-9]{8}$/;
|
|
|
|
|
|
|
|
|
|
if (reg.test(nVal)) {
|
|
|
|
|
if (countdown.value === 0) {
|
|
|
|
|
return (showGetVerifyBtn.value = true);
|
|
|
|
|
} else {
|
|
|
|
|
return (showGetVerifyBtn.value = false);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return (showGetVerifyBtn.value = false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
let timer = null;
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => countdown.value,
|
|
|
|
|
(nVal) => {
|
|
|
|
|
if (nVal > 0) {
|
|
|
|
|
showGetVerifyBtn.value = false;
|
|
|
|
|
if (!timer) {
|
|
|
|
|
timer = setInterval(() => {
|
|
|
|
|
if (countdown.value > 0) {
|
|
|
|
|
countdown.value--;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
timer = null;
|
|
|
|
|
showGetVerifyBtn.value = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleLogin = async () => {
|
|
|
|
|
//檢查手機號是否為空
|
|
|
|
|
if (!form.value.username) {
|
|
|
|
|
return showToast({
|
|
|
|
|
message: "請輸入手機號",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//檢查帳號密碼是否為空
|
|
|
|
|
if (!form.value.username || !form.value.password) {
|
|
|
|
|
return showToast({
|
|
|
|
|
message: "請輸入帳號及驗證碼",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let res = await login(form.value);
|
|
|
|
|
// console.log("res", res);
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
Cookies.set("token", res.data.token, { expires: 30, domain: import.meta.env.VITE_APP_SSO_DOMAIN });
|
|
|
|
|
Cookies.set("uid", res.data.uid, { expires: 30, domain: import.meta.env.VITE_APP_SSO_DOMAIN });
|
|
|
|
|
|
|
|
|
|
router.push("/user");
|
|
|
|
|
Cookies.set("token", res.data.token, { expires: 365, domain: shopStore.sso_domain });
|
|
|
|
|
Cookies.set("uid", res.data.uid, { expires: 365, domain: shopStore.sso_domain });
|
|
|
|
|
if (route.query.redirect) {
|
|
|
|
|
router.push(route.query.redirect);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
return router.push("/user");
|
|
|
|
|
} else if (res.code === 201) {
|
|
|
|
|
sessionStorage.setItem('reg',form.value.username)
|
|
|
|
|
sessionStorage.setItem("reg", form.value.username);
|
|
|
|
|
|
|
|
|
|
router.push({name:'Register',query: {type:'mobile'}});
|
|
|
|
|
router.push({ name: "Register", query: { type: "mobile" } });
|
|
|
|
|
}else{
|
|
|
|
|
showToast({
|
|
|
|
|
message: '登入失敗',
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleLineLogin = async () => {
|
|
|
|
|
const client_id = "1657876696";
|
|
|
|
|
const redirect_uri = import.meta.env.VITE_APP_BASE_URL + "/m/linelogin/";
|
|
|
|
|
const redirect_uri = "https://" + shopStore.domain + "/m/linelogin/";
|
|
|
|
|
let link = "https://access.line.me/oauth2/v2.1/authorize?";
|
|
|
|
|
link = link + "response_type=code";
|
|
|
|
|
link += "&client_id=" + client_id;
|
|
|
|
|
link += "&redirect_uri=" + redirect_uri;
|
|
|
|
|
link += "&state=login";
|
|
|
|
|
link += "&state=" + (route.query.redirect || "login");
|
|
|
|
|
link += "&scope=openid%20profile";
|
|
|
|
|
window.location.href = link;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped></style>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.input-box {
|
|
|
|
|
.verify {
|
|
|
|
|
font-size: calc(14px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 16px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disable {
|
|
|
|
|
color: #c9ccd0;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
