升级app 1.首页样式优化 2.客户合同金额展示错误修改

gaoluyang

20 小时以前 fa008901cc964ce4fd3574fcd3ef391fac98c7f4

 src/pages/index.vue

@@ -1,8 +1,23 @@
<template>
  <view class="page">
    <view class="safe-top" />

    <scroll-view class="scroll" scroll-y>
      <!-- 顶部 Banner：放入滚动区域，随页面一起滚动，不固定在顶部 -->
      <view class="hero-section">
        <view class="bg-img">
          <view class="hero-content">
            <view class="hero-ornaments">
              <view class="hero-glow glow-left" />
              <view class="hero-glow glow-right" />
              <view class="hero-mist mist-top" />
              <view class="hero-mist mist-bottom" />
              <view class="hero-curve curve-main" />
              <view class="hero-curve curve-sub" />
            </view>
          </view>
          <view class="hero-wave"></view>
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="quick-section">
        <up-grid :border="false" col="4">
@@ -11,10 +26,10 @@
            :key="item.label"
            @click="handleQuickTool(item)"
          >
            <view class="quick-icon" :style="{ background: item.bgColor }">
              <image :src="item.icon" class="quick-icon-img" mode="aspectFit" />
            <view class="icon-container">
              <image :src="item.icon" class="item-icon" mode="aspectFit" />
            </view>
            <text class="quick-text">{{ item.label }}</text>
            <text class="item-label">{{ item.label }}</text>
          </up-grid-item>
        </up-grid>
      </view>
@@ -47,7 +62,6 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgSales" mode="widthFix" />
          </view>

          <view class="overview-card purchase">
@@ -64,7 +78,6 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgPurchase" mode="widthFix" />
          </view>

          <view class="overview-card stock">
@@ -81,7 +94,6 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgStock" mode="widthFix" />
          </view>
        </view>
      </view>
@@ -131,60 +143,43 @@
          </view>

          <view class="list-row">
            <swiper
              class="customer-swiper"
              :current="customerSwiperIndex"
              :indicator-dots="false"
              :autoplay="false"
              :circular="false"
              @change="onCustomerSwiperChange"
            >
              <swiper-item v-for="(page, pIdx) in customerPages" :key="pIdx">
                <view class="customer-page">
                  <view v-for="item in page" :key="item.key" class="customer-item">
                    <view class="customer-row">
                      <view class="customer-name">
                        <image
                          v-if="item.rank === 1"
                          class="rank-icon"
                          :src="imgNum1"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 2"
                          class="rank-icon"
                          :src="imgNum2"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 3"
                          class="rank-icon"
                          :src="imgNum3"
                          mode="heightFix"
                        />
                        <text class="name-text">{{ item.name }}</text>
                      </view>
                      <view class="customer-rate">
                        <text class="rate-label">占比</text>
                        <text class="rate-value">{{ item.rateText }}</text>
                      </view>
                      <view class="amount">
                        <text class="amount-num">{{ item.valueText }}</text>
                        <text class="amount-unit">元</text>
                      </view>
            <scroll-view class="customer-scroll" scroll-y :show-scrollbar="false">
              <view class="customer-page">
                <view v-for="item in contractRawList" :key="item.key" class="customer-item">
                  <view class="customer-row">
                    <view class="customer-name">
                      <image
                        v-if="item.rank === 2"
                        class="rank-icon"
                        :src="imgNum1"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 3"
                        class="rank-icon"
                        :src="imgNum2"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 1"
                        class="rank-icon"
                        :src="imgNum3"
                        mode="heightFix"
                      />
                      <text class="name-text">{{ item.name }}</text>
                    </view>
                    <view class="customer-rate">
                      <text class="rate-label">占比</text>
                      <text class="rate-value">{{ item.rateText }}</text>
                    </view>
                    <view class="amount">
                      <text class="amount-num">{{ item.valueText }}</text>
                      <text class="amount-unit">元</text>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>

            <view v-if="customerPages.length > 1" class="dots">
              <view
                v-for="i in customerPages.length"
                :key="i"
                :class="['dot', customerSwiperIndex === i - 1 ? 'active' : '']"
              />
            </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
