lanecarford_front/src/views/login/customer.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' ? '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;
      }
    }
  }

  .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>