样式优化

刘淇
1 parent 2bffa686
Showing 5 changed files with 82 additions and 221 deletions
common/config/env.js
pages-sub/daily/maintain-manage/index.vue
pages-sub/daily/maintain-manage/type-list-page.vue
pages-sub/daily/maintain-manage/type-list.vue
pages/mine/index.vue
@@ -2,10 +2,10 @@
 const env = {
   // 开发环境
   development: {
-	  baseUrl: 'http://192.168.1.55:48081',
-	  uploadUrl:'http://192.168.1.55:48081',
-    // baseUrl: 'https://test.jichengshanshui.com.cn:28302',
-    // uploadUrl: 'https://test.jichengshanshui.com.cn:28302',
+	  // baseUrl: 'http://192.168.1.55:48081',
+	  // uploadUrl:'http://192.168.1.55:48081',
+    baseUrl: 'https://test.jichengshanshui.com.cn:28302',
+    uploadUrl: 'https://test.jichengshanshui.com.cn:28302',
     // baseApi:'admin-api',
     // appApi:'app-api'
   },
@@ -3,30 +3,6 @@
     <!-- 吸顶区域 -->
     <up-sticky>
       <view class="sticky-wrap">
-        <!-- 第一行标签：养护类型 -->
-        <!-- <up-tabs
-            v-model="activeType"
-            :list="typeTabs"
-            line-width="40rpx"
-            active-color="#2563EB"
-            inactive-color="#606266"
-            :scrollable="true"
-            class="first-tabs"
-            @click="handleTypeChange"
-        ></up-tabs> -->
-
-        <!-- 第二行标签：状态筛选 -->
-        <!-- <up-tabs
-            v-model="activeStatus"
-            :list="statusTabs"
-            line-width="40rpx"
-            active-color="#2563EB"
-            inactive-color="#606266"
-            :scrollable="true"
-            class="second-tabs"
-            @click="handleStatusChange"
-        ></up-tabs> -->
-
         <!-- 动态搜索框（道路名称/计划名称） -->
         <up-search
             v-model="searchValue"
@@ -44,7 +20,6 @@
         ></up-search>
       </view>
     </up-sticky>
-
     <!-- 内容区域 - 集成z-paging分页 -->
     <z-paging
         ref="pagingRef"
@@ -52,14 +27,12 @@
         @query="fetchData"
         :auto-show-system-loading="true"
     >
-    <!-- 空数据提示 -->
-    <template #empty>
-      <empty-view/>
-    </template>
-
+      <!-- 空数据提示 -->
+      <template #empty>
+        <empty-view />
+      </template>
       <!-- 道路类型卡片 -->
       <view v-if="activeType === '道路'" class="common-card-list maintain-card-list">
-
         <up-card
             :border="false"
             :foot-border-top="false"
@@ -77,137 +50,36 @@
               <view class="common-card-title common-name u-line-1">{{ item.roadName || '无道路名称' }}</view>
             </view>
           </template>
-
           <template #body>
             <view class="card-body">
-<!--              <view class="">-->
-<!--                <up-button-->
-<!--                    type="primary"-->
-<!--                    size="mini"-->
-<!--                    @click="goToDetail(item)"-->
-<!--                    class="submit-record-btn"-->
-<!--                >-->
-<!--                  计划明细-->
-<!--                </up-button>-->
-<!--              </view>-->
-
-<!--              <view class="u-body-item u-flex">-->
-<!--                <view class="u-body-item-title">批次号：</view>-->
-<!--                <view class="u-line-1 u-body-value">{{ item.batchNo || '-' }}</view>-->
-<!--              </view>-->
-              <view class="u-body-item u-flex">
+              <view class="u-body-item">
                 <view class="u-body-item-title">道路名称：</view>
                 <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
               </view>
- <!-- <view class="u-body-item u-flex">
-                <view class="u-body-item-title">计划名称：</view>
-                <view class="u-line-1 u-body-value">{{ item.planName || '-' }}</view>
-              </view> -->
-              
-
-              <!-- <view class="u-body-item u-flex">
-                <view class="u-body-item-title">所属街道：</view>
-                <view class="u-line-1 u-body-value">{{ item.streetName }}
-                </view>
-              </view> -->
-
-              <view class="u-body-item u-flex">
+              <view class="u-body-item">
                 <view class="u-body-item-title">业务线：</view>
                 <view class="u-line-1 u-body-value">{{ uni.$dict.getDictLabel('business_line', item.busiLine) || item.busiLine || '-' }}</view>
               </view>
-
-              <view class="u-body-item u-flex">
+              <view class="u-body-item">
                 <view class="u-body-item-title">养护级别：</view>
                 <view class="u-line-1 u-body-value">{{ uni.$dict.getDictLabel('conserve_level', item.levelId) || '-' }}</view>
               </view>
-
               <!-- 操作区：统一收底 -->
               <view class="card-action-row">
                 <view class="mini-btn mini-btn--primary" @click="goToDetail(item)">执行任务</view>
               </view>
-
-<!--              <view class="u-body-item u-flex">-->
-<!--                <view class="u-body-item-title">计划时间：</view>-->
-<!--                <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至-->
-<!--                  {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}-->
-<!--                </view>-->
-<!--              </view>-->
-            </view>
-          </template>
-        </up-card>
-      </view>
-
-      <!-- 其他养护类型卡片（补植/浇水等） -->
-      <view v-else class="common-card-list maintain-card-list">
-
-        <up-card
-            :border="false"
-            :foot-border-top="false"
-            :head-border-bottom="false"
-            margin="0"
-            padding-head="24rpx 24rpx 0"
-            padding-body="16rpx 24rpx 24rpx"
-            box-shadow="0 4rpx 16rpx rgba(17, 24, 39, 0.06)"
-            v-for="(item,index) in currentList"
-            :key="`${item.planNo}_${index}`"
-
-        >
-          <!-- 自定义标题区域 -->
-          <template #head>
-            <view class="card-header">
-              <view class="common-card-title  u-line-1">{{ item.planName || '无计划名称' }}</view>
-            </view>
-          </template>
-
-          <template #body>
-            <view class="card-body">
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">计划编码：</view>
-                <view class="u-line-1 u-body-value">{{ item.planNo || '-' }}</view>
-              </view>
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">养护周期：</view>
-                <view class="u-line-1 u-body-value">{{ item.rate || '-' }}
-                  {{ uni.$dict.getDictLabel('cycle_id_type', item.cycleId) }}
-                </view>
-              </view>
-
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">计划完成次数：</view>
-                <view class="u-line-1 u-body-value">{{ item.planNum || 0 }}</view>
-              </view>
-
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">已完成次数：</view>
-                <view class="u-line-1 u-body-value">{{ item.planFinishNum || 0 }}</view>
-              </view>
-
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">计划有效期：</view>
-                <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至
-                  {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}
-                </view>
-              </view>
-
-              <!-- 操作区：统一收底 -->
-              <view class="card-action-row" v-if="item.finishState!==3">
-                <view class="mini-btn mini-btn--primary" @click="submitRecord(item)">提交记录</view>
-              </view>
             </view>
           </template>
         </up-card>
-
       </view>
     </z-paging>
   </view>
 </template>
-
 <script setup>
 import { ref, computed } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
-import {  maintainPlan } from "@/api/maintain-manage/maintain-manage";
+import { maintainPlan } from "@/api/maintain-manage/maintain-manage";
 import { timeFormat } from '@/uni_modules/uview-plus';
-
 // 初始化响应式数据
 const typeTabs = ref([])
 const statusTabs = ref([
@@ -216,56 +88,46 @@ const statusTabs = ref([
   { name: '已完成', id: '2' },
   { name: '已终止', id: '4' }
 ])
-
 // 核心响应式数据
 const activeType = ref('道路')
 const activeStatus = ref('1')
 const searchValue = ref('')
 const pagingRef = ref(null) // z-paging实例
-
 // 分页参数
 const pageSize = ref(10)
 const currentList = ref([]) // z-paging绑定的列表
-
 // 处理字典数据的方法
 const handleDictData = () => {
   // 获取养护类型字典
   const tabList = uni.$dict.getDictSimpleList('maintain_type')
   console.log('原始字典数据：', tabList)
-
   if (!tabList || tabList.length === 0) {
     console.warn('养护类型字典数据为空，请检查字典配置')
     typeTabs.value = [{ name: '道路', planTypeId: '', id: '道路' }]
     return
   }
-
   // 1. 过滤掉临时养护（包含"临时养护"的项）
   const filteredList = tabList.filter(item => !item.label.includes('临时养护'))
-
   // 2. 转换为 {name: 字典原生标签, planTypeId: 字典值, id: 标签名} 格式
   const convertedList = filteredList.map(item => ({
     name: item.label, // 直接使用字典原始名称
     planTypeId: item.value,
     id: item.label // 兼容up-tabs的id字段
   }))
-
   // 3. 补充道路类型（放在第一位）
   convertedList.unshift({
     name: '道路',
     planTypeId: '',
     id: '道路'
   })
-
   // 赋值给typeTabs
   typeTabs.value = convertedList
   console.log('处理后的字典数据：', typeTabs.value)
 }
-
 // 动态搜索框占位符
 const searchPlaceholder = computed(() => {
   return activeType.value === '道路' ? '请输入道路名称' : '请输入计划名称'
 })
-
 // 养护类型切换
 const handleTypeChange = (item) => {
   console.log('切换养护类型：', item)
@@ -274,7 +136,6 @@ const handleTypeChange = (item) =&gt; {
   // 重置分页并刷新
   pagingRef.value?.reload()
 }
-
 // 状态筛选切换
 const handleStatusChange = (item) => {
   console.log('切换状态：', item)
@@ -282,28 +143,25 @@ const handleStatusChange = (item) =&gt; {
   // 重置分页并刷新
   pagingRef.value?.reload()
 }
-
 // 搜索处理
 const handleSearch = () => {
   console.log('搜索关键词：', searchValue.value)
   // 重置分页并刷新
   pagingRef.value?.reload()
 }
-
 // 核心数据请求方法（适配z-paging的query回调）
 const fetchData = async (pageNo, pageSize) => {
   try {
     let res = null
-   const currentType = typeTabs.value.find(item => item.name === activeType.value)
-      res = await maintainPlan({
-        // planTypeId: currentType?.planTypeId || '',
-        roadName: searchValue.value.trim(),
-        pageNo,
-        pageSize,
-        finishState:1
-        // finishState: activeStatus.value
-      })
-
+    const currentType = typeTabs.value.find(item => item.name === activeType.value)
+    res = await maintainPlan({
+      // planTypeId: currentType?.planTypeId || '',
+      roadName: searchValue.value.trim(),
+      pageNo,
+      pageSize,
+      finishState: 1
+      // finishState: activeStatus.value
+    })
     // 告诉z-paging数据加载完成
     // res.list为当前页数据，res.total为总条数（如果接口返回）
     pagingRef.value?.complete(res?.list || [], res?.total)
@@ -314,7 +172,6 @@ const fetchData = async (pageNo, pageSize) =&gt; {
     pagingRef.value?.complete(false)
   }
 }
-
 // 跳转到计划明细页面
 const goToDetail = (item) => {
   // 存入完整对象给下一页
@@ -323,7 +180,6 @@ const goToDetail = (item) =&gt; {
     url: `/pages-sub/daily/maintain-manage/type-list`
   })
 }
-
 // 提交记录
 const submitRecord = (item) => {
   console.log('提交记录：', item)
@@ -336,23 +192,18 @@ const submitRecord = (item) =&gt; {
       url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}&businessType=${item.busiLine}`
     })
   }
-
-
 }
-
 // 页面加载时初始化数据
 onLoad(() => {
   // 先处理字典数据
   handleDictData()
 })
-onShow(()=>{
+onShow(() => {
   // 初始化分页数据
   pagingRef.value?.reload()
 })
 </script>
-
 <style scoped lang="scss">
-
 /* 页面底色：统一浅灰蓝（设计稿 --page-bg） */
 .page-container {
   min-height: 100vh;
@@ -360,32 +211,49 @@ onShow(()=&gt;{
   box-sizing: border-box;
 }
 // 吸顶区域样式
-/* 筛选条：上下各 12px（设计稿 .search-bar 上 8px / 下 12px，
- * 本页类型 Tabs 在代码里是注释状态，没有 Tabs 时上下取同一档 12px 更匀） */
 .sticky-wrap {
   background-color: #fff;
   padding: 24rpx 0;
   border-bottom: 1rpx solid #E8EBF0;
-
   .first-tabs, .second-tabs {
     margin: 10rpx 0;
   }
 }
-
-/* 卡片列表：页面左右 24rpx、卡片之间 24rpx（设计稿 .body）
- * 顶部留白 = 吸顶筛选条高度(12+32+12=56px) + 12px 间距；z-paging 内容从容器顶部起算，
- * 不留这段会被吸顶筛选条盖住卡片标题 */
+/* 卡片列表 */
 .maintain-card-list {
   display: flex;
   flex-direction: column;
   gap: 24rpx;
   padding: 136rpx 24rpx 24rpx;
+  position: relative;
+  .card-action-row {
+    position: absolute;
+    top: 50px;
+    right: 20px;
+  }
 }
-
-/* 卡片体：内边距由 up-card 的 paddingBody 控制，此处不再叠加 */
+/* 卡片体 */
 .card-body {
   padding: 0;
 }
  
-
-</style>
 \ No newline at end of file
+.u-body-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+/* ✅固定标题盒子宽度，文字右对齐，实现冒号竖对齐 */
+.u-body-item-title {
+  width: 100rpx!important;
+  flex-shrink: 0;
+  // text-align: right;
+  font-size: 26rpx;
+  color: #606266;
+}
+.u-body-value {
+  flex: 1;
+  padding-left:16rpx;
+  font-size: 26rpx;
+  color: #333;
+}
+</style>
@@ -17,20 +17,30 @@
             <view class="plan-name-wrap">
               <view class="plan-name u-line-1">{{ item.planName || '无计划名称' }}</view>
               <!-- 同一批次下多个期次的计划名称相同，必须显示计划编码才能区分 -->
-              <view class="plan-no u-line-1" v-if="item.planNo">计划编码：{{ item.planNo }}</view>
+             
             </view>
           </view>
+
+  
+          <view class="info-row">
+            <!-- timeFormat(start, 'yyyy-mm-dd'), -->
+            <view class="info-label">计划编码：</view>
+            <view class="info-value u-line-1">{{item.planNo }}—{{
+                timeFormat(item.endTime, 'yyyy-mm-dd') }}
+            </view>
+          </view>
+          
           <!-- 有效期 -->
           <view class="info-row">
             <!-- timeFormat(start, 'yyyy-mm-dd'), -->
-            <view class="info-label">有效期</view>
+            <view class="info-label">有效期：</view>
             <view class="info-value u-line-1">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') }}—{{
                 timeFormat(item.endTime, 'yyyy-mm-dd') }}
             </view>
           </view>
           <!-- 任务次数 -->
           <view class="info-row">
-            <view class="info-label">任务次数</view>
+            <view class="info-label">任务次数：</view>
             <!-- 已完成：一次一条期次时每个期次只完成 1 次，必须带上期次序号才能区分多次提交记录 -->
             <view class="info-value" v-if="activeStatus === '2'">
               有效期内第 {{ item.sortNum || 1 }} 个任务，共提交 {{ item.submitCount || 0 }} 次
@@ -395,16 +405,12 @@ onUnload(() =&gt; {
   background: #fff;
   border-bottom: 1rpx solid #E8EBF0;
 }
-/* 卡片列表：页面左右 24rpx、卡片之间 24rpx（设计稿 .body）
- * 顶部留白 = 吸顶 Tabs 高度 + 12px 间距，z-paging 内容从容器顶部起算，
- * 不留这段会被吸顶 Tabs 盖住卡片标题（与原页面 padding-top:100rpx 等效） */
 .card-list {
   padding: 112rpx 24rpx 24rpx;
   display: flex;
   flex-direction: column;
   gap: 24rpx;
 }
-/* 卡片：12px 内边距 / 8px 圆角 / 卡片阴影（设计稿 .tcard） */
 .task-card {
   background: #fff;
   border-radius: 16rpx;
@@ -413,12 +419,10 @@ onUnload(() =&gt; {
   display: flex;
   flex-direction: column;
 }
-/* 标题行：标题占满剩余宽度，状态标签靠右（设计稿 .tcard-head） */
 .card-head {
   display: flex;
   align-items: center;
   gap: 16rpx;
-  /* 与 .plan-no / .info-row 的间距保持一致，卡内文字行上下距离统一 */
   margin-bottom: 8rpx;
 }
 .plan-name-wrap {
@@ -437,26 +441,28 @@ onUnload(() =&gt; {
   color: #6B7280;
   line-height: 1.4;
 }
+
 .info-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16rpx;
+  gap: 0;
   margin-bottom: 8rpx;
 }
 .info-label {
+  width: 130rpx !important;
+  flex-shrink: 0;
   font-size: 26rpx;
   color: #6B7280;
-  flex-shrink: 0;
 }
 .info-value {
   flex: 1;
   min-width: 0;
+  padding-left: 16rpx;
   font-size: 26rpx;
   color: #1F2937;
   text-align: left;
 }
-/* 操作区统一收底：上 16rpx 留白 + 分隔线（设计稿 .tcard-foot） */
+
 .action-row {
   display: flex;
   align-items: center;
@@ -472,22 +478,15 @@ onUnload(() =&gt; {
   gap: 16rpx;
   margin-left: auto;
 }
-// 置为失效（红字）/ 去作业（蓝）/ 去查看（灰）/ 结束任务（白底描边）
-// 尺寸与配色统一由全局 .btn-text-danger、.mini-btn 系列控制
-/* 卡片操作按钮：统一按钮形态，主色 #3b9dff
- * 浅底（置为失效） / 描边（结束任务） / 实心（去作业）
- * 需 !important 覆盖全局 .mini-btn 的白字与 .btn-text-danger 等既有配色 */
 .btn-brand-soft {
   color: #3b9dff !important;
   background-color: #EAF4FF !important;
 }
-
 .btn-brand-outline {
   color: #3b9dff !important;
   background-color: #ffffff !important;
   border: 1rpx solid #3b9dff;
 }
-
 .btn-brand-solid {
   color: #ffffff !important;
   background-color: #3b9dff !important;
@@ -497,8 +496,6 @@ onUnload(() =&gt; {
   box-sizing: border-box;
   padding: 10rpx 0;
 }
-
-/* 失效原因（必填）：标签 + 输入域 */
 .invalid-modal-label {
   display: flex;
   align-items: center;
@@ -507,13 +504,11 @@ onUnload(() =&gt; {
   font-size: 28rpx;
   color: #1F2937;
 }
-
 .invalid-modal-required {
   color: #DC2626;
 }
-
-/* 失效凭证上传：与上方原因输入框保持同样的间距 */
 .upload-wrap {
   margin-top: 16rpx;
 }
 </style>
+
@@ -8,7 +8,7 @@
                     <text class="info-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>
+                            :class="{ 'info-line--count': row.label === '待完成数' }">{{ value }}</view>
                     </view>
                 </view>
             </view>
@@ -82,7 +82,7 @@ onShow(() =&gt; {
                 { label: '计划类型', values: [type.planTypeName || '--'] },
                 { label: '执行时间', values: uniq(batches.map((batch: any) =>
                         `${formatDate(batch.beginTime)} - ${formatDate(batch.endTime)}`)) },
-                { label: '待完成任务', values: [`${pendingCount}次`] }
+                { label: '待完成数', values: [`${pendingCount}次`] }
             ]
         }
     })
@@ -131,21 +131,18 @@ onUnload(()=&gt;{
 .info-row {
     display: flex;
     align-items: flex-start;
-    justify-content: space-between;
-    gap: 16rpx;
 }
-
 .info-label {
-    flex-shrink: 0;
-    font-size: 26rpx;
-    color: #6B7280;
-    line-height: 1.5;
+  width: 130rpx !important;
+  flex-shrink: 0;
+  font-size: 26rpx;
+  color: #6B7280;
+  line-height: 1.5;
 }
-
 .info-value {
     flex: 1;
     min-width: 0;
-    text-align: left;
+    padding-left: 16rpx;
 }
  
 .info-line {
@@ -119,7 +119,7 @@ export default {
 /* 页面底：设计稿 --page-bg */
 .page-container {
   min-height: 100vh;
-  padding-bottom: 48rpx;
+  // padding-bottom: 48rpx;
   box-sizing: border-box;
   background-color: #F4F6FA;
   /* 竖向 flex：头部固定高度，卡片+按钮组在剩余区域居中 */
@@ -129,8 +129,9 @@ export default {
  
 /* 卡片 + 退出登录按钮：作为一组在头部以下的剩余空间里垂直居中 */
 .mine-body {
-  flex: 1;
+  // flex: 1;
   display: flex;
+  padding-top: 30px;
   flex-direction: column;
   justify-content: center;
 }
@@ -143,7 +144,7 @@ export default {
   display: flex;
   align-items: center;
   /* 卡片不再上压，底部留白按原视觉高度（120 - 80 重叠）收成 40rpx */
-  padding: 48rpx 32rpx 40rpx;
+  padding: 148rpx 32rpx 40rpx;
   box-sizing: border-box;
   background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 60%, #3B82F6 100%);
 }