From 8e5fb21a2bf621291c1ceee396c01e3d42553511 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 03 七月 2025 17:23:23 +0800
Subject: [PATCH] 修改首页，添加记录
---
pages/record/qushui.vue | 87 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 86 insertions(+), 1 deletions(-)
diff --git a/pages/record/qushui.vue b/pages/record/qushui.vue
index ae22ce0..48e97a6 100644
--- a/pages/record/qushui.vue
+++ b/pages/record/qushui.vue
@@ -1,12 +1,97 @@
<template>
- <view class="device">
+ <view class="record">
<Navbar title="取水记录"></Navbar>
+ <view class="header">
+ <uni-data-select
+ v-model="dateType"
+ :localdata="dataTypeOption"
+ @change="changeTime"
+ :clear="false"
+ />
+ </view>
+ <view class="qushui">
+ <view class="item" v-for="(item, index) in list" :key="index">
+ <vie class="info">
+ <view>取水量：<text class="val">{{item.waterAmount}}</text>m³</view>
+ <view>剩余水量：<text class="val">{{item.balance}}</text>m³</view>
+ </vie>
+ <view class="tm">{{item.payTime}}</view>
+ </view>
+ </view>
</view>
</template>
<script setup>
+ import {ref, onMounted} from 'vue'
import Navbar from '../../components/navbar/navbar.vue'
+ import {getqushuiRecord} from '@/api/index.js'
+ import { onReachBottom } from '@dcloudio/uni-app';
+
+ const list = ref([])
+ const page = ref(1)
+ const dateType = ref(0)
+
+ const dataTypeOption = [
+ { text: '全部', value: 0 },
+ { text: '本日', value: 1 },
+ { text: '本周', value: 2 },
+ { text: '本月', value: 3 },
+ { text: '本年', value: 4 }
+ ]
+
+ const getData = () => {
+ const data = {
+ dateType: dateType.value,
+ limit: 10,
+ page: page.value
+ }
+ getqushuiRecord(data).then(res => {
+ if(res.code === 200) {
+ list.value = res.data.list
+ }
+ })
+ }
+
+ // 选择时间
+ const changeTime = () => {
+ page.value = 1
+ getData()
+ }
+
+ // 触底加载数据
+ onReachBottom(() => {
+ page.value ++
+ getData()
+ })
+
+ onMounted(() => {
+ getData()
+ })
</script>
<style lang="scss" scoped>
+ .qushui{
+ padding: 0 20rpx;
+ .item{
+ padding: 20rpx;
+ border-bottom: 1px solid #ddd;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .info{
+ width: 50%;
+ flex-shrink: 0;
+ text-align: left;
+ font-size: 24rpx;
+ .val{
+ font-size: 28rpx;
+ }
+ }
+ .tm{
+ flex-grow: 1;
+ text-align: right;
+ font-size: 24rpx;
+ }
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3