style: 样式修改.
bugfix: customer选择页面弹窗触发错误.
This commit is contained in:
@@ -147,6 +147,7 @@ const onScroll = (e: Event) => {
|
|||||||
// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
|
// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
|
||||||
const handleShowPopup = (flag: boolean) => {
|
const handleShowPopup = (flag: boolean) => {
|
||||||
showSwitchCustomerPopup.value = flag
|
showSwitchCustomerPopup.value = flag
|
||||||
|
if(props.isCustomer) return
|
||||||
show.value = !flag
|
show.value = !flag
|
||||||
if (flag) {
|
if (flag) {
|
||||||
loadCustomers(true)
|
loadCustomers(true)
|
||||||
@@ -178,15 +179,15 @@ const handleFetchCustomerList = () => {
|
|||||||
}
|
}
|
||||||
MyEvent.add('update-customer-list', handleFetchCustomerList)
|
MyEvent.add('update-customer-list', handleFetchCustomerList)
|
||||||
|
|
||||||
const openSwitchCustomerPopup = (flag = true) => {
|
// const openSwitchCustomerPopup = (flag = true) => {
|
||||||
showSwitchCustomerPopup.value = flag
|
// showSwitchCustomerPopup.value = flag
|
||||||
}
|
// }
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
handleFetchCustomerList()
|
handleFetchCustomerList()
|
||||||
})
|
})
|
||||||
|
|
||||||
defineExpose({ open, close, openSwitchCustomerPopup })
|
defineExpose({ open, close, handleShowPopup })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -55,6 +55,7 @@ const goToLogin = () => {
|
|||||||
.title {
|
.title {
|
||||||
font-family: 'satoshiMedium';
|
font-family: 'satoshiMedium';
|
||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
|
font-size: 11rem;
|
||||||
// letter-spacing: -0.02em;
|
// letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
|||||||
@@ -74,7 +74,7 @@
|
|||||||
import { ref, computed } 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, closeToast } from 'vant'
|
||||||
import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/api/workshop'
|
import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/api/workshop'
|
||||||
import Profile from '../Workshop/profile.vue'
|
import Profile from '../Workshop/profile.vue'
|
||||||
import MyEvent from '@/utils/myEvent'
|
import MyEvent from '@/utils/myEvent'
|
||||||
@@ -86,6 +86,7 @@ const handleOpenProfile = () => {
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const generateStore = useGenerateStore()
|
const generateStore = useGenerateStore()
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
type PageMode = 'form' | 'entry' | 'create'
|
type PageMode = 'form' | 'entry' | 'create'
|
||||||
const pageMode = ref<PageMode>('entry')
|
const pageMode = ref<PageMode>('entry')
|
||||||
@@ -104,50 +105,45 @@ const customerData = ref({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const handleConfirm = async () => {
|
const handleConfirm = async () => {
|
||||||
if (pageMode.value === 'form') {
|
if (loading.value) return
|
||||||
if (customerData.value.nickname === '') {
|
const nickname = (customerData.value.nickname || '').trim()
|
||||||
showToast({
|
const vipId = (customerData.value.vipId || '').trim()
|
||||||
message: 'please input the nickname'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
|
if (!nickname) {
|
||||||
useUserInfoStore().resetGenerateParams()
|
showToast({ message: 'please input the nickname' })
|
||||||
generateStore.setCustomerInfo(res)
|
return
|
||||||
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({
|
if (pageMode.value === 'create' && !vipId) {
|
||||||
nickname: customerData.value.nickname,
|
showToast({ message: 'please input the VIP ID' })
|
||||||
vipId: customerData.value.vipId
|
return
|
||||||
} as CreateCustomerParams).then((res) => {
|
}
|
||||||
showToast({
|
|
||||||
message: 'Customer created successfully'
|
loading.value = true
|
||||||
})
|
showToast({ message: 'Processing...', duration: 0, type: 'loading' })
|
||||||
handleBack()
|
try {
|
||||||
|
if (pageMode.value === 'create') {
|
||||||
|
await createCustomer({ nickname, vipId } as CreateCustomerParams)
|
||||||
|
showToast({ message: 'Customer created successfully' })
|
||||||
MyEvent.emit('update-customer-list')
|
MyEvent.emit('update-customer-list')
|
||||||
})
|
}
|
||||||
|
|
||||||
|
const res = await customerCheckin({ nickname })
|
||||||
|
useUserInfoStore().resetGenerateParams()
|
||||||
|
generateStore.setCustomerInfo(res)
|
||||||
|
MyEvent.emit('clear-generate-state')
|
||||||
|
router.push('/workshop/home')
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast({ message: err?.message || 'Operation failed' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
closeToast()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleShowPopup = (flag: Boolean) => {
|
const handleShowPopup = (flag: Boolean) => {
|
||||||
// showPopup.value = flag
|
// showPopup.value = flag
|
||||||
profileRef.value.openSwitchCustomerPopup(flag)
|
profileRef.value.handleShowPopup(flag)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSelectCustomer = (value) => {
|
const handleSelectCustomer = (value) => {
|
||||||
|
|||||||
@@ -220,7 +220,7 @@ onUnmounted(() => {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
padding: 6rem 0 0 0;
|
padding: 15.9rem 0 0 0;
|
||||||
.content {
|
.content {
|
||||||
.loading-container {
|
.loading-container {
|
||||||
:deep(.loading-image) {
|
:deep(.loading-image) {
|
||||||
@@ -229,10 +229,11 @@ onUnmounted(() => {
|
|||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
:deep(.loading-shadow) {
|
:deep(.loading-shadow) {
|
||||||
|
background-color: #000;
|
||||||
width: 9.2rem;
|
width: 9.2rem;
|
||||||
height: 2.4rem;
|
height: 2.4rem;
|
||||||
filter: blur(6px);
|
filter: blur(6px);
|
||||||
opacity: 0.5;
|
opacity: 0.2;
|
||||||
margin: 2.4rem 0 0;
|
margin: 2.4rem 0 0;
|
||||||
// background-color: #d9d9d9;
|
// background-color: #d9d9d9;
|
||||||
}
|
}
|
||||||
@@ -247,8 +248,10 @@ onUnmounted(() => {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.12;
|
line-height: 1.12;
|
||||||
background: #b3b3b3;
|
background: #b3b3b3;
|
||||||
background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%),
|
background: radial-gradient(80.79% 50% at 50% 50%, #d1c7c2 0%, rgba(255, 255, 255, 0) 100%),
|
||||||
linear-gradient(344deg, #b3b3b2 16%, #000000 66%);
|
radial-gradient(99.56% 93.08% at 99.56% 93.08%, #e6e6e6 0%, #000000 100%)
|
||||||
|
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||||
|
linear-gradient(120.09deg, #b3b3b3 0%, rgba(255, 255, 255, 0) 35.41%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@@ -325,7 +328,7 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 4.6rem;
|
border-radius: 4.6rem;
|
||||||
padding: 0 2.15rem;
|
padding: 0 2.15rem;
|
||||||
&.active{
|
&.active {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -166,7 +166,7 @@ const handleContinue = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
padding-top: 6rem;
|
padding-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@@ -178,6 +178,8 @@ const handleContinue = () => {
|
|||||||
color: white;
|
color: white;
|
||||||
line-height: 96%;
|
line-height: 96%;
|
||||||
font-family: 'satoshiBold';
|
font-family: 'satoshiBold';
|
||||||
|
letter-spacing: -0.04rem;
|
||||||
|
margin-bottom: 3.2rem;
|
||||||
}
|
}
|
||||||
.sub-title{
|
.sub-title{
|
||||||
font-family: 'satoshiRegular';
|
font-family: 'satoshiRegular';
|
||||||
|
|||||||
@@ -59,11 +59,14 @@ const handleSelect = (value: string) => {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 11rem;
|
font-size: 11rem;
|
||||||
line-height: 106%;
|
line-height: 106%;
|
||||||
|
letter-spacing: -0.02rem;
|
||||||
|
margin-bottom: 4.6rem;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
font-family: 'satoshiRegular';
|
font-family: 'satoshiRegular';
|
||||||
font-size: 4rem;
|
font-size: 6rem;
|
||||||
line-height: 132%;
|
line-height: 132%;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
}
|
}
|
||||||
.select-list {
|
.select-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user