bug

pages/user/award.vue

@@ -1,33 +1,15 @@
 <template>
 	<view class="content">
 		<view class="content-money">
-			<view class="status_bar">
-				<!-- 这里是状态栏 -->
-			</view>
+			<view class="status_bar"><!-- 这里是状态栏 --></view>
 			<view class="body-title">
-
-				<view class="goback-box" @click="toBack">
-					<image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
-				</view>
-				<view class="header">我的补贴券</view>
-
-				<view class="goback-box" @click="toBack">
-					<image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
-				</view>
+				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
 				<view class="header">我的消费补贴券</view>
-
-			</view>
-			<view class="content-bg">
-				<image src="../../static/img/yongjin-bg.png" mode=""></image>
 			</view>
+			<view class="content-bg"><image src="../../static/img/yongjin-bg.png" mode=""></image></view>
 			<view class="money-box">
-
-				<view class="money">111</view>
-				<view>我的补贴券</view>
-
 				<view class="money">{{ userInfo.brokerage_price }}</view>
 				<view>我的消费补贴券</view>
-
 			</view>
 			<view class="money-btn" @click="navto('/pages/money/withdrawal')">
 				消费补贴券转换
@@ -37,42 +19,40 @@
 		<view class="info-box flex">
 			<view class="info-item">
 				<view class="info-font">累计收入</view>
-				<view class="info-num">{{orderStatusSum}}</view>
+				<view class="info-num">{{ orderStatusSum }}</view>
 			</view>
 			<view class="shu"></view>
 			<view class="info-item">
 				<view class="info-font">累计支出</view>
-				<view class="info-num">{{recharge}}</view>
+				<view class="info-num">{{ recharge }}</view>
 			</view>
 		</view>
 		<view class="navbar">
-			<view class="nav-item" @click="tabClick(index)"></view>
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
-		<swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300"
-			@change="changeTab">
-			<swiper-item class="tab-content">
+		<swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
 					<!-- 空白页 -->
-
+					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
 					<!-- 订单列表 -->
 					<view>
-						<view class="order-item flex">
+						<view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index">
 							<view class="title-box">
 								<view class="title">
-									<text></text>
+									<text>{{ item.title }}</text>
 								</view>
 								<view class="time">
-									<text></text>
+									<text>{{ item.add_time }}</text>
 								</view>
 							</view>
 							<view class="money">
-								<view></view>
-								<view></view>
+								<view>{{ (item.pm == 0 ? '-' : '+') + item.number }}</view>
+								<view v-if="item.status == 0" class="status">待发放</view>
 							</view>
 						</view>
 					</view>
-					<!-- <uni-load-more :status="tabItem.loadingType"
-						v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more> -->
+					<uni-load-more :status="tabItem.loadingType" v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more>
 				</scroll-view>
 			</swiper-item>
 		</swiper>
@@ -80,423 +60,398 @@
 </template>
 
 <script>
-	import {
-		spreadCommission,
-		userBalance
-	} from '@/api/wallet.js';
-	import {
+import { spreadCommission, userBalance } from '@/api/wallet.js';
+import { getMoneyStyle } from '@/utils/rocessor.js';
+import { mapState, mapMutations } from 'vuex';
+import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
+import empty from '@/uview-ui/components/u-empty/u-empty.vue';
+export default {
+	filters: {
 		getMoneyStyle
-	} from '@/utils/rocessor.js';
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
-	import empty from '@/uview-ui/components/u-empty/u-empty.vue';
-	export default {
-		filters: {
-			getMoneyStyle
-		},
-		computed: {
-			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-		},
-		components: {
-			empty,
-			uniLoadMore
-		},
-		onReady(res) {
-			var _this = this;
-			uni.getSystemInfo({
-				success: resu => {
-					const query = uni.createSelectorQuery();
-					query.select('.swiper-box').boundingClientRect();
-					query.exec(function(res) {
-						_this.maxheight = resu.windowHeight - res[0].top + 'px';
-						console.log('打印页面的剩余高度', _this.height);
-					});
+	},
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	components: {
+		empty,
+		uniLoadMore
+	},
+	onReady(res) {
+		var _this = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					_this.maxheight = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', _this.height);
+				});
+			},
+			fail: res => {}
+		});
+	},
+	data() {
+		return {
+			// 头部图高度
+			maxheight: '',
+			tabCurrentIndex: 0,
+			orderStatusSum: 0,
+			recharge: 0,
+			navList: [
+				{
+					state: 0,
+					text: '收入',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10, //每次信息条数
+					loaded: false
 				},
-				fail: res => {}
+				{
+					state: 1,
+					text: '支出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10, //每次信息条数
+					loaded: false
+				}
+			],
+			money: ''
+		};
+	},
+	onShow() {
+		this.loadData();
+	},
+	methods: {
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
 			});
 		},
