<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>
|
|
<view class="mine-page__body" :style="bodyStyle">
|
<view class="mine-page__content">
|
<view class="mine-page__profile">
|
<image class="mine-page__avatar" :src="userInfo.imgurl || '/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">{{ userInfo.name }}</text>
|
<view v-if="userInfo.driverLevel" class="mine-page__level-tag">
|
<image src="/static/image/ic_jiangpai@2x.png" mode="widthFix" class="mine-page__level-dot"></image>
|
<text class="mine-page__level-text">{{ getDriverLevelText(userInfo.driverLevel) }}</text>
|
</view>
|
</view>
|
<text class="mine-page__phone">{{ userInfo.telephone || '' }} （{{ userInfo.carCode || '' }} ）</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-if="item.key === 'driver'">
|
<text v-if="userInfo.auditStatus === 99" class="menu-panel__sub menu-panel__sub--danger">完成认证后即可接单</text>
|
<text v-else-if="userInfo.auditStatus === 0" class="menu-panel__sub menu-panel__sub--danger">审核中</text>
|
<text v-if="userInfo.auditStatus === 2" class="menu-panel__sub menu-panel__sub--danger">已驳回</text>
|
<text v-else-if="userInfo.auditStatus === 3" 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 style="width: 100%; height: 5rpx;"></view>
|
</view>
|
</view>
|
|
<view class="mine-page__footer">
|
<button class="mine-page__logout" hover-class="mine-page__logout--hover" @click.stop="handleLogout">退出登录</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
statusBarHeight: 0,
|
navHeight: 0,
|
useVerifiedState: true,
|
menuList: [
|
{ key: 'wallet', title: '我的钱包' },
|
{ key: 'driver', title: '司机认证' },
|
{ key: 'agreementPrivacy', title: '司机隐私政策', type: 'driverPrivacyPolicy' },
|
{ key: 'agreementErrandLuggage', title: '跑腿车主行李寄存须知', type: 'errandLuggageStorageNotice' },
|
{ key: 'agreementErrandService', title: '跑腿达人服务协议', type: 'errandServiceAgreement' },
|
{ key: 'agreementErrandRisk', title: '跑腿达人风险承诺', type: 'errandRiskCommitment' },
|
{ key: 'agreementOwnerLuggage', title: '平台车主行李寄存须知', type: 'ownerLuggageStorageNotice' },
|
{ key: 'agreementOwnerService', title: '平台车主服务协议', type: 'ownerServiceAgreement' },
|
{ key: 'agreementOwnerRisk', title: '平台车主风险承诺', type: 'ownerRiskCommitment' },
|
{ 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: '-',
|
pendingIncome: '-',
|
orderCount: '-',
|
walletBalance: '¥0',
|
verified: true
|
}
|
}
|
}
|
},
|
computed: {
|
...mapState(['userInfo']),
|
currentProfile() {
|
return this.useVerifiedState ? this.profileStates.verified : this.profileStates.guest
|
},
|
bodyStyle() {
|
return {
|
marginTop: this.navHeight + 'px'
|
}
|
}
|
},
|
onLoad() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
this.navHeight = this.statusBarHeight + uni.upx2px(88)
|
},
|
onShow() {
|
this.getStats()
|
this.getUserInfo()
|
},
|
methods: {
|
getUserInfo() {
|
this.$u.api.verifyDetail().then(user => {
|
if (user.code === 200) {
|
this.$store.commit('setUserInfo', user.data);
|
}
|
})
|
},
|
getStats() {
|
this.$u.api.stats().then(res => {
|
if (res.code === 200 && res.data) {
|
this.profileStates.verified.totalIncome = (res.data.totalCommission / 100).toFixed(2)
|
this.profileStates.verified.pendingIncome = (res.data.pendingCommission / 100).toFixed(2)
|
this.profileStates.verified.orderCount = res.data.totalOrderCount || 0
|
this.profileStates.verified.walletBalance = '¥' + (res.data.balance / 100).toFixed(2)
|
}
|
})
|
},
|
getDriverLevelText(level) {
|
const map = { 5: 'S', 4: 'A', 3: 'B', 2: 'C', 1: 'D' }
|
return map[level] ? map[level] + '级' : ''
|
},
|
jump(item) {
|
console.log(item)
|
if (item.key === 'setting') {
|
uni.navigateTo({
|
url: '/pages/settings/settings'
|
})
|
} else if (item.key === 'driver') {
|
if (this.userInfo.auditStatus === 99) {
|
uni.navigateTo({
|
url: '/pages/driver-certification/driver-certification'
|
})
|
} else {
|
uni.navigateTo({
|
url: '/pages/certification-details/certification-details'
|
})
|
}
|
} else if (item.key === 'wallet') {
|
uni.navigateTo({
|
url: '/pages/wallet/wallet'
|
})
|
} else if (item.key && item.key.startsWith('agreement')) {
|
uni.navigateTo({
|
url: `/pages/agreement/agreement?type=${item.type}&title=${encodeURIComponent(item.title)}`
|
})
|
}
|
},
|
handleLogout() {
|
uni.showToast({ title: '退出中...', icon: 'loading' })
|
this.$u.api.logOutDriver().then(res => {
|
console.log('logout res', res)
|
if (res.code === 200) {
|
this.$store.commit('clearAll')
|
uni.reLaunch({
|
url: '/pages/login/login'
|
})
|
}
|
}).catch(err => {
|
console.log('logout err', err)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mine-page {
|
background: #f6f8fc;
|
|
&__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;
|
// overflow: hidden;
|
}
|
|
&__content {
|
padding: 28rpx 20rpx 0;
|
}
|
|
&__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: 60rpx;
|
// padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 20rpx);
|
display: flex;
|
justify-content: center;
|
}
|
|
&__logout {
|
width: 200rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
border-radius: 36rpx;
|
background: #ffffff;
|
border: 1rpx solid #999999;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
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;
|
margin-bottom: 200rpx;
|
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: #FA1010;
|
}
|
|
&--warning {
|
color: #ff7b38;
|
}
|
|
&--primary {
|
color: #106EFA;
|
}
|
}
|
|
&__arrow {
|
width: 16rpx;
|
height: 28rpx;
|
image {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
