ams_web/src/views/shop-information/components/PlatformDetail.vue

<script lang="ts" setup>
/**
 * @Name: PlatformDetail.vue
 * @Description: 平台详情页
 * @Author: Cheney
 */

import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { columns } from '../useColumns';
// import img from '/src/assets/img/headerImage.png'

const route = useRoute();
const platform = route.query.platform;
const platformTableData = ref([]);

const gridOptions: any = reactive({
  border: false,
  round: true,
  height: 800,
  toolbarConfig: {
    custom: true
  },
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    total: 0,
    page: 1,
    limit: 10
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: columns,
  data: platformTableData
});

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

async function fetchPlatformDetail() {
  const query = {
    platform,
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  }
  const res = await useResponse(query, api.getPlatformDetail, gridOptions);
  gridOptions.pagerConfig.total = res.total;
  gridOptions.pagerConfig.page = res.page;
  gridOptions.pagerConfig.limit = res.limit;
  platformTableData.value = res.data;
}

function pageChange({ pageSize, currentPage }: any) {
  gridOptions.pagerConfig.limit = pageSize;
  gridOptions.pagerConfig.page = currentPage;
  fetchPlatformDetail();
}
</script>

<template>
  <div class="p-2.5">
    <!-- overview-card -->
    <el-card body-class="flex items-center" shadow="hover" style="border: none;">
      <el-image
          class="mr-5"
          src="/src/assets/img/headerImage.png"
          style="height: 100px; width: 100px; object-fit: cover;"
      >
        <template #error>
          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5;">
            <el-icon>
              <icon-picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
      <div>
        <div class="font-semibold">店铺编号/名称:
          <span class="font-medium italic" style="color: #64748b">
              123456789
            </span>
        </div>
        <div class="font-semibold">所属公司:
          <span class="font-medium italic" style="color: #64748b">
              123456789
            </span>
        </div>
        <div class="font-semibold">平台数:
          <span class="font-medium italic" style="color: #64748b">
              123456789
            </span>
        </div>
        <div class="font-semibold">电脑数:
          <span class="font-medium italic" style="color: #64748b">
              123456789
            </span>
        </div>
      </div>
    </el-card>
    <!-- table-card -->
    <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none;">
      <vxe-grid v-bind="gridOptions">
        <template #pager>
          <vxe-pager
              v-model:currentPage="gridOptions.pagerConfig.page"
              v-model:pageSize="gridOptions.pagerConfig.limit"
              :total="gridOptions.pagerConfig.total"
              @page-change="pageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </el-card>
  </div>

</template>

<style scoped>

</style>