服务市场-我的调用-复制

src/views/dataService/serviceMarket/myCall/detail/index.vue

@@ -26,15 +26,6 @@
   import BasicTable from '@/components/Table/src/BasicTable.vue';
   import { useTable } from '@/components/Table';
   import { useRoute, useRouter } from 'vue-router';
-  import {
-    docPageColumn,
-    docQueryColumn,
-    docReturnColumn,
-  } from '@/views/dataService/serviceMarket/serviceSearch/apiDoc/doc.data';
-  import {
-    docPageData,
-    docQueryData,
-  } from '@/views/dataService/serviceMarket/serviceSearch/apiDoc/docData';
   import AddModel from '@/views/dataService/serviceMarket/serviceSearch/apiDetail/addModel.vue';
   import { useModal } from '@/components/Modal';
   import {

src/views/dataService/serviceMarket/myCall/index.vue

@@ -5,10 +5,9 @@
         <Descriptions.Item label="账号"> admin </Descriptions.Item>
         <Descriptions.Item label="用户名称"> admin </Descriptions.Item>
         <Descriptions.Item label="用户token" :span="2">
-          <span
-            >fc68b6929ceb4aad5035d8805cac466716a7edf6f848c2b2e26dfcla47ea4a1241b640016b91eb90bfc0d57517cd7fa3b251fd76cbbefed08f234998b5f7ac</span
-          >
-          <CopyOutlined style="margin-left: 10px" />
+          <span>{{ token }}</span>
+          <CopyOutlined @click="copyText" style="margin-left: 10px" />
+          <span v-if="copySuccess" style="color: #40c397">文本已复制！</span>
         </Descriptions.Item>
         <Descriptions.Item :span="2">
           <span style="color: #979dae; margin-left: 76.2px"
@@ -102,6 +101,24 @@
   import { callData } from '@/views/dataService/serviceMarket/myCall/callData';
 
   const router = useRouter();
+  const token = ref<string>(
+    'fc68b6929ceb4aad5035d8805cac466716a7edf6f848c2b2e26dfcla47ea4a1241b640016b91eb90bfc0d57517cd7fa3b251fd76cbbefed08f234998b5f7ac',
+  );
+  const copySuccess = ref<boolean>(false);
+
+  // 复制文本的方法
+  const copyText = async () => {
+    try {
+      await navigator.clipboard.writeText(token.value);
+      copySuccess.value = true;
+      // 2秒后自动隐藏复制成功提示
+      setTimeout(() => {
+        copySuccess.value = false;
+      }, 2000);
+    } catch (err) {
+      console.error('复制失败', err);
+    }
+  };
   function handleDetail(record) {
     router.push({
       path: '/dataService/serviceMarket/myCall/detail',