refactor(components): 将客户联系二维码模态框抽离为独立组件

- 从 product.vue 中移除模态框代码
- 新建 customer-service-modal.vue 组件
- 在 product.vue 中引入并使用新的 CustomerServiceModal 组件

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>

src/views/components/workplace/modules/product.vue

@@ -65,14 +65,7 @@
         </a-button>
       </a-popconfirm>
     </div>
-    <a-modal v-model:visible="visible">
+    <CustomerServiceModal v-model:visible="visible" />
-      <template #title>
-        扫描下面二维码联系客户
-      </template>
-      <div class="text-center">
-        <img width="200" src="@/assets/customer-service.svg" alt="" />
-      </div>
-    </a-modal>
   </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;
 }>();