2023-10-4

pages/index/index.vue

@@ -1,132 +1,168 @@
 <template>
 	<view class="container">
-		<view class="top">
-			<view class="icon1">
-				<image class="img" src="../../static/shouye/shouye1.png" mode=""></image>
+		<view class="top flex">
+			<view class="icon1 flex">
+				<image class="img margin-r-10" src="../../static/shouye/shouye1.png" mode="scaleToFill"></image>
 				<text class="tet">互娛共享</text>
 			</view>
-			<view class="icon2">
-				<view style="margin-left: 120rpx;"> <view class="text">oxs***23b</view> </view>
-			</view>
-			<view class="icon1">
-				<image style="width: 34rpx; height: 34rpx;" src="../../static/shouye/shouye2.png" mode=""></image>
-			</view>
-			<view class="icon1">
-				<view class="text1"  style="margin-top: 6rpx;">
+			<view class="flex">
+				<view class="icon2 text margin-r-10">
+					oxs***23b
+				</view>
+				<view class="icon1  margin-r-10">
+					<image class="langTip" src="../../static/shouye/shouye2.png" mode="scaleToFill"></image>
+				</view>
+				<view class="text1  margin-r-10">
 					繁體中文
 				</view>
-			</view>
-			<view class="icon1">
-				<image src="../../static/shouye/shouye3.png" style="width: 23rpx; height: 15rpx;" mode=""></image>
+				<view class="icon1">
+					<image class="langTipDom" src="../../static/shouye/shouye3.png" mode="scaleToFill"></image>
+				</view>
 			</view>
 		</view>
-		
+
 		<!-- 轮播图 -->
-		<view class="uni-margin-wrap">
-			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+		<view class="uni-margin-wrap margin-b-10">
+			<swiper indicator-color='rgba(255,255,255,0.69)' indicator-active-color='#FFF' class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
 				:duration="duration">
-				<swiper-item>
-					<image class="swiper-item" src="../../static/shouye/shouye4.png" mode=""></image>
+				<swiper-item class="swiper-box">
+					<image class="swiper-item" src="../../static/shouye/shouye4.png" mode="scaleToFill"></image>
 				</swiper-item>
-				<swiper-item>
-					<image src="../../static/shouye/shouye4.png" mode=""></image>
+				<swiper-item  class="swiper-box">
+					<image class="swiper-item" src="../../static/shouye/shouye4.png" mode="scaleToFill"></image>
 				</swiper-item>
 			</swiper>
 		</view>
 		<!-- 底部 -->
-		<view class="tra" style="color: #999999;">
-			<view class="tra-item1">
+		<view class="tra flex margin-b-10">
+			<view class="tra-item">
 				名稱
 			</view>
-			<view class="tra-item2">
+			<view class="tra-item">
 				最新價格
 			</view>
-			<view class="tra-item3">
+			<view class="tra-item">
 				24h漲跌幅
 			</view>
 		</view>
 		<!-- 每一项 -->
-		<view class="list">
-			<view class="list-item">
-				<image class="img" src="../../static/shouye/shouye5.png" mode="">  </image>
+		<view class="list flex" v-for="(item,ind) in navList.orderList">
+			<view class="list-item flex-start">
+				<image class="img margin-r-10" :src="item.img" mode="scaleToFill"> </image>
 				<text class="tli">TRX</text>
 			</view>
-			<view class="list-item1">
-				29385.97
-			</view>
-			<view class="list-item2">
-				<button> <text style="color: #ffffff;">+0.25%</text> </button>
-			</view>
-		</view>
-		<view class="divider"></view>
-		<!-- 每一项 -->
-		<view class="list">
 			<view class="list-item">
-				<image class="img" src="../../static/shouye/shouye6.png" mode=""></image>
-				<text class="tli">BTC</text>
-			</view>
-			<view class="list-item1">
 				29385.97
 			</view>
-			<view class="list-item2">
-				<button> <text style="color: #ffffff;">+0.25%</text> </button>
+			<view class="list-item ">
+				<text class="button"  :class="{up:item.fl==1,dom:item.fl==0}">
+					{{item.fl==1?'+':'-'}} {{item.bfb}}%
+				</text>
 			</view>
 		</view>
