334 lines
8.4 KiB
Vue
334 lines
8.4 KiB
Vue
<template>
|
|
<div
|
|
class="customer-container safe-area-top flex flex-column"
|
|
:class="{ 'form-mode': pageMode !== 'entry' }"
|
|
>
|
|
<div class="setting flex flex-between">
|
|
<SvgIcon name="left" size="70" @click.stop="handleBack" />
|
|
<SvgIcon name="profile_white" size="55" @click="handleOpenProfile" />
|
|
</div>
|
|
<template v-if="pageMode === 'entry'">
|
|
<div class="content flex-1 flex flex-center flex-column">
|
|
<div class="text">Who is Your Customer?</div>
|
|
<div class="btn-list flex flex-center">
|
|
<button class="sandblasted-blurred btn" @click="handleChangeMode('create')">
|
|
<span>Create</span>
|
|
</button>
|
|
<button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
|
|
<span>Entry</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="form-container flex-1 flex flex-column flex-center">
|
|
<div class="text">
|
|
<div class="form-title">{{ formTitle }}</div>
|
|
<div class="description">
|
|
<p>Unlock personalized styling insights.</p>
|
|
<p>Enter a client profile to begin curating their next look with Styling Angel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-form" :class="{ create: pageMode === 'create' }">
|
|
<div class="form-field" v-if="pageMode === 'create'">
|
|
<label class="field-label">VIP ID</label>
|
|
<input
|
|
v-model="customerData.vipId"
|
|
type="text"
|
|
placeholder="Enter your ID"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label class="field-label">Nickname</label>
|
|
<input
|
|
v-model="customerData.nickname"
|
|
type="text"
|
|
placeholder="Enter name"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
<button class="confirm-btn" @click="handleConfirm">Confirm</button>
|
|
</div>
|
|
<div v-if="pageMode === 'form'" class="show-all" @click="handleShowPopup(true)">
|
|
Show All
|
|
</div>
|
|
<div class="copyright">Powered by AiDLab for Lane Crawford</div>
|
|
</div>
|
|
</template>
|
|
|
|
<Profile ref="profileRef" @selected-customer="handleSelectCustomer" is-customer />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useGenerateStore, useUserInfoStore } from '@/stores'
|
|
import { showToast } from 'vant'
|
|
import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/api/workshop'
|
|
import Profile from '../Workshop/profile.vue'
|
|
import MyEvent from '@/utils/myEvent'
|
|
|
|
const profileRef = ref<typeof Profile>(null)
|
|
const handleOpenProfile = () => {
|
|
profileRef.value.open()
|
|
}
|
|
|
|
const router = useRouter()
|
|
const generateStore = useGenerateStore()
|
|
|
|
type PageMode = 'form' | 'entry' | 'create'
|
|
const pageMode = ref<PageMode>('entry')
|
|
const formTitle = computed(() => {
|
|
return pageMode.value === 'entry' || pageMode.value === 'form' ? 'Customer ID' : 'Create Profile'
|
|
})
|
|
|
|
const handleChangeMode = (mode: PageMode) => {
|
|
pageMode.value = mode
|
|
}
|
|
|
|
const customerData = ref({
|
|
vipId: '',
|
|
nickname: ''
|
|
// email: ''
|
|
})
|
|
|
|
const handleConfirm = async () => {
|
|
if (pageMode.value === 'form') {
|
|
if (customerData.value.nickname === '') {
|
|
showToast({
|
|
message: 'please input the nickname'
|
|
})
|
|
return
|
|
}
|
|
|
|
customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
|
|
useUserInfoStore().resetGenerateParams()
|
|
generateStore.setCustomerInfo(res)
|
|
MyEvent.emit('clear-generate-state')
|
|
router.push('/workshop/home')
|
|
})
|
|
} else {
|
|
if (customerData.value.vipId === '') {
|
|
showToast({
|
|
message: 'please input the VIP ID'
|
|
})
|
|
return
|
|
}
|
|
if (customerData.value.nickname === '') {
|
|
showToast({
|
|
message: 'please input the nickname'
|
|
})
|
|
return
|
|
}
|
|
|
|
createCustomer({
|
|
nickname: customerData.value.nickname,
|
|
vipId: customerData.value.vipId
|
|
} as CreateCustomerParams).then((res) => {
|
|
showToast({
|
|
message: 'Customer created successfully'
|
|
})
|
|
handleBack()
|
|
MyEvent.emit('update-customer-list')
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleShowPopup = (flag: Boolean) => {
|
|
// showPopup.value = flag
|
|
profileRef.value.openSwitchCustomerPopup(flag)
|
|
}
|
|
|
|
const handleSelectCustomer = (value) => {
|
|
if (value) {
|
|
customerData.value.nickname = value.name
|
|
}
|
|
}
|
|
|
|
const handleBack = (e?: Event) => {
|
|
if (e) {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
}
|
|
if (pageMode.value !== 'entry') {
|
|
pageMode.value = 'entry'
|
|
customerData.value = {
|
|
vipId: '',
|
|
nickname: ''
|
|
}
|
|
return
|
|
}
|
|
router.go(-1)
|
|
}
|
|
</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/cover;
|
|
}
|
|
|
|
.setting {
|
|
z-index: 1;
|
|
padding: 3.17rem 4.9rem 0 8.4rem;
|
|
font-size: 7rem;
|
|
.c-svg {
|
|
width: initial;
|
|
}
|
|
}
|
|
.content {
|
|
// margin-top: 55.3rem;
|
|
row-gap: 12.7rem;
|
|
.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: 0.2rem solid #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4rem;
|
|
}
|
|
.btn-list {
|
|
column-gap: 17rem;
|
|
.btn {
|
|
height: 8.3rem;
|
|
width: 29.7rem;
|
|
line-height: 8.3rem;
|
|
font-size: 4.8rem;
|
|
border: 0.2rem solid #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-container {
|
|
width: 78.8rem;
|
|
margin: 0 auto;
|
|
.text {
|
|
letter-spacing: 0.02rem;
|
|
}
|
|
.form-title {
|
|
font-family: 'satoshiBold';
|
|
font-size: 11rem;
|
|
line-height: 1.24em;
|
|
}
|
|
.description {
|
|
font-size: 3.6rem;
|
|
line-height: 141%;
|
|
letter-spacing: 0.08rem;
|
|
margin: 3.1rem 0 11rem 0;
|
|
font-family: 'satoshiRegular';
|
|
}
|
|
|
|
.glass-form {
|
|
height: 68.7rem;
|
|
width: 78.8rem;
|
|
border: 0.2rem solid #ffffff;
|
|
border-radius: 4.7rem;
|
|
padding: 11rem 7.5rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
&.create {
|
|
height: 78.8rem;
|
|
}
|
|
|
|
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);
|
|
justify-content: flex-start;
|
|
|
|
.form-field {
|
|
margin-bottom: 6.8rem;
|
|
&.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: 0.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 0.2rem 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
.show-all {
|
|
margin-top: 4rem;
|
|
width: 19rem;
|
|
height: 7.6rem;
|
|
border-radius: 54px;
|
|
color: #000;
|
|
text-align: center;
|
|
line-height: 7.6rem;
|
|
background-color: #fff;
|
|
font-size: 3.1rem;
|
|
font-family: 'satoshiRegular';
|
|
}
|
|
.copyright {
|
|
font-family: 'satoshiRegular';
|
|
font-size: 3rem;
|
|
line-height: 124%;
|
|
letter-spacing: 0.08rem;
|
|
margin-top: 2.31rem;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
margin-top: 11.5rem;
|
|
}
|
|
}
|
|
}
|
|
.c-svg {
|
|
width: initial;
|
|
}
|
|
</style>
|