2021-8-30

pages.json

@@ -57,18 +57,50 @@
 			}
 		},
 		{
-			"path": "pages/user/user",
-			"style": {
-				"navigationBarTitleText": "个人中心"
+			"path": "pages/user/user",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "个人中心"
 			}
 		},
 		{
 			"path": "pages/user/accounts",
-			"style": {
-				"navigationBarTitleText": "我的佣金",
-				"navigationBarBackgroundColor":"#F1F1F1",
-				"navigationStyle": "custom"
-			}
+					"style": {
+						"navigationBarTextStyle":"black",
+						"navigationBarBackgroundColor": "transparent",
+						"app-plus": {
+							"titleNView": {
+								"type": "float",
+								"titleText": "我的佣金"
+								}
+							}
+						}
+		},
+		{
+			"path": "pages/user/integral",
+					"style": {
+						"navigationBarTextStyle":"black",
+						"navigationBarBackgroundColor": "transparent",
+						"app-plus": {
+							"titleNView": {
+								"type": "float",
+								"titleText": "我的积分"
+								}
+							}
+						}
+		},
+		{
+			"path": "pages/user/extend",
+					"style": {
+						"navigationBarTextStyle":"black",
+						"navigationBarBackgroundColor": "transparent",
+						"app-plus": {
+							"titleNView": {
+								"type": "float",
+								"titleText": "我的推广"
+								}
+							}
+						}
 		},
 		{
 			"path": "pages/user/transfer",
@@ -93,6 +125,14 @@
 				"navigationBarBackgroundColor":"#FFFFFF",
 				"navigationBarTextStyle":"black"
 			}
+		},
+		{
+			"path": "pages/user/refer",
+			"style": {
+				"navigationBarTitleText": "提交成功",
+				"navigationBarBackgroundColor":"#FFFFFF",
+				"navigationBarTextStyle":"black"
+			}
 		},
 		{
 			"path": "pages/story/story",

pages/user/accounts.vue

@@ -3,11 +3,6 @@
 		<!-- 头部 -->
 		<view class="header">
 			<image src="../../static/img/img33.png" mode="scaleToFill"></image>
-			<!-- 我的佣金 -->
-			<view class="yongjin">
-				<image src="../../static/img/xiangzuo.png" mode="scaleToFill" @click.stop="back()"></image>
-				<view class="text">我的佣金</view>
-			</view>
 			<!-- 佣金转账 -->
 			<view class="accounts" @click="nav('/pages/user/transfer')">
 				<view class="text">佣金转账</view>
@@ -83,14 +78,14 @@
 					url
 				})
 			},
