2023-10-17

pages/myPledge/myPledge.vue

@@ -3,17 +3,34 @@
 		<view class="top padding-v-30 padding-c-30">
 			<view class="zhiya padding-b-10"> {{ $t("myple.u1") }} </view>
 			<view class="zhiyashu">
-				<text class="shu">{{money|getMoneyStyle}}</text>
+				<text class="shu">{{navList[tabCurrentIndex].sum|getMoneyStyle}}</text>
 				<text class="wen padding-l-10">USDT</text>
 			</view>
 		</view>
-		<view class="navbar">
-			<view v-for="(item, index) in navList" :key="index" class="nav-item"
+		<view class="navbar flex">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item flex-center"
 				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
+		<view class="title-box flex">
+			<view class="title">
+				<text>{{ $t("myple.u4") }}</text>
+			</view>
+			<view class="title">
+				<text>{{ $t("myple.u5") }}</text>
+			</view>
+			<view class="title">
+				<text>{{ $t("myple.u6") }}</text>
+			</view>
+			<view class="title">
+				<text>{{ $t("myple.u7") }}</text>
+			</view>
+			<view class="title">
+				<text>{{ $t("myple.u8") }}</text>
+			</view>
+		</view>
 		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300"
 			@change="changeTab">
-			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+			<swiper-item class="tab-content padding-b-30" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
 					<!-- 空白页 -->
 					<empty v-if="
@@ -24,53 +41,34 @@
 					<view>
 						<!-- <view class="order-item flex" > -->
 						<view class="order-item">
-							<view class="title-box">
-								<view class="title">
-									<text>{{ $t("myple.u4") }}</text>
-								</view>
-								<view class="title">
-									<text>{{ $t("myple.u5") }}</text>
-								</view>
-								<view class="title">
-									<text>{{ $t("myple.u6") }}</text>
-								</view>
-								<view class="title">
-									<text>{{ $t("myple.u7") }}</text>
-								</view>
-								<view class="title">
-									<text>{{ $t("myple.u8") }}</text>
-								</view>
-							</view>
-							<view class="heng"></view>
 							<view class="all-list" v-for="(item,ind) in navList[tabCurrentIndex].orderList" :key="ind">
-								<view class="list">
+								<view class="list flex padding-v-20">
 									<view class="list-item">
-										<view class="item"> 100 </view>
+										<view class="item"> {{item.num}} </view>
 										<view class="item"> USDT </view>
 									</view>
 									<view class="list-item">
-										<view class="item"> 100 </view>
+										<view class="item"> {{item.income}} </view>
 										<view class="item"> USDT </view>
 									</view>
 									<view class="list-item">
-										<view class="item" style="margin-top: 18rpx">
-											7天
+										<view class="item">
+											{{item.day}}天
 										</view>
 									</view>
 									<view class="list-item">
-										<view class="l-item"> 2023.12.02 </view>
-										<view class="l-item" style="margin-top: 20rpx">
-											12:00:00
+										<view class="l-item">{{item.add_time[0]}} </view>
+										<view class="l-item">
+											{{item.add_time[1]}}
 										</view>
 									</view>
 									<view class="list-item">
-										<view class="l-item"> 2023.12.02 </view>
-										<view class="l-item" style="margin-top: 20rpx">
-											12:00:00
+										<view class="l-item">{{item.send_time[0]}}</view>
+										<view class="l-item">
+											{{item.send_time[1]}}
 										</view>
 									</view>
 								</view>
-								<view class="heng"></view>
 							</view>
 							<!-- <view class="money">
 								<view>{{ (item.pm == 0 ? '-' : '+') + item.number * 1 }}</view>
@@ -84,9 +82,6 @@
 </template>
 
 <script>
-	import {
-		getUserInfo
-	} from "@/api/user.js";
 	import {
 		getLock
 	} from "@/api/mypledge.js";
@@ -94,7 +89,9 @@
 	import {
 		getTime
 	} from '@/utils/rocessor.js';
-	import { getMoneyStyle } from "@/utils/rocessor.js";
+	import {
+		getMoneyStyle
+	} from "@/utils/rocessor.js";
 	export default {
 		filters: {
 			getMoneyStyle,
@@ -109,9 +106,7 @@
 					const query = uni.createSelectorQuery();
 					query.select('.swiper-box').boundingClientRect();
 					query.exec(function(res) {
-						console.log(resu);
 						_this.height = resu.windowHeight - res[0].top + 'px';
-						console.log('打印页面的剩余高度', _this.height);
 					});
 				},
 				fail: res => {}
@@ -119,7 +114,6 @@
 		},
 		data() {
 			return {
-				userInfo: {},
 				height: "",
 				tabCurrentIndex: 0,
 				navList: [{
@@ -129,7 +123,8 @@
 						orderList: [],
 						page: 1, //当前页数
 						limit: 10, //每次信息条数
-						loaded: false
+						loaded: false,
+						sum:''
 					},
 					{
 						state: 2,
@@ -138,10 +133,10 @@
 						orderList: [],
 						page: 1, //当前页数
 						limit: 10, //每次信息条数
-						loaded: false
+						loaded: false,
+						sum:''
 					},
 				],
-				money: "",
 			};
 		},
 		onLoad(options) {
@@ -149,24 +144,12 @@
 				title: this.$t("tab.a1"),
 
 			});
