养护

刘淇
1 parent c09c0eda
Showing 1 changed file with 152 additions and 53 deletions
pages-sub/daily/maintain-manage/type-list.vue
@@ -3,12 +3,20 @@
         <template v-if="cardList.length > 0">
             <view class="type-card" v-for="item in cardList" :key="item.key" hover-class="type-card--hover"
                 @click="toNextPage(item)">
-                <view class="info-row" v-for="row in item.rows" :key="row.label">
-                    <!-- ✅计划类型：不渲染左侧label文字；其他行正常显示label -->
-                    <text class="info-label" v-if="row.label !== '计划类型'">{{ row.label }}：</text>
-                    <view class="info-value">
-                        <view class="info-line" v-for="(value, idx) in row.values" :key="idx"
-                            :class="{ 'info-line--count': row.label === '待完成数' }">{{ value }}</view>
+
+                <!-- 左上图标：按计划类型显示不同颜色图标 -->
+                <view class="card-icon" :class="item.iconClass || 'icon-default'">
+                    <text class="icon-text">{{ item.iconChar || '📋' }}</text>
+                </view>
+
+                <!-- 名称：第一行大字 -->
+                <view class="card-name">{{ item.nameText }}</view>
+
+                <!-- 底部：灰色文字 + 右侧数字 -->
+                <view class="card-bottom">
+                    <text class="card-label">待完成任务</text>
+                    <view class="card-badge">
+                        <text class="card-count">{{ item.countText }}</text>
                     </view>
                 </view>
             </view>
@@ -18,16 +26,22 @@
         </template>
     </view>
 </template>
+
 <script setup lang="ts">
 import { ref } from 'vue'
-import { onShow, onUnload } from '@dcloudio/uni-app';
+import { onShow, onUnload } from '@dcloudio/uni-app'
+
 const cardList = ref<Array<{
     key: string
     planTypeId: string | number
     batchNos: string[]
+    nameText: string
+    countText: string
+    iconClass?: string
+    iconChar?: string
     rows: Array<{ label: string; values: string[] }>
 }>>([])
-/** 日期字段可能是 'yyyy‑MM‑dd' 字符串（LocalDate）或时间戳，统一转成 yyyy‑MM‑dd */
+
 const formatDate = (value: any) => {
     if (value === null || value === undefined || value === '') return '--'
     if (Array.isArray(value)) {
@@ -39,18 +53,43 @@ const formatDate = (value: any) =&gt; {
     }
     return String(value).slice(0, 10)
 }
-/** 去重并保持原顺序，合并卡片时避免同一个值重复占一行 */
+
 const uniq = (list: any[]) => Array.from(new Set(list.filter(v => v !== null && v !== undefined && v !== '')))
+
+/** 根据计划类型返回不同图标样式 */
+const getIconByType = (name: string) => {
+    const n = (name || '').toLowerCase()
+    if (n.includes('补植') || n.includes('种植')) {
+        return { iconClass: 'icon-blue', iconChar: '🌱' }
+    }
+    if (n.includes('修剪')) {
+        return { iconClass: 'icon-orange', iconChar: '✂️' }
+    }
+    if (n.includes('浇水') || n.includes('防寒') || n.includes('灌溉')) {
+        return { iconClass: 'icon-cyan', iconChar: '💧' }
+    }
+    if (n.includes('保洁') || n.includes('清洁')) {
+        return { iconClass: 'icon-green', iconChar: '🗑️' }
+    }
+    if (n.includes('病虫害') || n.includes('防治')) {
+        return { iconClass: 'icon-red', iconChar: '🛡️' }
+    }
+    if (n.includes('施肥') || n.includes('除草')) {
+        return { iconClass: 'icon-sky', iconChar: '🎯' }
+    }
+    return { iconClass: 'icon-default', iconChar: '📋' }
+}
+
 onShow(() => {
     const item = uni.getStorageSync('temp_maintain_item')
     if (!item) {
         uni.showToast({
             title: '数据异常，请返回重试',
             icon: 'none'
-        });
+        })
         return
     }
-    const roadName = item.roadName || '--'
+
     cardList.value = (item.planTypes || []).map((type: any) => {
         const batches = Array.isArray(type.batches) && type.batches.length
             ? type.batches
@@ -61,29 +100,39 @@ onShow(() =&gt; {
                 endTime: null,
                 todayPendingCount: type.todayPendingCount
             }))
+
         const batchNos = batches.map((batch: any) => batch.batchNo).filter(Boolean)
         const pendingCount = batches.reduce((sum: number, batch: any) => sum + Number(batch.todayPendingCount || 0), 0)
+        const icon = getIconByType(type.planTypeName || '')
+
         return {
             key: String(type.planTypeId),
             planTypeId: type.planTypeId,
             batchNos,
+            nameText: type.planTypeName || '--',
+            countText: `${pendingCount}`,
+            iconClass: icon.iconClass,
+            iconChar: icon.iconChar,
             rows: [
                 { label: '计划类型', values: [type.planTypeName || '--'] },
                 { label: '待完成数', values: [`${pendingCount}次`] }
             ]
         }
     })
