From a1aca8be99e62ea683fd8d7db82d7a480f5d0305 Mon Sep 17 00:00:00 2001 From: web <candymxq888@outlook.com> Date: 星期二, 08 七月 2025 09:58:05 +0800 Subject: [PATCH] feat:增加取水能力 --- pages/index/index.vue | 90 +++++++++++++++++++++++++++++---------------- 1 files changed, 58 insertions(+), 32 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index dcec281..9564b1e 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,11 @@ <script setup> import { onMounted, ref } from "vue"; import { BASE_URL } from '../../config/index.js'; + import { getUserInfo } from '@/api/index.js' + import { onShow } from "@dcloudio/uni-app" const topHeight = ref(0) + const userInfo = ref() let userLocation = { lat:'', lon:'', @@ -77,6 +80,16 @@ }) } + // 获取用户信息 + const getUserDatail = () => { + getUserInfo().then(res => { + if(res.code == 200){ + userInfo.value = res.data + uni.setStorageSync('userInfo',JSON.stringify(res.data)) + } + }) + } + //获取用户位置并存储 const storageLocation = () => { uni.getLocation({ @@ -96,7 +109,7 @@ const locationToast = () => { uni.showModal({ title: "请求授权当前位置", - content: "请求获取您的位置,加载附近饮水设备信息!", + content: "请求获取您的位置,加载附近取水设备信息!", confirmText: "前往设置", success: (res) => { if (res.confirm) { @@ -133,7 +146,12 @@ } onMounted(() => { getTopHeight() + // 获取位置信息 getUserLocation() + }) + + onShow(() => { + getUserDatail() }) </script> @@ -172,23 +190,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 +237,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