1.完成详情页布局及css

2.完成个人中心页布局及css
3.完成分销团队页布局及css

pages.json

@@ -7,12 +7,24 @@
 			}
 		},
 		{
+			"path": "pages/index/detailPage/index",
+			"style": {
+				"navigationBarTitleText": "产品详情"
+			}
+		},
+		{
 			"path": "pages/selfCenter/index",
 			"style": {
 				"navigationBarTitleText": "个人中心"
 			}
 		},
 		{
+			"path": "pages/selfCenter/recommendTeam/index",
+			"style": {
+				"navigationBarTitleText": "分销团队"
+			}
+		},
+		{
 			"path": "pages/auth/index",
 			"style": {
 				"navigationBarTitleText": "授权页面"

pages/index/detailPage/index.vue

@@ -0,0 +1,118 @@
+
+<template>
+	<view class="content">
+		<image class="logo" src="/static/bed3.png"></image>
+		<view class="detail-title">
+			<text style="margin-left: 5%;
+			margin-right: 3%;">甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适中双面使用床垫</text>
+		    <text class="price-style">￥11999</text> 
+		</view>
+		
+		<view class="share-box">
+			<view>分销商分享给好友，好友购买产品成功后即可获</view>
+			<view>得分享奖励</view>
+			<view>单笔最高可赚￥200.00</view>
+			<view>快去分享吧</view>
+			<button type="default">分享</button>
+		</view>
+		
+		<view class="share-box" style="height: 200upx;margin-top: 2%;">
+			<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
+			<view>￥kSfsDfrtrEjt￥</view>
+			<button type="default">一键复制</button>
+		</view>
+		
+		<view class="product-title">产品详情</view>
+	   
+		<image class="logo-footer" src="/static/detail-bg2.png"></image>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			goDetail(){
+				uni.navigateTo({
+					url: '/pages/index/detailPage/index',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200px;
+		width: 100%;
+	}
+    .logo-footer {
+		height: 500px;
+		width: 100%;
+	}
+	.detail-title {
+		padding: 10px;
+		margin-bottom: 2%;
+		width: 100%;
+		height: 150rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+		background: #fff;
+		font-size: 30rpx;
+	}
+	
+	.price-style {
+		margin-right: 75%;
+        color: red; 
+	}
+	.share-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 80%;
+		height: 300upx;
+		border: 1px dashed red;
+		background: #fff;
+		font-size: 28rpx;
+		padding: 5px;
+	}
+	.share-box button {
+		width: 300rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		margin-top: 2%;
+		background-color: #27BCEF;
+		color: #fff;
+	}
+
+	.title {
+		font-size: 36upx;
+		color: #8f8f94;
+	}
+	.product-title {
+		margin-top: 2%;
+		margin-bottom: 2%;
+		font-size: 32rpx;
+	}
+</style>

pages/index/index.vue

@@ -18,7 +18,7 @@
 		<view class="product-title">推荐产品</view>
 	   
 		<view class="recommend-box">
-			<view class="product-box">
+			<view class="product-box" @click="goDetail">
 				<image src="/static/bed-bg.png"></image>
 				<view class="detail-box">
 					<view>甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…</view>
@@ -48,7 +48,14 @@
 
 		},
 		methods: {
-
+			goDetail(){
+				uni.navigateTo({
+					url: '/pages/index/detailPage/index',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
 		}
 	}
 </script>
@@ -126,3 +133,4 @@
 		height: 190rpx;
 	}
 </style>
+

pages/selfCenter/index.vue

@@ -1,9 +1,69 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+		
+		<view class="selfInfo-box">
+			 <view class="self-auth">
+				 <image src="../../static/bed-bg.png" mode=""></image>
+				 <view>
+					 <text>棉花糖</text>
+					 <text style="margin-left: 30%;font-size: 28rpx;">156****3232</text>
+				 </view>
+			 </view>
+			 
+			 <view class="self-content">
+				 <view>
+					 <text>13982</text>
+					 <text style="font-size: 28rpx;">我的积分</text>
+				 </view>
+				 <view>
+				 	 <text>127.83元</text>
+				 	 <text style="font-size: 28rpx;">已提现</text>
+				 </view>
+			 </view>
 		</view>
+		
+		<view class="function-box">
+			<view class="function-content">
+				<image src="../../static/commend.png" mode=""></image>
+				<text>推荐分销品</text>
+			</view>
+			<view class="function-content" style="background: #33b5fc;">
+				<image src="../../static/award.svg" mode=""></image>
+				<text>奖励记录</text>
+			</view>
+			<view class="function-content" style="background:#fcca2f;">
+				<image src="../../static/cashout.svg" mode=""></image>
+				<text>提现记录</text>
+			</view>
+		</view>
+		
+		<view class="list-box">
+			<view class="list-content">
+				<text class="margin-left5">分销资格</text>
+				<view class="apply-box">
+					<text style="color: #999;">点击申请</text>
+					<image src="../../static/arrow-right2.png" mode=""></image>
+				</view>
+			</view>
+			
+			<view class="list-content" @click="goTeamDetail">
+				<text class="margin-left5">分销团队</text>
+				<view class="apply-box">
+					<text style="color: #999;visibility: hidden;">点击申请</text>
+					<image src="../../static/arrow-right2.png" mode=""></image>
+				</view>
+			</view>
+			
+			<view class="list-content" style="border-bottom: none;">
+				<text class="margin-left5">帮助中心</text>
+				<view class="apply-box">
+					<text style="color: #999;visibility: hidden;">点击申请</text>
+					<image src="../../static/arrow-right2.png" mode=""></image>
+				</view>
+			</view>
+			
+		</view>
+		
 	</view>
 </template>
 
@@ -18,7 +78,14 @@
 
 		},
 		methods: {
-
+         goTeamDetail(){
+			 uni.navigateTo({
+			 	url: '/pages/selfCenter/recommendTeam/index',
+			 	success: res => {},
+			 	fail: () => {},
+			 	complete: () => {}
+			 });
+		 }
 		}
 	}
 </script>
@@ -30,23 +97,97 @@
 		align-items: center;
 		justify-content: center;
 	}
