ams_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';
import { getOperator } from '/@/views/shop-information/api';
import { useTableHeight } from '/@/utils/useTableHeight';

const cardContainer: Ref<HTMLElement | null> = useTemplateRef('cardContainer');
const { tableHeight } = useTableHeight(cardContainer );


const route = useRoute();
const platformNumber = route.query.platformNumber as string;
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: '100%',
  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 operatorOption = ref<{ id: number; name: string }[]>([]);

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

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

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);
}

async function fetchOperator() {
  const res = await useResponse({}, api.getOperator);
  operatorOption.value = res.data;
}

</script>

<template>
  <div class="p-5 flex flex-col gap-2.5">
    <el-card v-loading="overviewLoading" shadow="hover" style="border: none">
      <div ref="cardContainer" class="flex items-center gap-10">
        <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>
      </div>

    </el-card>
    <el-card class="mt-2.5 flex-1" shadow="hover" style="border: none">
      <div :style="{ height: tableHeight + 'px' }">
        <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 :disabled="selectedTab != '1'" :icon="Edit" circle plain type="warning"
                         @click="drawerOpen"></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>
      </div>
      
    </el-card>
    <EditDrawer
        v-if="isOpen"
        v-model="isOpen"
        :companySelect
        :formSelect
        :gridOptions="gridOptions"
        :operatorOption
        :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>