12345

pages.json

@@ -447,7 +447,37 @@
 				"navigationBarTitleText": "邀请好友"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/money/qudou",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的趣豆",
+                "enablePullDownRefresh": false,
+				"app-plus":{
+					"titleNView":false
+				}
+            }
+            
+        }
+        ,{
+            "path" : "pages/money/jifen",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/money/zhihuanquan",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/money/jifen.vue

@@ -0,0 +1,442 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<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>
+			<view class="content-bg"><image src="../../static/img/jifen.png" mode=""></image></view>
+			<view class="money-box">
+				<view class="money">{{ userInfo.brokerage_price }}</view>
+				<view>余额</view>
+			</view>
+			<view class="money-btn" @click="navto('/pages/money/withdrawal')">
+				兑换置换券
+				<!-- <text>></text> -->
+			</view>
+		</view>
+		<view class="info-box flex">
+			<view class="info-item">
+				<view class="info-font">累计收入</view>
+				<view class="info-num">{{recharge}}</view>
+			</view>
+			<view class="shu"></view>
+			<view class="info-item">
+				<view class="info-font">累计支出</view>
+				<view class="info-num">{{orderStatusSum}}</view>
+			</view>
+		</view>
+		<view class="navbar">
+			<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" 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" v-for="(item, index) in tabItem.orderList" :key="index">
+							<view class="title-box">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="time">
+									<text>{{ item.add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<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>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+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
+	},
+	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: [
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						}
+					],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				},
+				{
+					state: 1,
+					text: '支出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				}
+			],
+			money: ''
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		this.loadData();
+	},
+	methods: {
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		},
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({});
+		},
+		//获取收入支出信息
+		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 }) => {
+					obj.recharge = data.income;
+					obj.orderStatusSum = data.expend;
+						console.log(data);
+					if (data.list.length > 0) {
+						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);
+				});
+		},
+
+		//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%;
+}
+.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;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.body-title {
+		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;
+		}
+	}
+}
+.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;
+		.info-font {
+			font-size: 30rpx;
+			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;
+	}
+}
+.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 {
+		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;
+		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;
+			}
+		}
+	}
+}
+//列表
+.swiper-box {
+	.order-item:last-child {
+		margin-bottom: 60rpx;
+	}
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		.title-box {
+			.title {
+				font-size: $font-lg;
+				color: $font-color-base;
+			}
+			.time {
+				font-size: $font-base;
+				color: $font-color-light;
+			}
+		}
+		.money {
+			color: #fd5b23;
+			font-size: $font-lg;
+			text-align: right;
+			.status {
+				color: $font-color-light;
+			}
+		}
+	}
+}
+.list-scroll-content {
+	background: #ffffff;
+	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;
+}
+</style>

pages/money/money.vue

@@ -1,95 +1,294 @@
 <template>
 	<view class="center">
 		<view class="top">
-			<image class="top-bg" src="../../static/img/money-bg.png" mode=""></image>
+			<image class="top-bg" src="../../static/img/order99.png" mode=""></image>
 			<view class="top-font">现金余额（元）</view>
 			<view class="num">0.00</view>
 		</view>
 		<view class="navbar">
-			<view class="navbar-item">
+			<view class="navbar-item" @click="navTo('')">
 				<view class="navbar-font">
 					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
 					<view class="font">趣豆</view>
 				</view>
 				<view class="navbar-num">200</view>
+			</view>
+			<view class="vvv">
+
 			</view>
 			<view class="navbar-item">
 				<view class="navbar-font">
-					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
-					<view class="font">趣豆</view>
+					<image class="navbar-image" src="../../static/money/m03.png" mode=""></image>
+					<view class="font">积分</view>
 				</view>
 				<view class="navbar-num">200</view>
+			</view>
+			<view class="vvv">
+
 			</view>
 			<view class="navbar-item">
 				<view class="navbar-font">
