From fa008901cc964ce4fd3574fcd3ef391fac98c7f4 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 09 四月 2026 18:02:16 +0800
Subject: [PATCH] 升级app 1.首页样式优化 2.客户合同金额展示错误修改
---
src/pages/index.vue | 407 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 253 insertions(+), 154 deletions(-)
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0c17b0f..b7d3fa9 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,14 @@
<view class="hero-section">
<view class="bg-img">
<view class="hero-content">
- <!-- 棰勭暀锛氬鍚庣画闇�瑕佸彲鍦ㄦ鏀� logo 鎴栫畝鐭彁绀� -->
+ <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>
@@ -19,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>
@@ -55,7 +62,6 @@
</view>
</view>
</view>
- <image class="card-icon" :src="imgSales" mode="widthFix" />
</view>
<view class="overview-card purchase">
@@ -72,7 +78,6 @@
</view>
</view>
</view>
- <image class="card-icon" :src="imgPurchase" mode="widthFix" />
</view>
<view class="overview-card stock">
@@ -89,7 +94,6 @@
</view>
</view>
</view>
- <image class="card-icon" :src="imgStock" mode="widthFix" />
</view>
</view>
</view>
@@ -139,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>
@@ -200,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";
@@ -217,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",
},
];
@@ -251,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 });
}
@@ -388,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 : [];
@@ -419,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;
@@ -441,7 +436,6 @@
contractSummary.value = { sum: "0", chain: "0", yny: "0" };
contractRawList.value = normalizeContractList({ item: [] });
} finally {
- customerSwiperIndex.value = 0;
chartReady.value = true;
}
}
@@ -453,7 +447,12 @@
} catch (e) {
isCanvas2d.value = false;
}
+ triggerVersionCheck("onMounted");
loadHome();
+});
+
+onShow(() => {
+ triggerVersionCheck("onShow");
});
</script>
@@ -516,59 +515,139 @@
.bg-img {
width: 100%;
- height: 9.25rem;
- background-image: url("../static/images/banner/backview.png");
- background-size: cover;
- border-radius: 14px;
+ 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 10px 26px rgba(17, 24, 39, 0.08);
+ box-shadow: 0 12px 30px rgba(118, 154, 186, 0.16);
&::before {
content: "";
position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: conic-gradient(
- from 0deg,
- transparent,
- rgba(255, 255, 255, 0.1),
- transparent,
- rgba(255, 255, 255, 0.05),
- transparent
- );
- animation: rotate 20s linear infinite;
+ 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;
- top: 0;
- right: 0;
- width: 7.5rem;
- height: 7.5rem;
- background: radial-gradient(
- circle,
- rgba(255, 255, 255, 0.15) 0%,
- transparent 70%
- );
+ 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%;
- transform: translate(2.5rem, -2.5rem);
+ filter: blur(10px);
+ pointer-events: none;
}
}
.hero-content {
position: relative;
z-index: 1;
-
- padding: 14px 14px 18px 14px;
- margin: 0 12px;
+ 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: 2.75rem;
+ 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 {
@@ -576,7 +655,7 @@
}
.scroll {
- height: calc(100vh - env(safe-area-inset-top) - 10px);
+ min-height: calc(100vh - env(safe-area-inset-top) - 10px);
}
.section {
@@ -588,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 {
@@ -686,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 {
@@ -807,9 +909,6 @@
gap: 8px;
}
-.list-row {
- width: 100%;
-}
.summary-chip {
flex: 1;
background: rgba(47, 107, 255, 0.06);
@@ -843,8 +942,13 @@
width: 100%;
}
-.customer-swiper {
- height: 140px;
+.list-row {
+ width: 100%;
+ margin-top: 6px;
+}
+
+.customer-scroll {
+ height: 220px;
}
.customer-page {
@@ -852,6 +956,7 @@
flex-direction: column;
gap: 14px;
padding-top: 4px;
+ padding-right: 4px;
}
.customer-item {
@@ -961,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;
}
@@ -1031,4 +1119,15 @@
color: #e9edf3;
}
}
-</style>
\ No newline at end of file
+
+@keyframes fadeInScale {
+ 0% {
+ opacity: 0;
+ transform: translateY(0.5rem) scale(0.96);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+</style>
--
Gitblit v1.9.3