-
-	.logo {
-		height: 200upx;
-		width: 200upx;
-		margin-top: 200upx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50upx;
+	
+	.selfInfo-box {
+		width: 100%;
+		height: 330rpx;
+		background: #1fa1fb;
+		padding-top: 5%;
+		color: #fff;
 	}
-
-	.text-area {
+	.self-auth {
 		display: flex;
-		justify-content: center;
+		align-items: center;
+	}
+    .self-auth image{
+		margin-left: 5%;
+    	height:120rpx;
+    	width:120rpx;
+    	border-radius: 50%;
+    }
+	.self-auth view{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+    
+	.self-content  {
+		margin-top: 10%;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+	.self-content view{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 	}
 
-	.title {
-		font-size: 36upx;
-		color: #8f8f94;
+	.function-box {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		background: #fff;
+		width: 100%;
+		height: 240rpx;
+	}
+	
+	.function-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+		background: #ff685a;
+		width: 200rpx;
+		height: 180rpx;
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		color: #fff;
+	}
+	.function-content image {
+		width: 75rpx;
+		height: 75rpx;
+		margin-top: 5%;
+	}
+	.function-content text {
+		margin-bottom: 5%;
+	}
+	
+	.list-box {
+		width: 100%;
+		margin-top: 3%;
+		font-size: 30rpx;
+	}
+	
+	.list-content {
+		background: #fff;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 100rpx;
+		border-bottom: 1px solid #dbdbdb;
+	}
+	.apply-box {
+		display: flex;
+		align-items: center;
+		width: 180rpx;
+	}
+	.apply-box image {
+		width: 50rpx;
+		height: 50rpx;
+		margin-right: 5%;
+	}
+	.margin-left5 {
+		margin-left: 5%;
 	}
 </style>

pages/selfCenter/recommendTeam/index.vue

@@ -0,0 +1,184 @@
+<template>
+	<view>
+		<view class="leader-info">
+			<image src="/static/bed2-bg.png"></image>
+			<view class="leader-column">
+				<view>
+					<!-- <text>晚霞</text><text class="invite">我</text> -->
+					<text>{{ selfObj.name }}</text>
+					<text class="mySelf">我</text>
+				</view>
+				<view>
+					<text style="color:#ccc">{{ selfObj.phone }}</text>
+					<!-- <text style="color:#ccc;font-size: 28rpx;">188****2600</text> -->
+				</view>
+			</view>
+		</view>
+		<view v-for="(item, index) in teamList" :key="index" @click.stop="showChild(index)">
+			<view class="leader-info">
+				<image :src="!arrowFlagList[index] ? '/static/arrow-right3.png' : '/static/arrow-down.png'" class="arrow-style"></image>
+				<image src="/static/bed2-bg.png"></image>
+				<view class="leader-column">
+					<view class="teamLevel-box">
+						<view style="white-space: nowrap;">{{ item.name }}</view>
+						<view class="invite">一级分销</view>
+					</view>
+					<view>
+						<text style="color:#ccc;font-size: 28rpx;">{{ item.phone }}</text>
+					</view>
+				</view>
+			</view>
+			<view class="leader-info" v-show="arrowFlagList[index]" v-for="childItem in item.child" :key="childItem.id">
+				<image src="/static/arrow-right3.png" class="arrow-style" style="visibility: hidden;"></image>
+				<image src="/static/bed2-bg.png"></image>
+				<view class="leader-column">
+					<view class="teamLevel-box">
+						<view style="white-space: nowrap;">{{ childItem.name }}</view>
+						<view class="invited">二级分销</view>
+					</view>
+					<view>
+						<text style="color:#ccc;font-size: 28rpx;">{{ childItem.phone }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			title: 'selfCenter',
+			arrowFlagList: [],
+			selfObj: {},
+			teamList: [
+				{
+					name: '晚霞',
+					role: '我',
+					phone: '188****2600',
+					id: 1
+				},
+				{
+					name: '午霞',
+					role: '一级分销',
+					phone: '158****2666',
+					id: 2,
+					child: [
+						{
+							name: '早霞',
+							role: '二级分销',
+							phone: '168****2688',
+							id: 3
+						},
+						{
+							name: '早霞666',
+							role: '二级分销',
+							phone: '168****2688',
+							id: 656
+						}
+					]
+				},
+				{
+					name: '午霞2',
+					role: '一级分销',
+					phone: '158****2666',
+					id: 4,
+					child: [
+						{
+							name: '早霞2',
+							role: '二级分销',
+							phone: '168****2688',
+							id: 5
+						}
+					]
+				}
+			]
+		};
+	},
+	onLoad() {
+		this.filterSelf();
+	},
+	methods: {
+		filterSelf() {
+			let that = this;
+			let obj = that.teamList.filter((item, index) => {
+				return item.role === '我';
+			});
+			that.selfObj = obj[0];
+			that.teamList = that.teamList.filter((item, index) => {
+				return item.role !== '我';
+			});
+			for (let i = 0; i < that.teamList.length; i++) {
+				that.arrowFlagList.push(false);
+			}
+		},
+		showChild(index) {
+			this.arrowFlagList.splice(index, 1, !this.arrowFlagList[index]);
+		}
+	}
+};
+</script>
+
+<style>
+.leader-info {
+	display: flex;
+	align-items: center;
+	background: #fff;
+	padding: 20rpx;
+	border-bottom: 1px solid #ccc;
+}
+.leader-column {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 90rpx;
+	font-size: 30rpx;
+}
+.leader-info image {
+	height: 75rpx;
+	width: 75rpx;
+	border-radius: 50%;
+	border: 1px solid #eee;
+	margin-right: 3%;
+}
+.invite {
+	background: red;
+	color: #fff;
+	font-size: 22rpx;
+	padding: 4rpx;
+	border-radius: 8rpx;
+	margin-left: 5%;
+	width: 50px;
+}
+
+.mySelf {
+	background: orange;
+	color: #fff;
+	font-size: 22rpx;
+	padding: 4rpx;
+	border-radius: 8rpx;
+	margin-left: 5%;
+	width: 50px;
+}
+
+.invited {
+	background: grey;
+	color: #fff;
+	font-size: 22rpx;
+	padding: 4rpx;
+	border-radius: 8rpx;
+	margin-left: 5%;
+	width: 50px;
+}
+
+.teamLevel-box {
+	display: flex;
+	align-items: center;
+}
+.arrow-style {
+	width: 40rpx !important;
+	height: 40rpx !important;
+	border: none !important;
+}
+</style>