xc/pages/user/ship.vue

<template>
	<view class="page">
		<view class="tabBanner flex">
			<view class="tabItemBox flex">
				<view class="tahItem position-relative" v-for="(item,index) in taber" :class='{action:action==index}'
					@click="tabList(index)">
					{{item.title}}
					<view class="actionIcon" v-if="action==index"></view>
				</view>
			</view>

			<view class="rightMoney flex border-linear-gradient">
				<image class="rightTipImg" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
				<text>123123123123.222s</text>
			</view>
		</view>
		<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/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">
							体验飞船
						</view>
					</view>
					<view class="listItem flex">
						<view class="titleName">
							状态
						</view>
						<view class="typeNum">
							<text class="strongText">挖矿中</text>
						</view>
					</view>
					<view class="listItem flex">
						<view class="titleName">
							合约期限
						</view>
						<view class="typeNum">
							30天
						</view>
					</view>
					<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="listItem flex">
						<view class="titleName">
							购买时间
						</view>
						<view class="typeNum">
							2024.05.13 08:00:30
						</view>
					</view>
					<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/user/back.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>

			<uni-load-more :status="taber[action].loadingType"></uni-load-more>
		</view>

		<u-popup v-model="show" mode='bottom' closeable @close='show=false'>
			<view class="alert">
				<view class="alertTitle">
					派遣体验飞船
				</view>
				<view class="flex alertContent">
					<view class="alertMoney">
						需要消耗矿石
					</view>
					<view class="flex-start">
						<image class="alertTip margin-r-10" src="../../static/index/index/icon01.png"
							mode="scaleToFill"></image>
						<text>100</text>
					</view>
				</view>
				<view class="alertTipText">
					<text>我可用矿石</text>
					<text class="nuim">21</text>
					<text>个</text>
				</view>
				<view class="buttomAlert">
					确认开启
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 0,
				taber: [{
						title: '星级飞船',
						state: 0,
						page: 1,
						limit: 10,
						loadingType: 'more',
						list: [{
							hide:false,
						}],
						loaded: false,
					},

					{
						title: '我的飞船',
						state: 1,
						page: 1,
						limit: 10,
						loadingType: 'more',
						list: [],
						loaded: false,
					}

				],
				show: false,
				// 当前选中的对象
				actionItem: {}
			};
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {
			// 打开弹窗
			openAlert(item) {
				this.show = true;
				this.actionItem = item;
			},
			tabList(index) {
				this.action = index;
				this.loadData('tabChange')
			},
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.action;
				let navItem = this.taber[index];
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				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.list = navItem.list.concat(arr);
				// 		// console.log(navItem.list);
				// 		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);
				// 	});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		min-height: calc(100vh);
		margin-top: -44px;
		padding-top: 44px;
		line-height: 1;
		background-image: url("../../static/user/user-bg.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: rgb(255, 255, 255);
	}

	.tabBanner {
		position: sticky;
		padding: 30rpx 0 30rpx 30rpx;
		align-items: flex-start;

		.tabItemBox {
			align-items: flex-start;

			.tahItem {
				margin-right: 30rpx;
				font-weight: bold;
				font-size: 28rpx;

				&.action {
					font-size: 30rpx;
				}

				.actionIcon {
					background: linear-gradient(268deg, rgba(244, 177, 228, 0.99), #9D47C6, #5D289A);
					border-radius: 3px;
					width: 46rpx;
					height: 6rpx;
					margin: 0 auto;
					margin-top: 10rpx;
				}
			}
		}

		.rightMoney {
			margin-top: -6rpx;
			border-right: none;
			padding: 6rpx 20rpx;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;

			.rightTipImg {
				width: 36rpx;
				height: 29rpx;
			}
		}
	}

	.itemList {
		.itemBox {
			margin: 0 30rpx 30rpx 30rpx;
			border-radius: 20rpx;
			background-color: #FFF;
			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;
				}
				.upButtom{
					padding-top: 20rpx;
					font-weight: 500;
					font-size: 25rpx;
					color: #999999;
					// padding-bottom: 30rpx;
					.nextDom{
						
						width: 10rpx;
						height: 17rpx;
						transform: rotate(90deg);
					}
				}
				.listItem{
					padding: 0rpx 30rpx;
					margin-top: 20rpx;
					.typeNum{
						font-weight: bold;
						.strongText{
							color:#5E379E;
						}
					}
				}
				
			}
			.item {
				padding: 10rpx;
				background-image: url("../../static/user/listbg.png");
				background-size: 100% 100%;
				color: #FFFFFF;
				font-weight: bold;

				.itemLeft {
					padding: 20rpx;

					.name {
						font-size: 28rpx;
					}

					.nameTip {
						width: 30rpx;
						height: 30rpx;
					}

					.tip {
						font-size: 26rpx;
						opacity: 0.75;
						padding: 20rpx 0;
					}

					.payMoney {
						font-weight: 400;
						font-size: 44rpx;

						.payMoneyTip {
							width: 43rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}
					}
				}

				.itemRight {
					// background-color: #FFF;
					border-radius: 10rpx;
					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 30rpx;
						background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
						border-radius: 10rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
					}
				}
			}
		}

	}

	.alert {
		padding: 30rpx;
		color: #222222;
		font-size: 30rpx;
		font-weight: bold;

		.alertTitle {}

		.alertContent {
			margin-top: 50rpx;
			padding: 30rpx;
			background: rgba(0, 0, 0, .07);
			border-radius: 10rpx;

			.alertTip {
				width: 43rpx;
				height: 34rpx;
			}
		}

		.alertTipText {
			margin-top: 50rpx;
			font-weight: 500;
			font-size: 29rpx;

			.nuim {
				color: #5E51ED;
			}
		}

		.buttomAlert {
			margin-top: 30rpx;
			padding: 30rpx;
			text-align: center;
			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
			border-radius: 10rpx;
			font-size: 33rpx;
			color: #FFFFFF;
		}
	}
</style>