2024-7-10

pages/user/ship.vue

@@ -14,38 +14,109 @@
 				<text>123123123123.222s</text>
 			</view>
 		</view>
-		<view class="itemList" v-if="action==0">
-			<view class="item flex" v-for="(item,index) in taber[0].list">
-				<view class="itemLeft">
-					<view class="name flex-start">
-						<image class="nameTip margin-r-10" src="../../static/user/ship/star.png" mode="scaleToFill">
-						</image>
-						<text>
+		<view class="itemList">
+			<view class="itemBox" v-for="(item,index) in taber[action].list" >
+				<view class="item flex" @click="item.hide=false">
+					<view class="itemLeft">
+						<view class="name flex-start">
+							<image class="nameTip margin-r-10" src="../../static/user/ship/star.png" mode="scaleToFill">
+							</image>
+							<text>
+								体验飞船
+							</text>
+						</view>
+						<view class="tip">
+							30天预计可挖
+						</view>
+						<view class="payMoney flex-start">
+							<image class="payMoneyTip" src="../../static/index/index/icon01.png" mode="widthFix">
+							</image>
+							<text>22</text>
+						</view>
+					</view>
+					<view class="itemRight">
+						<view class="tiptext">
+							消耗：
+						</view>
+						<view class="moneyNum flex-center">
+							<image class="moneyTip margin-r-10" src="../../static/index/index/icon01.png"
+								mode="widthFix">
+							</image>
+							<text>220</text>
+						</view>
+						<view class="buttom" @click.stop="openAlert(item)">
+							派遣飞船
+						</view>
+					</view>
+				</view>
+				<view class="itemListTypeBox"  :class="{hide:item.hide}">
+					<view class="listItem flex">
+						<view class="titleName">
+							设备名称
+						</view>
+						<view class="typeNum">
 							体验飞船
-						</text>
+						</view>
 					</view>
-					<view class="tip">
-						30天预计可挖
+					<view class="listItem flex">
+						<view class="titleName">
+							状态
+						</view>
+						<view class="typeNum">
+							<text class="strongText">挖矿中</text>
+						</view>
 					</view>
-					<view class="payMoney flex-start">
-						<image class="payMoneyTip" src="../../static/index/index/icon01.png" mode="widthFix"></image>
-						<text>22</text>
+					<view class="listItem flex">
+						<view class="titleName">
+							合约期限
+						</view>
+						<view class="typeNum">
+							30天
+						</view>
 					</view>
-				</view>
-				<view class="itemRight">
-					<view class="tiptext">
-						消耗：
+					<view class="listItem flex">
+						<view class="titleName">
+							单价
+						</view>
+						<view class="typeNum">
+							<text class="strongText margin-r-10">20</text>
+							矿石
+						</view>
+					</view>
+					<view class="listItem flex">
+						<view class="titleName">
+							已挖出
+						</view>
+						<view class="typeNum">
+							<text class="strongText margin-r-10">10</text>
+							矿石
+						</view>
 					</view>
-					<view class="moneyNum flex-center">
-						<image class="moneyTip margin-r-10" src="../../static/index/index/icon01.png" mode="widthFix">
-						</image>
-						<text>220</text>
+					<view class="listItem flex">
+						<view class="titleName">
+							购买时间
+						</view>
+						<view class="typeNum">
+							2024.05.13 08:00:30
+						</view>
 					</view>
-					<view class="buttom" @click="openAlert(item)">
-						派遣飞船
+					<view class="listItem flex">
+						<view class="titleName">
+							到期期限
+						</view>
+						<view class="typeNum">
+							2024.05.13 08:00:30
+						</view>
+					</view>
+					<view class="flex-center upButtom" @click.stop="item.hide=true">
+						<text class="margin-r-10">
+						收起详情
+						</text>
+						<image class="nextDom" src="../../static/index/game/opennext.png" mode="scaleToFill"></image>
 					</view>
 				</view>
 			</view>
+
 			<uni-load-more :status="taber[action].loadingType"></uni-load-more>
 		</view>
 
@@ -59,7 +130,8 @@
 						需要消耗矿石
 					</view>
 					<view class="flex-start">
-						<image class="alertTip margin-r-10" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
+						<image class="alertTip margin-r-10" src="../../static/index/index/icon01.png"
+							mode="scaleToFill"></image>
 						<text>100</text>
 					</view>
 				</view>
@@ -88,7 +160,9 @@
 						page: 1,
 						limit: 10,
 						loadingType: 'more',
-						list: [{}],
+						list: [{
+							hide:false,
+						}],
 						loaded: false,
 					},
 
@@ -142,37 +216,37 @@
 				// 修改当前对象状态为加载中
 				navItem.loadingType = 'loading';
 
-				orderList({
-						type: state,
-						page: navItem.page,
-						limit: navItem.limit
-					})
-					.then(({
-						data
-					}) => {
-						let arr = data.map(e => {
-							let b = this.orderStateExp(e.status);
-							e.stateTip = b.stateTip;
-							e.stateTipColor = b.stateTipColor;
-							return e;
-						});
-						navItem.orderList = navItem.orderList.concat(arr);
-						// console.log(navItem.orderList);
-						navItem.page++;
-						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);
-					});
+				// orderList({
+				// 		type: state,
+				// 		page: navItem.page,
+				// 		limit: navItem.limit
+				// 	})
+				// 	.then(({
+				// 		data
+				// 	}) => {
+				// 		let arr = data.map(e => {
+				// 			let b = this.orderStateExp(e.status);
+				// 			e.stateTip = b.stateTip;
+				// 			e.stateTipColor = b.stateTipColor;
+				// 			return e;
+				// 		});
+				// 		navItem.orderList = navItem.orderList.concat(arr);
+				// 		// console.log(navItem.orderList);
+				// 		navItem.page++;
+				// 		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);
+				// 	});
 			},
 		}
 	};
