<template>
|
<view class="container" :style="{paddingTop:topHeight + 'rpx'}">
|
<view class="content">
|
<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>
|
|
<script setup>
|
import { onMounted, ref } from "vue";
|
import { BASE_URL } from '../../config/index.js';
|
|
const topHeight = ref(0)
|
let userLocation = {
|
lat:'',
|
lon:'',
|
}
|
|
// 获取状态栏高度
|
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()
|
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>
|
