add event option

src/components/CustomerSelector.vue

@@ -1,18 +1,13 @@
 <template>
-	<t-popup v-model="popupVisible" placement="bottom">
-		<div class="customer-selector bg-white">
-			<div class="title-bar">
-				<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
-				<h3 class="title">选择客户</h3>
-				<t-button
-					v-if="isMultiple"
-					theme="primary"
-					variant="text"
-					size="small"
-					@click="confirmSelection"
-				>确定</t-button>
-				<span v-else class="title-placeholder" />
-			</div>
+	<bottom-popup
+		v-model="popupVisible"
+		title="选择客户"
+		height="80vh"
+		:right-button-text="isMultiple ? '确定' : ''"
+		@left-button-click="cancelSelection"
+		@right-button-click="confirmSelection"
+	>
+		<div class="customer-selector">
 			<div class="search-wrapper">
 				<t-input
 					v-model.trim="keyword"
@@ -32,11 +27,12 @@
 				/>
 			</div>
 		</div>
-	</t-popup>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
 import { Scroller } from "timi-web";
+import { BottomPopup } from "timi-tdesign-mobile";
 import CustomerAPI from "@/api/CustomerAPI";
 import CustomerList from "@/components/CustomerList.vue";
 import type { Customer } from "@/types/Customer";
@@ -223,27 +219,9 @@ onUnmounted(() => {
 <style scoped lang="less">
 .customer-selector {
 	display: flex;
-	height: 80vh;
-	padding-top: 1rem;
-	border-radius: 1.25rem 1.25rem 0 0;
+	height: 100%;
 	flex-direction: column;
 
-	.title-bar {
-		padding: 0 1rem;
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
-	}
-
-	.title {
-		margin: 0;
-		text-align: center;
-	}
-
-	.title-placeholder {
-		height: 1px;
-	}
-
 	.search-wrapper {
 		z-index: 1;
 		padding: 1rem 0 .5rem 0;