@@ -232,79 +306,118 @@
 	}
 
 	.itemList {
-		.item {
+		.itemBox {
 			margin: 0 30rpx 30rpx 30rpx;
-			border-radius: 10rpx;
-			padding: 10rpx;
+			border-radius: 20rpx;
 			background-color: #FFF;
-			background-image: url("../../static/user/ship/listbg.png");
-			background-size: 100% 100%;
-			color: #FFFFFF;
-			font-weight: bold;
-
-			.itemLeft {
-				padding: 20rpx;
-
-				.name {
-					font-size: 28rpx;
+			border: 1px solid #C1C1C1;
+			.itemListTypeBox{
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #222222;
+				transition: height .3s ease-out;
+				height: 400rpx;
+				overflow: hidden;
+				&.hide{
+					height: 0rpx;
 				}
-
-				.nameTip {
-					width: 30rpx;
-					height: 30rpx;
+				.upButtom{
+					padding-top: 20rpx;
+					font-weight: 500;
+					font-size: 25rpx;
+					color: #999999;
+					// padding-bottom: 30rpx;
+					.nextDom{
+						
+						width: 10rpx;
+						height: 17rpx;
+						transform: rotate(90deg);
+					}
 				}
-
-				.tip {
-					font-size: 26rpx;
-					opacity: 0.75;
-					padding: 20rpx 0;
+				.listItem{
+					padding: 0rpx 30rpx;
+					margin-top: 20rpx;
+					.typeNum{
+						font-weight: bold;
+						.strongText{
+							color:#5E379E;
+						}
+					}
 				}
+				
+			}
+			.item {
+				padding: 10rpx;
+				background-image: url("../../static/user/ship/listbg.png");
+				background-size: 100% 100%;
+				color: #FFFFFF;
+				font-weight: bold;
 
-				.payMoney {
-					font-weight: 400;
-					font-size: 44rpx;
+				.itemLeft {
+					padding: 20rpx;
 
-					.payMoneyTip {
-						width: 43rpx;
-						height: 34rpx;
-						margin-right: 10rpx;
+					.name {
+						font-size: 28rpx;
 					}
-				}
-			}
 
-			.itemRight {
-				background-color: #FFF;
-				border-radius: 10rpx;
-				padding: 20rpx;
+					.nameTip {
+						width: 30rpx;
+						height: 30rpx;
+					}
 
-				.tiptext {
-					font-weight: 500;
-					font-size: 24rpx;
-					color: #999999;
-				}
+					.tip {
+						font-size: 26rpx;
+						opacity: 0.75;
+						padding: 20rpx 0;
+					}
 
-				.moneyNum {
-					padding: 30rpx 0;
-					font-weight: bold;
-					font-size: 33rpx;
-					color: #000000;
+					.payMoney {
+						font-weight: 400;
+						font-size: 44rpx;
 
-					.moneyTip {
-						width: 43rpx;
-						height: 34rpx;
+						.payMoneyTip {
+							width: 43rpx;
+							height: 34rpx;
+							margin-right: 10rpx;
+						}
 					}
 				}
 
-				.buttom {
-					padding: 16rpx 50rpx;
-					background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
+				.itemRight {
+					background-color: #FFF;
 					border-radius: 10rpx;
-					font-weight: bold;
-					font-size: 26rpx;
-					color: #FFFFFF;
+					padding: 20rpx;
+
+					.tiptext {
+						font-weight: 500;
+						font-size: 24rpx;
+						color: #999999;
+					}
+
+					.moneyNum {
+						padding: 30rpx 0;
+						font-weight: bold;
+						font-size: 33rpx;
+						color: #000000;
+
+						.moneyTip {
+							width: 43rpx;
+							height: 34rpx;
+						}
+					}
+
+					.buttom {
+						padding: 16rpx 50rpx;
+						background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
+						border-radius: 10rpx;
+						font-weight: bold;
+						font-size: 26rpx;
+						color: #FFFFFF;
+					}
 				}
 			}
 		}
+
 	}
 
 	.alert {
@@ -313,9 +426,7 @@
 		font-size: 30rpx;
 		font-weight: bold;
 
-		.alertTitle {
-			
-		}
+		.alertTitle {}
 
 		.alertContent {
 			margin-top: 50rpx;
@@ -328,19 +439,22 @@
 				height: 34rpx;
 			}
 		}
-		.alertTipText{
+
+		.alertTipText {
 			margin-top: 50rpx;
 			font-weight: 500;
 			font-size: 29rpx;
-			.nuim{
+
+			.nuim {
 				color: #5E51ED;
 			}
 		}
-		.buttomAlert{
+
+		.buttomAlert {
 			margin-top: 30rpx;
 			padding: 30rpx;
 			text-align: center;
-			background: linear-gradient(268deg, rgba(113,87,185,0.99), #8667C3, #7258B9);
+			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
 			border-radius: 10rpx;
 			font-size: 33rpx;
 			color: #FFFFFF;