feat:增加取水能力

web

2025-07-08 a1aca8be99e62ea683fd8d7db82d7a480f5d0305

 pages/index/index.vue

@@ -1,7 +1,48 @@
<template>
   <view class="container" :style="{paddingTop:topHeight + 'rpx'}">
      <view class="content">
         111
<!--          <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 class="card">
            <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="domain">
            <view class="t">功能列表</view>
            <view class="c">
               <view class="item" @click="handleNav('/pages/record/qushui')">
                  <image src="/static/images/qushui.png"></image>
                  <view>取水记录</view>
               </view>
               <view class="item" @click="handleNav('/pages/record/chongzhi')">
                  <image src="/static/images/chongzhi.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>
</template>
@@ -9,25 +50,217 @@
<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:'',
   }
   
   // 获取状态栏高度
   function getTopHeight(){
   const getTopHeight = () => {
      if(uni.getMenuButtonBoundingClientRect){
         topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
      }
   }
   
   const handleNav = (url) => {
      if(!url){
         uni.showToast({
            title: '功能待开发...',
            icon: 'none'
         })
         return
      }
      uni.navigateTo({
         url: url
      })
   }
	
   // 获取用户信息
   const getUserDatail = () => {
      getUserInfo().then(res => {
         if(res.code == 200){
            userInfo.value = res.data
            uni.setStorageSync('userInfo',JSON.stringify(res.data))
         }
      })
   }
	
   //获取用户位置并存储
   const storageLocation = () => {
      uni.getLocation({
         type:'gcj02',
         isHighAccuracy:true,
         success:(res) =>{
            userLocation.lat = res.latitude
            userLocation.lon = res.longitude
            uni.setStorageSync('userLocation',JSON.stringify(userLocation))
         },
         fail:(err) =>{
            locationToast()
         }
      })
   }
   //用户拒绝授权
   const locationToast = () => {
      uni.showModal({
         title: "请求授权当前位置",
         content: "请求获取您的位置，加载附近取水设备信息！",
         confirmText: "前往设置",
         success: (res) => {
            if (res.confirm) {
               uni.openSetting({
                   success:(res1) =>{ //打开设置成功
                     if (res1.authSetting['scope.userLocation']){
                        setTimeout(() =>{
                           storageLocation()
                        },1000)
                     }
                  },
               })
            }else{
               uni.showToast({
                  title: '请先授权！',
                  duration: 2000,
                  icon:'none'
               });
            }
         },
      });
   }
   const getUserLocation = () => {
      // 请求用户授权，第一次进入首页会有位置授权的提示
      uni.authorize({
        scope: 'scope.userLocation',
        success() {
         storageLocation()
        },
        fail() {
         locationToast()
        }
      })
   }
   onMounted(() => {
      getTopHeight()
      // if(!uni.getStorageSync('openId') || !uni.getStorageSync('token')){
      //    uni.redirectTo({
      //       url:'/pages/login/index'
      //    })
      // }
      // 获取位置信息
      getUserLocation()
   })
	
   onShow(() => {
      getUserDatail()
   })
</script>

<style lang="scss" scoped>
   .container{
      height: 100vh;
      background: linear-gradient( 180deg, #5EA1FA 0%, #D2F2FE 20%, #f5f5f5 30%);
      border-radius: 0px 0px 0px 0px;
      box-sizing: border-box;
   }
   .content{
      padding: 0 32rpx;
      .user{
         height: 100rpx;
         display: flex;
         align-items: center;
         .userImg{
            width: 80rpx;
            height: 80rpx;
            image{
               width: 100%;
               border-radius: 50%;
            }
         }
         .info{
            margin-left: 30rpx;
            .name{
               vertical-align: text-bottom;
            }
         }
      }
      .card{
         width: 100%;
         height: 260rpx;
         background: url('/static/images/card.png') no-repeat;
         background-size: 100% 100%;
         margin-top: 40rpx;
         color: #fff;
         font-size: 40rpx;
         padding: 0 30rpx;
         box-sizing: border-box;
         position: relative;
         .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: 30rpx;
            button{
               width: 200rpx;
               height: 80rpx;
               line-height: 80rpx;
               border-radius: 40rpx;
               background: linear-gradient(90deg, #65B5FD 0%, #338AFD 100%, #65A7FD 100%);
            }
         }
      }
      .near{
         height: 120rpx;
         line-height: 120rpx;
         margin-top: 40rpx;
         box-shadow: 0px 0px 6px 0px rgba(13,118,255,0.0608);
         border-radius: 10px 10px 10px 10px;
         background-color: #fff;
         text-align: center;
         font-size: 40rpx;
         image{
            width: 83rpx;
            height: 80rpx;
            vertical-align: middle;
            margin-right: 80rpx;
         }
      }
      .domain{
         margin-top: 40rpx;
         .t{
            padding: 0 20rpx;
         }
         .c{
            margin-top: 20rpx;
            height: 180rpx;
            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;
               }
            }
         }
      }
   }
</style>