@@ -192,16 +187,17 @@
      <view class="bottom-space" />
    </scroll-view>

    <DownloadProgressMask />
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { analysisCustomerContractAmounts, getBusiness } from "@/api/viewIndex";
import { createVersionUpgradeChecker } from "@/utils/versionUpgrade";
import DownloadProgressMask from "@/components/DownloadProgressMask.vue";

const imgSales = "/static/images/index/xiaoshoushuju.png";
const imgPurchase = "/static/images/index/caigoushuju.png";
const imgStock = "/static/images/index/kucunshuju.png";
const imgNum1 = "/static/images/index/num1.png";
const imgNum2 = "/static/images/index/num2.png";
const imgNum3 = "/static/images/index/num3.png";
@@ -209,26 +205,22 @@
const quickTools = [
  {
    label: "生产报工",
    icon: "/static/images/icon/shengchanbaogong@2x.png",
    bgColor: "linear-gradient(135deg,#3b82f6,#2563eb)",
    route: "/pages/productionManagement/productionReport/index",
    icon: "/static/images/icon/shengchanbaogong.svg",
    action: "scan",
  },
  {
    label: "设备巡检",
    icon: "/static/images/icon/xunjianshangchuan@2x.png",
    bgColor: "linear-gradient(135deg,#22c55e,#16a34a)",
    icon: "/static/images/icon/xunjianshangchuan.svg",
    route: "/pages/inspectionUpload/index",
  },
  {
    label: "设备保养",
    icon: "/static/images/icon/shbeibaoyang@2x.png",
    bgColor: "linear-gradient(135deg,#f97316,#ea580c)",
    icon: "/static/images/icon/shebeibaoyang.svg",
    route: "/pages/equipmentManagement/upkeep/index",
  },
  {
    label: "设备报修",
    icon: "/static/images/icon/shbeibaoxiu@2x.png",
    bgColor: "linear-gradient(135deg,#a855f7,#7c3aed)",
    icon: "/static/images/icon/shebeibaoxiu.svg",
    route: "/pages/equipmentManagement/repair/index",
  },
];
@@ -243,11 +235,35 @@

// 客户合同金额分析：无需筛选项（按接口默认返回展示）

const { triggerVersionCheck } = createVersionUpgradeChecker({ logPrefix: "[version-index]" });

function toggleOverview() {
  overviewExpanded.value = !overviewExpanded.value;
}

function handleQuickTool(item) {
  if (item?.action === "scan") {
    // 生产报工 - 调用扫码
    uni.scanCode({
      success: (res) => {
        console.log("扫码结果:", res);
        // 解析扫码结果并跳转到生产报工页面
        try {
          const scanResult = JSON.parse(res.result);
          uni.navigateTo({
            url: `/pages/productionManagement/productionReport/index?orderRow=${encodeURIComponent(JSON.stringify(scanResult))}`
          });
        } catch (e) {
          console.error("扫码结果解析失败:", e);
          uni.showToast({ title: "无效的二维码", icon: "none" });
        }
      },
      fail: (err) => {
        console.error("扫码失败:", err);
      }
    });
    return;
  }
  if (!item?.route) return;
  uni.navigateTo({ url: item.route });
}
@@ -380,19 +396,6 @@
  return { series: [{ data }] };
});

const customerSwiperIndex = ref(0);
function onCustomerSwiperChange(e) {
  customerSwiperIndex.value = e.detail?.current || 0;
}

const customerPages = computed(() => {
  const list = Array.isArray(contractRawList.value) ? contractRawList.value : [];
  const pageSize = 2;
  const pages = [];
  for (let i = 0; i < list.length; i += pageSize) pages.push(list.slice(i, i + pageSize));
  return pages.length ? pages : [[]];
});

