<template>
|
<view class="mine-page">
|
<view class="mine-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
<view class="mine-page__nav-inner">
|
<text class="mine-page__nav-title">我的</text>
|
</view>
|
</view>
|
|
<scroll-view class="mine-page__body" scroll-y :style="bodyStyle">
|
<view class="mine-page__content">
|
<view class="mine-page__profile">
|
<image class="mine-page__avatar" src="/static/image/ic_pic@2x.png" mode="aspectFill"></image>
|
<view class="mine-page__profile-info">
|
<view class="mine-page__name-row">
|
<text class="mine-page__name">{{ currentProfile.name }}</text>
|
<view v-if="currentProfile.levelTag" class="mine-page__level-tag">
|
<!-- <text class="mine-page__level-dot"></text> -->
|
<image src="/static/image/ic_jiangpai@2x.png" mode="widthFix" class="mine-page__level-dot"></image>
|
<text class="mine-page__level-text">{{ currentProfile.levelTag }}</text>
|
</view>
|
</view>
|
<text class="mine-page__phone">{{ currentProfile.phone }}</text>
|
</view>
|
</view>
|
|
<view class="income-card">
|
<view class="income-card__left">
|
<text class="income-card__label">累计佣金(元)</text>
|
<text class="income-card__value">{{ currentProfile.totalIncome }}</text>
|
</view>
|
<view class="income-card__right">
|
<view class="income-card__stat">
|
<text class="income-card__stat-label">待结算(元)：</text>
|
<text class="income-card__stat-value">{{ currentProfile.pendingIncome }}</text>
|
</view>
|
<view class="income-card__stat">
|
<text class="income-card__stat-label">订单总数：</text>
|
<text class="income-card__stat-value">{{ currentProfile.orderCount }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="menu-panel">
|
<view v-for="item in menuList" :key="item.title" class="menu-panel__item" @click="jump(item)">
|
<text class="menu-panel__title">{{ item.title }}</text>
|
<view class="menu-panel__right">
|
<template v-if="item.key === 'wallet'">
|
<text class="menu-panel__sub menu-panel__sub--muted">余额：{{ currentProfile.walletBalance }}</text>
|
</template>
|
<template v-else-if="item.key === 'driver' && !currentProfile.verified">
|
<text class="menu-panel__sub menu-panel__sub--danger">完成认证后即可接单</text>
|
</template>
|
<template v-else-if="item.key === 'driver' && currentProfile.verified">
|
<text class="menu-panel__sub menu-panel__sub--warning">审核中</text>
|
<text class="menu-panel__sub menu-panel__sub--primary">已认证</text>
|
</template>
|
<template v-else-if="item.key === 'setting'">
|
<text class="menu-panel__sub menu-panel__sub--muted">当前版本V1.0.0</text>
|
</template>
|
<view class="menu-panel__arrow">
|
<image src="/static/image/mine_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
|
<view class="mine-page__footer">
|
<button class="mine-page__logout" hover-class="mine-page__logout--hover">退出登录</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
statusBarHeight: 0,
|
navHeight: 0,
|
useVerifiedState: true,
|
menuList: [
|
{ key: 'wallet', title: '我的钱包' },
|
{ key: 'driver', title: '司机认证' },
|
{ key: 'guide', title: '规范须知' },
|
{ key: 'help', title: '帮助与客服' },
|
{ key: 'setting', title: '设置' }
|
],
|
profileStates: {
|
guest: {
|
name: '汤子新',
|
phone: '18166565677',
|
levelTag: '',
|
totalIncome: '-',
|
pendingIncome: '-',
|
orderCount: '-',
|
walletBalance: '¥0',
|
verified: false
|
},
|
verified: {
|
name: '汤子新',
|
phone: '18166565677（皖BD23189）',
|
levelTag: 'S级',
|
totalIncome: '8,314.90',
|
pendingIncome: '2000.00',
|
orderCount: '329',
|
walletBalance: '¥1500.00',
|
verified: true
|
}
|
}
|
}
|
},
|
computed: {
|
currentProfile() {
|
return this.useVerifiedState ? this.profileStates.verified : this.profileStates.guest
|
},
|
bodyStyle() {
|
const footerHeight = uni.upx2px(124)
|
return {
|
marginTop: this.navHeight + 'px',
|
height: `calc(100vh - ${this.navHeight + footerHeight}px)`
|
}
|
}
|
},
|
onLoad() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
this.navHeight = this.statusBarHeight + uni.upx2px(88)
|
},
|
methods: {
|
jump(item) {
|
console.log(item)
|
if (item.key === 'setting') {
|
uni.navigateTo({
|
url: '/pages/settings/settings'
|
})
|
} else if (item.key === 'driver') {
|
uni.navigateTo({
|
url: '/pages/certification-details/certification-details'
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mine-page {
|
height: 100vh;
|
background: #f6f8fc;
|
overflow: hidden;
|
|
&__nav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
z-index: 10;
|
background: #ffffff;
|
}
|
|
&__nav-inner {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 26rpx;
|
}
|
|
&__nav-title {
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__body {
|
box-sizing: border-box;
|
}
|
|
&__content {
|
padding: 28rpx 20rpx 20rpx;
|
}
|
|
&__profile {
|
display: flex;
|
align-items: center;
|
gap: 20rpx;
|
padding: 8rpx 0 24rpx;
|
}
|
|
&__avatar {
|
width: 92rpx;
|
height: 92rpx;
|
border-radius: 50%;
|
background: #e8f1ff;
|
flex-shrink: 0;
|
}
|
|
&__profile-info {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__name-row {
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
}
|
|
&__name {
|
font-size: 40rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__level-tag {
|
display: flex;
|
align-items: center;
|
gap: 6rpx;
|
padding: 4rpx 10rpx;
|
border-radius: 999rpx;
|
background: linear-gradient(180deg, #ff9e68 0%, #ff7d34 100%);
|
}
|
|
&__level-dot {
|
width: 20rpx;
|
height: 24rpx;
|
}
|
|
&__level-text {
|
font-size: 22rpx;
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
&__phone {
|
display: block;
|
margin-top: 10rpx;
|
font-size: 28rpx;
|
color: #8f96a3;
|
}
|
|
&__footer {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 20rpx);
|
background: #f6f8fc;
|
display: flex;
|
justify-content: center;
|
}
|
|
&__logout {
|
width: 186rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
border-radius: 999rpx;
|
background: #ffffff;
|
border: 1rpx solid #d8dde5;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #7e8794;
|
padding: 0;
|
|
&::after {
|
border: 0;
|
}
|
|
&--hover {
|
opacity: 0.92;
|
}
|
}
|
}
|
|
.income-card {
|
position: relative;
|
display: flex;
|
justify-content: space-between;
|
gap: 20rpx;
|
padding: 10rpx 30rpx 40rpx 30rpx;
|
box-sizing: border-box;
|
background-image: url('../../static/image/ming_bg@2x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
overflow: hidden;
|
|
&__left,
|
&__right {
|
position: relative;
|
z-index: 1;
|
}
|
|
&__left {
|
flex: 1;
|
}
|
|
&__label,
|
&__stat-label,
|
&__stat-value {
|
font-size: 24rpx;
|
color: rgba(255, 255, 255, 0.78);
|
}
|
|
&__value {
|
display: block;
|
margin-top: 20rpx;
|
font-size: 52rpx;
|
line-height: 1;
|
font-weight: normal;
|
color: #ffffff;
|
}
|
|
&__right {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
justify-content: flex-end;
|
gap: 18rpx;
|
padding-top: 12rpx;
|
}
|
|
&__stat {
|
display: flex;
|
align-items: center;
|
gap: 10rpx;
|
}
|
}
|
|
.menu-panel {
|
margin-top: 20rpx;
|
border-radius: 22rpx;
|
background: #ffffff;
|
overflow: hidden;
|
|
&__item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 102rpx;
|
padding: 0 24rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #eef1f5;
|
|
&:last-child {
|
border-bottom: 0;
|
}
|
}
|
|
&__title {
|
font-size: 34rpx;
|
font-weight: 600;
|
color: #2b3139;
|
}
|
|
&__right {
|
display: flex;
|
align-items: flex-start;
|
gap: 10rpx;
|
}
|
|
&__sub {
|
font-size: 26rpx;
|
white-space: nowrap;
|
|
&--muted {
|
color: #b2b8c1;
|
}
|
|
&--danger {
|
color: #ff5a4f;
|
}
|
|
&--warning {
|
color: #ff7b38;
|
}
|
|
&--primary {
|
color: #2b7cff;
|
}
|
}
|
|
&__arrow {
|
width: 16rpx;
|
height: 28rpx;
|
image {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
