✨ feat: 店铺信息概览UI升级

src/utils/useResponse.ts

@@ -7,7 +7,7 @@
 export async function useResponse(
     parameter: any = {},
     requestApi: any,
-    loadingOrOptions: Ref<boolean> | { loading?: boolean, value?: { loading: boolean } } | any
+    loadingOrOptions?: Ref<boolean> | { loading?: boolean, value?: { loading: boolean } } | any
 ) {
   const setLoading = (value: boolean) => {
     if (isRef(loadingOrOptions)) {

src/views/shop-information/api.ts

@@ -11,10 +11,18 @@ export function getCardData(query: any) {
   });
 }
 
-export function getPlatformDetail(query: any) {
+export function getPlatformDetailTableData(query: any) {
   return request({
     url: apiPrefix,
     method: 'GET',
     params: query,
   });
 }
+
+export function getPlatformDetailOverview(query: any) {
+  return request({
+    url: apiPrefix + 'platform/',
+    method: 'GET',
+    params: query,
+  });
+}

src/views/shop-information/components/InfoCard.vue

@@ -5,56 +5,90 @@
  * @Author: Cheney
  */
 
+import { inject, ref, Ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElCard, ElCol, ElDescriptions, ElIcon, ElRow } from 'element-plus';
+import { GoodsFilled, Picture as IconPicture, Search, Shop } from '@element-plus/icons-vue';
+
+
 const router = useRouter();
 const cardData = inject<Ref>('cardData', ref({}));
 
 function handleNavigate(item: any) {
   router.push({
     path: '/shop/platform/detail',
-    query: { platform: item.platform }  // 将 platform 作为查询参数传递
+    query: { platform: item.platform }
   });
 }
+
+function getImageSrc(platform: string) {
+  try {
+    return new URL(`/src/assets/platformImg/${ platform }.png`, import.meta.url).href;
+  } catch (error) {
+    // 如果图片不存在，返回一个默认图片
+    return new URL(`/src/assets/platformImg/default.png`, import.meta.url).href;
+  }
+}
+
 </script>
 
 <template>
-  <el-row :gutter="10">
-    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="8" :sm="8" :xl="4" :xs="12" class="my-1.5">
-      <el-card shadow="hover" body-style="padding: 10px 10px 10px 20px">
+  <el-row :gutter="20">
+    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="8" :sm="8" :xl="4" :xs="12" class="my-2.5">
+      <el-card body-style="padding: 0px 10px 0px 10px" shadow="hover">
         <el-descriptions>
           <template #title>
-            <!--<el-icon style="top: 4px; margin-right: 5px; font-size: 1.2rem"><Flag /></el-icon>-->
-            <el-link :underline="false" class="italic" style="font-size: 1.25rem; font-weight: 500" type="primary"
-                     @click="handleNavigate(item)">
-              {{ item.platform }}
-            </el-link>
-            <hr style="box-shadow: 0 0 8px #ccc">
+            <el-image :src="getImageSrc(item.platform)" class="my-2.5 rounded-2xl" fit="contain" style="width: 60px; height: 60px">
+              <template #error>
+                <div class="flex justify-center items-center" style="width: 60px; height: 60px; font-size: 4rem">
+                  <el-icon>
+                    <icon-picture/>
+                  </el-icon>
+                </div>
+              </template>
+            </el-image>
+            <div class="text-xl mb-2">{{ item.platform }}</div>
+            <hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
           </template>
-          <el-descriptions-item label="店铺">
-            <template #label>
-              <el-icon style="top: 2px; margin-right: 6px; font-size: 1.2rem"><Shop /></el-icon>
-              <span class="font-medium text-xl">店铺</span>
-            </template>
-            <span class="font-bold text-2xl italic">
+        </el-descriptions>
+        <div class="flex justify-evenly mb-2.5">
+          <div>
+            <el-icon style="top: 2px; margin-right: 6px; font-size: 1.2rem">
+              <Shop/>
+            </el-icon>
+            <span class="font-medium text-lg mr-2">店铺</span>
+            <span class="font-medium text-xl italic">
               {{ item.countShop }}
             </span>
-          </el-descriptions-item>
-          <!--<el-descriptions-item style="width: 50px"> | </el-descriptions-item>-->
-          <el-descriptions-item label="公司">
-            <template #label>
-              <el-icon style="top: 2px; margin-right: 5px; font-size: 1.2rem"><GoodsFilled /></el-icon>
-              <span class="font-medium text-xl">公司</span>
-            </template>
-            <span class="font-bold text-2xl italic">
+          </div>
+          <div>
+            <el-icon style="top: 2px; margin-right: 5px; font-size: 1.2rem">
+              <GoodsFilled/>
+            </el-icon>
+            <span class="font-medium text-lg mr-2">公司</span>
+            <span class="font-medium text-xl italic">
               {{ item.countCompany }}
             </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <hr style="box-shadow: 0 0 8px #ccc">
+          </div>
+        </div>
+        <template #footer>
+          <div style="text-align: center; padding: 0 10px">
+            <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="handleNavigate(item)">查看详情</el-button>
+          </div>
+        </template>
       </el-card>
     </el-col>
   </el-row>
 </template>
 
 <style scoped>
+:deep(.el-descriptions__header .el-descriptions__title) {
+  flex: 1;
+  text-align: center;
+}
 
+:deep(.el-card__footer) {
+  border-top: none;
+  padding: 0 0 10px 0;
+}
 </style>

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

@@ -13,15 +13,20 @@ import { columns } from '../useColumns';
 
 const route = useRoute();
 const platform = route.query.platform;
+const platformOverview: any = ref([]);
 const platformTableData = ref([]);
-
 const gridOptions: any = reactive({
   border: false,
   round: true,
-  height: 800,
+  stripe: true,
+  currentRowHighLight: true,
+  height: 870,
   toolbarConfig: {
     custom: true
   },
+  rowConfig: {
+    isHover: true
+  },
   columnConfig: {
     resizable: true
   },
@@ -40,6 +45,7 @@ const gridOptions: any = reactive({
 });
 
 onBeforeMount(() => {
+  fetchPlatformDetailOverview();
   fetchPlatformDetail();
 });
 
@@ -48,8 +54,8 @@ async function fetchPlatformDetail() {
     platform,
     page: gridOptions.pagerConfig.page,
     limit: gridOptions.pagerConfig.limit
-  }
-  const res = await useResponse(query, api.getPlatformDetail, gridOptions);
+  };
+  const res = await useResponse(query, api.getPlatformDetailTableData, gridOptions);
   gridOptions.pagerConfig.total = res.total;
   gridOptions.pagerConfig.page = res.page;
   gridOptions.pagerConfig.limit = res.limit;
@@ -61,19 +67,21 @@ function pageChange({ pageSize, currentPage }: any) {
   gridOptions.pagerConfig.page = currentPage;
   fetchPlatformDetail();
 }
+
+async function fetchPlatformDetailOverview() {
+  const res = await useResponse({ platform }, api.getPlatformDetailOverview);
+  platformOverview.value = res.data;
+  console.log('(PlatformDetail.vue: 75)=> platformOverview.value', platformOverview.value);
+}
 </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;"
-      >
+    <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;">
+          <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>
@@ -81,45 +89,45 @@ function pageChange({ pageSize, currentPage }: any) {
         </template>
       </el-image>
       <div>
-        <div class="font-semibold">店铺编号/名称:
-          <span class="font-medium italic" style="color: #64748b">
-              123456789
-            </span>
+        <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" style="color: #64748b">
-              123456789
-            </span>
+        <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" style="color: #64748b">
-              123456789
-            </span>
+        <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" style="color: #64748b">
-              123456789
-            </span>
+        <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;">
+    <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">
+              @page-change="pageChange"
+          >
           </vxe-pager>
         </template>
       </vxe-grid>
     </el-card>
   </div>
-
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>