|
|
@@ -21,11 +21,7 @@
|
|
|
<view class="user-avatar-wrapper">
|
|
|
<image class="user-avatar" src='/static/iconfont/me.svg'></image>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="user-info">
|
|
|
- <view class="user-phone">{{ user.mobilePhone || '未登录' }}</view>
|
|
|
- <view class="user-tip">欢迎使用Yeswash洗车</view>
|
|
|
- </view>
|
|
|
+ <text class="user-phone">{{ user.mobilePhone || '未登录' }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 分割线 -->
|
|
|
@@ -35,26 +31,28 @@
|
|
|
<view class="wallet-section" @click="toPage({path: '/pages-user/wallet/index'})">
|
|
|
<view class="wallet-header">
|
|
|
<view class="wallet-title">
|
|
|
- <uv-icon name="bag" size="18" color="#C6171E"></uv-icon>
|
|
|
- <text>我的钱包</text>
|
|
|
+ <uv-icon name="red-packet" size="22" color="#C6171E"></uv-icon>
|
|
|
+ <text class="wallet-title-text">钱包余额</text>
|
|
|
</view>
|
|
|
<uv-icon name="arrow-right" size="14" color="#C0C4CC"></uv-icon>
|
|
|
</view>
|
|
|
|
|
|
- <view class="wallet-balance">
|
|
|
- <text class="balance-label">账户余额 (元)</text>
|
|
|
- <view class="balance-value">
|
|
|
- <text class="balance-symbol">¥</text>
|
|
|
- <text class="balance-amount">{{ ((user.balance || 0) / 100).toFixed(2) }}</text>
|
|
|
+ <view class="wallet-body">
|
|
|
+ <view class="wallet-balance">
|
|
|
+ <view class="balance-value">
|
|
|
+ <text class="balance-symbol">¥</text>
|
|
|
+ <text class="balance-amount">{{ ((user.balance || 0) / 100).toFixed(2) }}</text>
|
|
|
+ <text class="balance-unit">元</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <view class="wallet-actions">
|
|
|
- <view class="action-btn action-recharge" @click.stop="toPage({path: '/pages-user/wallet/recharge'})">
|
|
|
- <text>充值</text>
|
|
|
- </view>
|
|
|
- <view class="action-btn action-detail" @click.stop="toPage({path: '/pages-user/wallet/index'})">
|
|
|
- <text>明细</text>
|
|
|
+ <view class="wallet-actions">
|
|
|
+ <view class="action-btn action-recharge" @click.stop="toPage({path: '/pages-user/wallet/recharge'})">
|
|
|
+ <text>充值</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn action-detail" @click.stop="toPage({path: '/pages-user/wallet/index'})">
|
|
|
+ <text>明细</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -75,8 +73,9 @@
|
|
|
@click="toPage(item)"
|
|
|
>
|
|
|
<view class="menu-left">
|
|
|
- <view class="menu-icon-box">
|
|
|
- <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
+ <view class="menu-icon-box" :class="'menu-icon-box--' + item.color">
|
|
|
+ <image v-if="item.iconType === 'image'" class="menu-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
+ <uv-icon v-else :name="item.icon" size="22" :color="item.iconColor || '#C6171E'"></uv-icon>
|
|
|
</view>
|
|
|
<text class="menu-text">{{ item.title }}</text>
|
|
|
</view>
|
|
|
@@ -88,7 +87,7 @@
|
|
|
<!-- 退出登录按钮 -->
|
|
|
<view class="logout-wrapper" v-if="isLogin">
|
|
|
<view class="logout-btn" @click="logoutUser">
|
|
|
- <uv-icon name="error-circle" color="#DD524D" size="18"></uv-icon>
|
|
|
+ <uv-icon name="backspace" color="#DD524D" size="18"></uv-icon>
|
|
|
<text>退出登录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -104,12 +103,10 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
|
|
|
-import {computed, ref} from "vue";
|
|
|
+import {ref} from "vue";
|
|
|
import TabBar from "@/components/tab-bar/index.vue";
|
|
|
-import LoginBar from "@/components/login-bar/index.vue";
|
|
|
import {checkLogin, clearToken, loadUserInfo} from "@/utils/auth"
|
|
|
import {get} from "@/utils/https";
|
|
|
-import {getServicePhone} from "@/utils/common";
|
|
|
|
|
|
const statusBarHeight = ref(0)
|
|
|
const user = ref<any>({
|
|
|
@@ -119,49 +116,45 @@ const user = ref<any>({
|
|
|
balance: 0,
|
|
|
});
|
|
|
const isLogin = ref(false)
|
|
|
-const service = ref("15012341234");
|
|
|
const menu = ref([
|
|
|
{
|
|
|
title: "绑定车辆",
|
|
|
path: "/pages-user/profile/index",
|
|
|
- icon: '/static/user/profile.png'
|
|
|
+ icon: '/static/iconfont/car.svg',
|
|
|
+ iconType: 'image',
|
|
|
+ color: 'red',
|
|
|
},
|
|
|
{
|
|
|
title: "我的订单",
|
|
|
path: "/pages-order/list/index",
|
|
|
- icon: '/static/user/faq.png'
|
|
|
- },
|
|
|
- {
|
|
|
- title: "联系我们",
|
|
|
- path: "/pages-user/contact/index",
|
|
|
- icon: '/static/user/contact.png'
|
|
|
+ icon: 'order',
|
|
|
+ iconColor: '#C6171E',
|
|
|
+ color: 'red',
|
|
|
},
|
|
|
+ // {
|
|
|
+ // title: "联系我们",
|
|
|
+ // path: "/pages-user/contact/index",
|
|
|
+ // icon: '/static/user/contact.png'
|
|
|
+ // },
|
|
|
{
|
|
|
title: "洗车指导",
|
|
|
path: "/pages-user/faq/index",
|
|
|
- icon: '/static/iconfont/default/guide.svg'
|
|
|
+ icon: 'question-circle',
|
|
|
+ iconColor: '#C6171E',
|
|
|
+ color: 'red',
|
|
|
},
|
|
|
{
|
|
|
title: "故障反馈",
|
|
|
path: "/pages-user/feedback/index",
|
|
|
- icon: '/static/user/feedback.png'
|
|
|
+ icon: 'warning',
|
|
|
+ iconColor: '#C6171E',
|
|
|
+ color: 'red',
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
|
|
|
const toPage = (item: any) => {
|
|
|
checkLogin().then(() => {
|
|
|
- let {title, path} = item;
|
|
|
- let servicePhone = getServicePhone();
|
|
|
- if (path.includes('contact')) {
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: servicePhone,
|
|
|
- fail: (error) => {
|
|
|
- }
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
uni.navigateTo({
|
|
|
url: item.path,
|
|
|
});
|
|
|
@@ -174,10 +167,6 @@ const toPage = (item: any) => {
|
|
|
|
|
|
};
|
|
|
|
|
|
-const loginListen = () => {
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
const logoutUser = () => {
|
|
|
uni.showModal({
|
|
|
title: "温馨提示",
|
|
|
@@ -251,11 +240,6 @@ onShow(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- let currentPages = getCurrentPages();
|
|
|
- if (currentPages.length > 1) {
|
|
|
- let lastPage = currentPages[currentPages.length - 2]
|
|
|
- }
|
|
|
-
|
|
|
addListener();
|
|
|
});
|
|
|
|
|
|
@@ -328,38 +312,28 @@ page {
|
|
|
|
|
|
// 用户信息区域
|
|
|
.user-section {
|
|
|
- padding: 32rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 24rpx;
|
|
|
+ gap: 20rpx;
|
|
|
|
|
|
.user-avatar-wrapper {
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
.user-avatar {
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
background: rgba($uni-color-primary, 0.08);
|
|
|
- padding: 8rpx;
|
|
|
+ padding: 10rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .user-info {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .user-phone {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: $uni-font-weight-semibold;
|
|
|
- color: $uni-text-color;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .user-tip {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $uni-text-color-hint;
|
|
|
- }
|
|
|
+ .user-phone {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: $uni-font-weight-semibold;
|
|
|
+ color: $uni-text-color;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -373,13 +347,12 @@ page {
|
|
|
// 钱包区域
|
|
|
.wallet-section {
|
|
|
padding: 28rpx 32rpx 24rpx;
|
|
|
- text-align: center;
|
|
|
|
|
|
.wallet-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
.wallet-title {
|
|
|
display: flex;
|
|
|
@@ -388,50 +361,57 @@ page {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: $uni-font-weight-semibold;
|
|
|
color: $uni-text-color;
|
|
|
+
|
|
|
+ .wallet-title-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .wallet-balance {
|
|
|
- margin-bottom: 28rpx;
|
|
|
-
|
|
|
- .balance-label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $uni-text-color-hint;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ .wallet-body {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
+ .wallet-balance {
|
|
|
.balance-value {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
- justify-content: center;
|
|
|
- gap: 6rpx;
|
|
|
+ gap: 4rpx;
|
|
|
|
|
|
.balance-symbol {
|
|
|
- font-size: 36rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
color: $uni-text-color-dark;
|
|
|
font-weight: $uni-font-weight-semibold;
|
|
|
}
|
|
|
|
|
|
.balance-amount {
|
|
|
- font-size: 64rpx;
|
|
|
+ font-size: 44rpx;
|
|
|
color: $uni-text-color-dark;
|
|
|
font-weight: $uni-font-weight-bold;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
+
|
|
|
+ .balance-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-text-color-hint;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.wallet-actions {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 20rpx;
|
|
|
+ gap: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
.action-btn {
|
|
|
- padding: 14rpx 48rpx;
|
|
|
+ padding: 12rpx 36rpx;
|
|
|
border-radius: 40rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
font-weight: $uni-font-weight-medium;
|
|
|
+ text-align: center;
|
|
|
|
|
|
&.action-recharge {
|
|
|
background: $uni-color-primary;
|
|
|
@@ -478,7 +458,7 @@ page {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 28rpx 32rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
border-bottom: 1rpx solid $uni-border-color-light;
|
|
|
|
|
|
&:last-child {
|
|
|
@@ -493,7 +473,6 @@ page {
|
|
|
.menu-icon-box {
|
|
|
width: 72rpx;
|
|
|
height: 72rpx;
|
|
|
- background: rgba($uni-color-primary, 0.08);
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -503,6 +482,22 @@ page {
|
|
|
width: 42rpx;
|
|
|
height: 42rpx;
|
|
|
}
|
|
|
+
|
|
|
+ &--red {
|
|
|
+ background: rgba($uni-color-primary, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--blue {
|
|
|
+ background: rgba(33, 150, 243, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--green {
|
|
|
+ background: rgba(76, 175, 80, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--orange {
|
|
|
+ background: rgba(255, 152, 0, 0.08);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.menu-text {
|