✨ feat: 新增店铺详情页; 平台详情页面字段更新; layout-main背景颜色修改

src/theme/app.scss

@@ -77,7 +77,8 @@ body,
 		overflow: hidden;
 		width: 100%;
 		//background-color: var(--next-bg-main-color);
-		background-color: #f5f5f5;
+		//background-color: #f5f5f5;
+		background-color: #F4F5FC;
 		display: flex;
 		flex-direction: column;
 		// 内层 el-scrollbar样式，用于界面高度自适应（main.vue）

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

@@ -22,12 +22,7 @@ function handleNavigate(item: any) {
 }
 
 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;
-  }
+  return new URL(`/src/assets/platformImg/${ platform }.png`, import.meta.url).href;
 }
 
 </script>
@@ -47,7 +42,7 @@ function getImageSrc(platform: string) {
                 </div>
               </template>
             </el-image>
-            <div class="text-xl mb-2">{{ item.platform }}</div>
+            <div class="text-xl mb-2" style="color: #606266;">{{ item.platform }}</div>
             <hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
           </template>
         </el-descriptions>

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

@@ -9,11 +9,13 @@ 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'
+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,
@@ -22,7 +24,11 @@ const gridOptions: any = reactive({
   currentRowHighLight: true,
   height: 870,
   toolbarConfig: {
-    custom: true
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+      // tools: 'toolbar_tools'
+    }
   },
   rowConfig: {
     isHover: true
@@ -71,15 +77,29 @@ function pageChange({ pageSize, currentPage }: any) {
 async function fetchPlatformDetailOverview() {
   const res = await useResponse({ platform }, api.getPlatformDetailOverview);
   platformOverview.value = res.data;
-  console.log('(PlatformDetail.vue: 75)=> platformOverview.value', platformOverview.value);
 }
+
+// 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 class="mr-5" src="/src/assets/img/headerImage.png" style="height: 100px; width: 100px; object-fit: cover">
+      <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>
@@ -88,34 +108,60 @@ async function fetchPlatformDetailOverview() {
           </div>
         </template>
       </el-image>
-      <div>
+      <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>
+          平台名称:
+          <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>
+          公司:
+          <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>
+          店铺:
+          <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>
+          电脑:
+          <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"

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * @Name: ShopDetail.vue
+ * @Description: 店铺详情
+ * @Author: Cheney
+ */
+
+</script>
+
+<template>
+  <div class="p-2.5">
+    <el-card body-class="flex items-center" shadow="hover" style="border: none">
+      <el-image src="" 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 : '&#45;&#45;' }} -->
+          </span>
+        </div>
+        <div class="font-semibold">
+          公司:
+          <span class="font-medium italic ml-1.5" style="color: #64748b">
+            <!--{{ platformOverview[0]?.countCompany ? platformOverview[0]?.countCompany : '&#45;&#45;' }} -->
+          </span>
+        </div>
+        <div class="font-semibold">
+          店铺:
+          <span class="font-medium italic ml-1.5" style="color: #64748b">
+            <!--{{ platformOverview[0]?.countShop ? platformOverview[0]?.countShop : '&#45;&#45;' }}-->
+          </span>
+        </div>
+        <div class="font-semibold">
+          电脑:
+          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+            <!--{{ platformOverview[0]?.countComputer ? platformOverview[0]?.countComputer : '&#45;&#45;' }}-->
+          </span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/shop-information/useColumns.tsx

@@ -5,26 +5,22 @@ const countryInfoStore = useCountryInfoStore();
 
 export const columns = [
   { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  // { field: 'operate', title: '操作', width: 'auto', align: 'center', fixed: 'right', slots: { default: 'operate' } },
   {
-    field: 'operaterName', title: '运营', width: 'auto', align: 'center',  fixed: 'left',
+    field: 'operatorName', title: '运营', width: 'auto', align: 'center',  fixed: 'left',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.operaterName ? row.operaterName : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.operatorName ? row.operatorName : '--' }</span>;
       }
     }
   },
   {
-    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center',
-    slots: {
-      default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.platformNumber ? row.platformNumber : '--' }</span>;
-      }
-    }
+    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center', slots: { default: 'platformNumber' }
   },
   {
     field: 'platformName', title: '平台名称', width: 'auto', align: 'center', slots: {
       default({ row }: any) {
-        return <span class={ 'font-semibold' } style={{color: '#303133'}}>{ row.platformName ? row.platformName : '--' }</span>;
+        return <span class={ 'font-medium' } style={{color: '#303133'}}>{ row.platformName ? row.platformName : '--' }</span>;
       }
     }
   },
@@ -103,7 +99,7 @@ export const columns = [
     }
   },
   {
-    field: 'address', title: '公司地址', width: 'auto', align: 'center',
+    field: 'address', title: '公司地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.address ? row.address : '--' }</span>;
@@ -151,7 +147,7 @@ export const columns = [
     }
   },
   {
-    field: 'vatNumber', title: 'VAT税号', minWidth: 200, align: 'left',
+    field: 'vatNumber', title: 'VAT税号', minWidth: 200, align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.vatNumber ? row.vatNumber : '--' }</span>;