-});
+})
+
 const toNextPage = (item: any) => {
     uni.setStorageSync('temp_maintain_rawList', item.batchNos || [])
     uni.navigateTo({
         url: `/pages-sub/daily/maintain-manage/type-list-page?planTypeId=${item.planTypeId}`
     })
 }
-onUnload(()=>{
+
+onUnload(() => {
     uni.removeStorageSync('temp_maintain_item')
 })
 </script>
+
 <style scoped lang="scss">
 .type-grid {
     display: flex;
@@ -91,63 +140,113 @@ onUnload(()=&gt;{
     gap: 24rpx;
     padding: 24rpx;
 }
-/* 一行两张卡片，总宽度扣除中间间隙 */
+
 .type-card {
     width: calc((100% - 24rpx) / 2);
+    // min-height: 240rpx;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: 8rpx;
+    justify-content: space-between;
     background: #ffffff;
-    border-radius: 16rpx;
-    padding: 24rpx;
-    box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
-    transition: background-color 0.15s ease;
+    border-radius: 24rpx;
+    padding: 20rpx 20rpx;
+    box-shadow: 0 4rpx 20rpx rgba(17, 24, 39, 0.08);
+    transition: transform 0.15s ease, background-color 0.15s ease;
+
     &--hover {
-        background: #F4F5F7;
+        background: #F7F8FA;
     }
 }
-.info-row {
+
+/* 左上图标 */
+.card-icon {
+    width: 62rpx;
+    height: 62rpx;
+    border-radius: 16rpx;
     display: flex;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: center;
+    background: #F3F4F6;
 }
-.info-label {
-    width: 130rpx !important;
-    flex-shrink: 0; /* 标签禁止压缩 */
-    font-size: 26rpx;
-    color: #6B7280;
-    line-height: 1.5;
+
+.icon-text {
+    font-size: 32rpx;
 }
-.info-value {
-    flex: 1;
-    min-width: 0;
-    /* ✅计划类型没有label时，去掉左边padding，顶格显示 */
-    padding-left: 16rpx;
+
+.icon-blue {
+    background: #EAF4FF;
 }
-/* 当该行没有label的时候，value不要左边边距 */
-.info-row:not(:has(.info-label)) .info-value {
-    padding-left: 0;
+
+.icon-orange {
+    background: #FFF3E0;
 }
-.info-line {
-    font-size: 26rpx;
+
+.icon-cyan {
+    background: #E0F7FA;
+}
+
+.icon-green {
+    background: #E8F5E9;
+}
+
+.icon-red {
+    background: #FCE4EC;
+}
+
+.icon-sky {
+    background: #E3F2FD;
+}
+
+.icon-default {
+    background: #ECEFF1;
+}
+
+/* 名称 */
+.card-name {
+    margin-top: 10rpx;
+    font-size: 32rpx;
+    font-weight: 600;
     color: #1F2937;
-    line-height: 1.5;
-    /* 普通计划类型文字：超长省略 */
-    &:not(.info-line--count) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    /* ✅待完成数：禁止省略、禁止截断，数字必须完整显示 */
-    &--count {
-        color: #2563EB;
-        font-weight: 500;
-        white-space: normal !important;
-        overflow: visible !important;
-        text-overflow: clip !important;
-    }
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 底部：灰色文字 + 数字 */
+.card-bottom {
+    // margin-top:10px;
+    // padding-top: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.card-label {
+    font-size: 24rpx;
+    color: #9CA3AF;
+}
+
+.card-badge {
+    min-width: 48rpx;
+    height: 48rpx;
+    padding: 0 14rpx;
+    border-radius: 24rpx;
+    background: #F3F4F6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-count {
+    font-size: 26rpx;
+    font-weight: 600;
+    color: #2563EB;
 }
+
 .type-empty {
+    width: 100%;
     padding: 120rpx 0;
     text-align: center;
     font-size: 26rpx;