2-8-1

components/empty.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="empty-content">
+	<view class="empty-content" :style="{'background': bgc}">
 		<image class="empty-content-image" :src="setSrc" mode="aspectFit"></image>
 	</view>
 </template>
@@ -10,7 +10,11 @@
 			src: {
 				type: String,
 				default: 'empty'
-			},
+			},
+			bgc: {
+				type: String,
+				default: '$page-color-base'
+			}
 		},
 
 		data() {
@@ -35,15 +39,14 @@
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
-		
 		position: absolute;
 		left: 0;
 		top: 0;
 		right: 0;
 		bottom: 0;
-		background: $page-color-base;
+		// background: $page-color-base;
 		padding-bottom: 120upx;
-
+		
 		&-image {
 			width: 200upx;
 			height: 200upx;

user/page/scoreAccumulate.vue

@@ -1,33 +1,54 @@
 <template>
 	<view class="content">
-		<view class="top-wrapper">{{ userInfo.integral || 0.0 }}</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" class="swiper-box" duration="300" @change="changeTab" :style="{ height: height }">
-			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
-				<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">
-							<view class="title">
-								<text>{{ item.mark }}</text>
-							</view>
-							<view class="time">
-								<text>{{ item.add_time }}</text>
-							</view>
-						</view>
-						<view class="money">
-							<text>{{ (item.pm == 0 ? '-' : '+') + item.number }}</text>
-						</view>
-					</view>
-					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
+		<view class="top-bg">
+		
+		</view>
+		<view class="yue-wrap flex">
+			<view class="yue-tit">
+				总积分
+			</view>
+			<view class="yue-num flex">
+				<view class="yue">
+					{{userInfo.integral || '0.00'}}
+				</view>
+				<!-- <view class="cz" @click="navto('/pages/money/recharge')">
+					充值
+					<image src="../../static/icon/dz.png" mode="widthFix"></image>
+				</view> -->
+			</view>
+			<view class="lj-wrap flex">
+				<view class="">
+					<!-- 累计消费：￥{{ userInfo.orderStatusSum || '0'}} -->
+				</view>
+				<view class="">
+					<!-- 累计充值：￥{{ userInfo.recharge || '0' }} -->
+				</view>
+			</view>
+		</view>
+		<scroll-view scroll-y="true" class="jl-wrap" :style="{'height': maxheight}" @scrolltolower="loadData">
+			<view>
+				<empty v-if="navList[tabCurrentIndex].orderList.length == 0 && navList[tabCurrentIndex].loaded" ></empty>
+				<view class="jl " v-for="item in navList[tabCurrentIndex].orderList">
+					<view class="jl-tit flex">
+						<view class="clamp2 tit">
+							{{item.mark}}
+						</view>
+						<view class="price" :class="{'add':item.pm == 1,'jian': item.pm == 0}">
+							{{item.number*1}}
+						</view>
+					</view>
+					<view class="jl-mark flex">
+						<!-- <view class="mark">
+							{{item.mark}}
+						</view> -->
+						<view class="">
+							{{item.add_time}}
+						</view>
+					</view>
+				</view>
+				<uni-load-more :status="navList[tabCurrentIndex].loadingType" v-if="!(navList[tabCurrentIndex].orderList.length == 0 && navList[tabCurrentIndex].loaded)"></uni-load-more>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -87,6 +108,20 @@ export default {
 	onShow() {
 		// 载入积分数据
 		this.loadData();
+	},
+	onReady() {
+		// 初始化获取页面宽度
+		var obj = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.jl-wrap').boundingClientRect();
+				query.exec(function(res) {
+					obj.maxheight = resu.windowHeight - res[0].top + 'px';
+				});
+			},
+			fail: res => {}
+		});
 	},
 	methods: {
 		// 页面跳转
@@ -116,8 +151,7 @@ export default {
 				{
 					page: navItem.page,
 					limit: navItem.limit
-				},
-				state
+				}
 			)
 				.then(({ data }) => {
 					console.log(data);
@@ -125,9 +159,7 @@ export default {
 					if (data.length > 0) {
 						let list = [];
 						data.forEach(item => {
-							if (item.pm === state) {
-								list.push(item);
-							}
+							list.push(item);
 						});
 						navItem.orderList = navItem.orderList.concat(list);
 						navItem.page++;
@@ -162,98 +194,112 @@ export default {
 </script>
 
 <style lang="scss">
-page {
-	background: #ffffff;
-	height: 100%;
-}
-
-.navbar {
-	display: flex;
-	height: 40px;
-	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: $font-color-dark;
-		position: relative;
-
-		&.current {
-			color: $base-color;
-
-			&:after {
-				content: '';
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translateX(-50%);
-				width: 44px;
-				height: 0;
-				border-bottom: 2px solid $base-color;
-			}
-		}
+page {
+		background-color: #fff;
+		height: auto;
+		min-height: 100%;
+	}
+
+	.top-bg {
+		background-color: #ee2f72;
+		height: 180rpx;
+		width: 750rpx;
+	}
+
+	.yue-wrap {
+		width: 670rpx;
+		height: 320rpx;
+		margin: -160rpx auto 30rpx;
+		background: linear-gradient(-70deg, #FF77A7, #FF4A8A);
+		box-shadow: 0px 15rpx 22rpx 6rpx rgba(238, 47, 114, 0.1);
+		border-radius: 25rpx;
+		color: #fff;
+		font-size: 26rpx;
+		padding: 50rpx 75rpx;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-start;
+
+		.yue-num {
+			width: 100%;
+			justify-content: space-between;
+
+			.yue {
+				font-size: 76rpx;
+				font-weight: bold;
+			}
+
+			.cz {
+				image {
+					width: 13rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+
+		.lj-wrap {
+			width: 100%;
+			justify-content: space-between;
+			font-size: 24rpx;
+		}
+	}
+
+	.jl {
+		width: 670rpx;
+		margin: 0 auto 20rpx;
+		padding: 35rpx 30rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 28px 0px rgba(48, 48, 48, 0.1);
+		border-radius: 8px;
+
+		.jl-tit {
+			width: 100%;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #333333;
+
+			.tit {
+				max-width: 450rpx;
+			}
+
+			.price {
+				font-size: 38rpx;
+				font-weight: bold;
+
+			}
+
+			.add {
+				color: #EE2F72;
+
+				&::before {
+					content: '+';
+					font-size: 28rpx;
+					color: #EE2F72;
+				}
+			}
+
+			.jian {
+				color: #808080;
+
+				&::before {
+					content: '-';
+					font-size: 28rpx;
+				}
+			}
+		}
+
+		.jl-mark {
+			padding-top: 20rpx;
+			width: 100%;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #808080;
+			align-items: flex-start;
+
+			// justify-content: flex-end;
+			.mark {
+				max-width: 470rpx;
+			}
+		}
 	}
-}
-
-// 列表
-
-.swiper-box {
-	height: calc(100% - 44px);
-	padding-top: 10rpx;
-
-	.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;
-		}
-	}
-}
-
-.list-scroll-content {
-	height: 100%;
-}
-
-.content {
-	height: 100%;
-
-	.empty-content {
-		background-color: #ffffff;
-	}
-}
-
-.top-wrapper {
-	width: 750rpx;
-	height: 265rpx;
-	background: #ee2f72;
-	color: #ffffff;
-	font-size: 72rpx;
-	font-family: PingFang SC;
-	font-weight: bold;
-	color: #ffffff;
-	line-height: 265rpx;
-	text-align: center;
-}
 </style>