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/user/index.vue | 63 ++++++++++++++++++-------------
1 files changed, 37 insertions(+), 26 deletions(-)
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
--
Gitblit v1.9.3