From 0cfe50c34659fc30b8e6cdc05d9e4198efa71be9 Mon Sep 17 00:00:00 2001 From: web <candymxq888@outlook.com> Date: 星期五, 04 七月 2025 16:26:56 +0800 Subject: [PATCH] 支付模块 --- pages/index/index.vue | 88 ++++++++++++++++++++++++++++--------------- 1 files changed, 57 insertions(+), 31 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index dcec281..6d99bd1 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:'', @@ -74,6 +77,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,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