优化

src/views/marketing_center/recharge_exchange/components/record.vue

@@ -39,7 +39,14 @@
       </div>
       <div class="row mt14">
         <el-table :data="tableData.list" border stripe v-loading="tableData.loading" height="300px">
-          <el-table-column label="兑换码" prop="code" />
+          <el-table-column label="兑换码" prop="code">
+            <template #default="scope">
+              <div class="center" @click="copyHandle(scope.row.code)">
+                <el-text>{{ scope.row.code }}</el-text>
+                <el-link type="primary">复制</el-link>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="状态" prop="status" width="100">
             <template #default="scope">
               <el-tag disable-transitions :type="statusList.find(item => item.value === scope.row.status).type">
@@ -48,7 +55,14 @@
             </template>
           </el-table-column>
           <el-table-column label="兑换时间" prop="redemptionTime" />
-          <el-table-column label="兑换用户" prop="nickName" />
+          <el-table-column label="兑换用户" prop="nickName">
+            <template #default="scope">
+              <div class="column">
+                <span>{{ scope.row.nickName }}</span>
+                <span>{{ scope.row.phone }}</span>
+              </div>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
       <div class="row mt14">
@@ -66,6 +80,8 @@ import { ref } from "vue";
 import add from "./add.vue";
 import { rechargeRedemptionCodeList, rechargeRedemptionDetail, rechargeRedemptionExport } from "@/api/coupon/index.js";
 import { downloadFile } from "@/utils/index";
+import useClipboard from "vue-clipboard3";
+const { toClipboard } = useClipboard();
 
 const emit = defineEmits(['update']);
 const addRef = ref(null);
@@ -94,6 +110,21 @@ const resetForm = () => {
   };
 };
 
+// 复制
+async function copyHandle(text) {
+  try {
+    await toClipboard(text);
+    ElNotification({
+      title: "成功",
+      message: `复制成功`,
+      type: "success",
+    });
+    console.log("Copied to clipboard");
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 // 关闭
 function closedHandle() {
   resetForm();
@@ -220,4 +251,15 @@ defineExpose({
     margin-top: 14px;
   }
 }
+
+.center {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
 </style>