修改首页，添加记录

web

2025-07-03 8e5fb21a2bf621291c1ceee396c01e3d42553511

 pages/index/index.vue

@@ -1,26 +1,30 @@
<template>
   <view class="container" :style="{paddingTop:topHeight + 'rpx'}">
      <view class="content">
         <view class="user">
<!--          <view class="user">
            <view class="userImg">
               <image src="/static/images/login/wx.png" mode="widthFix"></image>
            </view>
            <view class="info">
               <text class="name">张三</text>
            </view>
         </view>
         </view> -->
         <view class="card">
            <view class="water">
               <text>水量：</text>
               <text>750m³</text>
            <view class="water item">
               <text>剩余水量：</text>
               <text>{{userInfo?.balance}}m³</text>
            </view>
            <view class="by item">
               <text>总购水量：</text>
               <text>{{userInfo?.sumBuyCount}}m³</text>
            </view>
            <view class="all item">
               <text>累计水量：</text>
               <text>{{userInfo?.sumUseCount}}m³</text>
            </view>
            <view class="btn">
               <button type="primary" @click="handleNav('/pages/recharge/index')">充值</button>
            </view>
         </view>
         <view class="near" @click="handleNav('/pages/device/index')">
            <image src="/static/images/address.png" mode="widthFix"></image>
            <text>附近设备</text>
         </view>
         <view class="domain">
            <view class="t">功能列表</view>
@@ -29,19 +33,15 @@
                  <image src="/static/images/qushui.png"></image>
                  <view>取水记录</view>
               </view>
               <view class="item" @click="handleNav('/pages/record/shuiliang')">
                  <image src="/static/images/shuiliang.png"></image>
                  <view>水量记录</view>
               </view>
               <view class="item" @click="handleNav('/pages/record/chongzhi')">
                  <image src="/static/images/chongzhi.png"></image>
                  <view>充值记录</view>
               </view>
               <view class="item" @click="handleNav()">
                  <image src="/static/images/kefu.png"></image>
                  <view>联系客服</view>
               </view>
            </view>
         </view>
         <view class="near" @click="handleNav('/pages/device/index')">
            <image src="/static/images/address.png" mode="widthFix"></image>
            <text>附近设备</text>
         </view>
      </view>
   </view>
@@ -50,8 +50,10 @@
<script setup>
    import { onMounted, ref } from "vue";
   import { BASE_URL } from '../../config/index.js';
   import { getUserInfo } from '@/api/index.js'
   
   const topHeight = ref(0)
   const userInfo = ref()
   let userLocation = {
      lat:'',
      lon:'',
@@ -74,6 +76,16 @@
      }
      uni.navigateTo({
         url: url
      })
   }
	
   // 获取用户信息
   const getUserDatail = () => {
      getUserInfo().then(res => {
         if(res.code == 200){
            userInfo.value = res.data
            uni.setStorageSync('userInfo',JSON.stringify(res.data))
         }
      })
   }
   
@@ -133,6 +145,8 @@
   }
   onMounted(() => {
      getTopHeight()
      getUserDatail()
      // 获取位置信息
      getUserLocation()
   })
</script>
@@ -172,23 +186,26 @@
         background-size: 100% 100%;
         margin-top: 40rpx;
         color: #fff;
         font-size: 60rpx;
         font-size: 40rpx;
         padding: 0 30rpx;
         box-sizing: border-box;
         position: relative;
         .water{
            width: 100%;
            padding: 20rpx 0;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
         .item{
            padding: 15rpx 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }
         .water .by{
            width: 100%;
         }
         .all{
            width: 68%;
         }
         .btn{
            position: absolute;
            right: 30rpx;
            bottom: 50rpx;
            bottom: 30rpx;
            button{
               width: 200rpx;
               height: 80rpx;
@@ -216,19 +233,24 @@
      }
      .domain{
         margin-top: 40rpx;
         .t{
            padding: 0 20rpx;
         }
         .c{
            margin-top: 20rpx;
            height: 180rpx;
            background: #FFFFFF;
            box-shadow: 0 0 12rpx 0 rgba(13,118,255,0.0608);
            border: 2rpx solid #D6ECFF;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item{
               width: 30%;
               text-align: center;
               background: #FFFFFF;
               box-shadow: 0 0 12rpx 0 rgba(13,118,255,0.0608);
               border: 2rpx solid #D6ECFF;
               border-radius: 20rpx;
               padding: 20rpx 30rpx;
               image{
                  width: 100rpx;
                  height: 100rpx;