个人中心升级

src/lang/cn.js

@@ -913,7 +913,7 @@ export const lang = {
 		myFeedback: '我的反馈',
 	},
 	userCenter: {
-		//客户画像，修改密码，我的反馈，退出登录，您确定退出本次登录么？，退出成功，退出失败
+		//客户画像，修改密码，我的反馈，退出登录，您确定退出本次登录么？，退出成功，退出失败,消息中心，我的邮箱，工作台，待审批,联系我们
 		customerPortrait: '我的',
 		modifyPassword: '修改密码',
 		myFeedback: '我的反馈',
@@ -922,6 +922,11 @@ export const lang = {
 		logOutSuccess: '退出成功',
 		logOutFailed: '退出失败',
 		switchLanguage: 'switch English',
+		messageCenter: '消息中心',
+		myMailbox: '我的邮箱',
+		workbench: '工作台',
+		pendingApproval: '待审批',
+		contactUs: '联系我们',
 
 	},
 	login: {

src/router/index.js

@@ -513,7 +513,13 @@ const routes = [{
 				path: "historyMessage",
 				name: "历史消息",
 				component: () => import("../views/message/historyMessage.vue"),
-			}
+			},
+			{
+				path: "coming",
+				name: "开发中",
+				component: () => import("../views/home/coming.vue"),
+			},
+			
 		]
 	},
 ]

src/views/home/coming.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <van-nav-bar title="coming soon" left-text="" left-arrow @click-left="onClickLeft" >
+			
+		</van-nav-bar>
+        <div class="coming">
+            coming soon...
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+const proxy = getCurrentInstance().proxy;
+const onClickLeft = () => proxy.$router.push("/main/working");
+</script>
+<style>
+
+.coming{
+    text-align: center;
+    margin-top: 50%;
+    font-size: 20px;
+    color: #999;
+}
+</style>

src/views/home/index.vue

@@ -1,54 +1,88 @@
 <template>
 	<div class="home">
-		<div class="header">
+		<van-nav-bar :title="$t('userCenter.customerPortrait')" left-text="" >
+			
+		</van-nav-bar>
+		<div class="user-info-card">
+			<div class="img-box">
+				<img src="../../assets/images/people.png" alt="" />
+			</div>
+			<div class="text-box">
+				<div class="name">{{userInfo.nickName}}</div>
+				<div class="company">{{userInfo.dept ? userInfo.dept.deptName  : ''}}</div>
+			</div>
+		</div>
+		<div class="fun-box">
 			<div class="title">
-				<div class="back">
-					<!-- <van-icon name="arrow-left" size='20' /> -->
-				</div>
-				<div class="text">{{$t('userCenter.customerPortrait')}}</div>
-				<div class="more"></div>
+				常用功能
 			</div>
-			<div class="user-info">
-				<div class="user-icon">
-					<img src="../../assets/images/people.png" alt="" />
+			<div class="lists">
+				<div class="fun-item" @click="toRouter('message')">
+					<div class="icon-box">
+						<img src="../../assets/images/iconm_xiaoxtz.png" alt="">
+					</div>
+					<div class="text">{{$t('userCenter.messageCenter')}}</div>
 				</div>
-				<div class="user-text">
-					<div class="name">{{userInfo.nickName}}</div>
-					<div class="company">{{userInfo.dept ? userInfo.dept.deptName  : ''}}</div>
+				<div class="fun-item" @click="toRouter('email')">
+					<div class="icon-box">
+						<img src="../../assets/images/iconm_dianzyx.png" alt="">
+					</div>
+					<div class="text">{{$t('userCenter.myMailbox')}}</div>
 				</div>
-				<div class="more">
-					<van-icon name="arrow" size="16" />
+				<div class="fun-item" @click="toRouter('working')">
+					<div class="icon-box">
+						<img src="../../assets/images/iconm_jichupeiz.png" alt="">
+					</div>
+					<div class="text">{{$t('userCenter.workbench')}}</div>
+				</div>
+				<div class="fun-item" @click="toRouter('processApproval?status=1')">
+					<div class="icon-box">
+						<img src="../../assets/images/iconm_lissp.png" alt="">
+					</div>
+					<div class="text">{{$t('userCenter.pendingApproval')}}</div>
 				</div>
 			</div>
 		</div>
+		
 		<ul class="set-list">
-			<li @click="toRouter('changePassword')">
+			<li @click="switchLanguage()">
 				<div class="icon-box">
-					<i class="iconfont icon-icon_pz"></i>
+					<i class="iconfont icon-iconm_qiehyy"></i>
 				</div>