-		data() {
-			return {
-				// 头部图高度
-				maxheight: '',
-				tabCurrentIndex: 0,
-				orderStatusSum: 0,
-				recharge: 0,
-				navList: [{
-						state: 0,
-						text: '收入',
-						loadingType: 'more',
-						orderList: [],
-						page: 1, //当前页数
-						limit: 10, //每次信息条数
-						loaded: false
-					},
-					{
-						state: 1,
-						text: '支出',
-						loadingType: 'more',
-						orderList: [],
-						page: 1, //当前页数
-						limit: 10, //每次信息条数
-						loaded: false
+		//获取收入支出信息
+		async loadData(source) {
+			let obj = this;
+			//这里是将订单挂载到tab列表下
+			let index = this.tabCurrentIndex;
+			let navItem = this.navList[index];
+			let state = navItem.state + 3;
+			if (source === 'tabChange' && navItem.loaded === true) {
+				//tab切换只有第一次需要加载数据
+				return;
+			}
+			if (navItem.loadingType === 'loading') {
+				//防止重复加载
+				return;
+			}
+			// 修改当前对象状态为加载中
+			navItem.loadingType = 'loading';
+			console.log(state,"123456");
+			spreadCommission(
+				{
+					page: navItem.page,
+					limit: navItem.limit
+				},
+				state
+			)
+				.then(({ data }) => {
+					console.log(data, '2211111');
+					obj.recharge = data.income;
+					obj.orderStatusSum = data.expend;
+					if (data.list.length > 0) {
+						data.list[0].list.forEach(e => {
+							console.log(e, '123456');
+							if (e.title == '市场分红') {
+								e.title = '市场分红补贴';
+							}
+							if (e.title == '礼包推荐奖') {
+								e.title = '礼包推荐补贴';
+							}
+						});
+						navItem.orderList = navItem.orderList.concat(data.list[0].list);
+						console.log(navItem.orderList);
+						navItem.page++;
+					} else {
+						navItem.loadingType = 'noMore';
+					}
+					if (navItem.limit == data.length) {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'more';
+						return;
+					} else {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'noMore';
 					}
-				],
-				money: ''
-			};
+					uni.hideLoading();
+					this.$set(navItem, 'loaded', true);
+				})
+				.catch(e => {
+					console.log(e);
+				});
 		},
-
-
-		onShow() {
-			this.loadData();
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({});
 		},
-		methods: {
-			// 页面跳转
-			navto(e) {
-				uni.navigateTo({
-						url: e
-					})
-
-				},
-				//获取收入支出信息
-				async loadData(source) {
-						let obj = this;
-						//这里是将订单挂载到tab列表下
-						let index = this.tabCurrentIndex;
-						let navItem = this.navList[index];
-						let state = navItem.state + 3;
-						if (source === 'tabChange' && navItem.loaded === true) {
-							//tab切换只有第一次需要加载数据
-							return;
-						}
-						if (navItem.loadingType === 'loading') {
-							//防止重复加载
-							return;
-						}
-						// 修改当前对象状态为加载中
-						navItem.loadingType = 'loading';
-
-						spreadCommission({
-									page: navItem.page,
-									limit: navItem.limit
-								},
-								state
-							)
-							.then(({
-								data
-							}) => {
-								console.log(data,'2211111');
-								obj.recharge = data.income;
-								obj.orderStatusSum = data.expend;
-								if (data.list.length > 0) {
-									data.list[0].list.forEach(e => {
-										console.log(e, "123456");
-										if (e.title == '市场分红') {
-											e.title = '市场分红补贴'
-										}
-										if (e.title == '礼包推荐奖') {
-											e.title = '礼包推荐补贴'
-										}
-									})
-									navItem.orderList = navItem.orderList.concat(data.list[0].list);
-									console.log(navItem.orderList);
-									navItem.page++;
-								} else {
-									navItem.loadingType = 'noMore';
-								}
-								if (navItem.limit == data.length) {
-									//判断是否还有数据， 有改为 more， 没有改为noMore
-									navItem.loadingType = 'more';
-									return;
-								} else {
-									//判断是否还有数据， 有改为 more， 没有改为noMore
-									navItem.loadingType = 'noMore';
-								}
-								uni.hideLoading();
-								this.$set(navItem, 'loaded', true);
-							})
-							.catch(e => {
-								console.log(e);
-
-							});
-					},
-					// 点击返回 我的页面
-					toBack() {
-						uni.navigateBack({});
-					},
-					//获取收入支出信息
-					async loadData() {
-						let obj = this
-						// obj.state = order
-						spreadCommission({
-							limit: 10,
-							page: 1,
-
-						}).then(({
-							data
-						}) => {
-							console.log(data, '列表数据');
-							obj.orderStatusSum = data.expend
-							obj.recharge = data.income
-							console.log(data.income);
-						})
-
-					}
-				//swiper 切换
-
-				//顶部tab点击
-
-			}
-		};
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange');
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		}
+	}
+};
 </script>
 
 <style lang="scss">