-					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
-					<view class="font">趣豆</view>
+					<image class="navbar-image" src="../../static/money/m04.png" mode=""></image>
+					<view class="font">置换券</view>
 				</view>
 				<view class="navbar-num">200</view>
 			</view>
 		</view>
+		<view class="content-box">
+			<view class="content-title">
+				<view class="title-left">
+					<image src="../../static/money/m02.png" mode=""></image>
+					<text>现金余额明细</text>
+				</view>
+				<view class="title-right">
+					全部
+					<image src="../../static/money/m01.png" mode=""></image>
+				</view>
+			</view>
+			<view class="list" v-for="(item ,index) in list" :style="{background:(index%2==0?'#fff':'#F9F9F9')}">
+				<view class="list-box">
+					<view class="list-left">
+						<view class="top1">
+							{{item.title}}
+						</view>
+						<view class="bottom">
+							{{item.time}}
+						</view>
+					</view>
+					<view class="list-right" :style="{color:(index%2==0?'#ff0000':'#000000')}">
+						{{item.money}}
+					</view>
+				</view>
+			</view>
+		</view>
+
+
 		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
 
 <script>
-import { tabbar } from '@/utils/tabbar.js';
-export default {
-	data() {
-		return {
-			tabbar: tabbar,
-			current: 3
-		};
-	}
-};
+	import {
+		tabbar
+	} from '@/utils/tabbar.js';
+	export default {
+		data() {
+			return {
+				currentIndex:0,
+				tabbar: tabbar,
+				current: 3,
+				list: [{
+						title: '释放保证金',
+						time: '2022-01-21 14:12',
+						money: "200"
+					},
+					{
+						title: '预约入场',
+						time: '2220-01-21 14:12',
+						money: "-200"
+					},
+					{
+							title: '释放保证金',
+							time: '2022-01-21 14:12',
+							money: "200"
+						},
+						{
+							title: '预约入场',
+							time: '2220-01-21 14:12',
+							money: "-200"
+						}
+				]
+			};
+		},
+		methods:{
+			navTo(url){
+				uni.navigateTo({
+					url
+				})
+			}
+		}
+	};
 </script>
 
 <style lang="less">
-.center {
-	height: auto;
-	min-height: 100%;
-	background: #ffffff;
-}
-.top {
-	margin: 20rpx auto 0;
-	position: relative;
-	width: 700rpx;
-	height: 200rpx;
-	padding: 54rpx 40rpx;
-	.top-bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
+	.center {
+		height: 100%;
+		width: 100%;
+		height: auto;
+		min-height: 100%;
+		background: #ffffff;
+	}
+
+	.top {
+		margin: 20rpx auto 0;
+		position: relative;
 		width: 700rpx;
 		height: 200rpx;
+		padding: 54rpx 40rpx;
+
+		.top-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			width: 700rpx;
+			height: 200rpx;
+			border-radius: 25rpx;
+		}
+
+		.top-font {
+			position: relative;
+			z-index: 2;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ffffff;
+			line-height: 1;
+		}
+
+		.num {
+			line-height: 1;
+			position: relative;
+			z-index: 2;
+			margin-top: 24rpx;
+			font-size: 48rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ffffff;
+		}
 	}
-	.top-font {
-		position: relative;
-		z-index: 2;
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #ffffff;
-		line-height: 1;
+
+	.navbar {
+		display: flex;
+		justify-content: space-around;
+		width: 700rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		margin: 40rpx auto 0;
+		padding: 40rpx 0 50rpx;
+
+		.vvv {
+			width: 2rpx;
+			height: 74rpx;
+			background: #DCDCDC;
+		}
+
+		.navbar-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.navbar-font {
+				margin-bottom: 10rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				image {
+					margin-right: 10rpx;
+					width: 40rpx;
+					height: 40rpx;
+
+				}
+
+				.font {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #0C1732;
+				}
+			}
+
+			.navbar-num {
+				font-size: 34rpx;
+				font-weight: bold;
+				color: #0C1732;
+			}
+		}
 	}
