436 lines
9.3 KiB
Vue
436 lines
9.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
|
|
<view class="top-bg"></view>
|
|
|
|
<view class="user-info ">
|
|
<view class="avatar">
|
|
|
|
<u--image :showLoading="true" :src="userInfo.head" width="100px" height="100px" shape="circle"
|
|
v-if="userInfo.head"></u--image>
|
|
|
|
<u-icon name="account-fill" color="#ffffff" size="80" v-else></u-icon>
|
|
</view>
|
|
|
|
<view class="user-details">
|
|
|
|
<!-- <u-tag text="黄码" type="warning" class="tag" v-if="color==1"></u-tag>
|
|
<u-tag text="绿码" type="success" class="tag" v-else-if="color == 2">></u-tag>
|
|
<u-tag text="红码" type="error" class="tag" v-else></u-tag> -->
|
|
|
|
<view class="user-name">{{userInfo.account}}</view>
|
|
<view class="user-contact">
|
|
<u-icon name="phone-fill" color="#1a6dcc" size="18"></u-icon>
|
|
<span>{{userInfo.phone}}</span>
|
|
</view>
|
|
<!-- <view class="user-contact">
|
|
<u-icon name="email-fill" color="#1a6dcc" size="18"></u-icon>
|
|
<span>{{userInfo.email}}</span>
|
|
</view> -->
|
|
<u-button text="修改资料" class="updateInfoBtn" type="primary" size="small" shape="circle"
|
|
@click="toDriverInfo(1)"></u-button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="stats-cards animated">
|
|
<view class="stat-card">
|
|
<view class="stat-value">{{userInfo.mouth}}</view>
|
|
<view class="stat-label">本月运单</view>
|
|
</view>
|
|
<view class="stat-card">
|
|
<view class="stat-value">{{userInfo.lv}}</view>
|
|
<view class="stat-label">完成率</view>
|
|
</view>
|
|
<view class="stat-card">
|
|
<view class="stat-value">{{userInfo.onPassage}}</view>
|
|
<view class="stat-label">在途中</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="menu-section">
|
|
<view class="section-title">
|
|
<view class="title_left">
|
|
<u-icon name="list-dot" color="#1a6dcc" size="20" :bold="true"></u-icon>
|
|
<span>功能模块</span>
|
|
</view>
|
|
<view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="menu-grid">
|
|
<view class="menu-item" @click="toNav('order/park')">
|
|
<view class="menu-icon">
|
|
<u-icon name="file-text" color="#1a6dcc" size="28"></u-icon>
|
|
</view>
|
|
<view class="menu-label">园区入园上报</view>
|
|
</view>
|
|
<view class="menu-item" @click="toNav('order/waybill')">
|
|
<view class="menu-icon">
|
|
<u-icon name="order" color="#1a6dcc" size="28"></u-icon>
|
|
</view>
|
|
<view class="menu-label">电子运单上报</view>
|
|
</view>
|
|
<view class="menu-item" @click="toNav('order/alarm')">
|
|
<view class="menu-icon">
|
|
<u-icon name="info-circle" color="#1a6dcc" size="28"></u-icon>
|
|
</view>
|
|
<view class="menu-label">车辆事故上报</view>
|
|
</view>
|
|
<view class="menu-item" @click="toMap">
|
|
<view class="menu-icon">
|
|
<u-icon name="map" color="#1a6dcc" size="28"></u-icon>
|
|
</view>
|
|
<view class="menu-label">路径导航</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-title">
|
|
<view class="title_left">
|
|
<u-icon name="setting" color="#1a6dcc" size="20" :bold="true"></u-icon>
|
|
<span>账户设置</span>
|
|
</view>
|
|
<view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="menu-grid">
|
|
<view class="menu-item" @click="toDriverInfo(2)">
|
|
<view class="menu-icon">
|
|
<u-icon name="home" size="28" color="#1a6dcc"></u-icon>
|
|
</view>
|
|
<view class="menu-label">个人信息</view>
|
|
</view>
|
|
<view class="menu-item" @click="toNav('car/car')">
|
|
<view class="menu-icon">
|
|
<u-icon name="grid" size="28" color="#1a6dcc"></u-icon>
|
|
</view>
|
|
<view class="menu-label">车辆信息</view>
|
|
</view>
|
|
<view class="menu-item" @click="toNav('index/message')">
|
|
<view class="menu-icon">
|
|
<u-icon name="bell" size="28" color="#1a6dcc"></u-icon>
|
|
</view>
|
|
<view class="menu-label">报警信息接收</view>
|
|
</view>
|
|
<view class="menu-item" @click="toNav('index/notice')">
|
|
<view class="menu-icon">
|
|
<u-icon name="question-circle" size="28" color="#1a6dcc"></u-icon>
|
|
</view>
|
|
<view class="menu-label">帮助中心</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="margin-bottom: 20px;">
|
|
<u-button type="primary" class="btn" text="退出登录" size="small" shape="circle" @click="logout"></u-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import config from '../../common/config';
|
|
import {
|
|
get,
|
|
post
|
|
} from '@/common/request.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
src: "./static/1752220647221.jpg",
|
|
userInfo: {
|
|
name: '张三',
|
|
mobile: '158****888',
|
|
email: '1'
|
|
},
|
|
color: 2
|
|
};
|
|
},
|
|
onShow() {
|
|
if (!config.driverInfo) {
|
|
this.getDriverInfo()
|
|
}
|
|
},
|
|
methods: {
|
|
onPullDownRefresh() {
|
|
setTimeout(() => {
|
|
this.getDriverInfo()
|
|
uni.stopPullDownRefresh();
|
|
}, 500);
|
|
},
|
|
toNav2(nav, num) {
|
|
uni.switchTab({
|
|
url: '/pages/' + nav + '?type=' + num,
|
|
});
|
|
},
|
|
toNav(nav) {
|
|
uni.navigateTo({
|
|
url: '/pages/' + nav,
|
|
});
|
|
},
|
|
logout() {
|
|
|
|
uni.showLoading({
|
|
title: '退出中'
|
|
})
|
|
|
|
uni.removeStorageSync('token');
|
|
|
|
setTimeout(() => {
|
|
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '退出成功',
|
|
icon: "none"
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/my/login'
|
|
})
|
|
}, 1500)
|
|
|
|
}, 1500)
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
toMap() {
|
|
uni.showToast({
|
|
title: '暂未开放',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
async getDriverInfo() {
|
|
await post('/myapi/api/yq_driver/getDriverInfo').then(res => {
|
|
this.userInfo = res.data
|
|
config.driverInfo = res.data
|
|
|
|
})
|
|
},
|
|
toDriverInfo(type) {
|
|
uni.navigateTo({
|
|
url: '/pages/my/update?type=' + type
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
|
|
.top-bg {
|
|
height: 120px;
|
|
|
|
background: linear-gradient(135deg, #1a6dcc, #0d4a9e);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
|
transform: rotate(30deg);
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
position: relative;
|
|
margin-top: -80px;
|
|
padding: 25px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: white;
|
|
border-radius: 20px;
|
|
margin: -80px 20px 0;
|
|
box-shadow: 0 10px 30px rgba(0, 61, 165, 0.15);
|
|
z-index: 10;
|
|
transition: all 0.3s ease;
|
|
// background: url('@/static/user-bg.jpg');
|
|
// background-size: cover;
|
|
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 4px solid white;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
background: linear-gradient(45deg, #4a90e2, #1a6dcc);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 40px;
|
|
margin-right: 20px;
|
|
|
|
.u-avatar__image--circle {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
}
|
|
|
|
.user-details {
|
|
flex: 1;
|
|
|
|
.tag {
|
|
width: 50px;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1a3a6d;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.user-contact {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
color: #666;
|
|
font-size: 15px;
|
|
|
|
.u-icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.updateInfoBtn {
|
|
background: linear-gradient(to right, #1a6dcca1, #0d4a9ecf);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 15px;
|
|
box-shadow: 0 4px 15px rgba(26, 109, 204, 0.3);
|
|
width: 120px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
padding: 25px 20px 15px;
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 15px 10px;
|
|
text-align: center;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #eef2f7;
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1a6dcc;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-section {
|
|
padding: 0 20px;
|
|
margin-top: 10px;
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1a3a6d;
|
|
padding: 15px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title_left {
|
|
display: flex;
|
|
}
|
|
|
|
.u-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.btn {}
|
|
}
|
|
|
|
.menu-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 25px;
|
|
|
|
.menu-item {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 15px 10px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: 1px solid #eef2f7;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.menu-label {
|
|
font-size: 14px;
|
|
color: #444;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu-icon {
|
|
font-size: 24px;
|
|
color: #1a6dcc;
|
|
margin-bottom: 12px;
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background: rgba(26, 109, 204, 0.1);
|
|
border-radius: 50%;
|
|
margin: 0 auto 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
background-color: #f4f4f4;
|
|
height: calc(100vh - 100px);
|
|
}
|
|
</style> |