样式统一

src/pages.json

@@ -98,6 +98,7 @@
       "path": "pages/settlement/list",
       "style": {
         "navigationStyle": "default",
+        "enablePullDownRefresh": true,
         "navigationBarTitleText": "结算管理"
       }
     },
@@ -112,7 +113,8 @@
       "path": "pages/oils/list",
       "style": {
         "navigationStyle": "default",
-        "navigationBarTitleText": "项目-油品信息管理"
+        "navigationBarTitleText": "项目-油品信息管理",
+        "enablePullDownRefresh": true
       }
     },
     {
@@ -121,7 +123,14 @@
         "navigationStyle": "default",
         "navigationBarTitleText": "项目-油品信息管理"
       }
-    }
+    },
+    {
+      "path": "pages/oils/detail",
+      "style": {
+        "navigationStyle": "default",
+        "navigationBarTitleText": "项目-油品信息管理"
+      }
+    },
     {
       "path": "pages/payment/list",
       "style": {

src/pages/oils/detail.vue

@@ -0,0 +1,17 @@
+<template>
+  <view>
+    <wd-cell v-for="(item, i) in list" :title="item.fieldName" :value="item.value" />
+  </view>
+</template>
+<script lang="ts" setup>
+const list = ref([]);
+const filedsData = ref({});
+onLoad((options) => {
+  filedsData.value = JSON.parse(options.filedsData);
+  // 删除id
+  if (filedsData.value.id) {
+    delete filedsData.value.id;
+  }
+  list.value = Object.values(filedsData.value);
+});
+</script>

src/pages/oils/list.vue

@@ -18,9 +18,7 @@
         </template>
       </wd-search>
     </view>
-    <view class="page-edit">
-      <wd-button @click="addData">新增</wd-button>
-    </view>
+
     <wd-action-sheet
       v-model="showSheet"
       :title="searchType"
@@ -30,30 +28,30 @@
     />
 
     <template v-for="(item, index) in settlementList" :key="index">
-      <wd-card :title="'项目编号：' + item.COL_0.value">
-        <view class="justify-between items-center flex">
-          <view>
-            <template v-for="(field, index) in showListField">
-              <view>{{ field.content }}： {{ item[field.field].value }}</view>
-            </template>
-          </view>
-          <view class="list-edit-btn">
-            <wd-button size="small" @click="goEdit(item)">编辑</wd-button>
-            <!-- 删除 -->
-            <wd-button size="small" type="warning" @click="deleteData(item)">删除</wd-button>
+      <wd-card>
+        <view class="project-body"  @click="goDetail(item)">
+          <view class="body-list" v-for="(field, i) in showListField" :key="i">
+            <view>{{ field.content }}： {{ item[field.field].value }}</view>
           </view>
         </view>
+        <template #footer>
+          <wd-button size="small" plain @click="goEdit(item)">编辑</wd-button>
+          <wd-button
+            style="margin-left: 10px"
+            size="small"
+            type="error"
+            plain
+            @click="deleteData(item)"
+          >
+            删除
+          </wd-button>
+        </template>
       </wd-card>
     </template>
+    <wd-loadmore custom-class="loadmore" :state="loadState" />
   </view>
-  <view class="pagination">
-    <wd-pagination
-      v-model="pageQuery.current"
-      :page-size="pageQuery.size"
-      :total="pageQuery.total"
-      show-icon
-      @change="handleChangePagination"
-    />
+  <view class="addbtn">
+    <wd-button block type="primary" @click="addData">新增</wd-button>
   </view>
   <wd-toast />
   <wd-message-box />
@@ -67,6 +65,7 @@ const message = useMessage();
 const show = ref<boolean>(false);
 const searchType = ref<string>('项目名称');
 const value = ref<string>('');
+const loadState = ref('loading');
 const menu = ref([
   {
     content: '项目名称',
@@ -74,6 +73,11 @@ const menu = ref([
   },
 ]);
 const showListField = ref([
+  // 项目编号：
+  {
+    content: '项目编号',
+    field: 'COL_0',
+  },
   {
     content: '项目名称',
     field: 'COL_1',
@@ -115,12 +119,12 @@ function searchChange(value) {
       oilName: '',
       customerName: '',
     };
-    getSettlementList();
+    getSettlementList('reset');
   }
 }
 // cancelChange
 function cancelChange(value) {
-  getSettlementList();
+  getSettlementList('reset');
 }
 const actions = ref([]);
 // 油品名称
@@ -136,6 +140,7 @@ const getUserList = () => {
   });
 };
 getUserList();
+
 const projectList = ref([]);
 const getProjectList = () => {
   // 获取项目列表
@@ -178,15 +183,30 @@ const pageQuery = ref({
   descs: 536,
   total: 0,
 });
-onLoad(() => {
-  getSettlementList();
+
+// 下拉刷新
+onPullDownRefresh(() => {
+  getSettlementList('reset');
+});
+// 上拉加载
+onReachBottom(() => {
+  if (pageQuery.value.current * pageQuery.value.size < pageQuery.value.total) {
+    pageQuery.value.current++;
+    getSettlementList();
+  }
 });
 // 获取结算管理列表
 const formKey = ref<string>('a6decb955c72427dedf7db22a4142934');
 const idKeyData = ref<string>('');
 const settlementList = ref([]);
 const tableData = ref([]);
-const getSettlementList = () => {
+const getSettlementList = (setparams) => {
+  // finished
+  loadState.value = 'loading';
+  if (setparams === 'reset') {
+    // 页码归于1
+    pageQuery.value.current = 1;
+  }
   DemoApi.getConfig(formKey.value).then((res) => {
     const { dbLinkId, idKey } = res.data;
     idKeyData.value = idKey;
@@ -247,15 +267,19 @@ const getSettlementList = () => {
         }
         arr.push(obj);
       });
+      if (setparams === 'reset') {
+        settlementList.value = arr;
+      } else {
+        settlementList.value = settlementList.value.concat(arr);
+      }
+      loadState.value = 'finished';
+      // 关闭下拉刷新
+      uni.stopPullDownRefresh();
       // 回到顶部
-      settlementList.value = arr;
     });
   });
 };
-getSettlementList();
-function handleChangePagination() {
-  getSettlementList();
-}
+
 function goEdit(item) {
   router.push({
     path: 'pages/oils/form',
@@ -268,6 +292,15 @@ function addData() {
     query: { filedsData: '[]', formKey: formKey.value },
   });
 }
+// goDetail 去往详情页
+function goDetail(item) {
+  console.log("🚀 ~ goDetail ~ item:", item)
+  router.push({
+    path: 'pages/oils/detail',
+    query: { filedsData: JSON.stringify(item || '[]'), formKey: formKey.value },
+
+  });
+}
 // 删除
 function deleteData(item) {
   let obj = {};
@@ -296,7 +329,7 @@ function deleteData(item) {
         },
         success: (res) => {
           toast.success('删除成功');
-          getSettlementList();
+          getSettlementList('reset');
         },
       });
     });
@@ -335,7 +368,12 @@ function deleteData(item) {
   z-index: 1;
 }
 .settlement-form {
-  padding: 75rpx 0;
+  padding-top: 130rpx;
+  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
+  width: 100vw;
+  box-sizing: border-box;
+  background: #f1f1f1;
+  position: relative;
 }
 // 固定到顶部
 .search-view {
@@ -357,4 +395,29 @@ function deleteData(item) {
     margin-bottom: 20rpx;
   }
 }
+.addbtn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.project-body {
+  display: flex;
+  flex-direction: column;
+  .body-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      .item-left {
+        width: 30%;
+      }
+      .item-right {
+        flex: 1;
+        text-align: right;
+      }
+    }
+  }
+}
 </style>

