Преглед изворни кода

1.完成奖励记录页布局及css
2.完成提现记录页布局及css
3.完成申请提现页布局及css

zizhong.wang пре 5 година
родитељ
комит
d9d42004ec

+ 18 - 0
pages.json

@@ -25,6 +25,24 @@
 			}
 		},
 		{
+			"path": "pages/selfCenter/cashoutPage/index",
+			"style": {
+				"navigationBarTitleText": "提现记录"
+			}
+		},
+		{
+			"path": "pages/selfCenter/cashoutPage/applyPage/index",
+			"style": {
+				"navigationBarTitleText": "申请提现"
+			}
+		},
+		{
+			"path": "pages/selfCenter/awardPage/index",
+			"style": {
+				"navigationBarTitleText": "奖励记录"
+			}
+		},
+		{
 			"path": "pages/auth/index",
 			"style": {
 				"navigationBarTitleText": "授权页面"

+ 149 - 0
pages/selfCenter/awardPage/index.vue

@@ -0,0 +1,149 @@
+<template>
+	<view>
+		
+		<view class="header-box"></view>
+		<view class="header-title">
+			<text style="margin-top: 4%;">累计积分</text>
+			<text style="margin-top: 2%;font-size: 36rpx;">66261</text>
+		</view>
+		
+		
+		<view class="count-deatil-box">
+			
+			<view class="count-detail-title">
+				积分明细
+			</view>
+			
+			<view class="leader-info" v-for="item in teamList" :key='item.id'>
+				<image src="/static/bed2-bg.png"></image>
+				<view class="leader-column">
+					<view>
+						<text>{{item.name}}</text>
+						<text style="visibility: hidden;">A</text>
+						<text>购买了产品</text>
+					</view>
+					<view>
+						<text style="color:#ccc;font-size: 28rpx;">{{item.time}}</text>
+					</view>
+				</view>
+				<view class="count-sum">
+					{{item.count}}
+				</view>
+			</view>
+		
+		</view>
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			title: 'selfCenter',
+			teamList: [
+				{
+					name: '晚霞',
+					count: '+12999',
+					time: '2019-02-14 00:00',
+					id: 1
+				},
+				{
+					name: '午霞',
+					count: '+5112',
+					time: '2019-02-15 00:00',
+					id: 2
+				},
+				{
+					name: '午霞A',
+					count: '+8999',
+					time: '2019-02-15 01:00',
+					id:3
+				},
+				{
+					name: '午霞2',
+					count: '+13999',
+					time: '2019-02-16 00:00',
+					id: 4
+				}
+			]
+		};
+	},
+	onLoad() {
+	},
+	methods: {
+	}
+};
+</script>
+
+<style>
+	
+	
+	.header-box {
+		width: 100%;
+		height: 180rpx;
+		background: #1a9ed3;
+	}
+	
+	.header-title {
+		width: 93%;
+		height: 150rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #fff;
+		z-index: 99;
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		margin: -13% auto;
+		margin-bottom: 3%;
+	}
+	.count-sum {
+		color: red;
+		font-size: 32rpx;
+	}
+	
+	.count-deatil-box {
+		width: 93%;
+		border-radius: 10rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #fff;
+		margin: 0 auto;
+	}
+	.count-detail-title {
+		width: 89%;
+		border-bottom: 1px solid #dbdbdb;
+		padding: 10px;
+		font-size: 32rpx;
+	}
+	
+.leader-info {
+	width: 90%;
+	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: 28rpx;
+	margin-right: 2%;
+	width: 400rpx;
+}
+.leader-info image {
+	height: 75rpx;
+	width: 75rpx;
+	border-radius: 50%;
+	border: 1px solid #eee;
+	margin-right: 3%;
+}
+
+
+
+</style>

+ 70 - 0
pages/selfCenter/cashoutPage/applyPage/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="cash-out-box">
+		<view style="color:#666;font-size: 32rpx;">
+			提现申请需要审核,请耐心等待,注意查收微信红包。
+		</view>
+		
+		<view class="cash-input-box">
+			<text>¥</text>
+			<input type="number">
+		</view>
+		
+		<view class="all-cash-out-box">
+			<text>当前积分为23982,可抵现金239.82,</text>
+			<text style="color: #1a9ed3;">全部提现</text>
+		</view>
+		
+		<button type="primary">提现</button>
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+		};
+	},
+	onLoad() {
+	},
+	methods: {
+	}
+};
+</script>
+
+<style>
+	.cash-out-box {
+		width: 85%;
+		height: 600rpx;
+		background: #fff;
+		border-radius: 15rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin: 5% auto;
+		padding: 15px;
+	}
+	.cash-input-box {
+		width: 100%;
+		margin-top: 5%;
+		border-bottom: 1px solid #dbdbdb;
+		display: flex;
+		align-items: center;
+		height: 80rpx;
+	}
+	.cash-input-box text {
+		margin-right: 2%;
+	}
+	.all-cash-out-box {
+		margin-top: 3%;
+		font-size: 28rpx;
+		width: 99%;
+		color: #999;
+	}
+	.cash-out-box button {
+		background: #1a9ed3;
+		color: #fff;
+		width: 99%;
+		margin-top: 5%;
+	}
+</style>