-	.num {
-		line-height: 1;
-		position: relative;
-		z-index: 2;
-		margin-top: 24rpx;
-		font-size: 48rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #ffffff;
+
+	.content-box {
+		margin: 0 30rpx;
+
+		.content-title {
+			margin: 50rpx 0;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.title-left {
+				image {
+					width: 8rpx;
+					height: 30rpx;
+					margin-right: 10rpx;
+				}
+
+				text {
+					font-size: 34rpx;
+					font-weight: bold;
+					color: #0C1732;
+				}
+			}
+
+			.title-right {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #0C1732;
+
+				image {
+					margin-left: 10rpx;
+					width: 17rpx;
+					height: 12rpx;
+				}
+			}
+		}
+	}
+
+	.list {
+		
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.list-box {
+			width: 700rpx;
+			height: 143rpx;
+			width: 100%;
+			display: flex;
+			
+			border-radius: 10rpx;
+			justify-content: space-between;
+			align-items: center;
+			margin: 0 30rpx;
+
+
+			.list-left {
+				height: 143rpx;
+				display: flex;
+				flex-direction: column;
+				
+				justify-content: space-around;
+
+
+				.top1 {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #0C1732;
+					
+				}
+
+				.bottom {
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #999999;
+				}
+
+			}
+
+			.list-right {
+				font-size: 36rpx;
+				font-weight: bold;
+				color: #EA453C;
+			}
+		}
 	}
-}
-.navbar {
-	width: 700rpx;
-	background: #FFFFFF;
-	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-	border-radius: 20rpx;
-	margin: 40rpx auto 0;
-	padding: 40rpx 0 50rpx;
-}
 </style>

pages/money/qudou.vue

@@ -0,0 +1,443 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<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>
+			<view class="content-bg"><image src="../../static/img/yongjin-bg.png" mode=""></image></view>
+			<view class="money-box">
+				<view class="money">{{ userInfo.brokerage_price }}</view>
+				<view>余额</view>
+			</view>
+			<view class="money-btn" @click="navto('/pages/money/withdrawal')">
+				转账
+				<!-- <text>></text> -->
+			</view>
+		</view>
+		<view class="info-box flex">
+			<view class="info-item">
+				<view class="info-font">累计收入</view>
+				<view class="info-num">{{recharge}}</view>
+			</view>
+			<view class="shu"></view>
+			<view class="info-item">
+				<view class="info-font">累计支出</view>
+				<view class="info-num">{{orderStatusSum}}</view>
+			</view>
+		</view>
+		<view class="navbar">
+			<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" 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" v-for="(item, index) in tabItem.orderList" :key="index">
+							<view class="title-box">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="time">
+									<text>{{ item.add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<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>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+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
+	},
+	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: [
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						}
+					],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				},
+				{
+					state: 1,
+					text: '支出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				}
+			],
+			money: ''
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		this.loadData();
+	},
+	methods: {
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		},
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({});
+		},
+		//获取收入支出信息
+		async loadData(source) {
+			let obj = this;
+			//这里是将订单挂载到tab列表下
+			let index = this.tabCurrentIndex;
+			let navItem = this.navList[index];
+			let state = navItem.state + 3;
+			console.log(source,"iwiwiwiwi");
+			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 }) => {
+					obj.recharge = data.income;
+					obj.orderStatusSum = data.expend;
+						console.log(data);
+					if (data.list.length > 0) {
+						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);
+				});
+		},
+
+		//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%;
+}
+.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;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.body-title {
+		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;
+		}
+	}
+}
+.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;
+		.info-font {
+			font-size: 30rpx;
+			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;
+	}
+}
+.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 {
+		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;
+		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;
+			}
+		}
+	}
+}
+//列表
+.swiper-box {
+	.order-item:last-child {
+		margin-bottom: 60rpx;
+	}
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		.title-box {
+			.title {
+				font-size: $font-lg;
+				color: $font-color-base;
+			}
+			.time {
+				font-size: $font-base;
+				color: $font-color-light;
+			}
+		}
+		.money {
+			color: #fd5b23;
+			font-size: $font-lg;
+			text-align: right;
+			.status {
+				color: $font-color-light;
+			}
+		}
+	}
+}
+.list-scroll-content {
+	background: #ffffff;
+	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;
+}
+</style>

