ams_web/src/views/shop-information/index.vue

<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 店铺信息页面
 * @Author: Cheney
 */

import InfoCard from '/@/views/shop-information/components/InfoCard.vue';
import * as api from '/@/views/shop-information/api';
import { useResponse } from '/@/utils/useResponse';
import DataTable from './components/DataTable.vue';


const cardData = ref();
provide('cardData', cardData);

const loading = ref(false);

const activeName = ref('first');

onBeforeMount(() => {
  initData();
});

async function initData() {
  const res = await useResponse({}, api.getCardData, loading);
  cardData.value = res.data;
}
</script>

<template>
  <div class="flex flex-col px-5">
    <el-divider content-position="left">
      <div class="font-bold text-xl">店铺信息概览</div>
    </el-divider>
    <!-- 添加 flex-grow 类，确保 el-card 占据剩余空间 -->
    <el-card v-loading="loading" class="flex-grow" shadow="never">
      <el-tabs v-model="activeName">
        <el-tab-pane label="信息概览" name="first">
          <InfoCard />
        </el-tab-pane>
        <el-tab-pane label="信息汇总" name="second">
          <DataTable ref="table" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>
:deep(.el-divider__text.is-left) {
  background-color: #F5F5F5;
}
</style>