aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: customer页面新增customer&profile弹窗切换customer

Browse Source
This commit is contained in:
zhangyahui
2025-12-22 15:01:58 +08:00
parent e14ac0f15f
commit 69e6408d55
5 changed files with 448 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/close_nocolor.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" fill="#A2A2A2"/>
<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" stroke="#A2A2A2"/>
<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" fill="#A2A2A2"/>
<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" stroke="#A2A2A2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

4
src/assets/icons/profile_white.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/checked.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

605
src/views/Workshop/profile.vue
View File

@@ -1,261 +1,392 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue' import { ref, reactive, onMounted, inject } from 'vue'
import router from '@/router' import router from '@/router'
import { showConfirmDialog } from 'vant' import { showConfirmDialog } from 'vant'
import { useUserInfoStore, useOverallStore } from '@/stores' import { useUserInfoStore, useOverallStore } from '@/stores'
import { LogOut } from '@/api/login' import { LogOut } from '@/api/login'
const userInfoStore = useUserInfoStore() const userInfoStore = useUserInfoStore()
const overallStore = useOverallStore() const overallStore = useOverallStore()
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type', 'selected-customer'])
const show = ref(false) const show = ref(false)
const isEdit = ref(false) const isEdit = ref(false)
const form = reactive({ const form = reactive({
name: { msg: '', value: userInfoStore.state.userInfo.username }, name: { msg: '', value: userInfoStore.state.userInfo.username },
email: { msg: '', value: userInfoStore.state.userInfo.email }, email: { msg: '', value: userInfoStore.state.userInfo.email },
password: { show: false, msg: '', value: userInfoStore.state.userInfo.password } password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
}) })
const open = () => { const open = () => {
isEdit.value = false isEdit.value = false
show.value = true show.value = true
} }
const close = () => { const close = () => {
show.value = false show.value = false
} }
const onEditItem = (item) => { const onEditItem = (item) => {
if (!form[item]) return if (!form[item]) return
form[item].edit = true form[item].edit = true
} }
const onSaveItem = (item) => { const onSaveItem = (item) => {
if (!form[item]) return if (!form[item]) return
form[item].edit = false form[item].edit = false
} }
const switchCustomer = () => { const switchCustomer = () => {
console.log('switchCustomer') // console.log('switchCustomer')
} handleShowPopup(true)
const edit = () => { }
isEdit.value = true const edit = () => {
} isEdit.value = true
const confirm = () => { }
overallStore.setLoading(true) const confirm = () => {
setTimeout(() => { overallStore.setLoading(true)
overallStore.setLoading(false) setTimeout(() => {
isEdit.value = false overallStore.setLoading(false)
}, 1000) isEdit.value = false
} }, 1000)
const logout = () => { }
showConfirmDialog({ const logout = () => {
title: 'Log out', showConfirmDialog({
message: 'Are you sure you want to log out?', title: 'Log out',
confirmButtonText: 'Yes', message: 'Are you sure you want to log out?',
cancelButtonText: 'Cancel' confirmButtonText: 'Yes',
}) cancelButtonText: 'Cancel'
.then(() => { })
LogOut().then(() => { .then(() => {
userInfoStore.logOut() LogOut().then(() => {
router.push({ path: '/welcome' }) userInfoStore.logOut()
}) router.push({ path: '/welcome' })
}) })
.catch(() => {}) })
} .catch(() => {})
defineExpose({ open }) }
const showSwitchCustomerPopup = ref(false)
const customerList = ref([
{ id: 'CUST001', nickname: 'Customer One', checked: true },
{ id: 'CUST002', nickname: 'Customer Two', checked: false },
{ id: 'CUST003', nickname: 'Customer Three', checked: false },
{ id: 'CUST004', nickname: 'Customer Four', checked: false },
{ id: 'CUST005', nickname: 'Customer Five', checked: false }
])
// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
const handleShowPopup = (flag: boolean) => {
showSwitchCustomerPopup.value = flag
show.value = !flag
}
const handleChangeChecked = (item) => {
customerList.value.forEach((customer) => {
customer.checked = customer.id === item.id
})
}
const handleSelectCustomer = () => {
const selectedCustomer = customerList.value.find((customer) => customer.checked)
if (selectedCustomer) {
emit('selected-customer', selectedCustomer)
}
showSwitchCustomerPopup.value = false
}
const openSwitchCustomerPopup = (flag = true) => {
showSwitchCustomerPopup.value = flag
}
defineExpose({ open, close, openSwitchCustomerPopup })
</script> </script>
<template> <template>
<van-popup class="van-popup" v-model:show="show" position="bottom" round> <van-popup class="van-popup" v-model:show="show" position="bottom" round>
<div class="profile"> <div class="profile">
<div class="header"> <div class="header">
<span class="title">Profile</span> <span class="title">Profile</span>
<van-icon name="cross" class="close" @click="close" /> <van-icon name="cross" class="close" @click="close" />
</div> </div>
<div class="box"> <div class="box">
<div class="form-item"> <div class="form-item">
<div class="label">Your Name</div> <div class="label">Your Name</div>
<label class="input"> <label class="input">
<div class="icon"><SvgIcon name="user" size="64" /></div> <div class="icon"><SvgIcon name="user" size="64" /></div>
<input <input
type="text" type="text"
placeholder="Enter your name" placeholder="Enter your name"
v-model="form.name.value" v-model="form.name.value"
:readonly="!isEdit" :readonly="!isEdit"
/> />
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')"> <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
<SvgIcon name="confirmation" size="37" /> <SvgIcon name="confirmation" size="37" />
</div> </div>
<div class="icon" v-else @click="onEditItem('name')"> <div class="icon" v-else @click="onEditItem('name')">
<SvgIcon name="edit" size="37" /> <SvgIcon name="edit" size="37" />
</div> --> </div> -->
</label> </label>
<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p> <p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
</div> </div>
<div class="form-item"> <div class="form-item">
<div class="label">Your Email</div> <div class="label">Your Email</div>
<label class="input"> <label class="input">
<div class="icon"><SvgIcon name="email" size="64" /></div> <div class="icon"><SvgIcon name="email" size="64" /></div>
<input <input
type="email" type="email"
placeholder="Enter your email" placeholder="Enter your email"
v-model="form.email.value" v-model="form.email.value"
:readonly="!isEdit" :readonly="!isEdit"
required required
/> />
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')"> <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
<SvgIcon name="confirmation" size="37" /> <SvgIcon name="confirmation" size="37" />
</div> </div>
<div class="icon" v-else @click="onEditItem('email')"> <div class="icon" v-else @click="onEditItem('email')">
<SvgIcon name="edit" size="37" /> <SvgIcon name="edit" size="37" />
</div> --> </div> -->
</label> </label>
<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p> <p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
</div> </div>
<div class="form-item"> <div class="form-item">
<div class="label">Password</div> <div class="label">Password</div>
<label class="input"> <label class="input">
<div class="icon" @click="form.password.show = !form.password.show"> <div class="icon" @click="form.password.show = !form.password.show">
<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" /> <SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
</div> </div>
<input <input
:type="form.password.show ? 'text' : 'password'" :type="form.password.show ? 'text' : 'password'"
placeholder="Enter your password" placeholder="Enter your password"
v-model="form.password.value" v-model="form.password.value"
:readonly="!isEdit" :readonly="!isEdit"
/> />
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')"> <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
<SvgIcon name="confirmation" size="37" /> <SvgIcon name="confirmation" size="37" />
</div> </div>
<div class="icon" v-else @click="onEditItem('password')"> <div class="icon" v-else @click="onEditItem('password')">
<SvgIcon name="edit" size="37" /> <SvgIcon name="edit" size="37" />
</div> --> </div> -->
</label> </label>
<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p> <p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
</div> </div>
<template v-if="isEdit"> <template v-if="isEdit">
<button class="confirm" @click="confirm">Confirm</button> <button class="confirm" @click="confirm">Confirm</button>
<p class="tip">Powered by AiDLab for Lane Crawford</p> <p class="tip">Powered by AiDLab for Lane Crawford</p>
</template> </template>
<template v-else> <template v-else>
<button class="switch" @click="switchCustomer">Switch Customer</button> <button class="switch" @click="switchCustomer">Switch Customer</button>
<button class="edit" @click="edit">Edit Profile</button> <button class="edit" @click="edit">Edit Profile</button>
<button class="logout" @click="logout">Log out</button> <button class="logout" @click="logout">Log out</button>
</template> </template>
</div> </div>
</div> </div>
</van-popup> </van-popup>
<van-popup
class="user-popup"
v-model:show="showSwitchCustomerPopup"
round
position="bottom"
teleport="body"
>
<div class="popup-title flex">
<div class="title-txt">Saved Customer ID</div>
<SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
</div>
<div class="cusomter-list">
<div
class="customer-item flex flex-align-center flex-between"
v-for="item in customerList"
:key="item.id"
@click="handleChangeChecked(item)"
>
<div class="info">
<div class="name">{{ item.nickname }}</div>
<div class="id">{{ item.id }}</div>
</div>
<div class="select-box">
<div class="check-box flex flex-center" v-show="!item.checked">
<div class="check"></div>
</div>
<img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
</div>
</div>
</div>
<div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
</van-popup>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.van-popup { .van-popup {
max-height: 90%; max-height: 90%;
--van-popup-round-radius: 7.8rem; --van-popup-round-radius: 7.8rem;
} }
.profile { .profile {
margin: 6.5rem 0; margin: 6.5rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
> .header { > .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 0 7rem; padding: 0 7rem;
margin-bottom: 8rem; margin-bottom: 8rem;
> .title { > .title {
font-family: satoshiBold; font-family: satoshiBold;
font-size: 4.6rem; font-size: 4.6rem;
color: #181725; color: #181725;
} }
> .close { > .close {
margin-left: auto; margin-left: auto;
font-size: 5rem; font-size: 5rem;
color: #a1a1a1; color: #a1a1a1;
} }
} }
> .box { > .box {
width: 100%; width: 100%;
padding: 0 13rem; padding: 0 13rem;
> div { > div {
width: 100%; width: 100%;
margin-top: 5.1rem; margin-top: 5.1rem;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
} }
> button { > button {
margin-top: 8.5rem; margin-top: 8.5rem;
width: 100%; width: 100%;
height: 14.5rem; height: 14.5rem;
border-radius: 2rem; border-radius: 2rem;
font-size: 4rem; font-size: 4rem;
border: 0.2rem solid #3b3b3b; border: 0.2rem solid #3b3b3b;
font-family: satoshiBold; font-family: satoshiBold;
} }
> .form-item { > .form-item {
> .label { > .label {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
font-family: satoshiBold; font-family: satoshiBold;
font-size: 2.9rem; font-size: 2.9rem;
line-height: 120%; line-height: 120%;
color: #262422; color: #262422;
} }
> .input { > .input {
// width: 100%; // width: 100%;
height: 13.9rem; height: 13.9rem;
border-radius: 2.5rem; border-radius: 2.5rem;
border: 0.2rem solid #f1ecec; border: 0.2rem solid #f1ecec;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
padding: 0 2.5rem; padding: 0 2.5rem;
> * { > * {
margin-right: 2.5rem; margin-right: 2.5rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
> .icon { > .icon {
// margin: 0 2.5rem; // margin: 0 2.5rem;
--svg-icon-color: #ababab; --svg-icon-color: #ababab;
} }
> input { > input {
width: 0; width: 0;
flex: 1; flex: 1;
height: 100%; height: 100%;
font-family: satoshiMedium; font-family: satoshiMedium;
font-size: 3.5rem; font-size: 3.5rem;
color: #000; color: #000;
border: none; border: none;
&::placeholder { &::placeholder {
color: #ababab; color: #ababab;
} }
} }
} }
> .error { > .error {
margin-top: 1rem; margin-top: 1rem;
font-family: satoshiRegular; font-family: satoshiRegular;
font-size: 2.5rem; font-size: 2.5rem;
line-height: 120%; line-height: 120%;
color: #ff0000; color: #ff0000;
} }
} }
> .switch { > .switch {
background-color: transparent; background-color: transparent;
color: #222; color: #222;
} }
> .confirm, > .confirm,
> .edit, > .edit,
> .logout { > .logout {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
> .tip { > .tip {
font-family: satoshiRegular; font-family: satoshiRegular;
text-align: center; text-align: center;
font-size: 3rem; font-size: 3rem;
color: #a1a1a1; color: #a1a1a1;
margin-top: 17.8rem; margin-top: 17.8rem;
} }
} }
} }
.van-popup.user-popup {
height: 116.1rem;
color: #181725;
border-top-left-radius: 7.8rem;
border-top-right-radius: 7.8rem;
.c-svg {
width: initial;
}
.popup-title {
align-items: center;
justify-content: space-between;
font-weight: 700;
font-family: 'satoshiBold';
font-size: 4.8rem;
padding: 12rem 7.4rem 7.8rem 6.7rem;
border-bottom: 0.26rem solid #e2e2e2b2;
}
.cusomter-list {
padding: 0 7rem 0 6.6rem;
font-family: 'satoshiMedium';
color: #000;
/* Fixed list area: show up to 4 items, enable vertical scroll when overflow */
height: 64.8rem; /* 4 * 16.2rem (customer-item height) */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.customer-item {
height: 16.2rem;
border-bottom: 0.26rem solid #e2e2e2b2;
.info {
.name {
font-size: 3.6rem;
}
.id {
font-size: 3.6rem;
color: #b3b3b3;
}
}
.checked-icon,
.check-box {
width: 6rem;
height: 6rem;
box-sizing: border-box;
}
.check {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
border: 0.4rem solid #000;
}
}
}
.confirm-btn {
margin: 4.9rem 12.7rem 0 13.3rem;
border: 0.25rem solid #3b3b3b;
width: 82rem;
height: 14.5rem;
border-radius: 2rem;
font-family: 'satoshiBold';
font-weight: 700;
font-size: 4rem;
line-height: 14.5rem;
box-sizing: border-box;
text-align: center;
}
}
</style> </style>

97
src/views/login/customer.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div <div
class="customer-container safe-area-top flex flex-column" class="customer-container safe-area-top flex flex-column"
:class="{ 'form-mode': pageMode === 'form' }" :class="{ 'form-mode': pageMode !== 'entry' }"
> >
<div class="setting flex flex-between"> <div class="setting flex flex-between">
<SvgIcon name="left" size="70" @click.stop="handleBack" /> <SvgIcon name="left" size="70" @click.stop="handleBack" />
<SvgIcon name="setting" size="70" /> <SvgIcon name="profile_white" size="55" @click="handleOpenProfile" />
</div> </div>
<template v-if="pageMode === 'entry'"> <template v-if="pageMode === 'entry'">
<div class="content flex-1 flex flex-center flex-column"> <div class="content flex-1 flex flex-center flex-column">
<div class="text">Who is Your Customer?</div> <div class="text">Who is Your Customer?</div>
<div class="btn-list flex flex-center"> <div class="btn-list flex flex-center">
<button class="sandblasted-blurred btn"> <button class="sandblasted-blurred btn" @click="handleChangeMode('create')">
<span>Create</span> <span>Create</span>
</button> </button>
<button class="sandblasted-blurred btn" @click="handleChangeMode('form')"> <button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
@@ -23,18 +23,27 @@
<template v-else> <template v-else>
<div class="form-container flex-1 flex flex-column flex-center"> <div class="form-container flex-1 flex flex-column flex-center">
<div class="text"> <div class="text">
<div class="form-title">Customer ID</div> <div class="form-title">{{ formTitle }}</div>
<div class="description"> <div class="description">
<p>Redefine the styling experience with AI.</p> <p>Redefine the styling experience with AI.</p>
<p>Use Styling Angel to speed up your fashion journey.</p> <p>Use Styling Angel to speed up your fashion journey.</p>
</div> </div>
</div> </div>
<div class="glass-form"> <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"> <div class="form-field">
<label class="field-label">Nickname</label> <label class="field-label">Nickname</label>
<input <input
v-model="customerData.vipId" v-model="customerData.nickname"
type="text" type="text"
placeholder="Enter name" placeholder="Enter name"
class="form-input" class="form-input"
@@ -42,41 +51,45 @@
</div> </div>
<button class="confirm-btn" @click="handleConfirm">Confirm</button> <button class="confirm-btn" @click="handleConfirm">Confirm</button>
</div> </div>
<div class="show-all">Show All</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 class="copyright">Powered by AiDLab for Lane Crawford</div>
</div> </div>
</template> </template>
<Profile ref="profileRef" @selected-customer="handleSelectCustomer" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, computed } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useGenerateStore, useUserInfoStore } from '@/stores' import { useGenerateStore, useUserInfoStore } from '@/stores'
import { showToast } from 'vant' import { showToast } from 'vant'
import { customerCheckin } from '@/api/workshop' import { customerCheckin } from '@/api/workshop'
import Profile from '../Workshop/profile.vue'
const profileRef = ref<typeof Profile>(null)
const handleOpenProfile = () => {
profileRef.value.open()
}
const router = useRouter() const router = useRouter()
const generateStore = useGenerateStore() const generateStore = useGenerateStore()
type PageMode = 'form' | 'entry' type PageMode = 'form' | 'entry' | 'create'
const pageMode = ref<PageMode>('entry') const pageMode = ref<PageMode>('entry')
const formTitle = computed(() => {
const handleBack = (e?: Event) => { return pageMode.value === 'entry' ? 'Customer ID' : 'Create Profile'
e.stopPropagation() })
e.preventDefault()
if (pageMode.value === 'form') {
pageMode.value = 'entry'
return
}
router.go(-1)
}
const handleChangeMode = (mode: PageMode) => { const handleChangeMode = (mode: PageMode) => {
pageMode.value = mode pageMode.value = mode
} }
const customerData = ref({ const customerData = ref({
vipId: '' vipId: '',
nickname: ''
// email: '' // email: ''
}) })
@@ -88,14 +101,41 @@ const handleConfirm = async () => {
}) })
return return
} }
if (pageMode.value === 'form') {
await customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
useUserInfoStore().resetGenerateParams()
generateStore.setCustomerInfo(res)
router.push('/workshop/home')
})
} else {
// 创建接口
}
}
customerCheckin(customerData.value).then((res) => { const handleShowPopup = (flag: Boolean) => {
useUserInfoStore().resetGenerateParams() // showPopup.value = flag
// console.log('res', res) profileRef.value.openSwitchCustomerPopup(flag)
generateStore.setCustomerInfo(res) }
// router.push('/workshop/stylist/index')
router.push('/workshop/home') const handleSelectCustomer = (value) => {
}) console.log(value)
// if (selected) {
// customerData.value.nickname = selected.nickname
// }
}
const handleBack = (e?: Event) => {
e.stopPropagation()
e.preventDefault()
if (pageMode.value !== 'entry') {
pageMode.value = 'entry'
customerData.value = {
vipId: '',
nickname: ''
}
return
}
router.go(-1)
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -180,6 +220,9 @@ const handleConfirm = async () => {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.create {
height: 78.8rem;
}
background: radial-gradient( background: radial-gradient(
100% 100% at 0% 0%, 100% 100% at 0% 0%,