feat: 获取顾客列表&新建顾客

src/views/Workshop/profile.vue

@@ -4,6 +4,9 @@ import router from '@/router'
 import { showConfirmDialog } from 'vant'
 import { useUserInfoStore, useOverallStore } from '@/stores'
 import { LogOut } from '@/api/login'
+import { getCustomerList, type CustomerListParams } from '@/api/workshop'
+import MyEvent from '@/utils/myEvent'
+
 const userInfoStore = useUserInfoStore()
 const overallStore = useOverallStore()
 const emit = defineEmits(['view-type', 'selected-customer'])
@@ -60,22 +63,84 @@ const logout = () => {
 }
 
 const showSwitchCustomerPopup = ref(false)
+const custmerParams = ref<CustomerListParams>({
+  current: 1,
+  size: 5,
+  desc: true
+})
+const customerList = ref<any[]>([])
+const pager = reactive({
+  loading: false,
+  noMore: false,
+  total: null as number | null
+})
+const customerListEl = ref<HTMLElement | null>(null)
 
-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 }
-])
+const loadCustomers = async (reset = false) => {
+  if (pager.loading) return
+  if (reset) {
+    custmerParams.value.current = 1
+    pager.noMore = false
+    customerList.value = []
+  }
+  if (pager.noMore) return
+  pager.loading = true
+  try {
+    const res: any = await getCustomerList(custmerParams.value)
+    let list: any[] = []
+    const pages = res?.pages ?? res?.data?.pages ?? null
+    if (res && Array.isArray(res.records)) {
+      list = res.records
+      pager.total = res.total ?? pager.total
+    } else if (res && Array.isArray(res.data)) {
+      list = res.data
+    } else if (res && res.data && Array.isArray(res.data.list)) {
+      list = res.data.list
+      pager.total = res.data.total ?? pager.total
+    }
+
+    if (reset) customerList.value = list
+    else customerList.value = customerList.value.concat(list)
+
+    if (pages != null) {
+      if (custmerParams.value.current >= pages) {
+        pager.noMore = true
+      } else {
+        custmerParams.value.current += 1
+      }
+    } else {
+      if (list.length === 0 || list.length < custmerParams.value.size) {
+        pager.noMore = true
+      } else {
+        custmerParams.value.current += 1
+      }
+    }
+  } catch (e) {
+    // ignore error for now
+  } finally {
+    pager.loading = false
+  }
+}
+
+const onScroll = (e: Event) => {
+  const el = e.target as HTMLElement
+  if (!el) return
+  if (pager.loading || pager.noMore) return
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
+    loadCustomers(false)
+  }
+}
 // 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
 const handleShowPopup = (flag: boolean) => {
   showSwitchCustomerPopup.value = flag
-	show.value = !flag
+  show.value = !flag
+  if (flag) {
+    loadCustomers(true)
+  }
 }
 const handleChangeChecked = (item) => {
   customerList.value.forEach((customer) => {
-    customer.checked = customer.id === item.id
+    customer.checked = customer.vipId === item.vipId
   })
 }
 const handleSelectCustomer = () => {
@@ -86,10 +151,19 @@ const handleSelectCustomer = () => {
   showSwitchCustomerPopup.value = false
 }
 
+const handleFetchCustomerList = () => {
+  loadCustomers(true)
+}
+MyEvent.add('update-customer-list', handleFetchCustomerList)
+
 const openSwitchCustomerPopup = (flag = true) => {
   showSwitchCustomerPopup.value = flag
 }
 
+onMounted(() => {
+  handleFetchCustomerList()
+})
+
 defineExpose({ open, close, openSwitchCustomerPopup })
 </script>
 
@@ -185,16 +259,16 @@ defineExpose({ open, close, openSwitchCustomerPopup })
       <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 ref="customerListEl" class="cusomter-list" @scroll="onScroll">
       <div
         class="customer-item flex flex-align-center flex-between"
-        v-for="item in customerList"
-        :key="item.id"
+        v-for="(item, index) in customerList"
+        :key="index + 'customer'"
         @click="handleChangeChecked(item)"
       >
         <div class="info">
-          <div class="name">{{ item.nickname }}</div>
-          <div class="id">{{ item.id }}</div>
+          <div class="name">{{ item.name }}</div>
+          <div class="id">{{ item.vipId }}</div>
         </div>
         <div class="select-box">
           <div class="check-box flex flex-center" v-show="!item.checked">
@@ -204,6 +278,10 @@ defineExpose({ open, close, openSwitchCustomerPopup })
         </div>
       </div>
     </div>
+    <div class="list-footer">
+      <div v-if="pager.loading">Loading...</div>
+      <div v-else-if="pager.noMore">No more</div>
+    </div>
     <div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
   </van-popup>
 </template>
@@ -375,6 +453,12 @@ defineExpose({ open, close, openSwitchCustomerPopup })
       }
     }
   }
+  .list-footer {
+    text-align: center;
+    padding: 2rem 0;
+    font-size: 3rem;
+    color: #9b9b9b;
+  }
   .confirm-btn {
     margin: 4.9rem 12.7rem 0 13.3rem;
     border: 0.25rem solid #3b3b3b;

src/views/login/customer.vue

@@ -66,8 +66,10 @@ 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 { 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 = () => {
@@ -94,21 +96,43 @@ const customerData = ref({
 })
 
 const handleConfirm = async () => {
-  if (customerData.value.vipId === '') {
-    showToast({
-      message: 'please input name and email',
-      position: 'top'
-    })
-    return
-  }
   if (pageMode.value === 'form') {
-    await customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
+    if (customerData.value.nickname === '') {
+      showToast({
+        message: 'please input the nickname'
+      })
+      return
+    }
+
+    customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
       useUserInfoStore().resetGenerateParams()
       generateStore.setCustomerInfo(res)
       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')
+    })
   }
 }
 
@@ -118,15 +142,16 @@ const handleShowPopup = (flag: Boolean) => {
 }
 
 const handleSelectCustomer = (value) => {
-  console.log(value)
-  // if (selected) {
-  //   customerData.value.nickname = selected.nickname
-  // }
+  if (value) {
+    customerData.value.nickname = value.name
+  }
 }
 
 const handleBack = (e?: Event) => {
-  e.stopPropagation()
-  e.preventDefault()
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
   if (pageMode.value !== 'entry') {
     pageMode.value = 'entry'
     customerData.value = {