pages/money/zhihuanquan.vue

@@ -0,0 +1,454 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<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>
+			<view class="content-bg"><image src="../../static/img/zhihuanjuan.png" mode=""></image></view>
+			<view class="money-box">
+				<view class="money">{{ userInfo.brokerage_price }}</view>
+				<view>余额</view>
+			</view>
+			<view class="bth-box">
+				<view class="money-btn" @click="navto('/pages/money/withdrawal')">
+					兑换积分
+					<!-- <text>></text> -->
+				</view>
+				<view class="money-btn" @click="navto('/pages/money/withdrawal')">
+					转账艺金劵
+					<!-- <text>></text> -->
+				</view>
+			</view>
+		</view>
+		<view class="info-box flex">
+			<view class="info-item">
+				<view class="info-font">冻结中</view>
+				<view class="info-num">{{recharge}}</view>
+			</view>
+			<view class="shu"></view>
+			<view class="info-item">
+				<view class="info-font">已释放</view>
+				<view class="info-num">{{orderStatusSum}}</view>
+			</view>
+		</view>
+		<view class="navbar">
+			<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" 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" v-for="(item, index) in tabItem.orderList" :key="index">
+							<view class="title-box">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="time">
+									<text>{{ item.add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<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>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+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
+	},
+	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: [
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						},
+						{
+							title:'2233',
+							add_time:'2021-5-4',
+							number:22222
+						}
+					],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				},
+				{
+					state: 1,
+					text: '支出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 ,//每次信息条数
+					loaded: false
+				}
+			],
+			money: ''
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		this.loadData();
+	},
+	methods: {
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		},
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({});
+		},
+		//获取收入支出信息
+		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 }) => {
+					obj.recharge = data.income;
+					obj.orderStatusSum = data.expend;
+						console.log(data);
+					if (data.list.length > 0) {
+						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);
+				});
+		},
+
+		//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%;
+}
+.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;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.body-title {
+		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;
+		}
+	}
+}
+.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;
+		.info-font {
+			font-size: 30rpx;
+			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;
+	}
+}
+.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 {
+		font-size: 30rpx;
+	}
+}
+
+.bth-box{
+	display: flex;
+	justify-content: space-between;
+	padding: 0 50rpx;
+}
+.money-btn {
+	position: relative;
+	z-index: 2;
+	color: #ffffff;
+	
+	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;
+		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;
+			}
+		}
+	}
+}
+//列表
+.swiper-box {
+	.order-item:last-child {
+		margin-bottom: 60rpx;
+	}
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		.title-box {
+			.title {
+				font-size: $font-lg;
+				color: $font-color-base;
+			}
+			.time {
+				font-size: $font-base;
+				color: $font-color-light;
+			}
+		}
+		.money {
+			color: #fd5b23;
+			font-size: $font-lg;
+			text-align: right;
+			.status {
+				color: $font-color-light;
+			}
+		}
+	}
+}
+.list-scroll-content {
+	background: #ffffff;
+	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;
+}
+</style>

pages/order/order.vue

@@ -3,7 +3,8 @@
 		<view class="order-title">
 			<text>我的订单</text>
 			<view class="roder-content">