-		<view class="divider"></view>
-		<!-- 每一项 -->
-		<view class="list">
-			<view class="list-item">
-				<image class="img" src="../../static/shouye/shouye7.png" mode=""> </image>
-				<text class="tli">ETH</text>
-			</view>
-			<view class="list-item1">
-				29385.97
-			</view>
-			<view class="list-item2">
-				<button> <text style="color: #ffffff;">+0.25%</text> </button>
-			</view>
-		</view>
-		<view class="divider"></view>
-		<!-- 每一项 -->
-		<view class="list">
-			<view class="list-item">
-				<image class="img" src="../../static/shouye/shouye8.png" mode=""> </image>
-				<text class="tli">BNB</text>
-			</view>
-			<view class="list-item1">
-				29385.97
-			</view>
-			<view class="list-item2">
-				<button> <text style="color: #ffffff;">+0.25%</text> </button>
-			</view>
-		</view>
-		<view class="divider"></view>
-		<!-- 每一项 -->
-		<view class="list">
-			<view class="list-item">
-				<image class="img" src="../../static/shouye/shouye9.png" mode=""></image>
-				<text class="tli">LTC</text>
-			</view>
-			<view class="list-item1">
-				29385.97
-			</view>
-			<view class="list-item2">
-				<button style="background-color: #77DA90 ;"> <text style="color: #ffffff;">+0.25%</text> </button>
-			</view>
-		</view>
-		<view class="divider"></view>
 	</view>
 </template>
 <script>
