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

src/views/login/customer.vue

@@ -1,17 +1,17 @@
 <template>
   <div
     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">
       <SvgIcon name="left" size="70" @click.stop="handleBack" />
-      <SvgIcon name="setting" size="70" />
+      <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">
+          <button class="sandblasted-blurred btn" @click="handleChangeMode('create')">
             <span>Create</span>
           </button>
           <button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
@@ -23,18 +23,27 @@
     <template v-else>
       <div class="form-container flex-1 flex flex-column flex-center">
         <div class="text">
-          <div class="form-title">Customer ID</div>
+          <div class="form-title">{{ formTitle }}</div>
           <div class="description">
             <p>Redefine the styling experience with AI.</p>
             <p>Use Styling Angel to speed up your fashion journey.</p>
           </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">
             <label class="field-label">Nickname</label>
             <input
-              v-model="customerData.vipId"
+              v-model="customerData.nickname"
               type="text"
               placeholder="Enter name"
               class="form-input"
@@ -42,41 +51,45 @@
           </div>
           <button class="confirm-btn" @click="handleConfirm">Confirm</button>
         </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>
     </template>
+
+    <Profile ref="profileRef" @selected-customer="handleSelectCustomer" />
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGenerateStore, useUserInfoStore } from '@/stores'
 import { showToast } from 'vant'
 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 generateStore = useGenerateStore()
 
-type PageMode = 'form' | 'entry'
+type PageMode = 'form' | 'entry' | 'create'
 const pageMode = ref<PageMode>('entry')
-
-const handleBack = (e?: Event) => {
-  e.stopPropagation()
-  e.preventDefault()
-  if (pageMode.value === 'form') {
-    pageMode.value = 'entry'
-    return
-  }
-  router.go(-1)
-}
+const formTitle = computed(() => {
+  return pageMode.value === 'entry' ? 'Customer ID' : 'Create Profile'
+})
 
 const handleChangeMode = (mode: PageMode) => {
   pageMode.value = mode
 }
 
 const customerData = ref({
-  vipId: ''
+  vipId: '',
+  nickname: ''
   // email: ''
 })
 
@@ -88,14 +101,41 @@ const handleConfirm = async () => {
     })
     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) => {
-    useUserInfoStore().resetGenerateParams()
-    // console.log('res', res)
-    generateStore.setCustomerInfo(res)
-    // router.push('/workshop/stylist/index')
-    router.push('/workshop/home')
-  })
+const handleShowPopup = (flag: Boolean) => {
+  // showPopup.value = flag
+  profileRef.value.openSwitchCustomerPopup(flag)
+}
+
+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>
 <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);
       display: flex;
       flex-direction: column;
+      &.create {
+        height: 78.8rem;
+      }
 
       background: radial-gradient(
         100% 100% at 0% 0%,