From 8e5fb21a2bf621291c1ceee396c01e3d42553511 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 03 七月 2025 17:23:23 +0800
Subject: [PATCH] 修改首页，添加记录
---
pages/index/index.vue | 84 ++++++++++++++++++++++++++---------------
1 files changed, 53 insertions(+), 31 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index dcec281..c1abbf2 100644
--- a/pages/index/index.vue
+++ b/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;
--
Gitblit v1.9.3