个人中心

App.vue

@@ -33,4 +33,11 @@
 	    -webkit-text-stroke-width: 0.2px;
 	    -moz-osx-font-smoothing: grayscale;
 	}
+	ul,li{
+		margin: 0;
+		padding: 0;
+	}
+	.container{
+		background-color: #FBFBFB;
+	}
 </style>

common/common.ts

@@ -9,10 +9,10 @@ export default {
   },
   
   // 封装报错弹窗
-  errorDialog(type,content){
+  errorDialog(type,content,title=null){
   	// type 1 必填项校验 2 规则校验
   	uni.showModal({
-  	  title: type===1 ? '必填项校验' : '规则校验',
+  	  title: title ? title : (type===1 ? '必填项校验' : '规则校验'),
   	  content:content,
   	  showCancel:false,
   	  success: function (res) {

pages/courseDetail/courseDetail.vue

@@ -97,9 +97,6 @@
 </script>
 
 <style lang="scss">
-	.container{
-		background-color: #FBFBFB;
-	}
 	.courseBannerBox{
 		height: 300rpx;
 		background-color: #ebebeb;

pages/personalCenter/personalCenter.vue

 <template>
-	<view>
+	<view class="container">
 		<!-- 头部信息 -->
 		<view class="basicInfoBox">
 			<view class="avatar">
@@ -22,14 +22,36 @@
 		</view>
 		<!-- 主要菜单 -->
 		<view class="mainMenuBox">
+			<view class="item" v-for="mainMenu in mainMenuLists" :key="mainMenu.id">
+				<h4>{{mainMenu.categoryName}}</h4>
+				<view class="menuItemBox">
+					<view class="mainMenuItem" v-for="menuItem in mainMenu.children.filter(v=>v.isShow)" :key="menuItem.title" @click="goDetail(menuItem)">
+						<img :src="'/static/moduleIcon/'+menuItem.icon+'.png'" alt="" srcset="">
+						<text>{{menuItem.title}}</text>
+					</view>
+				</view>
+			</view>
 			
 		</view>
 		<!-- 个人信息 -->
-		<view class="personalInfo"></view>
+		<view class="personalInfo">
+			<ul>
+				<li v-for="item in minorMenuLists.filter(v=>v.isShow)" :key="item.title">
+					<view class="infoBox">
+						<img :src="'/static/moduleIcon/'+item.icon+'.png'" alt="" srcset="">
+						<text>{{item.title}}</text>
+					</view>
+					<view class="iconBox">
+						<i class="iconfont icon-youjiantou"></i>
+					</view>
+				</li>
+			</ul>
+		</view>
 	</view>
 </template>
 
 <script>
+	import common from "../../common/common";
 	export default {
 		data() {
 			return {
@@ -39,7 +61,7 @@
 						children:[
 							{title:'销售课程',icon:'salesCourse',link:'',isOpen:true,isShow:true},
 							{title:'销售保单',icon:'salesOrder',link:'',isOpen:true,isShow:true},
-							{title:'我的售后',icon:'afterSales',link:'',isOpen:true,isShow:true}
+							{title:'我的售后',icon:'afterSales',link:'',isOpen:false,isShow:true}
 						],
 					},
 					{id:'01',categoryName:'积分管理',
@@ -79,12 +101,27 @@
 			}
 		},
 		methods: {
-			
+			// 菜单跳转页面
+			goDetail(item){
+				if(item.isShow && item.isOpen){
+					
+				}else{
+					common.errorDialog(2,'该模块正在开发中，敬请期待！','提示');
+				}
+			},
+			// 弹窗
+			errorDialog(type,content){
+				common.errorDialog(type,content);
+				return false;
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
+	.container{
+		padding-bottom: 160rpx;
+	}
 	.basicInfoBox{
 		display: flex;
 		padding: 17rpx 20rpx 0 28rpx;
@@ -109,7 +146,7 @@
 					border-radius: 10rpx;
 					border:1rpx solid #666;
 					padding: 4rpx 10rpx;
-					margin-left: 6rpx;
+					margin-left: 10rpx;
 					font-size: 24rpx;
 				}
 				.personalInfoBtn{
@@ -118,6 +155,11 @@
 					color: #fff;
 					text-align: center;
 					padding: 6rpx 7rpx;
+					font-size: 24rpx;
+					.iconfont{
+						font-size: 24rpx;
+						margin-left: 4rpx;
+					}
 				}
 			}
 			.firstLineBox{
@@ -127,5 +169,65 @@
 			}
 		}
 	}
-
+	.mainMenuBox{
+		background-color: #fff;
+		width: 95%;
+		margin: -60rpx auto 30rpx;
+		border-radius: 10rpx;
+		padding: 12rpx 30rpx;
+		box-sizing: border-box;
+		h4{
+			font-size: 30rpx;
+			color: #333;
+			margin-bottom: 10rpx;
+		}
+		.item{
+			margin-bottom: 30rpx;
+		}
+		.menuItemBox{
+			display: flex;
+			flex-wrap: wrap;
+			.mainMenuItem{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				max-width: 20%;
+				flex: 1;
+				img{
+					width: 80rpx;
+				}
+				text{
+					font-size: 28rpx;
+					color: #333;
+				}
+			}
+		}
+		
+	}
+	.personalInfo{
+		background: #fff;
+		width: 95%;
+		margin: 6rpx auto 0;
+		ul{
+			padding: 0 30rpx;
+			li{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				border-bottom: 1px solid #E6E6E6;
+				height: 92rpx;
+				.infoBox{
+					display: flex;
+					align-items: center;
+					img{
+						width: 52rpx;
+						height: 52rpx;
+					}
+				}
+				&:last-child{
+					border:none;
+				}
+			}
+		}
+	}
 </style>