-				<view class="left" :class="{current:currentIndex===0}" v-for="(item,index) in maiList" @click="navGo(index)">
+				<view class="left" :class="{current:currentIndex===index}" :key='index' v-for="(item,index) in maiList"
+					@click="navGo(index)">
 					{{item.title}}
 				</view>
 				<!-- <view class="left">
@@ -11,13 +12,88 @@
 				</view> -->
 			</view>
 		</view>
-		<view class="navbar">
+		<view class="navbar" v-show="currentIndex==0">
 			<view v-for="(item, index) in navList" :key="index" class="nav-item"
 				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
+		<view class="navbar" v-show="currentIndex==1">
+			<view v-for="(item, index) in navList1" :key="index" class="nav-item"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		</view>
 
-		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
-			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+		<swiper :current="tabCurrentIndex" class="swiper-box-one" duration="300" @change="changeTab"
+			:style="{'height': height}">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"
+				:style="{'height': height}" v-if="currentIndex==0">
+				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+					<!-- 空白页 -->
+					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
+
+					<!-- 订单列表 -->
+					<view @click="goToOrderDetail(item)" v-for="(item, index) in tabItem.orderList" :key="index"
+						class="order-item">
+						<view class="i-top b-b">
+							<text class="time">{{ item._add_time }}</text>
+							<text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
+							<text v-if="item.status === 4" class="del-btn iconfont icondelete"
+								@click="deleteOrder(index)"></text>
+						</view>
+
+						<scroll-view v-if="item.cartInfo.length > 1" class="goods-box" scroll-x>
+							<view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
+								<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+							</view>
+						</scroll-view>
+						<!-- <view v-if="item.cartInfo.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
+							<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+							<view class="right">
+								<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
+								<text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
+								<text class="price">{{ moneyNum(goodsItem.productInfo.price)}}</text>
+							</view>
+						</view> -->
+						<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo"
+							:key="goodsIndex">
+							<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
+							<view class="right">
+								<view class="flex-start">
+									<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
+									<text class="price">{{ goodsItem.productInfo.price|moneyNum }}</text>
+								</view>
+								<view class="row flex">
+									<text
+										class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text>
+									<text class="attr-box"> x {{ goodsItem.cart_num }}</text>
+								</view>
+							</view>
+						</view>
+
+						<view class="price-box">
+							共
+							<text class="num">{{ item.cartInfo.length }}</text>
+							件商品 邮费
+							<text class="price">{{ moneyNum(item.pay_postage)}}</text>
+							实付款
+							<text class="price">{{ moneyNum(item.pay_price)}}</text>
+						</view>
+						<view class="action-box b-t" v-if="item.status != 5">
+							<button v-if="item._status._title == '未支付'" class="action-btn"
+								@click.stop="cancelOrder(item)">取消订单</button>
+							<button v-if="item._status._title == '未支付'" @click.stop="orderPay(item)"
+								class="action-btn recom">立即支付</button>
+							<button v-if="item._status._title == '待评价'" class="action-btn">评价</button>
+							<button v-if="item._status._title == '待收货'" @click.stop="orderTake(item, index)"
+								class="action-btn">确认收货</button>
+							<button v-if="item._status._title == '未发货'" class="action-btn"
+								@click.stop="orderRefund(item)">申请退款</button>
+						</view>
+					</view>
+
+					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"
+				:style="{'height': height}" v-if="currentIndex==1">
 				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
 					<!-- 空白页 -->
 					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
@@ -86,6 +162,7 @@
 				</scroll-view>
 			</swiper-item>
 		</swiper>
+
 		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
