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 router from '/@/router';


const route = useRoute();
const platform = route.query.platform;
const platformOverview: any = ref([]);
// const selectedTab = ref('1');
const platformTableData = ref([]);
const gridOptions: any = reactive({
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: 870,
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons'
      // tools: 'toolbar_tools'
    }
  },
  rowConfig: {
    isHover: 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(() => {
  fetchPlatformDetailOverview();
  fetchPlatformDetail();
});

async function fetchPlatformDetail() {
  const query = {
    platform,
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  };
  const res = await useResponse(query, api.getPlatformDetailTableData, 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();
}

async function fetchPlatformDetailOverview() {
  const res = await useResponse({ platform }, api.getPlatformDetailOverview);
  platformOverview.value = res.data;
}

// function handleTabChange(tabValue: any) {
//   console.log("(PlatformDetail.vue: 82)=> tabValue", tabValue);
//   if (tabValue === '2') {
//     const query = {};
//   }
// }

function handleNavigate(item: any) {
  router.push({
    path: '/shop/detail',
    query: { platform: item.platform }
  });
}

</script>

<template>
  <div class="p-2.5">
    <!-- overview-card -->
    <el-card body-class="flex items-center" shadow="hover" style="border: none">
      <el-image :src="`/src/assets/platformImg/${ platform }.png`" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
        <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 class="text-lg">
        <div class="font-semibold">
          平台名称:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ platformOverview[0]?.platform ? platformOverview[0]?.platform : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          公司:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ platformOverview[0]?.countCompany ? platformOverview[0]?.countCompany : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          店铺:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ platformOverview[0]?.countShop ? platformOverview[0]?.countShop : '--' }}
          </span>
        </div>
        <div class="font-semibold">
          电脑:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ platformOverview[0]?.countComputer ? platformOverview[0]?.countComputer : '--' }}
          </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 #toolbar_buttons>
          <el-radio-group v-model="selectedTab" @change="handleTabChange">
            <el-radio-button label="当前信息" value="1" :icon="Timer">
              <template #default>
                <el-icon style="top: 2px;"><Timer /></el-icon>
                当前信息
              </template>
            </el-radio-button>
            <el-radio-button label="历史记录" value="2" :icon="RefreshLeft">
              <template #default>
                <el-icon style="top: 2px;"><RefreshLeft /></el-icon>
                历史记录
              </template>
            </el-radio-button>
          </el-radio-group>
        </template>-->
        <template #platformNumber="{ row }">
          <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">
            <el-icon>
              <Link/>
            </el-icon>
            {{ row.platformNumber ? row.platformNumber : '--' }}
          </el-button>
        </template>
        <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>