fix:小程序界面

web

2025-07-02 03bcdfbc9dd10e473686bbe27a8e615f5a22a283

 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">
               <text>水量：</text>
               <text>750m³</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>
            <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/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>
   </view>
</template>
@@ -11,23 +52,189 @@
   import { BASE_URL } from '../../config/index.js';
   
   const topHeight = ref(0)
   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 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()
   })
</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: 60rpx;
         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;
            overflow: hidden;
         }
         .btn{
            position: absolute;
            right: 30rpx;
            bottom: 50rpx;
            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;
         .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;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item{
               text-align: center;
               image{
                  width: 100rpx;
                  height: 100rpx;
               }
            }
         }
      }
   }
</style>