-			uni.setNavigationBarColor({
-				frontColor: '#ffffff',
-				backgroundColor: '#000000',
-			})
 		},
 		onShow() {
-			this.getUserInfo();
 			this.loadData();
 		},
 		methods: {
 			getTime,
-			getUserInfo() {
-				getUserInfo({}).then(({
-					data
-				}) => {
-					this.userInfo = data;
-				});
-			},
 			toBack() {
 				uni.switchTab({
 					url: "/pages/pledge/pledge",
@@ -209,9 +192,13 @@
 						data
 					}) => {
 						// 保存我的总金额
-						that.money = data.sum;
-						
+						navItem.sum = data.sum;
+
 						let arr = data.list.map(e => {
+							e.add_time = that.getTime(e.add_time).split(" ")
+							e.send_time = that.getTime(e.send_time).split(" ")
+							e.income = Number(e.income);
+							e.num = Number(e.num);
 							return e;
 						});
 						navItem.orderList = navItem.orderList.concat(arr);
@@ -246,8 +233,7 @@
 
 <style lang="scss">
 	.all {
-		width: 750rpx;
-		background-color: $page-color-base;
+		line-height: 1;
 	}
 
 	.top {
@@ -256,7 +242,7 @@
 		background-color: #191a1f;
 		font-weight: bold;
 		color: #ffffff;
-		border-radius:20rpx ;
+		border-radius: 20rpx;
 
 		.zhiya {
 			font-size: $font-sm;
@@ -274,33 +260,21 @@
 		}
 	}
 
-
-
-
-
-	.body {
-		background-color: #191a1f;
-		margin-left: 30rpx;
-		margin-top: 20rpx;
-		width: 690rpx;
-		height: 137rpx;
+	.swiper-box {
+		margin: 0 30rpx;
 	}
 
 	.navbar {
-		margin-top: 20rpx;
-		display: flex;
+		margin: 20rpx 30rpx 0 30rpx;
+		border-top-right-radius: 20rpx;
+		border-top-left-radius: 20rpx;
 		height: 88rpx;
 		padding: 0 5px;
 		background: #191a1f;
-		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-		position: relative;
-		z-index: 10;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 
 		.nav-item {
 			flex: 1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
 			height: 100%;
 			font-size: 15px;
 			color: #999999;
@@ -317,84 +291,60 @@
 					transform: translateX(-50%);
 					width: 44px;
 					height: 0;
-					border-bottom: 2px solid #fe5b38;
+					border-bottom: 2px solid $color-yellow;
 				}
 			}
 		}
 	}
 
-	// 列表样式
-	.order-item {
-		background: #191a1f;
+	.tab-content {
+		.list-scroll-content {
+			background: #191a1f;
+			border-bottom-right-radius: 20rpx;
+			border-bottom-left-radius: 20rpx;
+			height: 100%;
+			overflow:hidden;
+		}
 	}
 
+	// 列表样式
 	.title-box {
-		margin-left: 38rpx;
-		display: flex;
-		justify-content: space-between;
-		width: 690rpx;
-	}
+		padding: 20rpx 0;
+		background: #191a1f;
+		margin: 0 30rpx;
+		justify-content: space-around;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 
-	.title {
-		flex: 1;
-		margin-top: 30rpx;
-		width: 43rpx;
-		height: 50rpx;
-		font-size: 22rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #ffffff;
-		line-height: 28rpx;
-		opacity: 0.53;
+		.title {
+			width: 20%;
+			font-size: 22rpx;
+			color: $font-color-light;
+			text-align: center;
+		}
 	}
 
-	.list {
-		margin-top: 40rpx;
-		margin-left: 38rpx;
-		display: flex;
-		justify-content: space-between;
-		width: 690rpx;
-	}
+	.all-list {
+		.list {
+			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+			justify-content: space-around;
 
-	.item {
-		height: 40rpx;
-		font-size: 22rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #ffffff;
-		line-height: 23rpx;
-	}
+			.list-item {
+				color: #ffffff;
+				width: 20%;
+				text-align: center;
+				flex-shrink: 0;
 
-	.l-item {
-		height: 15rpx;
-		font-size: 18rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #ffffff;
-	}
+				.item {
+					font-size: 22rpx;
+					font-weight: bold;
+				}
 
-	.heng {
-		margin-top: 30rpx;
-		width: 750rpx;
-		height: 2rpx;
-		background: #e9e9e9;
-	}
+				.l-item {
+					font-size: 18rpx;
+				}
+
+			}
+		}
 
-	.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>

uni.scss

@@ -31,7 +31,7 @@ $border-color-light: #ebeef5; //亮灰
 // uni自带边框颜色
 $uni-border-color: #ebeef5;
 /*颜色*/
-$color-yellow: #fd5b23;
+$color-yellow: #f0ad4e;
 $color-gray: #999999;
 $color-green: #5dbc7c;
 $color-red: #dd524d;