完成设置页面

pages.json

@@ -120,7 +120,17 @@
 			}
 
 		}
-	],
+	    ,{
+            "path" : "pages/user/setting",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "设置",
+                "enablePullDownRefresh": false,
+				"backgroundColorTop": "#ff5d5b"
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "省心直供",

pages/user/setting.vue

@@ -0,0 +1,139 @@
+<template>
+	<view class="setting">
+		<view class="header-bg"></view>
+		<view class="block b1">
+			<view class="row portrait">
+				<image class="image" src="../../static/images/login/logo.png" mode="scaleToFill"></image>
+			</view>
+			<view class="row">
+				<view class="label">
+					昵称
+				</view>
+				<view class="option">
+					修改
+				</view>
+			</view>
+		</view>
+
+		<view class="block b2">
+			<view class="row">
+				<view class="label">支付宝绑定</view>
+				<view class="option">未绑定</view>
+			</view>
+			<view class="line"></view>
+			<view class="row">
+				<view>微信绑定</view>
+				<view class="option">未绑定</view>
+			</view>
+		</view>
+		
+		<view class="block b3">
+			<view class="row">
+				<view class="label">修改手机号 <text class="info">18111897865</text></view>
+				<view class="option">已绑定</view>
+			</view>
+			<view class="line"></view>
+			<view class="row">
+				<view class="label">修改密码</view>
+				<view class="option"></view>
+			</view>
+		</view>
+		
+		<view class="block b4">
+			<view class="row">
+				<view class="label">清除缓存 <text class="info">18.20MB</text></view>
+				<view class="option"><button class="clear-cache-btn" type="default">清除缓存</button></view>
+			</view>
+		</view>
+		
+		<view class="logout-block">
+			<button class="logout-btn" type="default">退出登录</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.setting{
+		overflow: hidden;
+		position: relative;
+		
+	}
+	.header-bg{
+		background-color: $primary-color;
+		height: 120upx;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+	}
+	.portrait{
+		justify-content: center!important;
+		margin-top:20upx;
+		.image{
+			width: 168upx;
+			height: 168upx;
+			border: 10upx solid $primary-color;
+			border-radius: 100upx;
+		}
+	}
+	
+	.block{
+		border-radius: 20upx;
+		background-color: white;
+		margin: 20upx;
+		position: relative;
+		overflow: hidden;
+		z-index: 2;
+		.row{
+			display: flex;
+			justify-content: space-between;
+			padding: 20upx 40upx;
+			align-items: center;
+			font-size: 28upx;
+			.info{
+				color: #999999;
+				font-size: 24upx;
+				display: inline-block;
+				margin-left: 20upx;
+			}
+			.option{
+				color: #999999;
+			}
+		}
+	}
+	.logout-block{
+		margin: 20upx;
+	}
+	.clear-cache-btn{
+		line-height: normal;
+		padding: 4upx 20upx;
+		background: white;
+		border: 2upx solid $primary-color;
+		font-size: 24upx;
+		border-radius: 50upx;
+		color: $primary-color;
+	}
+	.logout-btn{
+		background: $primary-color;
+		color: white;
+		font-size: 30upx;
+		line-height: 80upx;
+	}
+	.line{
+		border: 2upx solid #EEEEEE;
+		transform: scale(0.9,0.5);
+	}
+</style>

pages/user/user-center.vue

@@ -8,7 +8,7 @@
 				<view class="nickname">未设置昵称</view>
 				<view>
 					<text v-show="user_type===1" class="wddz">网店店主</text>
-					<text  v-show="user_type===2" class="zgcj">直供厂家</text>
+					<text v-show="user_type===2" class="zgcj">直供厂家</text>
 				</view>
 			</view>
 			<view class="invite">
@@ -98,26 +98,42 @@
 	export default {
 		data() {
 			return {
-				nickname:'',
-				balance:'',
-				deposit:'',
-				user_type:1,
+				nickname: '',
+				balance: '',
+				deposit: '',
+				user_type: 1,
 			};
+		},
+		onNavigationBarButtonTap(e) {
+			// console.log(e)
+			switch (e.index) {
+				case 0:
+					uni.navigateTo({
+						url: '/pages/user/setting'
+					});
+					break;
+				case 1:
+					break;
+				default:
+					break;
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.head{
+	.head {
 		background: $primary-color;
 		display: flex;
-		align-items:center;
+		align-items: center;
 		padding-bottom: 140upx;
 		padding-top: 20upx;
 	}
-	.portrait{
+
+	.portrait {
 		margin: 0 20upx;
-		.image{
+
+		.image {
 			width: 128upx;
 			height: 128upx;
 			background: white;
@@ -125,13 +141,15 @@
 			border: 10upx solid rgba(255, 255, 255, 0.2);
 		}
 	}
-	.nickname{
+
+	.nickname {
 		font-size: 30upx;
 		color: white;
 		margin-bottom: 10upx;
 	}
-	
-	.wddz,.zgcj{
+
+	.wddz,
+	.zgcj {
 		font-size: 24upx;
 		color: white;
 		border: 2upx solid white;
@@ -147,30 +165,36 @@
 		background-size: 21upx 21upx;
 		background-position: 10upx;
 	}
-	.invite{
+
+	.invite {
 		text-align: right;
 		flex-grow: 1;
 		margin-right: 20upx;
 		color: white;
-		.invite-code{
+
+		.invite-code {
 			font-size: 30upx;
 		}
-		.invite-notes{
+
+		.invite-notes {
 			font-size: 24upx;
 		}
-		.invite-progress{
-			.item{
+
+		.invite-progress {
+			.item {
 				border: 2upx solid white;
 				display: inline-block;
 				width: 36upx;
 				transform: scaleX(0.9);
 				font-size: 0;
 				border-radius: 2upx;
-				&.active{
+
+				&.active {
 					border-color: yellow;
 				}
 			}
-			&::after{
+
+			&::after {
 				content: "";
 				background: url(../../static/images/vip.png) no-repeat;
 				background-size: 42upx 42upx;
@@ -180,44 +204,53 @@
 				position: relative;
 				top: 16upx;
 			}
+
 			margin-bottom: 20upx;
 		}
 	}
-	
-	.body{
+
+	.body {
 		padding: 20upx;
 		position: relative;
 		top: -120upx;
-		.money{
+
+		.money {
 			background: white;
 			border-radius: 20upx;
 			padding: 20upx;
-			.row{
+
+			.row {
 				color: #333;
 				display: flex;
 				align-items: center;
 				margin-bottom: 20upx;
-				.warning{
+
+				.warning {
 					color: $primary-color;
 					font-weight: bold;
 				}
-				.tips{
+
+				.tips {
 					color: #CCC;
 					font-size: 24upx;
 				}
-				&:last-child{
+
+				&:last-child {
 					margin-bottom: 0;
 				}
-				& .col:first-child{
+
+				& .col:first-child {
 					flex-grow: 1;
 					font-size: 28upx;
 				}
-				& .col:last-child{
+
+				& .col:last-child {
 					text-align: right;
 					font-size: 28upx;
 				}
 			}
-			.btn{
+
+			.btn {
 				background-color: $primary-color;
 				color: white;
 				font-size: 26upx;
@@ -227,38 +260,44 @@
 			}
 		}
 	}
-	.vip-center{
+
+	.vip-center {
 		background: url(../../static/images/center5.png) no-repeat;
 		background-size: 710upx 78upx;
 		color: #EEEEEE;
 		padding: 0 20upx;
 		margin-top: 20upx;
-		.text{
+
+		.text {
 			margin-left: 50upx;
 			background-color: #ff5454;
 			font-weight: bold;
 			line-height: 76upx;
-			.sub{
+
+			.sub {
 				font-size: 24upx;
 			}
 		}
 	}
-	
-	.menu{
+
+	.menu {
 		display: flex;
 		background: white;
 		border-radius: 20upx;
-		padding:30upx 20upx;
+		padding: 30upx 20upx;
 		margin-top: 20upx;
 		justify-content: space-between;
-		.name{
+
+		.name {
 			font-size: 28upx;
 			margin-top: 10upx;
 		}
-		.icon{
+
+		.icon {
 			text-align: center;
 		}
-		.icon .image{
+
+		.icon .image {
 			width: 50upx;
 			height: 50upx;
 		}