322 lines
7.5 KiB
Vue
322 lines
7.5 KiB
Vue
<template>
|
|
<view class="mine">
|
|
<!-- 头部个人信息 -->
|
|
<view class="header">
|
|
<view class="user-info" @click="navTo('/pages/mine/sett')">
|
|
<up-avatar size="120rpx" :src="user.avatar" />
|
|
<view class="user-detail">
|
|
<text class="nickname">{{ user.nickName || user.username }}</text>
|
|
<text class="phone">{{ user.phone || user.mobile }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="qr-code" v-if="isInvest">
|
|
<image @click="lookImg([user.qrcode])" :src="user.qrcode" mode="aspectFit" />
|
|
<text>邀请码</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 余额积分 -->
|
|
<view class="balance-wrap">
|
|
<view class="balance-item" @click="">
|
|
<text class="amount">{{ user.balance || '0' }}</text>
|
|
<text class="label">余额</text>
|
|
</view>
|
|
<view v-if="!isInvest" class="balance-item" @click="navTo('/pages/mine/signIn')">
|
|
<text class="amount">{{ user.points || '0' }}</text>
|
|
<text class="label">积分</text>
|
|
</view>
|
|
<view v-else class="balance-item" @click="navTo('/pageInvest/facility/facility')">
|
|
<text class="amount">{{ user.deviceNum || '0' }}</text>
|
|
<text class="label">充电桩</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的爱车 -->
|
|
<view class="vehicle-section" v-if="!isInvest">
|
|
<view class="section-header">
|
|
<text style="font-weight: bold">我的爱车</text>
|
|
<text class="more" @click="navTo('/pages/mine/car/car')">全部车辆 ></text>
|
|
</view>
|
|
|
|
<view class="car-plate" v-if="user.licensePlate" @click="navTo('/pages/mine/car/car')">
|
|
<image style="width: 198rpx; height: 56rpx; position: absolute; top: 0; left: 0" src="/static/image/carNum.png"></image>
|
|
<text>{{ user.licensePlate }}</text>
|
|
</view>
|
|
|
|
<view v-else class="add-vehicle" @click="navTo('/pages/mine/car/add')">
|
|
<view class="add-btn">
|
|
<image src="/static/icon/add.png" mode="aspectFit" />
|
|
</view>
|
|
<text>添加我的爱车</text>
|
|
</view>
|
|
<view class="vehicle-status">
|
|
<view class="status-item">
|
|
<image src="/static/icon/mine/parking.png" mode="aspectFit" />
|
|
<text>停车定位</text>
|
|
</view>
|
|
<view class="status-item">
|
|
<image src="/static/icon/mine/charging.png" mode="aspectFit" />
|
|
<text>充电状态</text>
|
|
</view>
|
|
<view class="status-item">
|
|
<image src="/static/icon/mine/location.png" mode="aspectFit" />
|
|
<text>精确定位</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 投资者功能菜单 -->
|
|
<view class="menu-grid" v-if="isInvest">
|
|
<view class="menu-item" v-for="(item, index) in menuItemsIsInvest" :key="index" @click="handleMenuClick(item)">
|
|
<image :src="item.icon" mode="aspectFit" />
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<view class="menu-grid">
|
|
<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
|
|
<image :src="item.icon" mode="aspectFit" />
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<cc-myTabbar :tabBarShow="4" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
import { userInfo } from '@/api/api.js';
|
|
import { useNav } from '@/hooks/useNav.js';
|
|
import { userHook } from '@/hooks/userInfo.js';
|
|
import { lookImg} from '@/utils/fun.js';
|
|
|
|
|
|
const { navTo } = useNav();
|
|
const { user, isInvest } = userHook();
|
|
|
|
const menuItemsIsInvest = ref([
|
|
{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
|
|
{ name: '商城', icon: '/static/icon/mine/shop.png', path: '/pageInvest/shop/shop' },
|
|
{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
|
|
{ name: '切换账号', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' }
|
|
]);
|
|
|
|
const menuItems = ref([
|
|
{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
|
|
{ name: '收藏电站', icon: '/static/icon/mine/station.png', path: '/pages/station/favorite' },
|
|
{ name: '客服中心', icon: '/static/icon/mine/service.png', path: '/pages/service/index' },
|
|
{ name: '一号多充', icon: '/static/icon/mine/multi.png', path: '/pages/mine/multipleNumbers' },
|
|
{ name: '隐私', icon: '/static/icon/mine/privacy.png', path: '/pages/privacy/index' },
|
|
{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
|
|
{ name: '投资者平台', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' },
|
|
{ name: '退出登录', icon: '/static/icon/mine/logout.png', path: '/pages/account/logout' }
|
|
]);
|
|
|
|
const handleMenuClick = (item) => {
|
|
if (item.path) {
|
|
navTo(item.path);
|
|
return;
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
});
|
|
|
|
onShow(async () => {
|
|
isInvest.value = uni.getStorageSync('isInvest') || false;
|
|
if (isInvest.value) {
|
|
menuItems.value[6].name = '充电模式';
|
|
} else {
|
|
menuItems.value[6].name = '投资者平台';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mine {
|
|
min-height: 100vh;
|
|
background-color: #f7f7f7;
|
|
|
|
.header {
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.user-detail {
|
|
.nickname {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.phone {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.qr-code {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
image {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.balance-wrap {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: #fff;
|
|
padding: 0rpx 0 30rpx;
|
|
|
|
.balance-item {
|
|
text-align: center;
|
|
.amount {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vehicle-section {
|
|
margin: 20rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
.more {
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.add-vehicle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.add-btn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.vehicle-status {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
border-top: 1rpx solid #f7f7f7;
|
|
padding-top: 20rpx;
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-grid {
|
|
margin: 20rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 30rpx;
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.car-plate {
|
|
color: #333;
|
|
font-weight: bold;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 198rpx;
|
|
height: 56rpx;
|
|
margin: 20rpx;
|
|
text {
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
}
|
|
</style>
|