完成个人中心页面

App.vue

@@ -13,6 +13,9 @@
 </script>
 
 <style>
+	page{
+		background: #F8F8F8;
+	}
 	/*每个页面公共css */
 	::-webkit-scrollbar {  
 	    display: none;  

pages.json

@@ -3,9 +3,25 @@
 		{
 			"path": "pages/home/home",
 			"style": {
-				"navigationStyle": "custom",
+				// "navigationStyle": "custom",
 				"backgroundColorTop": "#ff5d5b",
-				"backgroundColorBottom": "#eeeeee"
+				"backgroundColorBottom": "#F8F8F8",
+				"app-plus": {
+					"titleNView": {
+						"searchInput": {
+							"backgroundColor": "#fff",
+							"borderRadius": "16px", //输入框圆角
+							"placeholder": "粘贴宝贝标题",
+							"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
+						},
+						"buttons": [{
+							"text": "\ue847",
+							"fontSrc": "/static/uni.ttf",
+							"width": "auto",
+							"fontSize":"26px"
+						}]
+					}
+				}
 			}
 		}, {
 			"path": "pages/order/order",
@@ -17,8 +33,26 @@
 		}, {
 			"path": "pages/user/user-center",
 			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
+				"navigationBarTitleText": "我的",
+				"enablePullDownRefresh": false,
+				"backgroundColorTop": "#ff5d5b",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+								"text": "\ue532",
+								"fontSrc": "/static/uni.ttf",
+								"width": "auto",
+								"fontSize": "26px"
+							},
+							{
+								"text": "\ue847",
+								"fontSrc": "/static/uni.ttf",
+								"width": "auto",
+								"fontSize": "26px"
+							}
+						]
+					}
+				}
 			}
 
 		}, {
@@ -78,7 +112,7 @@
 		}, {
 			"path": "pages/user/vcode-login",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "登录",
 				"enablePullDownRefresh": false,
 				"navigationBarBackgroundColor": "#ff5d5b",
 				"backgroundColor": "#ff5d5b"
@@ -92,6 +126,7 @@
 		"navigationBarTitleText": "省心直供",
 		"navigationBarBackgroundColor": "#ff5d5b",
 		"backgroundColor": "#F8F8F8"
+
 	},
 	"tabBar": {
 		"color": "#7A7E83",

pages/home/home.vue

@@ -1,14 +1,5 @@
 <template>
-	<view style="background-color: #f7f7f5;">
-		<uni-nav-bar right-icon="chat" title=" " statusBar="true" :border="false" backgroundColor="#ff5d5b" btnWidth="60rpx"
-		 fixed>
-			<view class="search">
-				<view>
-					<uni-icons type="search" size="24" style="vertical-align:middle;" color="#999999"></uni-icons>
-					<text>粘贴宝贝标题</text>
-				</view>
-			</view>
-		</uni-nav-bar>
+	<view style="background-color: #f7f7f5;overflow: hidden;">
 		<view class="top-bg"></view>
 		<view class="section carousel-wrapper">
 			<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
@@ -97,24 +88,24 @@
 		position: absolute;
 		top: 0;
 		width: 100%;
-		height: 400rpx;
+		height: 300rpx;
 		background-color: $primary-color;
 		overflow: hidden;
 	}
 
 	.top-bg::after {
-		background: #f7f7f7;
+		background: #F8F8F8;
 		position: absolute;
 		border-radius: 2000rpx;
 		content: "";
 		width: 4000rpx;
 		height: 4000rpx;
-		top: 360rpx;
+		top: 260rpx;
 		left: -1625rpx;
 	}
 
 	.carousel-wrapper {
-		// margin-top: 20rpx;
+		margin-top: 20rpx;
 
 		.carousel {
 			margin: auto;

pages/order/order.vue

@@ -1,6 +1,8 @@
 <template>
 	<view>
-		
+		<navigator url="/pages/user/login" open-type="navigate">
+			<button type="default">登录</button>
+		</navigator>
 	</view>
 </template>
 

pages/user/user-center.vue

@@ -1,8 +1,96 @@
 <template>
 	<view>
-		<navigator url="/pages/user/login" open-type="navigate" style="display: inline;">
-			<button type="default">登录</button>
-		</navigator>
+		<view class="head">
+			<view class="portrait">
+				<image class="image" src="../../static/images/login/logo.png" mode="scaleToFill"></image>
+			</view>
+			<view>
+				<view class="nickname">未设置昵称</view>
+				<view>
+					<text v-show="user_type===1" class="wddz">网店店主</text>
+					<text  v-show="user_type===2" class="zgcj">直供厂家</text>
+				</view>
+			</view>
+			<view class="invite">
+				<view class="invite-code">邀请码：H00000164</view>
+				<view class="invite-progress">
+					<view class="item active"></view>
+					<view class="item active"></view>
+					<view class="item active"></view>
+					<view class="item"></view>
+					<view class="item"></view>
+				</view>
+				<view class="invite-notes">再邀请3人获得代理会员</view>
+			</view>
+		</view>
+		<view class="body">
+			<view class="money">
+				<view class="row">
+					<view class="col">可提现金额(元)：<text class="warning">8.86</text></view>
+					<view class="col"><button class="btn tixian-btn">立即提现</button></view>
+				</view>
+				<view class="row">
+					<view class="col">保证金(元)：<text>0.00</text><text class="tips">（保证金2000元）</text></view>
+					<view class="col"><button class="btn jiaona-btn">立即缴纳</button></view>
+				</view>
+			</view>
+			<view class="vip-center">
+				<view class="text">代理会员中心<text class="sub">（特权独享）</text></view>
+			</view>
+
+			<view class="menu">
+				<view class="menu-item">
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b8.png" mode="scaleToFill"></image>
+					</view>
+					<view class="name">账单明细</view>
+				</view>
+				<view class="menu-item">
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b7.png" mode=""></image>
+					</view>
+					<view class="name">订单管理</view>
+				</view>
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b2.png" mode=""></image>
+					</view>
+					<view class="name">我的商品</view>
+				</view>
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b1.png" mode=""></image>
+					</view>
+					<view class="name">新手攻略</view>
+				</view>
+			</view>
+			<view class="menu">
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b3.png" mode=""></image>
+					</view>
+					<view class="name">常见问题</view>
+				</view>
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b4.png" mode=""></image>
+					</view>
+					<view class="name">联系客服</view>
+				</view>
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b5.png" mode=""></image>
+					</view>
+					<view class="name">官方公告</view>
+				</view>
+				<view>
+					<view class="icon">
+						<image class="image" src="../../static/images/menu/b6.png" mode=""></image>
+					</view>
+					<view class="name">意见反馈</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -10,12 +98,169 @@
 	export default {
 		data() {
 			return {
-
+				nickname:'',
+				balance:'',
+				deposit:'',
+				user_type:1,
 			};
 		}
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+	.head{
+		background: $primary-color;
+		display: flex;
+		align-items:center;
+		padding-bottom: 140upx;
+		padding-top: 20upx;
+	}
+	.portrait{
+		margin: 0 20upx;
+		.image{
+			width: 128upx;
+			height: 128upx;
+			background: white;
+			border-radius: 128upx;
+			border: 10upx solid rgba(255, 255, 255, 0.2);
+		}
+	}
+	.nickname{
+		font-size: 30upx;
+		color: white;
+		margin-bottom: 10upx;
+	}
+	
+	.wddz,.zgcj{
+		font-size: 24upx;
+		color: white;
+		border: 2upx solid white;
+		border-radius: 20upx;
+		width: 140upx;
+		height: 36upx;
+		line-height: 36upx;
+		text-align: center;
+		text-indent: 20upx;
+		display: inline-block;
+		padding: 0;
+		background: url(../../static/images/do.png) no-repeat;
+		background-size: 21upx 21upx;
+		background-position: 10upx;
+	}
+	.invite{
+		text-align: right;
+		flex-grow: 1;
+		margin-right: 20upx;
+		color: white;
+		.invite-code{
+			font-size: 30upx;
+		}
+		.invite-notes{
+			font-size: 24upx;
+		}
+		.invite-progress{
+			.item{
+				border: 2upx solid white;
+				display: inline-block;
+				width: 36upx;
+				transform: scaleX(0.9);
+				font-size: 0;
+				border-radius: 2upx;
+				&.active{
+					border-color: yellow;
+				}
+			}
+			&::after{
+				content: "";
+				background: url(../../static/images/vip.png) no-repeat;
+				background-size: 42upx 42upx;
+				width: 42upx;
+				height: 42upx;
+				display: inline-block;
+				position: relative;
+				top: 16upx;
+			}
+			margin-bottom: 20upx;
+		}
+	}
+	
+	.body{
+		padding: 20upx;
+		position: relative;
+		top: -120upx;
+		.money{
+			background: white;
+			border-radius: 20upx;
+			padding: 20upx;
+			.row{
+				color: #333;
+				display: flex;
+				align-items: center;
+				margin-bottom: 20upx;
+				.warning{
+					color: $primary-color;
+					font-weight: bold;
+				}
+				.tips{
+					color: #CCC;
+					font-size: 24upx;
+				}
+				&:last-child{
+					margin-bottom: 0;
+				}
+				& .col:first-child{
+					flex-grow: 1;
+					font-size: 28upx;
+				}
+				& .col:last-child{
+					text-align: right;
+					font-size: 28upx;
+				}
+			}
+			.btn{
+				background-color: $primary-color;
+				color: white;
+				font-size: 26upx;
+				padding: 5upx 20upx;
+				border-radius: 40upx;
+				line-height: normal;
+			}
+		}
+	}
+	.vip-center{
+		background: url(../../static/images/center5.png) no-repeat;
+		background-size: 710upx 78upx;
+		color: #EEEEEE;
+		padding: 0 20upx;
+		margin-top: 20upx;
+		.text{
+			margin-left: 50upx;
+			background-color: #ff5454;
+			font-weight: bold;
+			line-height: 76upx;
+			.sub{
+				font-size: 24upx;
+			}
+		}
+	}
+	
+	.menu{
+		display: flex;
+		background: white;
+		border-radius: 20upx;
+		padding:30upx 20upx;
+		margin-top: 20upx;
+		justify-content: space-between;
+		.name{
+			font-size: 28upx;
+			margin-top: 10upx;
+		}
+		.icon{
+			text-align: center;
+		}
+		.icon .image{
+			width: 50upx;
+			height: 50upx;
+		}
+	}
 </style>