From 03bcdfbc9dd10e473686bbe27a8e615f5a22a283 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 02 七月 2025 16:11:04 +0800
Subject: [PATCH] fix:小程序界面
---
pages/index/index.vue | 221 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 214 insertions(+), 7 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7890aff..dcec281 100644
--- a/pages/index/index.vue
+++ b/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>
--
Gitblit v1.9.3