1

src/pages/CreationRecord/components/MappingRecord.vue

+<template>
+  <CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable>
+</template>
+
+<script lang="ts" setup>
+import CustomTTable from '@/components/custom/TTable.vue';
+import { reactive } from 'vue';
+const RecordList = reactive({
+  // 绘图列表
+  list: [],
+});
+// 绘图记录
+const columns = [
+  {
+    title: '账号',
+    colKey: 'name',
+  },
+  {
+    title: '套餐',
+    colKey: 'packages',
+    align: 'center',
+    className: 'n_quantity',
+  },
+  {
+    title: '状况',
+    colKey: 'n_funds',
+    align: 'center',
+    className: 'n_funds',
+  },
+  {
+    title: '到期时间',
+    colKey: 'operation',
+    align: 'right',
+  },
+];
+</script>
+
+<style lang="less"></style>

src/pages/CreationRecord/index.vue

@@ -5,20 +5,34 @@
         :class="{
           active: item.value == DefaultTable,
         }"
+        @click="changeTable(item)"
         v-for="item in label_list"
         :key="item.value"
         >{{ item.label }}</span
       >
     </div>
-    <CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable>
+    <div v-show="DefaultTable == 'img'">
+      <MappingRecord></MappingRecord>
+    </div>
+    <template v-if="is_first">
+      <div v-show="DefaultTable == 'text'">
+        <CustomTTable
+          :columns="columns2"
+          :list="RecordList.textlist"
+        ></CustomTTable>
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import CustomTTable from '@/components/custom/TTable.vue';
+import MappingRecord from './components/MappingRecord.vue';
 import { reactive, ref } from 'vue';
 // 默认展示绘图记录
 const DefaultTable = ref<'img' | 'text'>('img');
+const is_first = ref(false);
+
 const RecordList = reactive({
   // 绘图列表
   list: [],
@@ -35,7 +49,9 @@ const label_list = [
     value: 'text',
   },
 ];
-const columns = [
+
+// 文案记录
+const columns2 = [
   {
     title: '账号',
     colKey: 'name',
@@ -58,6 +74,10 @@ const columns = [
     align: 'right',
   },
 ];
+const changeTable = (item: any) => {
+  is_first.value = true;
+  DefaultTable.value = item.value;
+};
 </script>
 
 <style lang="less">
@@ -68,8 +88,13 @@ const columns = [
     font-weight: 600;
     font-size: @font-size-18;
     margin-bottom: 16px;
+    transition: all 0.3s;
     .active {
       color: #00f9f9;
+      transition: all 0.3s;
+    }
+    span {
+      cursor: pointer;
     }
     & > :not(:first-child) {
       margin-left: 12px;