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/record/chongzhi.vue | 12
pages/device/index.vue | 33 ++
pages/user/index.vue | 63 ++--
static/images/qushui.png | 0
config/index.js | 2
pages.json | 9
static/images/navBack.svg | 1
pages/record/shuiliang.vue | 12
App.vue | 5
static/images/kefu.png | 0
pages/recharge/index.vue | 307 +++++++++++++++++++++++
components/navbar/navbar.vue | 15
static/images/recharge/wx.png | 0
utils/request.js | 2
pages/record/qushui.vue | 12
static/images/chongzhi.png | 0
static/images/login/top_bg.png | 0
pages/login/index.vue | 24
static/images/address.png | 0
manifest.json | 13
api/index.js | 16 +
static/images/card.png | 0
static/images/shuiliang.png | 0
pages/index/index.vue | 221 ++++++++++++++++
24 files changed, 686 insertions(+), 61 deletions(-)
diff --git a/App.vue b/App.vue
index 8ffd834..2208e81 100644
--- a/App.vue
+++ b/App.vue
@@ -2,6 +2,11 @@
export default {
onLaunch: function() {
console.log('App Launch')
+ if(!uni.getStorageSync('openId') || !uni.getStorageSync('token')){
+ uni.redirectTo({
+ url:'/pages/login/index'
+ })
+ }
},
onShow: function() {
console.log('App Show')
diff --git a/api/index.js b/api/index.js
new file mode 100644
index 0000000..1d996ca
--- /dev/null
+++ b/api/index.js
@@ -0,0 +1,16 @@
+import { request } from "../utils/request.js";
+
+//登录
+export function wxLoginApi(data){
+ return request('/user/wxLogin',data,'POST')
+}
+
+//微信支付
+export function wxPayApi(data){
+ return request('/pay/service/wxPay',data,'POST')
+}
+
+//水卡充值
+export function rechargeApi(data){
+ return request('/rechargeRecords/fees',data,'POST')
+}
\ No newline at end of file
diff --git a/components/navbar/navbar.vue b/components/navbar/navbar.vue
index 1012d2c..c7999c7 100644
--- a/components/navbar/navbar.vue
+++ b/components/navbar/navbar.vue
@@ -1,7 +1,7 @@
<template>
<view class="navbar">
- <image src="../../static/images/other/navBack.svg" alt="" @click="navBackTo()"></image>
- <text>{{title}}</text>
+ <image class="img" src="../../static/images/navBack.svg" alt="" @click="navBackTo()"></image>
+ <text class="title">{{title}}</text>
</view>
</template>
@@ -14,13 +14,6 @@
default:''
}
})
-
- const pageTitle = ref(props.title)
-
- watch(props.title, (New, Old)=>{
- pageTitle.value = New
- },{immediate: true},
- )
const navBackTo = () => {
uni.navigateBack()
@@ -37,12 +30,12 @@
box-sizing: border-box;
position: relative;
padding:0 32rpx 24rpx;
- image{
+ .img{
width:40rpx;
height:40rpx;
transform: rotate(180deg);
}
- text{
+ .title{
font-weight: 400;
font-size: 36rpx;
color: #000000;
diff --git a/config/index.js b/config/index.js
index 43f403f..f69b0cf 100644
--- a/config/index.js
+++ b/config/index.js
@@ -1 +1 @@
-export const BASE_URL = 'https://www.huiwuyuntong.com/water-drinking-beta'
\ No newline at end of file
+export const BASE_URL = 'http://192.168.0.67:8041'
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 23a00b0..db6f0b4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,11 +50,20 @@
/* 快应用特有相关 */
"mp-weixin" : {
/* 小程序特有相关 */
- "appid" : "",
+ "appid" : "wxd361a7f92bb0c73a",
"setting" : {
"urlCheck" : false
},
- "usingComponents" : true
+ "usingComponents" : true,
+ "unipush" : {
+ "enable" : false
+ },
+ "lazyCodeLoading" : "requiredComponents",
+ "permission" : {
+ "scope.userLocation" : {
+ "desc" : "你的位置信息将用于计算设备与您的距离"
+ }
+ }
},
"vueVersion" : "3"
}
diff --git a/pages.json b/pages.json
index fcbb804..674c215 100644
--- a/pages.json
+++ b/pages.json
@@ -2,9 +2,16 @@
"pages": [
{"path": "pages/index/index"},
{"path": "pages/login/index"},
- {"path": "pages/user/index"}
+ {"path": "pages/user/index"},
+ {"path": "pages/device/index"},
+ {"path": "pages/recharge/index"},
+ {"path": "pages/record/qushui"},
+ {"path": "pages/record/shuiliang"},
+ {"path": "pages/record/chongzhi"}
],
"tabBar": {
+ "color": "#dddddd",
+ "selectedColor": "#6f6f6f",
"list": [
{
"pagePath": "pages/index/index",
diff --git a/pages/device/index.vue b/pages/device/index.vue
new file mode 100644
index 0000000..75b83c5
--- /dev/null
+++ b/pages/device/index.vue
@@ -0,0 +1,33 @@
+<template>
+ <view class="device">
+ <Navbar title="设备列表"></Navbar>
+ </view>
+</template>
+
+<script setup>
+ import{ ref, onMounted } from 'vue'
+ import Navbar from '../../components/navbar/navbar.vue'
+
+ const userLocation = ref()
+
+
+ // 根据经纬度计算距离,根据经纬度计算距离，参数分别为第一点的纬度，经度（用户）；第二点的纬度，经度(设备)
+ const getDistances = (lat1, lon1, lat2, lon2) => {
+ let EARTH_RADIUS = 6378.137;// 地球半径
+ let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
+ let radLat2 = lat2 * Math.PI / 180.0;
+ let a = radLat1 - radLat2;
+ let b = lon1 * Math.PI / 180.0 - lon2 * Math.PI / 180.0;
+ let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
+ s = s * EARTH_RADIUS;
+ s = Math.round(s * 10000) / 10000;// 输出为公里
+ return { m: s * 1000, km: Number(s.toFixed(2)) }
+ }
+
+ onMounted(() => {
+ userLocation.value = JSON.parse(uni.getStorageSync('userLocation'))
+ })
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
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>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index f612943..2e29d3e 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -2,7 +2,7 @@
<view class="container">
<view class="content">
<view class="top">
- <image class="top-bg" :src="BASE_URL + '/upload' + '/qingYuan/images/20241126/2f56a2a7ecfd2544dec5978d2687383e.png'" mode="widthFix"></image>
+ <image class="top-bg" src="../../static/images/login/top_bg.png" mode="widthFix"></image>
<view class="top--title">
<image class="logo" src="../../static/images/login/logo.png "></image>
<view class="text">慧物通直饮水</view>
@@ -38,11 +38,11 @@
</view>
</view>
</view>
- <view class="switch-btn" @click="changeLoginType">
+<!-- <view class="switch-btn" @click="changeLoginType">
<text v-if="loginType == 0">切换微信登录</text>
<text v-if="loginType == 1">切换管理员登录</text>
<image class="switch-to" src="../../static/images/login/switchto.svg"></image>
- </view>
+ </view> -->
</view>
</view>
</template>
@@ -50,6 +50,7 @@
<script setup>
import {ref, onMounted} from 'vue'
import { BASE_URL } from '../../config/index.js';
+ import { wxLoginApi } from '../../api/index.js'
const loginType = ref(1)
const form = ref({userName:'',password:''})
@@ -69,7 +70,7 @@
if(res.code == 200){
uni.setStorageSync('maintainId',JSON.stringify(res.data.id))
uni.setStorageSync('token',res.data.token)
- uni.redirectTo({
+ uni.switchTab({
url:'/pages/index/index'
})
}
@@ -77,23 +78,22 @@
}
//用户点击微信登录默认授权
- function wxLogin(){
+ const wxLogin = () => {
wx.login({
- success:async (res1)=>{
+ success:(res1)=>{
//存储微信登录的code,调用后端接口传递code参数，返回openid(也就是userId)存储到本地，通过判断本地是否存在openId，存在表示已登录
uni.setStorageSync('code',res1.code)
- await wxLoginApi({code:res1.code}).then((res2) =>{
+ wxLoginApi({code:res1.code}).then((res2) =>{
if(res2.code == 200){
- uni.redirectTo({
- url:'/pages/index/index'
- })
uni.setStorageSync('openId',res2.data.userId)
uni.setStorageSync('token',res2.data.token)
+ uni.switchTab({
+ url:'/pages/index/index'
+ })
}else{
uni.showToast({
title:'登录失败',
icon:'none',
-
})
}
})
@@ -110,7 +110,7 @@
onMounted(() => {
if(uni.getStorageSync('openId') && uni.getStorageSync('token')){
- uni.redirectTo({
+ uni.switchTab({
url:'/pages/index/index'
})
}
diff --git a/pages/recharge/index.vue b/pages/recharge/index.vue
new file mode 100644
index 0000000..f2c4e34
--- /dev/null
+++ b/pages/recharge/index.vue
@@ -0,0 +1,307 @@
+<template>
+ <view class="container">
+ <Navbar title="账户充值"></Navbar>
+ <view class="content">
+ <view class="main">
+ <view class="money">
+ <view class="money-title">
+ <view class="title-icon"></view>
+ <view class="title-text">充值金额</view>
+ </view>
+ <view class="money-list">
+ <block v-for="(item,index) in moneyList" :key="index">
+ <view class="money-box" :style="item.active ? activeStyle : ''" @click="chooseMoney(index)">￥{{item.value}}</view>
+ </block>
+ </view>
+ </view>
+ <view class="other-money">
+ <view class="money-title">
+ <view class="title-icon"></view>
+ <view class="title-text">其他金额</view>
+ </view>
+ <view class="money-input">
+ <input :disabled = 'disabled' :focus = '!disabled' placeholder="请输入其他金额" v-model="otherMoney"/>
+ </view>
+ </view>
+ <view class="pay-methods">
+ <view class="methods-list">
+ <block v-for="(item,index) in payList" :key="index">
+ <view class="pay-item">
+ <view class="pay-item-right">
+ <image :src="item.img" alt=""></image>
+ <view>{{item.text}}</view>
+ </view>
+ <radio :value="item.value" :checked="item.checked"/>
+ </view>
+ </block>
+ </view>
+ </view>
+ </view>
+ <button :style="{opacity:payStatus ? 1 : 0.7}" class="submit-btn" @click="submit()">立即充值</button>
+ </view>
+ </view>
+</template>
+
+<script setup>
+ import{ ref, onUnmounted} from 'vue'
+ import Navbar from '../../components/navbar/navbar.vue'
+ import { wxPayApi,rechargeApi } from '../../api/index.js'
+
+ const choosedMoney = ref(50)
+ const disabled = ref(true)
+ const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
+ //选择金额
+ const moneyList = ref([
+ {value:50,active:true},
+ {value:100,active:false},
+ {value:200,active:false},
+ {value:500,active:false},
+ {value:1000,active:false},
+ {value:'其他金额',active:false},
+ ])
+ const activeStyle = ref({
+ backgroundColor:'#5EADFF',
+ color:'#fff'
+ })
+ //输入金额
+ const otherMoney = ref()
+ //支付方式
+ const payMethod = ref()
+ const payList = ref([
+ {text:"微信支付",value:2,checked:true,img:'../../static/images/recharge/wx.png'},
+ ])
+ let timerId
+ let payStatus = ref(true)
+
+ const chooseMoney = (index1) => {
+ moneyList.value.forEach((item,index) =>{
+ if(item.active == true){
+ item.active = false
+ }
+ })
+ moneyList.value[index1].active = true
+ if(index1 == 5){
+ disabled.value = false
+ choosedMoney.value = ''
+ }else{
+ choosedMoney.value = moneyList.value[index1].value
+ otherMoney.value = ''
+ disabled.value = true
+ }
+ }
+
+ const submit = () => {
+ if(payStatus.value){
+ payStatus.value = false
+ timerId = setTimeout(()=>{
+ payStatus.value = true
+ },20000)
+ let money = ''
+ if(disabled.value){
+ money = choosedMoney.value
+ }else{
+ money = Number(otherMoney.value)
+ }
+ let data = {
+ cardNumber:userInfo.waterCardNumber,
+ paymentMethod:1,
+ rechargeAmount:money
+ }
+ //生成订单
+ rechargeApi(data).then(async(res) =>{
+ if(res.code == 200){
+ let data = {
+ businessType:1,
+ businessNo:res.data
+ }
+ //发起支付
+ await wxPay(data)
+ otherMoney.value = ''
+ }
+ })
+ }else{
+ uni.showToast({
+ title:'充值间隔20秒，请稍后!',
+ icon:'none'
+ })
+ }
+ }
+
+ //微信支付
+ const wxPay = (data) => {
+ wxPayApi(data).then((res) =>{
+ if(res.code == 200){
+ //调用微信官方支付接口弹出付款界面,输入密码扣款
+ wx.requestPayment({
+ //预支付订单信息
+ // appId: res.data.appId,
+ timeStamp: res.data.timeStamp, //时间戳
+ nonceStr: res.data.nonceStr, //随机串
+ package: res.data.package, //prepay_id
+ signType: res.data.signType, //签名算法MD5
+ paySign: res.data.paySign ,//微信签名
+ success (res) {
+ if (res.errMsg == "requestPayment:ok"){
+ console.log('支付成功', res)
+ uni.showToast({
+ title: '支付成功',
+ duration: 2000,
+ });
+ uni.navigateBack()
+ }else{
+ uni.showToast({
+ title: '支付失败',
+ duration: 2000,
+ icon:'none'
+ });
+ }
+
+ },
+ fail (res) {
+ uni.showToast({
+ title: '微信支付失败',
+ duration: 2000,
+ icon:'none'
+ });
+ }
+ })
+ }
+ })
+ }
+ onUnmounted(() =>{
+ clearTimeout(timerId)
+ })
+</script>
+
+<style lang="scss" scoped>
+ .container{
+ width: 100%;
+ height: 100vh;
+ .content{
+ width: 100%;
+ height:calc(100vh - 176rpx);
+ background:linear-gradient(to top,#FFFFFF,#E8EFFF);
+ overflow-y: scroll;
+ .main{
+ width: 686rpx;
+ height:1262rpx;
+ background: #FFFFFF;
+ border-top-right-radius: 24rpx;
+ border-top-left-radius: 24rpx;
+ margin: 20rpx auto 0;
+ padding:0 25rpx;
+ box-sizing: border-box;
+ .money{
+ width: 100%;
+ height:378rpx;
+ padding-top: 58rpx;
+ // background: #65ffb2;
+ box-sizing: border-box;
+ .money-list{
+ margin-top:40rpx;
+ width:100%;
+ height: 240rpx;
+ padding: 0 20rpx;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ .money-box{
+ width:160rpx;
+ height: 100rpx;
+ border:2rpx solid #75C8EB;
+ border-radius: 8rpx;
+ font-weight: 300;
+ font-size: 28rpx;
+ color: #4EB6E3;
+ text-align: center;
+ line-height: 100rpx;
+ }
+ }
+ }
+ .other-money{
+ width: 100%;
+ height:164rpx;
+ margin-top:58rpx;
+ .money-input{
+ margin:40rpx auto 0;
+ width:calc(100% - 40rpx);
+ height: 80rpx;
+ box-sizing: border-box;
+ border-radius:8rpx;
+ border: 2rpx solid #75C8EB;
+ input{
+ width:94%;
+ height: 80rpx;
+ margin-left:6%;
+ }
+ }
+ }
+ .pay-methods{
+ width: 100%;
+ margin-top:58rpx;
+ .methods-list{
+ margin-top:40rpx;
+ width: 100%;
+ padding: 0 20rpx;
+ box-sizing: border-box;
+ // background: #49B4E3;
+ height:130rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ .pay-item{
+ width:100%;
+ display: flex;
+ justify-content:space-between;
+ align-items: center;
+ .pay-item-right{
+ display: flex;
+ image{
+ width: 42rpx;
+ height: 42rpx;
+ margin-right:34rpx;
+ }
+ view{
+ font-weight: 300;
+ font-size: 28rpx;
+ color: #111111;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .submit-btn{
+ width: 686rpx;
+ height: 98rpx;
+ background:#5EA1FA;
+ border-radius:50rpx;
+ text-align: center;
+ line-height: 98rpx;
+ letter-spacing:3rpx;
+ margin:0 auto;
+ font-weight: 300;
+ font-size: 36rpx;
+ color: #FFFFFF;
+ }
+ }
+ .money-title{
+ display: flex;
+ align-items: center;
+ .title-icon{
+ width:8rpx;
+ height:36rpx;
+ background:#49B4E3;
+ margin-right:12rpx;
+ }
+ .title-text{
+ font-weight: 300;
+ font-size: 28rpx;
+ color: #000000;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/pages/record/chongzhi.vue b/pages/record/chongzhi.vue
new file mode 100644
index 0000000..8820e3a
--- /dev/null
+++ b/pages/record/chongzhi.vue
@@ -0,0 +1,12 @@
+<template>
+ <view class="device">
+ <Navbar title="充值记录"></Navbar>
+ </view>
+</template>
+
+<script setup>
+ import Navbar from '../../components/navbar/navbar.vue'
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pages/record/qushui.vue b/pages/record/qushui.vue
new file mode 100644
index 0000000..ae22ce0
--- /dev/null
+++ b/pages/record/qushui.vue
@@ -0,0 +1,12 @@
+<template>
+ <view class="device">
+ <Navbar title="取水记录"></Navbar>
+ </view>
+</template>
+
+<script setup>
+ import Navbar from '../../components/navbar/navbar.vue'
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pages/record/shuiliang.vue b/pages/record/shuiliang.vue
new file mode 100644
index 0000000..7349680
--- /dev/null
+++ b/pages/record/shuiliang.vue
@@ -0,0 +1,12 @@
+<template>
+ <view class="device">
+ <Navbar title="水量记录"></Navbar>
+ </view>
+</template>
+
+<script setup>
+ import Navbar from '../../components/navbar/navbar.vue'
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pages/user/index.vue b/pages/user/index.vue
index 81d14c5..d8afa7c 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -1,23 +1,22 @@
<template>
<view class="user" :style="{paddingTop:topHeight + 'rpx'}">
<view class="content">
- <view class="userInfo">
+ <view class="user">
<view class="userImg">
<image src="/static/images/login/wx.png" mode="widthFix"></image>
</view>
<view class="info">
- <view class="name">张三</view>
- <view class="balance">余额：233.5</view>
+ <text class="name">张三</text>
</view>
</view>
<view class="typeList">
<view class="typeItem">
- <view class="name">充值记录</view>
- <uni-icons type="right" size="20"></uni-icons>
+ <view class="name">剩余水量</view>
+ <view class="val">750m³</view>
</view>
</view>
<view class="loginOut">
- <button type="primary" plain>退出登录</button>
+ <button class="btn" type="primary" plain @click="loginOut">退出登录</button>
</view>
</view>
</view>
@@ -29,10 +28,27 @@
const topHeight = ref(0)
// 获取状态栏高度
- function getTopHeight(){
+ const getTopHeight = () => {
if(uni.getMenuButtonBoundingClientRect){
topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
}
+ }
+
+ // 退出登录
+ const loginOut = () => {
+ uni.showModal({
+ title: '温馨提示',
+ content: '确认退出登录？',
+ success: (res) => {
+ if(res.confirm){
+ uni.removeStorageSync('openId')
+ uni.removeStorageSync('token')
+ uni.navigateTo({
+ url: '/pages/login/index'
+ })
+ }
+ }
+ })
}
onMounted(() => {
@@ -42,28 +58,23 @@
<style lang="scss" scoped>
.content{
- padding: 20rpx;
- .userInfo{
+ padding: 0 32rpx;
+ .user{
+ height: 100rpx;
display: flex;
align-items: center;
- padding: 40rpx;
- background: linear-gradient(90deg, #CCCCCC, #CCFFFF);
- border-radius: 20rpx;
.userImg{
- flex-shrink: 0;
- width: 100rpx;
- height: 100rpx;
- margin-right: 40rpx;
+ width: 80rpx;
+ height: 80rpx;
image{
width: 100%;
- border-radius: 10rpx;
+ border-radius: 50%;
}
}
.info{
- flex-grow: 1;
- font-size: 36rpx;
- .balance{
- font-weight: bold;
+ margin-left: 30rpx;
+ .name{
+ vertical-align: text-bottom;
}
}
}
@@ -78,11 +89,11 @@
}
}
.loginOut{
- margin-top: 400rpx;
- // button{
- // color: $uni-base-color;
- // border-color: $uni-base-color;
- // }
+ margin-top: 200rpx;
+ .btn{
+ color: $uni-base-color;
+ border-color: $uni-base-color;
+ }
}
}
</style>
\ No newline at end of file
diff --git a/static/images/address.png b/static/images/address.png
new file mode 100644
index 0000000..ce3090a
--- /dev/null
+++ b/static/images/address.png
Binary files differ
diff --git a/static/images/card.png b/static/images/card.png
new file mode 100644
index 0000000..17e0eba
--- /dev/null
+++ b/static/images/card.png
Binary files differ
diff --git a/static/images/chongzhi.png b/static/images/chongzhi.png
new file mode 100644
index 0000000..9eba135
--- /dev/null
+++ b/static/images/chongzhi.png
Binary files differ
diff --git a/static/images/kefu.png b/static/images/kefu.png
new file mode 100644
index 0000000..73fc2d0
--- /dev/null
+++ b/static/images/kefu.png
Binary files differ
diff --git a/static/images/login/top_bg.png b/static/images/login/top_bg.png
index cef52df..5351c46 100644
--- a/static/images/login/top_bg.png
+++ b/static/images/login/top_bg.png
Binary files differ
diff --git a/static/images/navBack.svg b/static/images/navBack.svg
new file mode 100644
index 0000000..611dd65
--- /dev/null
+++ b/static/images/navBack.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1731634152427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2590" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M252.940598 117.391658c0 13.287924 5.279175 26.025933 14.667709 35.414466l345.795969 345.795969c8.418685 8.418685 8.418685 22.066552 0 30.485237L267.608307 874.893298a50.101172 50.101172 0 0 0-14.667709 35.414466c0 44.623028 53.95157 66.969536 85.496641 35.414467l416.634901-416.634901c8.418685-8.418685 8.418685-22.066552 0-30.485237l-416.634901-416.6349c-31.55507-31.545071-85.496641-9.198563-85.496641 35.424465z" fill="#436DF0" p-id="2591"></path><path d="M0.00012 0h1023.840025M0.00012 63.960006h1023.840025M0.00012 127.930011h1023.840025M0.00012 191.890017h1023.840025M0.00012 255.850023h1023.840025M0.00012 319.820028h1023.840025M0.00012 383.780034h1023.840025M0.00012 447.740041h1023.840025M0.00012 511.710045h1023.840025M0.00012 575.670052h1023.840025M0.00012 639.630058h1023.840025M0.00012 703.600062h1023.840025M0.00012 767.560069h1023.840025M0.00012 831.520075h1023.840025M0.00012 895.480081h1023.840025M0.00012 959.450086h1023.840025M0.00012 1023.410092h1023.840025M62.330381 0l0.879863 1023.840025M126.370375 0l0.879862 1023.840025M190.410369 0l0.879862 1023.840025M254.460361 0l0.879862 1023.840025M318.500355 0l0.879862 1023.840025M382.540348 0l0.879863 1023.840025M446.580342 0l0.879863 1023.840025M510.630334 0l0.879863 1023.840025M574.670328 0l0.879863 1023.840025M638.710322 0l0.879862 1023.840025M702.760314 0l0.869864 1023.840025M766.800308 0l0.879862 1023.840025M830.840302 0l0.879862 1023.840025M894.880295 0l0.879863 1023.840025M958.930287 0l0.879863 1023.840025M1022.970281 0l0.879863 1023.840025" fill="#FFFFFF" opacity=".19" p-id="2592"></path></svg>
\ No newline at end of file
diff --git a/static/images/qushui.png b/static/images/qushui.png
new file mode 100644
index 0000000..6ded4d7
--- /dev/null
+++ b/static/images/qushui.png
Binary files differ
diff --git a/static/images/recharge/wx.png b/static/images/recharge/wx.png
new file mode 100644
index 0000000..86c2530
--- /dev/null
+++ b/static/images/recharge/wx.png
Binary files differ
diff --git a/static/images/shuiliang.png b/static/images/shuiliang.png
new file mode 100644
index 0000000..f2b4636
--- /dev/null
+++ b/static/images/shuiliang.png
Binary files differ
diff --git a/utils/request.js b/utils/request.js
index cebf068..8683869 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -1,4 +1,4 @@
-import { BASE_URL } from "../config/baseUrl";
+import { BASE_URL } from "../config/index.js";
export const request = (url, data, method) => {
return new Promise((resolve, reject) => {
--
Gitblit v1.9.3