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" 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>
							体验飞船
						</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="openAlert(item)">
						派遣飞船
					</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: [{}],
						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.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);
					});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		min-height: calc(100vh);
		margin-top: -44px;
		padding-top: 44px;
		line-height: 1;
		background-image: url("../../static/user/ship/pagebg.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 {
		.item {
			margin: 0 30rpx 30rpx 30rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			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;
				}

				.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 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 {
		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>