@@ -109,13 +186,17 @@
 		},
 		data() {
 			return {
+				height: '', //第一层swiper高度
 				tabbar: tabbar,
 				current: 1,
-				currentIndex:0,
+				currentIndex: 0,
 				tabCurrentIndex: 0,
-				maiList:[
-					{title:'我的买单'},
-					{title:'我的卖单'}
+				maiList: [{
+						title: '我的买单'
+					},
+					{
+						title: '我的卖单'
+					}
 				],
 				navList: [{
 						state: 0,
@@ -157,7 +238,49 @@
 						page: 1, //当前页数
 						limit: 10 //每次信息条数
 					}
-				]
+				],
+				navList1: [{
+						state: 0,
+						text: '全部',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 1,
+						text: '售卖中',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 2,
+						text: '待支付',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 3,
+						text: '待放货',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 4,
+						text: '已完成',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				],
+
 			};
 		},
 
@@ -189,9 +312,26 @@
 				return +value;
 			},
 		},
+		// 页面加载完获取swiper高度
+		onReady(res) {
+			var obj = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.swiper-box-one').boundingClientRect();
+					query.exec(function(res) {
+						console.log(res, 'ddddddddddddd');
+						obj.height = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', obj.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
 		methods: {
-			navGo(index){
+			navGo(index) {
 				this.currentIndex = index
+				console.log(this.currentIndex, '点击');
 			},
 			// 转换金额为数字
 			moneyNum(value) {
@@ -272,6 +412,8 @@
 							return e;
 						});
 						navItem.orderList = navItem.orderList.concat(arr);
+
+
 						// console.log(navItem.orderList);
 						navItem.page++;
 						if (navItem.limit == data.length) {
@@ -281,6 +423,7 @@
 						} else {
 							//判断是否还有数据， 有改为 more， 没有改为noMore
 							navItem.loadingType = 'noMore';
+
 						}
 						uni.hideLoading();
 						this.$set(navItem, 'loaded', true);
@@ -295,10 +438,7 @@
 				this.tabCurrentIndex = e.target.current;
 				this.loadData('tabChange');
 			},
-			//顶部tab点击
-			tabClick(index) {
-				this.tabCurrentIndex = index;
-			},
+
 			//删除订单
 			deleteOrder(index) {
 				uni.showLoading({
@@ -387,11 +527,12 @@
 	}
 
 	.order-title {
-		
-		
+
+
 		width: 750rpx;
 		height: 262rpx;
-		background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
+		// background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
+		background: url(../../static/img/order99.png) repeat-x 0;
 		display: flex;
 		flex-direction: column;
 		// padding: 50rpx 0;
@@ -406,8 +547,8 @@
 		}
 
 		.roder-content {
-			
-			
+
+
 			display: flex;
 			justify-content: space-around;
 
@@ -422,31 +563,29 @@
 				font-family: PingFang SC;
 				font-weight: bold;
 				color: #FFFFFF;
+				background: #DC262b;
 			}
 
-			&.current {
-				width: 336rpx;
-				text-align: center;
-				height: 81rpx;
+			.current {
+				color: #DC262B;
 				background: #FFFFFF;
-				border-radius: 10rpx;
-				font-size: 30rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #4166FC;
-				line-height: 81rpx;
 			}
 		}
 	}
 
 	.swiper-box {
-		height: calc(100% - 40px);
+		background: red;
 	}
 
 	.list-scroll-content {
 		height: 100%;
 	}
 
+
+	.uni-swiper-item {
+		height: auto;
+	}
+
 	.navbar {
 		display: flex;
 		height: 40px;
@@ -467,7 +606,7 @@
 			position: relative;
 
 			&.current {
-				color: #4166FC;
+				color: $base-color;
 
 				&:after {
 					content: '';
@@ -477,16 +616,12 @@
 					transform: translateX(-50%);
 					width: 44px;
 					height: 0;
-					border-bottom: 2px solid #4166FC;
+					border-bottom: 2px solid $base-color;
 				}
 			}
 		}
 	}
 
-	.uni-swiper-item {
-		height: auto;
-	}
-
 	.order-item {
 		display: flex;
 		flex-direction: column;
@@ -808,4 +943,8 @@
 			opacity: 0.2;
 		}
 	}
+
+	.swiper-box-one {
+		background-color: #bfa;
+	}
 </style>