-	page {
-		background: #f1f1f1;
-		height: 100%;
-	}
+page {
+	background: #f1f1f1;
+	height: 100%;
+}
+
+.status_bar {
+	height: var(--status-bar-height);
+	width: 100%;
+}
+
+.content-money {
+	position: relative;
+	height: 480rpx;
+
+	.content-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 750rpx;
+		height: 480rpx;
 
-	.status_bar {
-		height: var(--status-bar-height);
-		width: 100%;
+		image {
+			width: 100%;
+			height: 100%;
+		}
 	}
 
-	.content-money {
+	.body-title {
+		height: 80rpx;
+		text-align: center;
+		font-size: 35rpx;
 		position: relative;
-		height: 480rpx;
 
-		.content-bg {
+		.header {
 			position: absolute;
-			top: 0;
 			left: 0;
-			right: 0;
-			width: 750rpx;
-			height: 480rpx;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.body-title {
+			top: 0;
+			width: 100%;
+			font-size: 36rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fffeff;
 			height: 80rpx;
-			text-align: center;
-			font-size: 35rpx;
-			position: relative;
-
-			.header {
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 100%;
-				font-size: 36rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #fffeff;
-				height: 80rpx;
-				font-size: 36rpx;
-				font-weight: 700;
-				z-index: 9;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
-			.goback-box {
-				position: absolute;
-				left: 18rpx;
-				top: 0;
-				height: 80rpx;
-				display: flex;
-				align-items: center;
-			}
-
-			.goback {
-				z-index: 100;
-				width: 34rpx;
-				height: 34rpx;
-			}
+			font-size: 36rpx;
+			font-weight: 700;
+			z-index: 9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
-	}
 
-	.info-box {
-		width: 670rpx;
-		height: 186rpx;
-		background: #ffffff;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: -100rpx auto 0;
-		position: relative;
-		z-index: 2;
-
-		.info-item {
-			width: 50%;
+		.goback-box {
+			position: absolute;
+			left: 18rpx;
+			top: 0;
+			height: 80rpx;
 			display: flex;
-			flex-direction: column;
 			align-items: center;
-			line-height: 1;
-
-			.info-font {
-				font-size: 30rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #999999;
-			}
-
-			.info-num {
-				margin-top: 30rpx;
-				font-size: 30rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #181818;
-			}
 		}
 
-		.shu {
-			width: 2rpx;
-			height: 74rpx;
-			background: #dcdfe6;
+		.goback {
+			z-index: 100;
+			width: 34rpx;
+			height: 34rpx;
 		}
 	}
+}
+
+.info-box {
+	width: 670rpx;
+	height: 186rpx;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: -100rpx auto 0;
+	position: relative;
+	z-index: 2;
+
+	.info-item {
+		width: 50%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		line-height: 1;
 
-	.money-box {
-		position: relative;
-		z-index: 2;
-		padding-top: 90rpx;
-		color: #ffffff;
-		text-align: center;
-
-		.money {
-			font-size: 72rpx;
+		.info-font {
+			font-size: 30rpx;
 			font-family: PingFang SC;
 			font-weight: bold;
-			color: #ffffff;
+			color: #999999;
 		}
 
-		.text {
+		.info-num {
+			margin-top: 30rpx;
 			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #181818;
 		}
 	}
 
-	.money-btn {
-		position: relative;
-		z-index: 2;
-		color: #ffffff;
-		padding-right: 50rpx;
-		text-align: right;
-		font-size: 30rpx;
+	.shu {
+		width: 2rpx;
+		height: 74rpx;
+		background: #dcdfe6;
+	}
+}
+
+.money-box {
+	position: relative;
+	z-index: 2;
+	padding-top: 90rpx;
+	color: #ffffff;
+	text-align: center;
+
+	.money {
+		font-size: 72rpx;
 		font-family: PingFang SC;
 		font-weight: bold;
-		color: #FFFFFF;
-
-		text {
-			display: inline-block;
-			padding-left: 10rpx;
-		}
+		color: #ffffff;
 	}
 
-	.navbar {
-		margin-top: 20rpx;
+	.text {
+		font-size: 30rpx;
+	}
+}
+
+.money-btn {
+	position: relative;
+	z-index: 2;
+	color: #ffffff;
+	padding-right: 50rpx;
+	text-align: right;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #ffffff;
+
+	text {
+		display: inline-block;
+		padding-left: 10rpx;
+	}
+}
+
+.navbar {
+	margin-top: 20rpx;
+	display: flex;
+	height: 88rpx;
+	padding: 0 5px;
+	background: #fff;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	position: relative;
+	z-index: 10;
+
+	.nav-item {
+		flex: 1;
 		display: flex;
-		height: 88rpx;
-		padding: 0 5px;
-		background: #fff;
-		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		color: #999999;
 		position: relative;
-		z-index: 10;
 
-		.nav-item {
-			flex: 1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100%;
-			font-size: 15px;
-			color: #999999;
-			position: relative;
-
-			&.current {
-				color: #000;
-
-				&:after {
-					content: '';
-					position: absolute;
-					left: 50%;
-					bottom: 0;
-					transform: translateX(-50%);
-					width: 44px;
-					height: 0;
-					border-bottom: 2px solid #fe5b38;
-				}
+		&.current {
+			color: #000;
+
+			&:after {
+				content: '';
+				position: absolute;
+				left: 50%;
+				bottom: 0;
+				transform: translateX(-50%);
+				width: 44px;
+				height: 0;
+				border-bottom: 2px solid #fe5b38;
 			}
 		}
 	}
+}
 
-	//列表
-	.swiper-box {
-		.order-item:last-child {
-			margin-bottom: 60rpx;
-		}
+//列表
+.swiper-box {
+	.order-item:last-child {
+		margin-bottom: 60rpx;
+	}
 
-		.order-item {
-			padding: 20rpx 30rpx;
-			line-height: 1.5;
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
 
-			.title-box {
-				.title {
-					font-size: $font-lg;
-					color: $font-color-base;
-				}
+		.title-box {
+			.title {
+				font-size: $font-lg;
+				color: $font-color-base;
+			}
 
-				.time {
-					font-size: $font-base;
-					color: $font-color-light;
-				}
+			.time {
+				font-size: $font-base;
+				color: $font-color-light;
 			}
+		}
 
-			.money {
-				color: #fd5b23;
-				font-size: $font-lg;
-				text-align: right;
+		.money {
+			color: #fd5b23;
+			font-size: $font-lg;
+			text-align: right;
 
-				.status {
-					color: $font-color-light;
-				}
+			.status {
+				color: $font-color-light;
 			}
 		}
 	}
+}
 
-	.list-scroll-content {
-		background: #ffffff;
-		height: 100%;
-	}
+.list-scroll-content {
+	background: #ffffff;
+	height: 100%;
+}
 
-	.content {
-		height: 100%;
+.content {
+	height: 100%;
 
-		.empty-content {
-			background-color: #ffffff;
-		}
-	}
-
-	.btn-box {
-		width: 674rpx;
-		height: 88rpx;
-		background: linear-gradient(0deg, #2e58ff, #32c6ff);
-		border-radius: 44rpx;
-		font-size: 36rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #ffffff;
-		text-align: center;
-		line-height: 88rpx;
-		position: fixed;
-		bottom: 48rpx;
-		left: 0;
-		right: 0;
-		margin: 0 auto;
+	.empty-content {
+		background-color: #ffffff;
 	}
+}
+
+.btn-box {
+	width: 674rpx;
+	height: 88rpx;
+	background: linear-gradient(0deg, #2e58ff, #32c6ff);
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #ffffff;
+	text-align: center;
+	line-height: 88rpx;
+	position: fixed;
+	bottom: 48rpx;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+}
 </style>