调整customer路由位置，吧登陆后的路由放在workshop路由下
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
This commit is contained in:
X1627315083
269
src/views/login/customer.vue
Normal file
269
src/views/login/customer.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
||||
<template v-if="pageMode === 'entry'">
|
||||
<div class="setting flex flex-between">
|
||||
<SvgIcon name="left" size="70" @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="menu flex flex-between">
|
||||
<div class="back-container flex flex-between" @click="handleBack">
|
||||
<SvgIcon name="left" size="70" />
|
||||
</div>
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="form-title">Customer ID</div>
|
||||
<div class="description">
|
||||
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
|
||||
fashion<br />journey.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-form">
|
||||
<div class="form-field">
|
||||
<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 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 } 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>('form')
|
||||
// const pageMode = ref<PageMode>('entry')
|
||||
|
||||
const handleBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
const handleChangeMode = (mode: PageMode) => {
|
||||
pageMode.value = mode
|
||||
}
|
||||
|
||||
const customerData = ref({
|
||||
vipId: ''
|
||||
// email: ''
|
||||
})
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (customerData.value.vipId === '') {
|
||||
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('/workshop/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/cover;
|
||||
padding-top: 15.9rem;
|
||||
}
|
||||
|
||||
.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: 0.2rem solid #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
}
|
||||
.entry-btn {
|
||||
position: absolute;
|
||||
border: 0.2rem solid #fff;
|
||||
bottom: 10.3rem;
|
||||
right: 5.5rem;
|
||||
height: 9rem;
|
||||
width: 27.5rem;
|
||||
line-height: 9rem;
|
||||
font-size: 5.6rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.menu {
|
||||
padding: 0 4.8rem 0 8.4rem;
|
||||
.back-container {
|
||||
width: 7.3rem;
|
||||
height: 7.3rem;
|
||||
border-radius: 1.8rem;
|
||||
font-size: 4.3rem;
|
||||
position: relative;
|
||||
|
||||
.back-icon {
|
||||
width: 2.08rem;
|
||||
height: 3.47rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text {
|
||||
padding-left: 15.2rem;
|
||||
margin-top: 15.4rem;
|
||||
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-top: 2.7rem;
|
||||
font-family: 'satoshiRegular';
|
||||
}
|
||||
|
||||
.glass-form {
|
||||
height: 68.8rem;
|
||||
border: 0.2rem solid #ffffff;
|
||||
border-radius: 4.7rem;
|
||||
margin: 0 14.2rem;
|
||||
// padding: 8.2rem 7.9rem;
|
||||
padding: 11rem 7.5rem;
|
||||
margin-top: 11rem;
|
||||
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;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
.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: 18.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.c-svg {
|
||||
width: initial;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user