+ 174 - 0
pages/selfCenter/cashoutPage/index.vue

@@ -0,0 +1,174 @@
+<template>
+	<view>
+		
+		<view class="header-box"></view>
+		<view class="header-title">
+			<text style="margin-top: 4%;">已提现(元)</text>
+			<text style="margin-top: 2%;font-size: 36rpx;">165.25</text>
+		    <view class="apply-cash-box" @click.stop="goApplyCash">
+				<text>申请提现</text>
+				<image src="/static/arrow-go2.png" mode=""></image>
+			</view>
+		</view>
+		
+		
+		<view class="count-deatil-box">
+			
+			<view class="count-detail-title">
+				提现明细
+			</view>
+			
+			<view class="leader-info" v-for="item in teamList" :key='item.id'>
+				<view class="leader-column">
+					<view>
+						<text style="font-size: 30rpx;">{{item.time}}</text>
+					</view>
+				</view>
+				<view class="display-column">
+					<view class="count-sum">
+						{{item.money}}
+					</view>
+					<view class="count-sum" style="color: #ccc;">
+						{{item.status}}
+					</view>
+				</view>
+			</view>
+		
+		</view>
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			title: 'selfCenter',
+			teamList: [
+				{
+					name: '晚霞',
+					money: '28.35',
+					time: '2019-02-14 00:00',
+					status:'进行中',
+					id: 1
+				},
+				{
+					name: '午霞',
+					money: '66.12',
+					time: '2019-02-15 00:00',
+					status:'已到账',
+					id: 2
+				},
+				{
+					name: '午霞A',
+					money: '32.15',
+					time: '2019-02-15 01:00',
+					status:'进行中',
+					id:3
+				},
+				{
+					name: '午霞2',
+					money: '12.00',
+					time: '2019-02-16 00:00',
+					status:'已到账',
+					id: 4
+				}
+			]
+		};
+	},
+	onLoad() {
+	},
+	methods: {
+		goApplyCash(){
+			uni.navigateTo({
+				url: '/pages/selfCenter/cashoutPage/applyPage/index',
+				success: res => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		}
+	}
+};
+</script>
+
+<style>
+	
+	
+	.header-box {
+		width: 100%;
+		height: 180rpx;
+		background: #1a9ed3;
+	}
+	
+	.header-title {
+		width: 93%;
+		height: 150rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #fff;
+		z-index: 99;
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		margin: -13% auto;
+		margin-bottom: 3%;
+		position: relative;
+	}
+	.count-sum {
+		color: red;
+		font-size: 28rpx;
+	}
+	
+	.count-deatil-box {
+		width: 93%;
+		border-radius: 10rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #fff;
+		margin: 0 auto;
+	}
+	.count-detail-title {
+		width: 89%;
+		border-bottom: 1px solid #dbdbdb;
+		padding: 10px;
+		font-size: 32rpx;
+	}
+	
+.leader-info {
+	width: 90%;
+	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: 28rpx;
+	margin-right: 20%;
+	width: 400rpx;
+	line-height: 90rpx;
+}
+
+.display-column {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+}
+.apply-cash-box {
+	position: absolute;
+	right: 5px;
+	top: 14px;
+	display: flex;
+	align-items: center
+}
+.apply-cash-box image {
+	width: 48rpx;
+	height: 48rpx;
+}
+</style>

+ 26 - 5
pages/selfCenter/index.vue

@@ -23,15 +23,15 @@
 		</view>
 		
 		<view class="function-box">
-			<view class="function-content">
+			<view class="function-content" @click="goRecommend">
 				<image src="../../static/commend.png" mode=""></image>
 				<text>推荐分销品</text>
 			</view>
-			<view class="function-content" style="background: #33b5fc;">
+			<view class="function-content" style="background: #33b5fc;" @click="goAward">
 				<image src="../../static/award.svg" mode=""></image>
 				<text>奖励记录</text>
 			</view>
-			<view class="function-content" style="background:#fcca2f;">
+			<view class="function-content" style="background:#fcca2f;" @click="goCashOut">
 				<image src="../../static/cashout.svg" mode=""></image>
 				<text>提现记录</text>
 			</view>
@@ -85,7 +85,28 @@
 			 	fail: () => {},
 			 	complete: () => {}
 			 });
-		 }
+		 },
+		 goRecommend(){
+			uni.switchTab({
+				url:'/pages/index/index'
+			})
+		 },
+		 goAward(){
+			  uni.navigateTo({
+			 	url: '/pages/selfCenter/awardPage/index',
+			 	success: res => {},
+			 	fail: () => {},
+			 	complete: () => {}
+			 });
+		 },
+		 goCashOut(){
+		 	uni.navigateTo({
+		 		url: '/pages/selfCenter/cashoutPage/index',
+		 		success: res => {},
+		 		fail: () => {},
+		 		complete: () => {}
+		 	 });
+		 },
 		}
 	}
 </script>
@@ -100,7 +121,7 @@
 	
 	.selfInfo-box {
 		width: 100%;
-		height: 330rpx;
+		height: 320rpx;
 		background: #1fa1fb;
 		padding-top: 5%;
 		color: #fff;

BIN
static/arrow-go.png


BIN
static/arrow-go2.png