src/pages/settlement/list.vue

@@ -18,10 +18,7 @@
         </template>
       </wd-search>
     </view>
-    <view class="page-edit">
-      <wd-button @click="addData">新增</wd-button>
-      <!-- 删除 -->
-    </view>
+
     <wd-action-sheet
       v-model="showSheet"
       :title="searchType"
@@ -31,30 +28,30 @@
     />
 
     <template v-for="(item, index) in settlementList" :key="index">
-      <wd-card :title="'开票日期：' + item.COL_0.value">
-        <view class="justify-between items-center flex">
-          <view>
-            <template v-for="(field, index) in showListField">
-              <view>{{ field.content }}： {{ item[field.field].value }}</view>
-            </template>
-          </view>
-          <view class="list-edit-btn">
-            <wd-button size="small" @click="goEdit(item)">编辑</wd-button>
-            <!-- 删除 -->
-            <wd-button size="small" type="warning" @click="deleteData(item)">删除</wd-button>
+      <wd-card>
+        <view class="project-body" @click="goDetail(item)">
+          <view class="body-list" v-for="(field, i) in showListField" :key="i">
+            <view>{{ field.content }}： {{ item[field.field].value }}</view>
           </view>
         </view>
+        <template #footer>
+          <wd-button size="small" plain @click="goEdit(item)">编辑</wd-button>
+          <wd-button
+            style="margin-left: 10px"
+            size="small"
+            type="error"
+            plain
+            @click="deleteData(item)"
+          >
+            删除
+          </wd-button>
+        </template>
       </wd-card>
     </template>
+    <wd-loadmore custom-class="loadmore" :state="loadState" />
   </view>
