11

api/user.js

@@ -17,6 +17,14 @@ export function getUserInfo(data) {
 		data
 	});
 }
+// 推广的人数
+export function getSpreadPeople(data) {
+	return request({
+		url: '/api/spread/people',
+		method: 'post',
+		data
+	})
+}
 
 // 用户分享图
 export function spreadBanner(data) {

pages.json

@@ -56,7 +56,7 @@
 					}
 				}
 			}
-		},{
+		}, {
 			"path": "pages/public/register",
 			"style": {
 				"navigationBarTitleText": "注册",
@@ -77,6 +77,14 @@
 				}
 			}
 		},
+		{
+			"path": "pages/user/extension",
+			"style": {
+				"navigationStyle": "custom",
+				
+				"navigationBarTitleText": "我的推广"
+			}
+		},
 		{
 			"path": "pages/public/wxLogin",
 			"style": {
@@ -118,14 +126,14 @@
 			}
 		},
 		{
-			"path": "pages/product/groupBooking/productCollage",//拼团商品
+			"path": "pages/product/groupBooking/productCollage", //拼团商品
 			"style": {
 				"app-plus": {
 					"titleNView": {
 						"type": "transparent"
 					}
 				},
-				"navigationBarTitleText":"商品详情"
+				"navigationBarTitleText": "商品详情"
 			}
 		},
 		{
@@ -275,7 +283,7 @@
 				"navigationBarTitleText": "购物车"
 			}
 		},
-		
+
 		{
 			"path": "pages/user/user",
 			"style": {
@@ -389,7 +397,7 @@
 			"style": {
 				"navigationBarTitleText": "创建订单"
 			}
-		},  {
+		}, {
 			"path": "pages/money/pay",
 			"style": {
 				"navigationBarTitleText": "支付"
@@ -470,37 +478,37 @@
 			}
 		}
 	],
