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

<script lang="ts" setup>
/**
 * @Name: ShopDetail.vue
 * @Description: 店铺详情
 * @Author: Cheney
 */

import { Edit, Monitor, Picture as IconPicture, RefreshLeft, Timer } from '@element-plus/icons-vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from '/@/views/shop-information/api';
import { computerColumns, historyColumns, shopCurrentColumns, companySelect } from '/@/views/shop-information/useColumns';
import { useTableData } from '/@/utils/useTableData';
import { usePagination } from '/@/utils/usePagination';
import EditDrawer from './EditDrawer.vue';


const route = useRoute();
const platformNumber = route.query.platformNumber;
const shopOverview: any = ref([]);
const overviewLoading = ref(false);
const selectedTab = ref('1');
const { tableOptions, handlePageChange } = usePagination(handleTabChange);
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: tableOptions.value.total,
    page: tableOptions.value.page,
    limit: tableOptions.value.limit
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: '',
  data: ''
});

const isOpen = ref(false);
const formSelect = ref<{ country: string[], line: string[] }>({
  country: [],
  line: []
});

// const companySelect = ref<{ id: string, company: string }>({
//   id: '',
//   company: ''
// });

onBeforeMount(() => {
  fetchShopDetailOverview();
  handleTabChange(selectedTab.value);
  fetchSelect();
});

async function fetchSelect() {
  const res = await useResponse({}, api.getShopSelect);
  formSelect.value = res.data;
  // const ret = await useResponse({}, api.getCompanySelect);
  // companySelect.value = ret.data;
}

async function fetchShopDetailOverview() {
  const res = await useResponse({ platformNumber }, api.getShopDetailOverview, overviewLoading);
  shopOverview.value = res.data;
}

async function handleTabChange(tabValue: any) {
  gridOptions.pagerConfig.page = 1;
  gridOptions.pagerConfig.limit = 10;
  const query = {
    platformNumber,
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  };
  switch (tabValue) {
    case '1':
      gridOptions.columns = shopCurrentColumns;
      await useTableData(api.getCurrentInfo, query, gridOptions);
      break;
    case '2':
      gridOptions.columns = historyColumns;
      await useTableData(api.getHistoryInfo, query, gridOptions);
      break;
    case '3':
      gridOptions.columns = computerColumns;
      await useTableData(api.getComputerInfo, query, gridOptions);
      break;
  }
}

function drawerOpen() {
  isOpen.value = true;
}

function handleRefresh() {
  handleTabChange(selectedTab.value);
}

</script>

<template>
  <div class="p-2.5">
    <el-card v-loading="overviewLoading" body-class="flex items-center gap-10" shadow="hover" style="border: none">
      <div v-if="platformNumber" class="artistic-text-container mr-7 ">
        <div class="artistic-text">
          {{ platformNumber }}
        </div>
      </div>
      <el-image v-else class="mr-7 rounded-2xl" src="" style="height: 120px; width: 120px; object-fit: contain">
        <template #error>
          <div class="mr-3.5 flex items-center justify-center text-5xl"
               style="height: 100%; width: 100%; 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"> 
            {{ shopOverview[0]?.platformNumber ? shopOverview[0]?.platformNumber : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          所属公司:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ shopOverview[0]?.company ? shopOverview[0]?.company : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          所属平台:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ shopOverview[0]?.platform ? shopOverview[0]?.platform : '--' }}
          </span>
        </div>
        <div class="font-semibold">
          运营:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ shopOverview[0]?.operatorName ? shopOverview[0]?.operatorName : '--' }}
          </span>
        </div>
        <div class="font-semibold">
          电脑:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ shopOverview[0]?.countComputer === 0 ? '0' : shopOverview[0]?.countComputer || '--' }}
          </span>
        </div>
      </div>
      <div class="text-lg">
        <div class="font-semibold">
          主账户手机号及归属人:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ shopOverview[0]?.shopPhoneAndNameStr ? shopOverview[0]?.shopPhoneAndNameStr : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          主账户Email:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ shopOverview[0]?.shopEmail ? shopOverview[0]?.shopEmail : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          子账户手机号及归属人:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ shopOverview[0]?.subShopPhoneAndNameStr ? shopOverview[0]?.subShopPhoneAndNameStr : '--' }}
          </span>
        </div>
        <div class="font-semibold">
          子账户Email:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ shopOverview[0]?.subShopEmail ? shopOverview[0]?.subShopEmail : '--' }}
          </span>
        </div>
      </div>
    </el-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(selectedTab)">
            <el-radio-button label="当前信息" value="1">
              <template #default>
                <el-icon style="top: 2px;">
                  <Timer/>
                </el-icon>
                当前信息
              </template>
            </el-radio-button>
            <el-radio-button label="历史记录" value="2">
              <template #default>
                <el-icon style="top: 2px;">
                  <RefreshLeft/>
                </el-icon>
                历史记录
              </template>
            </el-radio-button>
            <el-radio-button label="电脑信息" value="3">
              <template #default>
                <el-icon style="top: 2px;">
                  <Monitor/>
                </el-icon>
                电脑信息
              </template>
            </el-radio-button>
          </el-radio-group>
        </template>
        <template #toolbar_tools>
          <div class="mr-2.5">
            <el-button :icon="Edit" plain circle type="warning" @click="drawerOpen" :disabled="selectedTab != '1'"></el-button>
          </div>
        </template>
        <template #pager>
          <vxe-pager
              v-model:currentPage="gridOptions.pagerConfig.page"
              v-model:pageSize="gridOptions.pagerConfig.limit"
              :total="gridOptions.pagerConfig.total"
              @page-change="handlePageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </el-card>
    <EditDrawer
        v-if="isOpen"
        v-model="isOpen"
        :formSelect
        :companySelect
        :gridOptions="gridOptions"
        :platformNumber
        @refresh="handleRefresh"
    />
  </div>
</template>

<style scoped>
.artistic-text-container {
  height: 120px; /* 高度与要求一致 */
  width: 120px; /* 宽度与要求一致 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: #f5f5f5; /* 背景色 */
  border-radius: 12px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出部分 */
  position: relative; /* 为绝对定位提供参考 */
}

.artistic-text {
  font-size: 1rem; /* 初始字体大小 */
  font-weight: bold; /* 加粗字体 */
  text-align: center; /* 居中对齐 */
  background: linear-gradient(90deg, #c86fc9, #3023ae);
  -webkit-background-clip: text; /* 背景裁剪 */
  -webkit-text-fill-color: transparent; /* 字体颜色透明 */
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  transform: scale(1); /* 默认缩放为 1 */
  transition: transform 0.2s ease; /* 动画过渡效果 */
  max-width: 100%; /* 最大宽度为 100% */
}

/* 当文本溢出时，缩小文本以适应容器 */
.artistic-text-container:has(.artistic-text) {
  /* 计算并缩放文本 */
  animation: scale-text 0.2s forwards;
}

/* @keyframes scale-text {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(calc(120px / var(--text-width))); !* 根据文本宽度缩放 *!
  }
} */
</style>