diff --git a/src/components/customer-service-modal.vue b/src/components/customer-service-modal.vue
new file mode 100644
index 0000000..1ce6743
--- /dev/null
+++ b/src/components/customer-service-modal.vue
@@ -0,0 +1,15 @@
+<template>
+  <a-modal v-bind="$attrs" >
+    <template #title>
+      扫描下面二维码联系客户
+    </template>
+    <div class="text-center">
+      <img width="200" src="@/assets/customer-service.svg" alt="" />
+    </div>
+  </a-modal>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue
index c9b0115..4123de3 100644
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@@ -65,14 +65,7 @@
         </a-button>
       </a-popconfirm>
     </div>
-    <a-modal v-model:visible="visible">
-      <template #title>
-        扫描下面二维码联系客户
-      </template>
-      <div class="text-center">
-        <img width="200" src="@/assets/customer-service.svg" alt="" />
-      </div>
-    </a-modal>
+    <CustomerServiceModal v-model:visible="visible" />
   </div>
 </template>
 
@@ -80,6 +73,8 @@
 import { now } from '@vueuse/core';
 import { trialProduct } from '@/api/all';
 import { useRouter } from 'vue-router';
+import CustomerServiceModal from '@/components/customer-service-modal.vue';
+
 const props = defineProps<{
   product: Product;
 }>();