-  <view class="pagination">
-    <wd-pagination
-      v-model="pageQuery.current"
-      :page-size="pageQuery.size"
-      :total="pageQuery.total"
-      show-icon
-      @change="handleChangePagination"
-    />
+  <view class="addbtn">
+    <wd-button block type="primary" @click="addData">新增</wd-button>
   </view>
   <wd-toast />
   <wd-message-box />
@@ -67,6 +64,8 @@ import { ref } from 'vue';
 import { useToast, useMessage } from 'wot-design-uni';
 const message = useMessage();
 const show = ref<boolean>(false);
+const loadState = ref('loading');
+
 const searchType = ref<string>('项目名称');
 const value = ref<string>('');
 const menu = ref([
@@ -78,10 +77,13 @@ const menu = ref([
     content: '油品名称',
     filedName: 'oilName',
   },
-
 ]);
 const showListField = ref([
   {
+    content: '开票日期',
+    field: 'COL_0',
+  },
+  {
     content: '项目名称',
     field: 'COL_10',
   },
@@ -123,12 +125,12 @@ function searchChange(value) {
       oilName: '',
       customerName: '',
     };
-    getSettlementList();
+    getSettlementList('reset');
   }
 }
 // cancelChange
 function cancelChange(value) {
-  getSettlementList();
+  getSettlementList('reset');
 }
 const actions = ref([]);
 // 油品名称
@@ -185,12 +187,29 @@ const pageQuery = ref({
   total: 0,
 });
 
+// 下拉刷新
+onPullDownRefresh(() => {
+  getSettlementList('reset');
+});
+// 上拉加载
+onReachBottom(() => {
+  if (pageQuery.value.current * pageQuery.value.size < pageQuery.value.total) {
+    pageQuery.value.current++;
+    getSettlementList();
+  }
+});
 // 获取结算管理列表
 const formKey = ref<string>('4d62523c9ef74cdacb90146125929f37');
 const idKeyData = ref<string>('');
 const settlementList = ref([]);
 const tableData = ref([]);
-const getSettlementList = () => {
+const getSettlementList = (setparams) => {
+  // finished
+  loadState.value = 'loading';
+  if (setparams === 'reset') {
+    // 页码归于1
+    pageQuery.value.current = 1;
+  }
   DemoApi.getConfig(formKey.value).then((res) => {
     const { dbLinkId, idKey } = res.data;
     idKeyData.value = idKey;
@@ -217,8 +236,8 @@ const getSettlementList = () => {
       };
       if (searchForm.value[item.filedName]) {
         obj.values.push(searchForm.value[item.filedName]);
-        params.paramList.push(obj);
       }
+      params.paramList.push(obj);
     });
 
     DemoApi.getFormDataList(params).then((resp) => {
@@ -231,10 +250,8 @@ const getSettlementList = () => {
       // pageData.records 是后台返回的数据
       // tableData 是前台配置的表头
       const idKey = columnDict[idKeyData.value];
-      // console.log(idKey);
       const arr = [];
       pageData.records.map((val) => {
-        console.log(val);
         const obj = {};
         obj.id = val[idKey];
         for (const key in columnDict) {
@@ -253,15 +270,19 @@ const getSettlementList = () => {
         }
         arr.push(obj);
       });
+      if (setparams === 'reset') {
+        settlementList.value = arr;
+      } else {
+        settlementList.value = settlementList.value.concat(arr);
+      }
+      loadState.value = 'finished';
+      // 关闭下拉刷新
+      uni.stopPullDownRefresh();
       // 回到顶部
-      settlementList.value = arr;
     });
   });
 };
-getSettlementList();
-function handleChangePagination() {
-  getSettlementList();
-}
+
 // 删除
 function deleteData(item) {
   let obj = {};
@@ -290,11 +311,14 @@ function deleteData(item) {
         },
         success: (res) => {
           toast.success('删除成功');
-          getSettlementList();
+          getSettlementList('reset');
         },
       });
     });
 }
+onLoad(() => {
+  getSettlementList();
+});
 function goEdit(item) {
   router.push({
     path: 'pages/settlement/form',
@@ -307,7 +331,6 @@ function addData() {
     query: { filedsData: '[]', formKey: formKey.value },
   });
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -342,7 +365,12 @@ function addData() {
   z-index: 1;
 }
 .settlement-form {
-  padding: 75rpx 0;
+  padding-top: 130rpx;
+  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
+  width: 100vw;
+  box-sizing: border-box;
+  background: #f1f1f1;
+  position: relative;
 }
 // 固定到顶部
 .search-view {
@@ -364,4 +392,29 @@ function addData() {
     margin-bottom: 20rpx;
   }
 }
+.addbtn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.project-body {
+  display: flex;
+  flex-direction: column;
+  .body-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      .item-left {
+        width: 30%;
+      }
+      .item-right {
+        flex: 1;
+        text-align: right;
+      }
+    }
+  }
+}
 </style>