Janie
2 years ago
7 changed files with 396 additions and 33 deletions
-
11FrontEnd/assets/svg/Icon.svg
-
161FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
-
9FrontEnd/components/user/userServiceItem.vue
-
2FrontEnd/locales/zh-tw.json
-
1FrontEnd/pages/user/myBooking.vue
-
148FrontEnd/pages/user/redirect.vue
-
97FrontEnd/pages/user/signUp.vue
@ -0,0 +1,11 @@ |
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<g clip-path="url(#70huf6jbya)" stroke="#7997FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|||
<path d="M17.25 3v4.5h-4.5"/> |
|||
<path d="M15.367 11.25a6.75 6.75 0 1 1-1.59-7.02L17.25 7.5"/> |
|||
</g> |
|||
<defs> |
|||
<clipPath id="70huf6jbya"> |
|||
<path fill="#fff" d="M0 0h18v18H0z"/> |
|||
</clipPath> |
|||
</defs> |
|||
</svg> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<modal name="VerifyCode" :clickToClose="false"> |
|||
<div class="tw-text-base-primary"> |
|||
<div class="modal-header tw-flex tw-w-full tw-justify-between tw-mb-[30px]"> |
|||
<div class="tw-font-bold tw-text-[20px]">{{ $t("Verify your email") }}</div> |
|||
<button class="close tw-transition tw-btn-md" @click="$modal.hide('VerifyCode')"></button> |
|||
</div> |
|||
<div class="tw-mb-[30px]"> |
|||
<div class="modal-content tw-text-[18px] tw-text-hint"> |
|||
我們已寄送認證碼至您的電子信箱<span class="tw-text-primary-1 tw-text-[18px]">xxx@email.com</span> |
|||
</div> |
|||
<div> |
|||
請至電子信箱確認後，在下方輸入驗證碼來啟動您的帳戶。 |
|||
</div> |
|||
</div> |
|||
<div class="tw-mb-[40px]"> |
|||
<div> |
|||
<input type="text" v-model="user_VerifyCode" placeholder="請輸入認證碼" :class="['tw-w-full tw-text-[18px] tw-p-[10px] tw-border tw-border-solid tw-mb-[10px] tw-rounded-[8px] md:tw-max-w-[360px]', validation ? 'tw-border-error-default' : 'tw-border-[ef5a5a]']" /> |
|||
</div> |
|||
<div class="tw-flex tw-justify-between"> |
|||
<div :class="['tw-text-[14px] tw-text-error-default', validation ? 'tw-block' : 'tw-hidden']"> |
|||
認證碼錯誤 |
|||
</div> |
|||
<button class="tw-grid tw-grid-cols-[18px_100px] tw-gap-[10px]"> |
|||
<img src="~/assets/svg/Icon.svg"/> |
|||
<div class="tw-text-[14px] tw-text-complementary-1 tw-w-fit"> |
|||
重新寄送認證碼 |
|||
</div> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="tw-grid tw-grid-cols-2 tw-gap-[10px]"> |
|||
<button @click="$modal.hide('VerifyCode')" class="tw-rounded-[8px] tw-text-primary-1 tw-text-[18px] tw-px-[12px] tw-py-[12px] md:tw-rounded-[16px]"> |
|||
取消 |
|||
</button> |
|||
<button @click="checkVerifyCode" :class="['tw-rounded-[8px] tw-text-[18px] tw-px-[12px] tw-py-[12px] md:tw-rounded-[16px]', validation ? 'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100' : 'tw-text-white tw-bg-primary-default tw-border-primary-default']"> |
|||
確認 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</modal> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "VerifyCode", |
|||
data() { |
|||
return { |
|||
user_VerifyCode: "", |
|||
checkCode: false, |
|||
errorCode: false, |
|||
validation: false, |
|||
}; |
|||
}, |
|||
props: { |
|||
error: { |
|||
type: Boolean, |
|||
} |
|||
}, |
|||
watch: { |
|||
error: { |
|||
handler: function () { |
|||
this.validation = this.error; |
|||
console.log("validation: " + this.validation); |
|||
}, |
|||
}, |
|||
user_VerifyCode: { |
|||
handler: function () { |
|||
if(this.user_VerifyCode == ""){ |
|||
this.validation = true; |
|||
}else if(this.user_VerifyCode.length > "6"){ |
|||
this.validation = true; |
|||
}else{ |
|||
this.validation = false; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
checkVerifyCode(){ |
|||
this.checkCode = true; |
|||
this.$emit('user-VerifyCode', this.user_VerifyCode); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.close { |
|||
position: absolute; |
|||
right: 25px; |
|||
top: 25px; |
|||
background-image: url("~/assets/svg/close.svg"); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
width: 14px; |
|||
height: 14px; |
|||
|
|||
@media (min-width: 1366px) { |
|||
position: relative; |
|||
right: initial; |
|||
top: initial; |
|||
} |
|||
} |
|||
|
|||
:deep() { |
|||
.v--modal { |
|||
background-color: #fefefe !important; |
|||
text-align: left; |
|||
border-radius: 16px; |
|||
box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%); |
|||
padding: 20px; |
|||
max-width: 100%; |
|||
top: 0 !important; |
|||
left: 0 !important; |
|||
right: 0 !important; |
|||
margin: 0 auto; |
|||
height: auto !important; |
|||
vertical-align: middle; |
|||
|
|||
@media (min-width: 768px) { |
|||
max-width: 360px; |
|||
} |
|||
} |
|||
|
|||
.v--modal-overlay { |
|||
position: fixed; |
|||
box-sizing: border-box; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: auto; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
z-index: 999; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.v--modal-top-right { |
|||
display: block; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.v--modal-background-click { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.v--modal-box { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
|
|||
@media (min-width: 768px) { |
|||
margin-left: 161px; |
|||
margin-right: 161px; |
|||
max-width: 360px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div :class="['tw-h-full tw-p-[30px] tw-bg-white md:tw-bg-primary-pale']"> |
|||
<div |
|||
class="xl:tw-grid xl:tw-grid-cols-[auto_414px] xl:tw-gap-[96px] xl:tw-max-w-[1246px] xl:tw-mx-auto xl:tw-px-[60px]"> |
|||
<div class="tw-hidden xl:tw-block xl:tw-mt-[30px]"> |
|||
<p class="welcome tw-text-primary-light">{{ $t("Welcome to ShowEasy") }}</p> |
|||
<p class="sub tw-text-neutral-400"> |
|||
{{ |
|||
$t( |
|||
"Your best guide from trip to show and from show to the world." |
|||
) |
|||
}} |
|||
</p> |
|||
<img class="mt-11 ml-15" :src="require('@/assets/img/UserLoginMain.png')" /> |
|||
</div> |
|||
<div class="md:tw-w-[414px] md:tw-mx-auto"> |
|||
<div class="tw-bg-white md:tw-rounded-[24px] md:tw-mt-[30px] md:tw-pt-[60px] md:tw-pb-[150px] md:tw-px-[30px]"> |
|||
<div class="tw-font-bold tw-text-black tw-text-[18px] tw-mb-[16px]"> |
|||
Thank you for signing up. |
|||
</div> |
|||
<div class="tw-text-black tw-text-[16px] tw-mb-[24px]"> |
|||
Your email has been verified. |
|||
</div> |
|||
<button class="tw-bg-primary-1 tw-text-white tw-text-[16px] tw-w-full tw-py-[10px] tw-rounded-[16px] tw-mb-[16px]"> |
|||
Explore with ShowEasy |
|||
</button> |
|||
<div class="tw-mx-auto tw-text-primary-1 tw-text-[14px] tw-w-fit"> |
|||
Go to ShowEasy in {{ `${this.countdown}` }} sec... |
|||
</div> |
|||
<loading :isLoading="isPageLoading"></loading> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import loading from "@/components/newComponent/loading/loading.vue"; |
|||
|
|||
|
|||
export default { |
|||
name: "Redirect", |
|||
layout: "login", |
|||
auth: false, |
|||
components: { |
|||
loading, |
|||
}, |
|||
data() { |
|||
return { |
|||
isPageLoading: false, |
|||
countdown: 5, |
|||
}; |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
created(){ |
|||
this.secondCountDown(); |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
secondCountDown(){ |
|||
this.timer = setInterval(() => { |
|||
if (this.countdown > 0) { |
|||
this.countdown--; |
|||
} |
|||
if (this.countdown === 0) { |
|||
clearInterval(this.timer); |
|||
} |
|||
}, 1000); |
|||
if(this.countdown === 0){ |
|||
console.log("0") |
|||
} |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
#app { |
|||
overflow-y: hidden; |
|||
} |
|||
|
|||
.welcome { |
|||
color: #f5cda8; |
|||
font-family: Damion; |
|||
font-size: 48px; |
|||
margin-bottom: 0px; |
|||
font-weight: 400; |
|||
line-height: 66px; |
|||
letter-spacing: 0.02em; |
|||
} |
|||
|
|||
.sub { |
|||
color: #9c9c9c; |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
font-size: 22px; |
|||
line-height: 29px; |
|||
letter-spacing: 0.02em; |
|||
} |
|||
|
|||
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
:deep(.v-messages__message) { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
$border-style: 1px solid #e5e5e5; |
|||
|
|||
.title { |
|||
font-weight: 700; |
|||
font-size: 26px; |
|||
line-height: 34px; |
|||
letter-spacing: 0.02em; |
|||
color: #232323; |
|||
} |
|||
|
|||
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) { |
|||
margin-bottom: 0; |
|||
padding: 0; |
|||
|
|||
.v-messages { |
|||
color: #9c9c9c; |
|||
display: none; |
|||
} |
|||
|
|||
.v-messages.error--text { |
|||
display: block; |
|||
margin-top: 4px; |
|||
margin-bottom: 16px; |
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-border { |
|||
border: $border-style; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue