修改首页，添加记录

web

2025-07-03 8e5fb21a2bf621291c1ceee396c01e3d42553511

 pages/record/chongzhi.vue

@@ -1,12 +1,105 @@
<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="chongzhi">
         <view class="item" v-for="(item, index) in list" :key="index">
            <vie class="info">
               <view>充值金额：<text class="val">{{item.rechargeAmount}}</text>元</view>
               <view>充值水量：<text class="val">{{item.rechargeWater}}</text>m³</view>
            </vie>
            <view class="status">
               <view v-if="item.rechargeStatus === 1" style="color: #19d60b;">已充值</view>
               <view v-else style="color: #818181;">未充值</view>
            </view>
            <view class="tm">{{item.createTimeView}}</view>
         </view>
      </view>
   </view>
</template>

<script setup>
   import {ref, onMounted} from 'vue'
   import Navbar from '../../components/navbar/navbar.vue'
   import {getrechargeRecord} 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
      }
      getrechargeRecord(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>
   .chongzhi{
      padding: 0 20rpx;
      .item{
         padding: 20rpx;
         border-bottom: 1px solid #ddd;
         display: flex;
         align-items: center;
         justify-content: space-between;
         .info{
            width: 45%;
            flex-shrink: 0;
            text-align: left;
            font-size: 24rpx;
            .val{
               font-size: 28rpx;
            }
         }
         .status{
            flex-grow: 1;
            text-align: center;
         }
         .tm{
            flex-grow: 1;
            text-align: right;
            font-size: 24rpx;
         }
      }
   }
</style>