style: 选择顾客弹窗

src/views/Workshop/profile.vue

@@ -1,55 +1,55 @@
 <script setup lang="ts">
-	import { ref, reactive, onMounted, inject } from 'vue'
-	import router from '@/router'
-	import { showConfirmDialog, showToast } from 'vant'
-	import { useUserInfoStore, useOverallStore } from '@/stores'
-	import { LogOut } from '@/api/login'
-	import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
-	import MyEvent from '@/utils/myEvent'
-	import { encryptPassword } from '@/utils/tools'
-	import { updateUserInfo } from '@/api/login'
+import { ref, reactive, onMounted, inject } from 'vue'
+import router from '@/router'
+import { showConfirmDialog, showToast } from 'vant'
+import { useUserInfoStore, useOverallStore } from '@/stores'
+import { LogOut } from '@/api/login'
+import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
+import MyEvent from '@/utils/myEvent'
+import { encryptPassword } from '@/utils/tools'
+import { updateUserInfo } from '@/api/login'
 
-	const props = defineProps<{
+const props = defineProps<{
   isCustomer?: boolean
-	}>()
+}>()
 
-	const userInfoStore = useUserInfoStore()
-	const overallStore = useOverallStore()
-	const emit = defineEmits(['view-type', 'selected-customer'])
-	const show = ref(false)
-	const isEdit = ref(false)
-	const form = reactive({
+const userInfoStore = useUserInfoStore()
+const overallStore = useOverallStore()
+const emit = defineEmits(['view-type', 'selected-customer'])
+const show = ref(false)
+const isEdit = ref(false)
+const form = reactive({
   name: { msg: '', value: '' },
   email: { msg: '', value: '' },
   password: { show: true, msg: '', value: '' }
-	})
-	const open = () => {
+})
+const open = () => {
   form.name.value = userInfoStore.state.userInfo.username
   form.email.value = userInfoStore.state.userInfo.email
   form.password.value = ''
   isEdit.value = false
   show.value = true
-	}
-	const close = () => {
+}
+const close = () => {
   show.value = false
-	}
-	const onEditItem = (item) => {
+}
+const onEditItem = (item) => {
   if (!form[item]) return
   form[item].edit = true
-	}
-	const onSaveItem = (item) => {
+}
+const onSaveItem = (item) => {
   if (!form[item]) return
   form[item].edit = false
-	}
-	const switchCustomer = () => {
+}
+const switchCustomer = () => {
   // console.log('switchCustomer')
   handleShowPopup(true)
-	}
-	const edit = () => {
+}
+const edit = () => {
   form.password.value = ''
   isEdit.value = true
-	}
-	const confirm = () => {
+}
+const confirm = () => {
   if (!isEdit.value) return
   const password = form.password.value
   const params = {
@@ -78,8 +78,8 @@
     form.password.value = ''
     isEdit.value = false
   })
-	}
-	const logout = () => {
+}
+const logout = () => {
   showConfirmDialog({
     title: 'Log out',
     message: 'Are you sure you want to log out?',
@@ -93,23 +93,23 @@
       })
     })
     .catch(() => {})
-	}
+}
 
-	const showSwitchCustomerPopup = ref(false)
-	const custmerParams = ref<CustomerListParams>({
+const showSwitchCustomerPopup = ref(false)
+const custmerParams = ref<CustomerListParams>({
   current: 1,
   size: 5,
   desc: true
-	})
-	const customerList = ref<any[]>([])
-	const pager = reactive({
+})
+const customerList = ref<any[]>([])
+const pager = reactive({
   loading: false,
   noMore: false,
   total: null as number | null
-	})
-	const customerListEl = ref<HTMLElement | null>(null)
+})
+const customerListEl = ref<HTMLElement | null>(null)
 
-	const loadCustomers = async (reset = false) => {
+const loadCustomers = async (reset = false) => {
   if (pager.loading) return
   if (reset) {
     custmerParams.value.current = 1
@@ -153,7 +153,7 @@
   } finally {
     pager.loading = false
   }
-	}
+}
 
 const onScroll = (e: Event) => {
   const el = e.target as HTMLElement
@@ -166,7 +166,7 @@ const onScroll = (e: Event) => {
 // 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
 const handleShowPopup = (flag: boolean) => {
   showSwitchCustomerPopup.value = flag
-  if(props.isCustomer) return
+  if (props.isCustomer) return
   show.value = !flag
   if (flag) {
     loadCustomers(true)
@@ -182,7 +182,7 @@ const handleSelectCustomer = () => {
   if (selectedCustomer) {
     emit('selected-customer', selectedCustomer)
   }
-  if(!props.isCustomer){
+  if (!props.isCustomer) {
     // show.value = true
     customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
       useUserInfoStore().resetGenerateParams()
@@ -193,18 +193,18 @@ const handleSelectCustomer = () => {
   showSwitchCustomerPopup.value = false
 }
 
-	const handleFetchCustomerList = () => {
+const handleFetchCustomerList = () => {
   loadCustomers(true)
-	}
-	MyEvent.add('update-customer-list', handleFetchCustomerList)
+}
+MyEvent.add('update-customer-list', handleFetchCustomerList)
 
 // const openSwitchCustomerPopup = (flag = true) => {
 //   showSwitchCustomerPopup.value = flag
 // }
 
-	onMounted(() => {
+onMounted(() => {
   handleFetchCustomerList()
-	})
+})
 
 defineExpose({ open, close, handleShowPopup })
 </script>
@@ -320,21 +320,22 @@ defineExpose({ open, close, handleShowPopup })
           <img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
         </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>
     <div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
+    <div class="van-safe-area-bottom"></div>
   </van-popup>
 </template>
 
 <style scoped lang="less">
-	.van-popup {
+.van-popup {
   max-height: 90%;
   --van-popup-round-radius: 7.8rem;
-	}
-	.profile {
+}
+.profile {
   margin: 6.5rem 0;
   display: flex;
   flex-direction: column;
@@ -443,9 +444,9 @@ defineExpose({ open, close, handleShowPopup })
       margin-top: 17.8rem;
     }
   }
-	}
+}
 
-	.van-popup.user-popup {
+.van-popup.user-popup {
   height: 116.1rem;
   color: #181725;
   border-top-left-radius: 7.8rem;
@@ -515,5 +516,5 @@ defineExpose({ open, close, handleShowPopup })
     box-sizing: border-box;
     text-align: center;
   }
-	}
+}
 </style>