yoe-shop-web/src/views/home/jdcomponents/JDUserPanel.vue

<template>
  <div class="user-panel">
    <!-- 顶部极淡粉色渐变背景 -->
    <div class="top-bg"></div>

    <!-- 用户信息区 -->
    <div class="u-auth flex">
      <div class="avatar">
        <img :src="logo2" />
      </div>
      <div class="u-info">
        <p class="name">{{ userInfo.nickName }}</p>
        <!-- <p @click="onPath('/breg')" class="links">切换企业账号<span class="divider">|</span>注册</p> -->
      </div>
    </div>

    <!-- 会员卡片 -->
    <div class="member-card">
      <div class="c-tag">企业会员</div>
      <div class="c-main flex-between">
        <div class="c-left">
          <div class="c-h">授信余额</div>
          <p class="credit-num">{{ salesInfo.creditAmount || '0.00' }}元</p>
        </div>
      </div>
    </div>

    <!-- 订单状态统计 -->
    <div class="order-stats">
      <div class="stat-item">
        <div class="num">{{ countData.pendingapprovalCount || 0 }}</div>
        <div class="label">待审批</div>
      </div>
      <div class="stat-item">
        <div class="num">{{ countData.pendingPaymentCount || 0 }}</div>
        <div class="label">待付款</div>
      </div>
      <div class="stat-item">
        <div class="num">{{ countData.pendingShipmentCount || 0 }}</div>
        <div class="label">待发货</div>
      </div>
      <div class="stat-item">
        <div class="num">{{ countData.pendingReceiptCount || 0 }}</div>
        <div class="label">待收货</div>
      </div>
    </div>

    <!-- 企业工作台 -->
    <div class="tools-sec relative">
      <div class="t-h flex-between" @click="onPath(dataInfo.jumpLink)">
        <span>{{ dataInfo.moduleName }}</span>
        <i class="icon-more">&gt;</i>
      </div>

      <!-- 滑动翻页组件 -->
      <div class="t-slider-wrap">
        <div class="t-track" :style="{ transform: `translateX(-${currentPage * 100}%)` }">
          <div class="t-page" v-for="(item1, index1) in dataList" :key="index1">
            <div class="t-grid">
              <div class="t-i" v-for="(item2, index2) in item1" :key="index2" @click="onPath(item2.jumpLink)">
                <el-image class="t-icon" :src="item2.iconUrl" />
                <span>{{ item2.name }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 滑动按钮 -->
        <div class="flip-btn prev-btn" v-show="currentPage > 0" @click="currentPage--">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </div>
        <div class="flip-btn next-btn" v-show="currentPage < 1 && dataList.length > 1" @click="currentPage++">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { currentQuickEntryModule } from '@/api/home/index-enterprise';
import { getEnterpriseInfo } from '@/api/pc/enterprise';
import { getInfo } from '@/api/login';
import { onPath } from '@/utils/siteConfig';
import { countOrder } from '@/api/home/index';
import logo2 from '@/assets/images/pcdiy/logo2.png';
const dataList = ref<any>([]);
const dataInfo = ref<any>({});
const userInfo = ref<any>({});
const countData = ref<any>({});
const salesInfo = ref<any>({});

getEnterpriseInfo().then((res) => {
  if (res.code == 200) {
    salesInfo.value = res.data.customerSalesInfoVo || {};
  }
});

currentQuickEntryModule({}).then((res) => {
  if (res.code == 200) {
    dataInfo.value = res.data;
    if (res.data && res.data.items.length > 0) {
      dataList.value = chunkArray(res.data.items, 8);
    }
  }
});

const chunkArray = (arr, size) => {
  const result = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
};

getInfo().then((res) => {
  if (res.code == 200) {
    userInfo.value = res.data.user;
  }
});

countOrder({}).then((res) => {
  if (res.code == 200) {
    countData.value = res.data || {};
  }
});

const currentPage = ref(0);
</script>

<style scoped>
.user-panel {
  background: #fff;
  height: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部极淡粉色渐变背景 */
.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, #fff5ee, #ffffff);
  z-index: 0;
}

/* 内容提升层级 */
.u-auth,
.member-card,
.card-benefits,
.small-ad,
.tools-sec {
  position: relative;
  z-index: 1;
}

.u-auth {
  padding: 16px 16px 0;
  align-items: center;
  margin-bottom: 12px;
}

.avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.3);
  margin-right: 12px;
}

.name {
  font-weight: bold;
  font-size: 14px;
  color: #000;
}

.links {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  cursor: pointer;
}

.divider {
  margin: 0 6px;
  color: #e0e0e0;
}

.member-card {
  margin: 0 16px;
  background: linear-gradient(to right, #fdf0de, #fce3c5);
  border-radius: 8px;
  position: relative;
  padding: 22px 12px 12px; /* 增加顶部边距，避开标签 */
}

.c-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: #11366f;
  color: #f8d9a8;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px 0 8px 0;
  font-weight: bold;
}

.c-h {
  font-weight: 800;
  font-size: 13px;
  color: #11366f; /* 使用标签背景色 */
  letter-spacing: 0.3px;
}

.c-left p.credit-num {
  font-size: 20px;
  font-weight: 900;
  color: #e1251b; /* 使用红色 */
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.order-stats {
  margin: 12px 16px 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(254, 242, 242, 0.8) 100%);
  border: 1px solid rgba(225, 37, 27, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  padding: 14px 0;
  box-shadow: 0 4px 15px rgba(225, 37, 27, 0.04);
}

.stat-item {
  text-align: center;
  flex: 1;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
}

.stat-item .num {
  font-size: 16px;
  font-weight: 800;
  color: #e1251b;
  font-family: Arial, sans-serif;
}

.stat-item .label {
  font-size: 11px;
  color: #666;
  margin-top: 5px;
}

.tools-sec {
  padding: 0 16px;
  flex: 1;
}

.t-h {
  font-weight: bold;
  font-size: 14px;
  color: #000;
  margin-bottom: 15px;
}

.icon-more {
  font-size: 12px;
  color: #999;
  font-style: normal;
  cursor: pointer;
}

.t-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.t-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.t-page {
  width: 100%;
  flex-shrink: 0;
}

.flip-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transition: background 0.2s;
}
.flip-btn:hover {
  background: #f4f4f4;
}
.prev-btn {
  left: 4px;
}
.next-btn {
  right: 4px;
}

.t-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px 0;
}

.t-i {
  text-align: center;
  font-size: 11px;
  color: #333;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.t-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  opacity: 0.8;
}

.badge {
  position: absolute;
  top: -8px;
  right: -2px;
  background: #ff5a5f;
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 8px 8px 8px 0;
  z-index: 2;
  border: 1px solid #fff;
  transform: scale(0.9);
}
</style>