-	"subPackages": [
-		{
-			"root": "pages/activity",
-			"name": "activity",
-			"pages":[{
-					"path": "goods_bargain/index",
-					"style": {
-						"navigationStyle": "custom"
+	"subPackages": [{
+		"root": "pages/activity",
+		"name": "activity",
+		"pages": [{
+				"path": "goods_bargain/index",
+				"style": {
+					"navigationStyle": "custom"
 						// #ifdef MP
-						,"navigationBarTextStyle": "#fff"
-						// #endif
-					}
-				},
-				{
-					"path": "goods_bargain_details/index",
-					"style": {
-						"navigationStyle": "custom"
+						,
+					"navigationBarTextStyle": "#fff"
+					// #endif
+				}
+			},
+			{
+				"path": "goods_bargain_details/index",
+				"style": {
+					"navigationStyle": "custom"
 						// #ifdef MP
-						,"navigationBarTextStyle": "#fff"
-						// #endif
-					}
-				},
-				{
-					"path": "bargain/index",
-					"style": {
-						"navigationBarTitleText": "砍价记录"
-					}
+						,
+					"navigationBarTextStyle": "#fff"
+					// #endif
 				}
-			]
-		}
-	],
+			},
+			{
+				"path": "bargain/index",
+				"style": {
+					"navigationBarTitleText": "砍价记录"
+				}
+			}
+		]
+	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/user/extension.vue

@@ -0,0 +1,525 @@
+ <template>
+ 	<view class="content">
+ 		<view class="content-money">
+ 			<view class="money-box">
+ 				<!-- <view class="goback-box" @click="toBack">
+ 					<image class="goback" src="../../static/img/tgbg.png" mode=""></image>
+ 				</view> -->
+ 				<!-- <view class="header">我的推广</view> -->
+ 				<image class="tuiguang_bg" src="../../static/img/tgbg.png"></image>
+ 			 <!--  <view class="money_img"><image :src="list.avatar || img"></image></view> -->
+ 			 <view class="money-frame">
+ 				 <!-- <view class="money_name">我的推广</view> -->
+ 				 <view class="money_num">
+ 					{{userInfo.spread_count || '0'}}
+ 					<text class="money_ren">人</text>
+ 				</view>
+ 			 </view>
+ 			</view>
+ 			<view class="flex buttom-box">
+ 				<view class="buttom"  @click="tabClick(0)">
+ 					<view class="money">{{total || 0}}</view>
+ 					<text class="text" :class="{ current: tabCurrentIndex === 0 }">一级推广</text>
+ 				</view>
+ 				<view class="buttom"  @click="tabClick(1)">
+ 					<view class="money">{{totalLevel || 0}}</view>
+ 					<text class="text" :class="{ current: tabCurrentIndex === 1 }">二级推广</text>
+ 				</view>
+ 			</view>
+ 		</view>
+ 		<swiper :current="tabCurrentIndex" :style="{ height: maxheight + 'px' }" class="swiper-box" duration="300" @change="changeTab">
+ 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<!-- <view class="tg-wrapper">
+					<view class="tg-box">
+						<view class="tg-item">
+							<view class="tg-tit">
+								会员
+							</view>
+							<view class="tg-val">
+								10人
+							</view>
+						</view>
+						<view class="tg-jg"></view>
+						<view class="tg-item">
+							<view class="tg-tit">
+								店长
+							</view>
+							<view class="tg-val">
+								10人
+							</view>
+						</view>
+						<view class="tg-jg"></view>
+						<view class="tg-item">
+							<view class="tg-tit">
+								代理
+							</view>
+							<view class="tg-val">
+								10人
+							</view>
+						</view>
+					</view>
+				</view> -->
+ 				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+ 					<!-- 空白页 -->
+ 					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
+ 
+ 					<!-- 订单列表 -->
+ 					<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item flex">
+ 						<view class="title-box flex_item">
+ 							<view class="title-avatar"><image :src="item.avatar||'/static/error/missing-face.png'"></image></view>
+ 							<view class="list_tpl">
+ 								<view class="title flex">
+ 									<text>{{ item.nickname }}{{item.level}}</text>
+									<view class="itemVip lv1" v-if="item.level == 1">
+										会员
+									</view>
+									<view class="itemVip lv2" v-if="item.level == 2">
+										村代
+									</view>
+									<view class="itemVip lv3" v-if="item.level == 3">
+										镇代
+									</view>
+									<view class="itemVip lv4" v-if="item.level == 4">
+										区代
+									</view>
+									<view class="itemVip lv5" v-if="item.level == 5">
+										市代
+									</view>
+									<view class="itemVip lv6" v-if="item.level == 6">
+										省代
+									</view>
+									<!-- <image src="../../static/img/lv01.png" mode="" v-if="item.level == 1"></image>
+									<image src="../../static/img/lv02.png" mode="" v-if="item.level == 2"></image>
+									<image src="../../static/img/lv03.png" mode="" v-if="item.level == 3"></image>
+									<image src="../../static/img/lv04.png" mode="" v-if="item.level == 4"></image> -->
+ 								</view>
+ 								<view class="time">
+ 									<text>{{ item.time }}</text>
+ 								</view>
+ 							</view>
+ 						</view>
+ 					</view>
+ 					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
+ 				</scroll-view>
+ 			</swiper-item>
+ 		</swiper>
+ 	</view>
+ </template>
+ <script>
+ import { getExtensionData,getUserInfo ,getSpreadPeople} from '@/api/user.js';
+ import { mapState, mapMutations } from 'vuex';
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+ import empty from '@/components/empty';
+ export default {
+ 	components: {
+ 		empty,
+ 		uniLoadMore,
+ 	},
+ 	onReady() {
+ 		// 初始化获取页面宽度
+ 		uni.createSelectorQuery()
+ 			.select('.content')
+ 			.fields(
+ 				{
+ 					size: true
+ 				},
+ 				data => {
+ 					// console.log(data);
+ 					// console.log(Math.floor((data.width / 750) * 300));
+ 					// 保存头部高度
+ 					this.maxheight = data.height - Math.floor((data.width / 750) * 470) - 44;
+ 					// console.log(this.maxheight);
+ 				}
+ 			)
+ 			.exec();
+ 	},
+ 	data() {
+ 		return {
+ 			// 头部图高度
+ 			maxheight: '',
+ 			tabCurrentIndex: 0,
+ 			navList: [
+ 				{
+ 					state: 0,
+ 					text: '一级推广',
+ 					loadingType: 'more',
+ 					orderList: [],
+ 					page: 1, //当前页数
+ 					limit: 10 //每次信息条数
+ 				},
+ 				{
+ 					state: 1,
+ 					text: '二级推广',
+ 					loadingType: 'more',
+ 					orderList: [],
+ 					page: 1, //当前页数
+ 					limit: 10 //每次信息条数
+ 				}
+ 			],
+ 			all:'',
+ 			list:'',
+ 			total:'',
+ 			totalLevel:'',
+ 			img:'http://kaifa.crmeb.net/uploads/attach/2019/08/20190807/723adbdd4e49a0f9394dfc700ab5dba3.png',
+			userInfo: {}
+ 		};
+ 	},
+ 	onLoad(options) {},
+ 	onShow() {
+ 		this.loadData();
+		this.loadAll()
+ 	},
+ 	methods: {
+ 		// 页面跳转
+ 		navto(e) {
+ 			uni.navigateTo({
+ 				url: e
+ 			});
+ 		},
+ 		//获取推广人数信息
+ 		async loadData(source) {
+ 			//这里是将订单挂载到tab列表下
+ 			let index = this.tabCurrentIndex;
+ 			let navItem = this.navList[index];
+ 			let state = navItem.state;
+ 			if (source === 'tabChange' && navItem.loaded === true) {
+ 				//tab切换只有第一次需要加载数据
+ 				return;
+ 			}
+ 			if (navItem.loadingType === 'loading') {
+ 				//防止重复加载
+ 				return;
+ 			}
+ 			if (navItem.loadingType === 'noMore') {
+ 				//防止重复加载
+ 				return;
+ 			}
+ 			// 修改当前对象状态为加载中
+ 			navItem.loadingType = 'loading';
+ 			getSpreadPeople(
+ 				{
+ 					page: navItem.page,
+ 					limit: navItem.limit,
+ 					keyword:'',
+					// sort: 'ASC/DESC',
+					// level: index,
+ 					// sort:'uid desc'
+					// sort: 'pay_price ASC'
+ 					grade:state
+ 				},
+ 			)
+ 				.then(({ data }) => {
+ 					console.log(data);
+ 					
+ 					this.total = data.total;
+ 					this.totalLevel =data.totalLevel;
+ 					// this.all = this.total + this.totalLevel;
+ 					if (data.list.length > 0) {
+ 						this.list = data.list
+						const D = data.list.map((e) => {
+ 							e.level = +e.level;
+							return e;
+ 						})
+ 						navItem.orderList = navItem.orderList.concat(D);
+ 						navItem.page++;
+ 					}
+ 					this.$nextTick(function(){
+ 						if (navItem.limit == data.list.length) {
+ 							//判断是否还有数据， 有改为 more， 没有改为noMore
+ 							navItem.loadingType = 'more';
+ 							return;
+ 						} else {
+ 							//判断是否还有数据， 有改为 more， 没有改为noMore
+ 							navItem.loadingType = 'noMore';
+ 						}
+ 					})
+ 					this.$set(navItem, 'loaded', true);
+ 				})
+ 				.catch(e => {
+ 					console.log(e);
+ 				});
+ 		},
+ 		//swiper 切换
+ 		changeTab(e) {
+ 			this.tabCurrentIndex = e.target.current;
+ 			this.loadData('tabChange');
+ 		},
+ 		//顶部tab点击
+ 		tabClick(index) {
+ 			this.tabCurrentIndex = index;
+ 		},
+ 		// 点击返回 我的页面
+ 		toBack(){
+ 			uni.switchTab({
+ 				url:'/pages/user/user'
+ 			})
+ 		},
+		loadAll(){
+			getUserInfo().then(res => {
+				this.userInfo = res.data
+				console.log(res,'6666666666666666666')
+			});
+		}
+ 	}
+ };
+ </script>
+ 
+ <style lang="scss">
+ page {
+ 	background: #ffffff;
+ 	height: 100%;
+ }
+ .itemVip{
+	 font-size: 24rpx;
+	 line-height: 1;
+	 color: #FFFFFF;
+	 border-radius: 99rpx;
+	 padding:10rpx 20rpx;
+	 margin-left: 10rpx;
+ }
+ .lv1{
+	 background-image: linear-gradient(to right,#a9a9a9,#a9a9a9);
+ }
+ .lv2{
+	 background-image: linear-gradient(to right,#ffc107,#ffc107);
+ }
+ .lv3{
+	background-image: linear-gradient(to right,#e51c23,#e51c23);
+ }
+ .lv4{
+	background-image: linear-gradient(to right,#000000,#000000);
+ }
+ .lv5{
+	background-image: linear-gradient(to right,#000000,#000000);
+ }
+ .lv6{
+	 background-image: linear-gradient(to right,#000000,#000000);
+ }
+ .content-money {
+ 	// padding-bottom: 30rpx;
+ 	background: $page-color-base;
+ 	.buttom-box {
+ 		position: relative;
+ 		background-color: #ffffff;
+ 		text-align: center;
+ 		padding: 30rpx 0;
+ 		.buttom {
+ 			flex-grow: 1;
+ 		}
+ 		.money{
+ 			
+ 			font-size: 32rpx;
+ 			font-weight: bold;
+ 			color: #921a23;
+ 		}
+ 		.text {
+ 			padding-bottom: 26rpx;
+ 			font-size: 28rpx;
+ 			font-weight: 500;
+ 			color: #666666;
+ 			&.current {
+ 				border-bottom: 2px solid #921a23;
+ 			}
+ 		}
+ 		.icon {
+ 			height: 50rpx;
+ 			width: 48rpx;
+ 			margin: 0 auto;
+ 			.icon-img {
+ 				width: 100%;
+ 				height: 100%;
+ 			}
+ 		}
+ 	}
+ }
+ .money-box {
+ 	// background: $base-color;
+ 	height: 380rpx;
+ 	color: #FF4C4C;
+ 	text-align: center;
+ 	font-size: 35rpx;
+ 	position: relative;
+ 	// padding-top: 60rpx;
+ 	.header{
+ 		position: absolute;
+ 		left: 0;
+ 		top: 0;
+ 		width: 100%;
+ 		height: 80rpx;
+ 		font-size: 36rpx;
+ 		font-weight: bold;
+ 		z-index: 99;
+ 		display: flex;
+ 		justify-content: center;
+ 		align-items: center;
+ 	}
+ 	.goback-box{
+ 		position: absolute;
+ 		left: 29rpx;
+ 		top: 0;
+ 		height: 80rpx;
+ 		display: flex;
+ 		align-items: center;
+ 	}
+ 	.goback{
+ 		z-index: 100;
+ 		width: 34rpx;
+ 		height: 34rpx;
+ 	}
+ 	.tuiguang_bg {
+ 		width: 100%;
+ 		height: 400rpx;
+ 		position: relative;
+ 	}
+ 	.money_img{
+ 		width: 100%;
+ 		height: 120rpx;
+ 		text-align: center;
+ 		padding-top: 50rpx;
+ 		padding-bottom: 135rpx;
+ 		image{
+ 			width:120rpx;
+ 			height: 120rpx;
+ 			border: 4rpx solid #FD5F6F;
+ 			border-radius: 50%;
+ 		}
+ 	}
+ 	.money-frame {
+ 		position: absolute;
+ 		top: 0;
+ 		width: 100%;
+ 		padding-top: 120rpx;
+ 		// left: 30rpx;
+ 		// height: 460rpx;
+ 		// display: flex;
+ 		// align-items: flex-start;
+ 		// flex-direction: column;
+ 		// justify-content: center;
+ 	}
+ 	.money_name{
+ 		width: 100%;
+ 		text-align: center;
+ 		font-size: 32rpx;
+ 		font-family: PingFang SC;
+ 		font-weight: bold;
+ 		color: #FFFFFF;
+ 		
+ 	}
+ 	.money_num {
+		padding-top: 50rpx;
+ 		font-size: 72rpx;
+ 		font-family: PingFang SC;
+ 		font-weight: bold;
+ 		color: #FF4C4C;
+ 		.money_ren {
+ 			font-size: 36rpx;
+ 		}
+ 	}
+ }
+ 
+ // 列表
+ 
+ .swiper-box {
+ 	// padding-top: 10rpx;
+ 	.order-item {
+ 		padding: 20rpx 30rpx;
+		padding-bottom: 0;
+ 		line-height: 1.5;
+ 		.title-box {
+ 			width: 100%;
+			&.flex_item{
+				border-bottom: 1px dashed #999999  ;
+				padding-bottom: 20rpx;
+			}
+ 			.title-avatar{
+ 				width: 100rpx;
+ 				height: 100rpx;
+ 				margin-right: 25rpx;
+ 				image{
+ 					width: 100%;
+ 					height: 100%;
+ 					border-radius: 100%;
+ 				}
+ 			}
+ 			.list_tpl{
+ 				width: 85%;
+ 				.title {
+ 					font-size: $font-lg;
+ 					color: $font-color-base;
+ 					overflow:hidden;            //超出的文本隐藏
+ 					text-overflow:ellipsis;     //溢出用省略号显示
+ 					white-space:nowrap;
+					 justify-content: space-between;
+					 
+					image {
+						margin-left: 9rpx;
+						width: 147rpx;
+						height: 32rpx;
+					}
+ 				}
+ 				.time {
+ 					margin-top: 15rpx;
+ 					font-size: 22rpx;
+ 					color: $font-color-light;
+ 				}
+ 			}
+ 		}
+ 		.money {
+ 			color: #DB1935;
+ 			font-size: $font-lg;
+ 		}
+ 	}
+ }
+ .list-scroll-content {
+ 	height: 100%;
+ }
+ .content {
+ 	height: 100%;
+ 	.empty-content {
+ 		background-color: #ffffff;
+ 	}
+ }
+ .tg-wrapper {
+	width: 100%;
+	background-color: #f7f7f7;
+	
+	padding: 20rpx 0;
+	.tg-box {
+		display: flex;
+		justify-content: center;
+		width: 690rpx;
+		height: 143rpx;
+		background-color: #fff;
+		margin: 0 auto;
+		align-items: center;
+		.tg-item {
+			width: 33%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			.tg-tit {
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				
+			}
+			.tg-val {
+				padding-top: 15rpx;
+				font-size: 34rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				
+			}
+		}
+		.tg-jg {
+			width: 1rpx;
+			height: 51rpx;
+			background: #DDDDDD;
+		}
+	}
+ }
+ </style>
+ 

pages/user/user.vue

@@ -10,10 +10,12 @@
 						<view class="info-box">
 							<view class="username">{{ userInfo.nickname || '游客' }}</view>
 							<view class="font-size-sm" v-if="userInfo.spread_uid">邀请码:{{ userInfo.spread_uid }}</view>
+							<text class="font-size-sm" v-if="orderTime!=0">分红周期：{{orderTime}}</text>
 						</view>
 					</view>
 					<view class="config iconfont">
 						<text class="setting iconsetting" @click="navTo('/pages/set/set')"></text>
+						
 						<!-- <text class="message iconmessage" @click="navTo('/pages/user/notice')"></text> -->
 					</view>
 				</view>
@@ -142,7 +144,7 @@
 						<uni-list-item title="我的收藏" @click="navTo('/pages/user/favorites')" thumb="/static/icon/img02.png"></uni-list-item>
 						<!-- <uni-list-item title="商户入驻" @click="navTo('/pages/set/address')" thumb="/static/icon/img05.png"></uni-list-item> -->
 						<uni-list-item title="邀请好友" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/img10.png"></uni-list-item>
-						<!-- <uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"></uni-list-item> -->
+						<uni-list-item title="我的推广" @click="navTo('/pages/user/extension')" thumb="/static/icon/img12.png"></uni-list-item>
 					</uni-list>
 				</view>
 			</view>
@@ -155,6 +157,7 @@ import uniList from '@/components/uni-list/uni-list.vue';
 import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
 import { orderData, getUserInfo } from '@/api/user.js';
 import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+import{getTime} from '@/utils/rocessor.js'
 let startY = 0,
 	moveY = 0,
 	pageAtTop = true;
@@ -169,7 +172,8 @@ export default {
 			coverTransition: '0s',
 			moving: false,
 			userDowm: 0, //卡片升级专属高度
-			userMaxDowm: 0 //卡片最高高度
+			userMaxDowm: 0 ,//卡片最高高度
+			orderTime:''//分红周期
 		};
 	},
 	onShow() {
@@ -222,9 +226,14 @@ export default {
 		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
 		// 加载初始数据
 		loadBaseData() {
+			let obj = this
 			getUserInfo({})
 				.then(({ data }) => {
 					this.setUserInfo(data);
+					console.log(data,'111111');
+					obj.orderTime = getTime(data.cycle_time)
+					console.log(obj.orderTime);
+					
 					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
 					orderData({})
 						.then(({ data }) => {

store/index.js

@@ -14,8 +14,10 @@ const store = new Vuex.Store({
 		weichatObj:'',//微信对象
 		// #endif
 	},
+	//保存方法的mutations，只要是修改state的内容，都是通过mutations，如果有异步操作再通过actions
 	mutations: {
 		//保存微信信息
+		//下方state是默认参数
 		setWeiChatInfo(state, provider) {
 			state.weichatInfo = provider;
 		},