-			back(){
-				uni.navigateBack({
-					delta:1
-				})
-			},
-			handclick () {
-				console.log(123)
-			},
+			// back(){
+			// 	uni.navigateBack({
+			// 		delta:1
+			// 	})
+			// },
+			// handclick () {
+			// 	console.log(123)
+			// },
 			//swiper 切换
 			changeTab(e) {
 				this.tabCurrentIndex = e.target.current;
@@ -112,37 +107,11 @@
 
 		.header {
 			position: relative;
-
 			image {
 				width: 750rpx;
 				height: 400rpx;
 			}
 
-			.yongjin {
-				// background-color: pink;
-				padding-top: 50rpx;
-				width: 100%;
-				position: absolute;
-				z-index: 10;
-				top: 0;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				image {
-					width: 20rpx;
-					height: 37rpx;
-					margin-left: 30rpx;
-				}
-				
-				.text {
-					font-size: 36rpx;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #333333;
-					margin-right: 300rpx;
-				}
-			}
 		}
 		
 		.accounts {

pages/user/extend.vue

@@ -0,0 +1,198 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<image src="../../static/img/img39.png" mode="scaleToFill"></image>
+				<view class="counts">385<text>人</text></view>
+				<view class="people">我的推广人数</view>
+		</view>
+		<!-- 推广 -->
+		<view class="navbar">
+			<view class="nav-item" v-for="(item, index) in navList" :key="index"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		
+		</view>
+		<swiper class="swiper-box" :current="tabCurrentIndex" duration="300" @change="changeTab"
+			>
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<!-- 空白页 -->
+				<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
+				<!-- 推广奖励 -->
+				<scroll-view class="scorll" scroll-y="true" >
+					<view class="cost">
+						<view class="award" v-for="item in 10">
+							<view class="award-left">
+								<view class="text">xxx</view>
+								<view class="time">2021-8-26 09:30</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+		
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+export default {
+	data () {
+		return {
+			height: '',
+				tabCurrentIndex: 0,
+				navList: [{
+						state: 1,
+						text: '一级推广',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 2,
+						text: '二级推广',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				],
+				list: [],
+				money: ''
+		}
+	},
+	methods: {
+		//swiper 切换
+		changeTab (e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange')
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+	.container {
+		width: 750rpx;
+		height: 1334rpx;
+		background-color: #fff;
+	
+		.header {
+			position: relative;
+			image {
+				width: 750rpx;
+				height: 460rpx;
+			}
+			.counts {
+				font-size: 72rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #3F7C1F;
+				position: absolute;
+				top: 35%;
+				margin-left: 310rpx;
+				text {
+					font-size: 12rpx;
+				}
+			}
+			.people {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #3F7C1F;
+				position: absolute;
+				top: 55%;
+				margin-left: 286rpx;
+			}
+		}
+	
+		.swiper-box {
+			height: calc(100% - 700rpx);
+			background-color: #FFFFFF;
+		}
+		.scorll {
+			height: 100%;
+		}
+		.navbar {
+			display: flex;
+			height: 100rpx;
+			padding: 0 5rpx;
+			background: #fff;
+			box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.06);
+			position: relative;
+			z-index: 10;
+			margin-top: 25rpx;
+	
+			.nav-item {
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100%;
+				font-size: 15px;
+				color: #999999;
+				position: relative;
+	
+				&.current {
+					color: #333333;
+	
+					&:after {
+						content: '';
+						position: absolute;
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+						width: 44px;
+						height: 0;
+						border-bottom: 2px solid #3F7C1F;
+					}
+				}
+			}
+		}
+	
+		.cost {
+			width: 750rpx;
+			height: auto;
+			background-color: #fff;
+	
+			.award {
+				width: 701rpx;
+				height: 132rpx;
+				border-bottom: 1px solid #F0F4F8;
+				margin-left: 25rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+	
+				.award-left {
+					width: 221rpx;
+					height: 40rpx;
+					margin-left: 30rpx;
+					margin-bottom: 35rpx;
+	
+					.text {
+						width: 58rpx;
+						height: 28rpx;
+						font-size: 30rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #3F454B;
+						margin-bottom: 16rpx;
+					}
+	
+					.time {
+						width: 221rpx;
+						height: 20rpx;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #AEAEAE;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/user/integral.vue

@@ -0,0 +1,192 @@
+<template>
+	<view class="container">
+		<!-- 头部 -->
+		<view class="header">
+			<image src="../../static/img/img38.png" mode="scaleToFill"></image>
+			<view class="money">3852</view>
+		</view>
+		<!-- 收入和支出 -->
+		<view class="navbar">
+			<view class="nav-item" v-for="(item, index) in navList" :key="index"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		
+		</view>
+		<swiper class="swiper-box" :current="tabCurrentIndex" duration="300" @change="changeTab"
+			>
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<!-- 空白页 -->
+				<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
+				<!-- 推广奖励 -->
+				<scroll-view class="scorll" scroll-y="true" >
+					<view class="cost">
+						<view class="award" v-for="item in 10">
+							<view class="award-left">
+								<view class="text">消费赠送</view>
+								<view class="time">2021-8-26 09:30</view>
+							</view>
+							<view class="award-right">+200</view>
+						</view>
+					</view>
+				</scroll-view>
+		
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+export default {
+	data () {
+		return {
+			height: '',
+				tabCurrentIndex: 0,
+				navList: [{
+						state: 1,
+						text: '收入',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 2,
+						text: '支出',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				],
+				list: [],
+				money: ''
+		}
+	},
+	methods: {
+		//swiper 切换
+		changeTab (e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange')
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+	.container {
+		width: 750rpx;
+		height: 1334rpx;
+		background-color: #f1f1f1;
+		.header {
+			image {
+				width: 750rpx;
+				height: 400rpx;
+			}
+			.money {
+				font-size: 72rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #3F7C1F;
+				top: 15%;
+				position: absolute;
+				left: 50%;
+				transform: translate(-50%);
+			}
+		}
+		.swiper-box {
+			height: calc(100% - 500rpx);
+			background-color: #FFFFFF;
+		}
+		.scorll {
+			height: 90%;
+		}
+		.navbar {
+			display: flex;
+			height: 100rpx;
+			padding: 0 5rpx;
+			background: #fff;
+			box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.06);
+			position: relative;
+			z-index: 10;
+			margin-top: 25rpx;
+		
+			.nav-item {
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100%;
+				font-size: 15px;
+				color: #999999;
+				position: relative;
+		
+				&.current {
+					color: #333333;
+		
+					&:after {
+						content: '';
+						position: absolute;
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+						width: 44px;
+						height: 0;
+						border-bottom: 2px solid #3F7C1F;
+					}
+				}
+			}
+		}
+		.cost {
+			width: 750rpx;
+			height: auto;
+			background-color: #fff;
+		
+			.award {
+				width: 701rpx;
+				height: 132rpx;
+				border-bottom: 1px solid #F0F4F8;
+				margin-left: 25rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+		
+				.award-left {
+					width: 221rpx;
+					height: 40rpx;
+					margin-left: 30rpx;
+					margin-bottom: 35rpx;
+		
+					.text {
+						width: 182rpx;
+						height: 30rpx;
+						font-size: 30rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #666666;
+						margin-bottom: 16rpx;
+					}
+		
+					.time {
+						width: 221rpx;
+						height: 20rpx;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #AEAEAE;
+					}
+				}
+		
+				.award-right {
+					font-size: 36rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FF0000;
+					margin-right: 30rpx;
+				}
+			}
+		}
+	}
+</style>

pages/user/refer.vue

@@ -0,0 +1,72 @@
+<template>
+	<view class="container">
+			<image src="../../static/img/img34.png" mode="scaleToFill"></image>
+			<view class="text">提交成功</view>
+			<view class="shenhe">请耐心等待审核</view>
+			<view class="btm">
+				<view class="btn">返回首页</view>
+			</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data () {
+		return {}
+	},
+	methods: {}
+}
+</script>
+
+<style lang="scss">
+	.container {
+		background-color: #fff;
+		width: 750rpx;
+		height: 1334rpx;
+		
+		image {
+			width: 300rpx;
+			height: 250rpx;
+			margin-top: 200rpx;
+			margin-left: 210rpx;
+		}
+		
+		.text {
+			font-size: 40rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #333333;
+			line-height: 40rpx;
+			padding-left: 300rpx;
+		}
+		
+		.shenhe {
+			font-size: 27rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #B3B3B3;
+			margin-top: 20rpx;
+			display: flex;
+			justify-content: center;
+		}
+		
+		.btm {
+			width: 350rpx;
+			height: 80rpx;
+			background: #6EAB4E;
+			border-radius: 40rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 200rpx;
+			margin-top: 50rpx;
+			
+			.btn {
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+			}
+		}
+	}
+</style>

pages/user/user.vue

@@ -59,11 +59,11 @@
 					<image src="../../static/img/img23.png" mode="scaleToFill"></image>
 					<view class="text">我的佣金</view>
 				</view>
-				<view class="order-item">
+				<view class="order-item" @click="nav('/pages/user/integral')">
 					<image src="../../static/img/img24.png" mode="scaleToFill"></image>
 					<view class="text">我的积分</view>
 				</view>
-				<view class="order-item">
+				<view class="order-item" @click="nav('/pages/user/extend')">
 					<image src="../../static/img/img25.png" mode="scaleToFill"></image>
 					<view class="text">我的推广</view>
 				</view>

pages/user/withdraw.vue

@@ -2,68 +2,124 @@
 	<view class="container">
 		<view class="header">
 			<view class="row-box">
-			<view class="title">可提现金额</view>
+				<view class="title">可提现金额</view>
 				<view class="row">
-					<view class="tit">￥</view>
-					<view class="counts">1000.10</view>
+					<view class="tit">￥{{money}}</view>
+					
 				</view>
 			</view>
 			<view class="row-box">
-			<view class="title">申请提现金额</view>
+				<view class="title">申请提现金额</view>
 				<view class="row">
-					<view class="tit">￥</view>
-					<view class="counts">1000</view>
+					<input class="counts" type="number" v-model="withdrawal" placeholder="请输入金额"/>
 				</view>
 			</view>
-			<view class="buttom" @click="">全部提现</view>
+			<view class="buttom" @click="withdrawal = money">全部提现</view>
 		</view>
 		<view class="conent">
 			<view class="text">提现到</view>
-			<view class="conent-box"></view>
+			<radio-group @change="tabRadio">
+				<label>
+					<view class="box">
+						<image src="../../static/img/img35.png" mode="scaleToFill"></image>
+						<view class="title-box">
+							<view class="title"><text>微信支付</text></view>
+						</view>
+						<view class="right">
+							<radio value="weixin" color="#FF4C4C" :checked="type == 'weixin'" />
+						</view>
+					</view>
+				</label>
+				<label>
+					<view class="box">
+						<image src="../../static/img/img36.png" mode="scaleToFill"></image>
+						<view class="title-box">
+							<view class="title"><text>银行账户</text></view>
+						</view>
+						<view class="right">
+							<radio value="bank" color="#FF4C4C" :checked="type == 'bank'" />
+						</view>
+					</view>
+				</label>
+			</radio-group>
+			<view class="btn">
+				<view class="title" @click="nav('/pages/user/refer')">提交申请</view>
+			</view>
 		</view>
-		</view>
-</template>
-
+	</view>
+</template>
+
 <script>
-export default {
-	data () {
-		return {}
-	},
-	methods: {}
-}
-</script>
-
+	export default {
+		data() {
+			return {
+				type: 'weixin',
+				money: '0.00', //可提现金额
+				withdrawal: '' //提现金额
+			}
+		},
+		methods: {
+			tabRadio(e) {
+				console.log(e)
+				this.type = e.detail.value;
+			},
+			nav (url) {
+				uni.navigateTo({
+					url
+				})
+			}
+		}
+	}
+</script>
+
 <style lang="scss">
 	.header {
 		height: 330rpx;
 		background-color: #fff;
+
 		.row-box {
 			height: 130rpx;
 			width: 700rpx;
 			background-color: #fff;
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
 			border-bottom: 1rpx solid #E6E6E6;
 			margin: 0 auto;
+
 			.title {
 				font-size: 32rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
 				color: #333333;
+				width: 100%;
 			}
+
 			.row {
 				display: flex;
-				justify-content: center;
+				justify-content: space-between;
 				align-items: center;
+
+				.tit {
+					width: 300rpx;
+
+				}
+
 				.counts {
+					// text-align: right;
+					// width: 100rpx;
 					font-size: 50rpx;
 					font-family: Source Han Sans CN;
 					font-weight: 500;
 					color: #333333;
+
+					// &::before {
+					// 	content: '￥';
+						
+					// }
 				}
 			}
 		}
+
 		.buttom {
 			margin-top: 10rpx;
 			margin-left: 620rpx;
@@ -77,24 +133,59 @@ export default {
 			line-height: 42rpx;
 		}
 	}
+
 	.conent {
 		margin-top: 20rpx;
 		height: 890rpx;
 		background-color: #fff;
+
 		.text {
 			font-size: 30rpx;
 			font-family: Source Han Sans CN;
 			font-weight: 400;
 			color: #333333;
-			padding-top: 20rpx;
 			margin-left: 20rpx;
+			padding-top: 20rpx;
 		}
-		.conent-box {
-			height: 130rpx;
-			width: 700rpx;
+
+		.box {
+			display: flex;
+			align-items: center;
+			width: 710rpx;
+			height: 100rpx;
 			border-bottom: 1rpx solid #E6E6E6;
-			margin: 0 auto;
+			margin-left: 20rpx;
+
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				margin-left: 20rpx;
+				margin-right: 20rpx;
+			}
+
+			.title-box {
+				margin-right: 440rpx;
+			}
+		}
+
+		.btn {
+			margin-top: 120rpx;
+			width: 670rpx;
+			height: 100rpx;
+			background: #6EAB4E;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			margin-left: 40rpx;
+
+			.title {
+				display: flex;
+				align-items: center;
+				font-size: 32rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 500;
+				color: #FFFFFF;
+			}
 		}
 	}
-	
 </style>