function normalizeContractList(raw) {
  const rows = Array.isArray(raw?.item) ? raw.item : [];

@@ -411,7 +414,7 @@
        rateText: `${formatPlain(rate)}%`,
      };
    })
    .sort((a, b) => (b.rate || 0) - (a.rate || 0))
    .sort((a, b) => (b.value || 0) - (a.value || 0))
    .map((it, index) => ({ ...it, rank: index + 1 }));

  return mapped;
@@ -433,7 +436,6 @@
    contractSummary.value = { sum: "0", chain: "0", yny: "0" };
    contractRawList.value = normalizeContractList({ item: [] });
  } finally {
    customerSwiperIndex.value = 0;
    chartReady.value = true;
  }
}
@@ -445,14 +447,207 @@
  } catch (e) {
    isCanvas2d.value = false;
  }
  triggerVersionCheck("onMounted");
  loadHome();
});

onShow(() => {
  triggerVersionCheck("onShow");
});
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #f5f6fa;
   background: #f6f7fb;
   min-height: 100vh;
   // padding: 12px;
   /* 为所有设备设置基础padding-top（包含安全区） */
   padding-top: calc(env(safe-area-inset-top) + 30px);
   position: relative;
	
   /* 为安卓设备设置更大的顶部内边距 */
   /* #ifdef APP-PLUS && !MP && !H5 */
   padding-top: calc(env(safe-area-inset-top) + 45px);
   /* #endif */
	
   /* H5和小程序平台的通用样式 */
   /* #ifdef H5 || MP */
   padding-top: calc(env(safe-area-inset-top) + 30px);
   /* #endif */
   &::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="12" cy="12" r="1" fill="rgba(41, 121, 255, 0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      pointer-events: none;
      z-index: -1;
   }
	
   &::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(
            circle at 20% 80%,
            rgba(41, 121, 255, 0.02) 0%,
            transparent 55%
      ),
      radial-gradient(
            circle at 80% 20%,
            rgba(156, 39, 176, 0.015) 0%,
            transparent 55%
      );
      pointer-events: none;
      z-index: -1;
   }
}
.hero-section {
   margin: 0 12px;
   margin-bottom: 12px;
   animation: fadeInUp 0.6s ease-out 0.1s both;
}

.bg-img {
   width: 100%;
   height: 10.25rem;
   background:
      linear-gradient(135deg, rgba(234, 245, 255, 0.98) 0%, rgba(220, 239, 255, 0.94) 42%, rgba(244, 250, 255, 0.96) 100%),
      url("/static/images/banner/backview.png") center/cover no-repeat;
   border-radius: 18px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 12px 30px rgba(118, 154, 186, 0.16);
	
   &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
         radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 28%),
         radial-gradient(circle at 84% 18%, rgba(191, 226, 255, 0.7) 0, rgba(191, 226, 255, 0) 26%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(206, 229, 247, 0.22) 100%);
      pointer-events: none;
   }
	
   &::after {
      content: "";
      position: absolute;
      left: 18%;
      bottom: -44px;
      width: 64%;
      height: 88px;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
      border-radius: 50%;
      filter: blur(10px);
      pointer-events: none;
   }
}

.hero-content {
   position: relative;
   z-index: 1;
   padding: 16px 16px 14px;
   height: 100%;
   backdrop-filter: blur(2px);
}

.hero-ornaments {
   position: relative;
   width: 100%;
   height: 100%;
}

.hero-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(4px);
   background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 72%);
   opacity: 0.9;
}

.hero-glow.glow-left {
   left: -10px;
   top: 8px;
   width: 120px;
   height: 120px;
}

.hero-glow.glow-right {
   right: -20px;
   top: 4px;
   width: 144px;
   height: 144px;
   background: radial-gradient(circle, rgba(207, 234, 255, 0.92) 0%, rgba(207, 234, 255, 0) 74%);
}

