lanecarford_front/src/views/stylist/customer.vue

<template>
  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
    <template v-if="pageMode === 'entry'">
      <div class="setting flex flex-between">
        <van-icon name="arrow-left" color="#fff" @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="back-container flex flex-center" @click="handleChangeMode('entry')">
          <van-icon name="arrow-left" color="#fff"  />
        </div>
        <div class="text">
          <div class="form-title">Entry ID</div>
          <div class="description">
            Redefine the styling experience with AI.<br />
            Use Styling Angel to speed up your fashion journey.
          </div>
        </div>

        <div class="glass-form">
          <div class="form-field">
            <label class="field-label">VIP ID</label>
            <input v-model="customerData.name" 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, onMounted } 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>('entry')

const handleBack = () => {
  router.go(-1)
}

const handleChangeMode = (mode: PageMode) => {
  pageMode.value = mode
}

const customerData = ref({
  name: '',
  email: ''
})

const handleConfirm = async () => {
  if (customerData.value.name === '' || customerData.value.email === '') {
    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('/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;
    padding-top: 21.47rem;
  }

  .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: .2rem solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4rem;
    }
  }
  .entry-btn {
    position: absolute;
    border: .2rem solid #fff;
    bottom: 10.3rem;
    right: 5.5rem;
    height: 9rem;
    width: 27.5rem;
    line-height: 9rem;
    font-size: 5.6rem;
  }

  .form-container {
    .back-container {
      width: 7.3rem;
      height: 7.3rem;
      border: .2rem solid #fff;
      border-radius: 1.8rem;
      font-size: 4.3rem;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      -moz-backdrop-filter: blur(20px);
      -ms-backdrop-filter: blur(20px);
      -o-backdrop-filter: blur(20px);
      margin-left: 7rem;
      position: relative;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;

      .back-icon {
        width: 2.08rem;
        height: 3.47rem;
      }
    }
    .text {
      padding-left: 15.2rem;
      margin-top: 7.9rem;
      letter-spacing: 0.02rem;
    }
    .form-title {
      font-family: 'satoshiBold';
      font-size: 11rem;
      line-height: 1.24em;
    }
    .description {
      font-size: 3rem;
      line-height: 141%;
      letter-spacing: 0.08rem;
      margin-top: 2.7rem;
      font-family: 'satoshiRegular';
    }

    .glass-form {
      height: 84.8rem;
      border: .2rem solid #ffffff;
      border-radius: 4.7rem;
      margin: 0 14.2rem;
      padding: 8.2rem 7.9rem;
      margin-top: 7.5rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);

      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);

      .form-field {
        margin-bottom: 3.6rem;
        &.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: .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 .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.7rem;
      text-align: center;
      font-weight: 400;
      margin-top: 18.7rem;
    }
  }
}
</style>