-				<div class="text">{{$t('userCenter.modifyPassword')}}</div>
+				<div class="text">{{$t('userCenter.switchLanguage')}}</div>
 				<div class="more">
 					<van-icon name="arrow" size="16" />
 				</div>
 			</li>
 			<li @click="toRouter('feedback')">
 				<div class="icon-box">
-					<i class="iconfont icon-icomx_kefu"></i>
+					<i class="iconfont icon-iconm_yijianfk"></i>
 				</div>
 				<div class="text">{{$t('userCenter.myFeedback')}}</div>
 				<div class="more">
 					<van-icon name="arrow" size="16" />
 				</div>
 			</li>
-			<li @click="switchLanguage()">
+			<li @click="toRouter('coming')">
 				<div class="icon-box">
-					<i class="iconfont icon-icomm__earth"></i>
+					<i class="iconfont icon-icomx_message"></i>
 				</div>
-				<div class="text">{{$t('userCenter.switchLanguage')}}</div>
+				<div class="text">{{$t('userCenter.contactUs')}}</div>
+				<div class="more">
+					<van-icon name="arrow" size="16" />
+				</div>
+			</li>
+			<li @click="toRouter('changePassword')">
+				<div class="icon-box">
+					<i class="iconfont icon-icomx_bianj"></i>
+				</div>
+				<div class="text">{{$t('userCenter.modifyPassword')}}</div>
 				<div class="more">
 					<van-icon name="arrow" size="16" />
 				</div>
 			</li>
+			
+			
 		</ul>
 		<van-button class="logout" v-if="!corpId" type="primary" @click="logout" block
 			>{{$t('userCenter.logOut')}}</van-button
@@ -97,37 +131,103 @@ const logout = () => {
 </script>
 <style lang="scss">
 .home {
-	background: #fff;
-	min-height: calc(100% - 46px);
-	position: relative;
-	top:-46px;
+	min-height: calc(100%);
+	.fun-box{
+		padding: 20px 12px;
+		background: #fff;
+		margin: 12px;
+		border-radius: 12px;
+		.title{
+			margin-bottom: 20px;
+			font-size: 16px;
+			font-weight: bold;
+		}
+		.lists{
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+		.fun-item {
+			width: 25%;
+			text-align: center;
+			.icon-box{
+				img{
+					width: 32px;
+				}
+			}
+			.text{
+				line-height: 30px;
+				font-size: 14px;
+				color: #333;
+			}
+		}
+	}
+	.user-info-card{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 35px 12px;
+		height: 80px;
+		background: linear-gradient(180deg, #46A6FF 0%, #0084FF 100%);
+		margin: 12px;
+		border-radius: 12px;
+		.img-box {
+			width: 60px;
+			height: 60px;
+			background-color: #f1f1f1;
+			border-radius: 50%;
+			text-align: center;
+			img {
+				width: 40px;
+				margin-top: 10px;
+			}
+			overflow: hidden;
+		}
+		.text-box {
+			flex: 1;
+			margin: 0 12px;
+			color: #fff;
+			.name {
+				font-size: 20px;
+				font-weight: bold;
+				margin: 5px 0;
+			}
+			.company {
+				font-size: 14px;
+				
+			}
+		}
+		.more {
+			line-height: 60px;
+			i {
+				color: #999;
+			}
+		}
+	}
 	.van-nav-bar {
 		background: rgba(0, 0, 0, 0);
 	}
 	.logout {
 		border-radius: 22px;
-		background: #eaf0ff;
-		border: 1px solid #eaf0ff;
-		color: #3370ff;
-		width: 80% !important;
-		margin: 0 auto;
-		position: fixed;
-		bottom: 100px;
-		left: 10%;
+		background: #fff;
+		border: 1px solid #fff;
+		color: #0084FF;
+		width: calc(100% - 24px);
+		margin: 0 12px;
+		
 	}
 	.set-list {
-		position: relative;
-		top: -80px;
+		margin: 12px;
 		background: #fff;
-		min-height: 200px;
 		border-radius: 10px;
-		padding-top: 10px;
+		padding: 20px 12px;
+		color: #333;
 		li {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			height: 40px;
-			padding: 0 12px;
+			
 			.icon-box {
 				width: 40px;
 				height: 40px;
@@ -135,12 +235,12 @@ const logout = () => {
 				line-height: 40px;
 				i {
 					font-size: 20px;
-					color: #3370ff;
+					color:#333;
 				}
 			}
 			.text {
 				flex: 1;
-				margin: 0 12px;
+				margin-right:12px;
 				font-size: 16px;
 				color: #333;
 			}