.hero-mist {
   position: absolute;
   border-radius: 999px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08));
   border: 1px solid rgba(255, 255, 255, 0.34);
   backdrop-filter: blur(10px);
   box-shadow: 0 10px 24px rgba(154, 190, 219, 0.14);
}

.hero-mist.mist-top {
   left: 18px;
   top: 20px;
   width: 112px;
   height: 18px;
}

.hero-mist.mist-bottom {
   left: 18px;
   top: 48px;
   width: 72px;
   height: 10px;
   opacity: 0.82;
}

.hero-curve {
   position: absolute;
   border-radius: 999px;
   border: 2px solid rgba(255, 255, 255, 0.72);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
   box-shadow:
      0 10px 26px rgba(154, 190, 219, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
}

.hero-curve.curve-main {
   right: 18px;
   bottom: 22px;
   width: 176px;
   height: 84px;
   transform: rotate(-9deg);
   border-top-left-radius: 90px;
   border-bottom-right-radius: 90px;
   opacity: 1;
}

.hero-curve.curve-sub {
   right: 96px;
   bottom: 60px;
   width: 104px;
   height: 40px;
   transform: rotate(-9deg);
   border-top-left-radius: 60px;
   border-bottom-right-radius: 60px;
   opacity: 0.9;
}

.hero-wave {
   height: 1.1rem;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 249, 253, 0.96) 100%);
   margin-top: -1px;
   position: relative;
}

.safe-top {
@@ -460,7 +655,7 @@
}

.scroll {
  height: calc(100vh - env(safe-area-inset-top) - 10px);
  min-height: calc(100vh - env(safe-area-inset-top) - 10px);
}

.section {
@@ -472,27 +667,47 @@
  padding: 6px 0 2px;
}

.quick-icon {
  width: 44px;
  height: 44px;
.icon-container {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  margin-bottom: 0.375rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.5s ease both;
}

.quick-icon-img {
  width: 26px;
  height: 26px;
.item-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.quick-text {
  margin-top: 6px;
.icon-container:active {
  transform: scale(0.97);
}

.item-label {
  font-size: 12px;
  color: #555555;
  text-align: center;
  white-space: nowrap;
  display: block;
  line-height: 1.4;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 6px;
}

:deep(.up-grid-item) {
  padding: 6px 0;
}

:deep(.up-grid-item__content) {
  padding: 0;
}

.section-header {
@@ -570,13 +785,16 @@
}

.overview-card.sales {
  background: linear-gradient(135deg, #e9fbff 0%, #d8fbff 100%);
  background: url("/static/images/index/xiaoshoushuju.png") no-repeat center center;
  background-size: cover;
}
.overview-card.purchase {
  background: linear-gradient(135deg, #fff4e7 0%, #ffe7ce 100%);
  background: url("/static/images/index/caigoushuju.png") no-repeat center center;
  background-size: cover;
}
.overview-card.stock {
  background: linear-gradient(135deg, #eaf0ff 0%, #dbe6ff 100%);
  background: url("/static/images/index/kucunshuju.png") no-repeat center center;
  background-size: cover;
}

.card-left {
@@ -691,9 +909,6 @@
  gap: 8px;
}

.list-row {
  width: 100%;
}
.summary-chip {
  flex: 1;
  background: rgba(47, 107, 255, 0.06);
@@ -727,8 +942,13 @@
  width: 100%;
}

.customer-swiper {
  height: 140px;
.list-row {
  width: 100%;
  margin-top: 6px;
}

.customer-scroll {
  height: 220px;
}

.customer-page {
@@ -736,6 +956,7 @@
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
  padding-right: 4px;
}

.customer-item {
@@ -845,23 +1066,6 @@
  transform: translateY(1px);
}

.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.dot {
  width: 8px;
  height: 4px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.35);
}
.dot.active {
  width: 14px;
  background: #2f6bff;
}

.bottom-space {
  height: 24px;
}
@@ -915,4 +1119,15 @@
    color: #e9edf3;
  }
}
</style>

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
</style>