259 lines
6.6 KiB
Vue
259 lines
6.6 KiB
Vue
<template>
|
|
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
|
<template v-if="pageMode === 'entry'">
|
|
<div class="setting flex flex-between">
|
|
<van-icon name="arrow-left" color="#fff" @click="handleBack" />
|
|
<SvgIcon name="setting" size="70" />
|
|
</div>
|
|
<div class="content flex flex-center flex-column">
|
|
<div class="text">Who is Your Customer?</div>
|
|
</div>
|
|
<div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="form-container">
|
|
<div class="back-container flex flex-center" @click="handleChangeMode('entry')">
|
|
<van-icon name="arrow-left" color="#fff" />
|
|
</div>
|
|
<div class="text">
|
|
<div class="form-title">Entry ID</div>
|
|
<div class="description">
|
|
Redefine the styling experience with AI.<br />
|
|
Use Styling Angel to speed up your fashion journey.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-form">
|
|
<div class="form-field">
|
|
<label class="field-label">VIP ID</label>
|
|
<input v-model="customerData.name" type="text" placeholder="Enter your ID" class="form-input" />
|
|
</div>
|
|
<div class="form-field email">
|
|
<label class="field-label">Email Address</label>
|
|
<input
|
|
v-model="customerData.email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
<button class="confirm-btn" @click="handleConfirm">Confirm</button>
|
|
</div>
|
|
<div class="copyright">Powered by AiDLab for Lane Crawford</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useGenerateStore, useUserInfoStore } from '@/stores'
|
|
import { showToast } from 'vant'
|
|
import { customerCheckin } from '@/api/workshop'
|
|
|
|
const router = useRouter()
|
|
const generateStore = useGenerateStore()
|
|
|
|
type PageMode = 'form' | 'entry'
|
|
const pageMode = ref<PageMode>('entry')
|
|
|
|
const handleBack = () => {
|
|
router.go(-1)
|
|
}
|
|
|
|
const handleChangeMode = (mode: PageMode) => {
|
|
pageMode.value = mode
|
|
}
|
|
|
|
const customerData = ref({
|
|
name: '',
|
|
email: ''
|
|
})
|
|
|
|
const handleConfirm = async () => {
|
|
if (customerData.value.name === '' || customerData.value.email === '') {
|
|
showToast({
|
|
message: 'please input name and email',
|
|
position: 'top'
|
|
})
|
|
return
|
|
}
|
|
|
|
customerCheckin(customerData.value).then((res) => {
|
|
useUserInfoStore().resetGenerateParams()
|
|
// console.log('res', res)
|
|
generateStore.setCustomerInfo(res)
|
|
// router.push('/stylist/index')
|
|
router.push('/homeNav')
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.customer-container {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
position: relative;
|
|
background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
&.form-mode {
|
|
background: url('@/assets/images/has_shouder_bg.png') no-repeat center center;
|
|
padding-top: 21.47rem;
|
|
}
|
|
|
|
.setting {
|
|
z-index: 1;
|
|
padding: 3.17rem 4.9rem 0 8.4rem;
|
|
font-size: 7rem;
|
|
.c-svg {
|
|
width: initial;
|
|
}
|
|
}
|
|
.content {
|
|
margin-top: 55.3rem;
|
|
.text {
|
|
font-family: 'satoshiBold';
|
|
font-size: 13rem;
|
|
line-height: 112.99%;
|
|
text-align: center;
|
|
letter-spacing: 2;
|
|
}
|
|
.start-btn {
|
|
font-size: 5.6rem;
|
|
width: 32.5rem;
|
|
height: 8.1rem;
|
|
border: .2rem solid #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4rem;
|
|
}
|
|
}
|
|
.entry-btn {
|
|
position: absolute;
|
|
border: .2rem solid #fff;
|
|
bottom: 10.3rem;
|
|
right: 5.5rem;
|
|
height: 9rem;
|
|
width: 27.5rem;
|
|
line-height: 9rem;
|
|
font-size: 5.6rem;
|
|
}
|
|
|
|
.form-container {
|
|
.back-container {
|
|
width: 7.3rem;
|
|
height: 7.3rem;
|
|
border: .2rem solid #fff;
|
|
border-radius: 1.8rem;
|
|
font-size: 4.3rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
-moz-backdrop-filter: blur(20px);
|
|
-ms-backdrop-filter: blur(20px);
|
|
-o-backdrop-filter: blur(20px);
|
|
margin-left: 7rem;
|
|
position: relative;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;
|
|
|
|
.back-icon {
|
|
width: 2.08rem;
|
|
height: 3.47rem;
|
|
}
|
|
}
|
|
.text {
|
|
padding-left: 15.2rem;
|
|
margin-top: 7.9rem;
|
|
letter-spacing: 0.02rem;
|
|
}
|
|
.form-title {
|
|
font-family: 'satoshiBold';
|
|
font-size: 11rem;
|
|
line-height: 1.24em;
|
|
}
|
|
.description {
|
|
font-size: 3rem;
|
|
line-height: 141%;
|
|
letter-spacing: 0.08rem;
|
|
margin-top: 2.7rem;
|
|
font-family: 'satoshiRegular';
|
|
}
|
|
|
|
.glass-form {
|
|
height: 84.8rem;
|
|
border: .2rem solid #ffffff;
|
|
border-radius: 4.7rem;
|
|
margin: 0 14.2rem;
|
|
padding: 8.2rem 7.9rem;
|
|
margin-top: 7.5rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
|
|
background: radial-gradient(
|
|
100% 100% at 0% 0%,
|
|
rgba(115, 115, 115, 0.4) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
backdrop-filter: blur(35px);
|
|
|
|
.form-field {
|
|
margin-bottom: 3.6rem;
|
|
&.email {
|
|
margin-bottom: 6.8rem;
|
|
}
|
|
.field-label {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 3.6rem;
|
|
font-family: 'satoshiRegular';
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: 10rem;
|
|
line-height: 10rem;
|
|
border: .2rem solid #fff;
|
|
border-radius: 7rem;
|
|
padding: 0 5.5rem;
|
|
color: #fff;
|
|
font-size: 3.8rem;
|
|
font-family: 'satoshiRegular';
|
|
background: transparent;
|
|
|
|
&::placeholder {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
width: 100%;
|
|
height: 10rem;
|
|
line-height: 10rem;
|
|
background: #000;
|
|
border: none;
|
|
border-radius: 7rem;
|
|
color: #fff;
|
|
font-size: 4rem;
|
|
font-family: 'satoshiRegular';
|
|
cursor: pointer;
|
|
box-shadow: 0 .2rem 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
.copyright {
|
|
font-family: 'satoshiRegular';
|
|
font-size: 3rem;
|
|
line-height: 124%;
|
|
letter-spacing: 0.08rem;
|
|
margin-top: 2.7rem;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
margin-top: 18.7rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|