-	export default{
+	export default {
 		data() {
 			return {
 				indicatorDots: true,
 				autoplay: true,
 				interval: 5000,
-				duration: 500
+				duration: 500,
+				navList: {
+					loadingType: 'more',
+					orderList: [{
+						type:'TRX',
+						img:'../../static/shouye/shouye5.png',
+						money:2222,
+						fl:1,
+						bfb:0.25,
+					},{
+						type:'TRX',
+						img:'../../static/shouye/shouye6.png',
+						money:2222,
+						fl:0,
+						bfb:9.25,
+					},{
+						type:'TRX',
+						img:'../../static/shouye/shouye7.png',
+						money:2222,
+						fl:1,
+						bfb:0.25,
+					},{
+						type:'TRX',
+						img:'../../static/shouye/shouye8.png',
+						money:2222,
+						fl:1,
+						bfb:0.25,
+					},{
+						type:'TRX',
+						img:'../../static/shouye/shouye9.png',
+						money:2222,
+						fl:0,
+						bfb:0.25,
+					}],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}
 			}
-		}
+		},
+		methods: {
+			loadData(source) {
+				//这里是将订单挂载到tab列表下
+				let navItem = this.navList;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				getCertList({
+						page: navItem.page,
+						limit: navItem.limit
+					})
+					.then(({
+						data
+					}) => {
+						let list = data.list.data;
+						navItem.orderList = navItem.orderList.concat(list);
+						navItem.page++;
+						if (navItem.limit == list.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+							if(navItem.orderList.length==0){
+								uni.showModal({
+									title: '提示',
+									content: '您未申请证书是否立即申请',
+									success: res => {
+										if(res.confirm){
+											uni.navigateTo({
+												url:'/pages/certificate/apply'
+											})
+										}
+									},
+									fail: () => {},
+									complete: () => {}
+								});
+							}
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+		},
 	}
 </script>
 
@@ -136,137 +172,119 @@
 		height: 1600rpx;
 		background-color: #000000;
 	}
+
 	.top {
-		width: 720rpx;
-		height: 100rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	
-	.icon1 {
-		display: flex;
-		}
-		
-	.img {
-		width: 47rpx;
-		height: 47rpx;
-		margin-top: 10rpx;
-		margin-left: 30rpx;
-	}
-	.tet {
-		margin-top: 22rpx;
-		height: 26rpx;
-		font-size: 28rpx;
 		font-family: PingFang SC;
 		font-weight: 500;
-		color: #C3A76C;
-		line-height: 21rpx;
-	}
-	
-	.icon2  {
-		width: 170rpx;
-		height: 43rpx;
-		background: #292C3D;
-		border: 2px solid #414243;
-		border-radius: 21rpx;
-	}
-	 .text {
-			width: 128rpx;
-			height: 18rpx;
+		padding: 40rpx 30rpx 24rpx 30rpx;
+		line-height: 1;
+
+		.icon1 {
+			line-height: 0;
+
+			.img {
+				width: 47rpx;
+				height: 47rpx;
+			}
+
+			.tet {
+				font-size: 28rpx;
+				color: #C3A76C;
+			}
+		}
+
+		.icon2 {
+			background: #292C3D;
+			border: 2px solid #414243;
+			border-radius: 21rpx;
+		}
+
+		.langTip {
+			width: 34rpx;
+			height: 34rpx;
+		}
+
+		.langTipDom {
+			width: 23rpx;
+			height: 15rpx;
+		}
+
+		.text {
 			font-size: 24rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
 			color: #FFFFFF;
-			line-height: 21rpx;
-			margin-top: 8rpx;
-			margin-left: -94rpx;
-	}
-	.text1 {
-		// width: 103rpx;
-		height: 25rpx;
-		font-size: 26rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #FFFFFF;
-		line-height: 21rpx;
+			padding: 10rpx 20rpx;
+		}
+
+		.text1 {
+			font-size: 24rpx;
+			color: #FFFFFF;
+		}
 	}
-	
-	 .uni-margin-wrap {
-		 width: 730rpx;
-		 height: 350rpx;
-	 }
-	
-	
-	.swiper-item {
-		width: 723rpx;
+
+	.uni-margin-wrap {
 		height: 394rpx;
-		margin-top: 21rpx;
-		margin-left: 21rpx;
+		.swiper {
+			height: 100%;
+			.swiper-box {
+				height: 100%;
+				text-align: center;
+				.swiper-item {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
 	}
-	
 	.tra {
-		width: 750rpx;
 		height: 93rpx;
 		background: #2B2A26;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.tra-item1 {
-		// text-align: center;
-		margin-left: 60rpx;
-	}
-	.tra-item3 {
-		margin-right: 15rpx;
-	}
-	
-	.divider {
-	  width: 750rpx;
-	  height: 1rpx;
-	  background-color: #2B2A26;
+		padding: 0 30rpx;
+		font-size: 24rpx;
+		color: #999999;
+		.tra-item{
+			width: 33.3%;
+		}
+		.tra-item:nth-child(2){
+			text-align: center;
+		}
+		.tra-item:nth-child(3){
+			text-align: right;
+		}
 	}
-	
 	.list {
-		width: 750rpx;
-		height: 93rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	
-	.list-item .img  {
-		width: 60rpx;
-		height: 60rpx;
-	}
-	.tli {
-		// margin-top: 12rpx;
-		// padding-top: 12rpx;
-		// margin-left: 8epx;
-		width: 59rpx;
-		height: 22rpx;
-		font-size: 30rpx;
-		font-family: PingFang SC;
 		font-weight: bold;
-		color: #FFFFFF;
-		line-height: 55rpx;
-	}
-	
-	.list-item1 {
-		// margin-top: 5rpx;
-		width: 131rpx;
-		height: 23rpx;
 		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
 		color: #FFFFFF;
-		line-height: 55rpx;
-	}
-	
-	.list-item2 button {
-		width: 160rpx;
-		height: 60rpx;
-		background: #FB5E57;
-		border-radius: 10rpx;
+		padding: 20rpx 30rpx 20rpx 30rpx;
+		line-height: 1;
+		border-bottom: 1px solid #2B2A26;
+		.list-item:nth-child(2){
+			text-align: center;
+		}
+		.list-item:nth-child(3){
+			text-align: right;
+		}
+		.list-item {
+			width: 33.3%;
+			.img {
+				width: 60rpx;
+				height: 60rpx;
+			}
+
+			.button {
+				padding: 10rpx 20rpx; 
+				border-radius: 10rpx;
+				min-width: 150rpx;
+				text-align: center;
+				display: inline-block;
+				&.up{
+					background: #FB5E57;
+				}
+				&.dom{
+					background: #77DA90;
+				}
+			}
+		}
 	}
+
 </style>