2024-7-8

pages/user/ship.vue

@@ -2,45 +2,78 @@
 	<view class="page">
 		<view class="tabBanner flex">
 			<view class="tabItemBox flex">
-				<view class="tahItem position-relative" v-for="(item,index) in taber">
+				<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">
+			<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="item flex">
+		<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">
-
+					<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">
-						<image class="payMoneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
+					<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">
-						<image class="moneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
-						<text>22</text>
+					<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">
+					<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>
 
@@ -48,24 +81,31 @@
 	export default {
 		data() {
 			return {
-				action:0,
+				action: 0,
 				taber: [{
 						title: '星级飞船',
+						state: 0,
 						page: 1,
 						limit: 10,
-						loding: 'more',
-						list: [],
+						loadingType: 'more',
+						list: [{}],
+						loaded: false,
 					},
 
 					{
 						title: '我的飞船',
+						state: 1,
 						page: 1,
 						limit: 10,
-						loding: 'more',
+						loadingType: 'more',
 						list: [],
+						loaded: false,
 					}
 
-				]
+				],
+				show: false,
+				// 当前选中的对象
+				actionItem: {}
 			};
 		},
 		onLoad(options) {
@@ -73,37 +113,237 @@
 		},
 		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 - var(--window-bottom));
+		min-height: calc(100vh);
+		margin-top: -44px;
+		padding-top: 44px;
 		line-height: 1;
-		padding: 30rpx;
+		background-image: url("../../static/user/ship/pagebg.png");
+		background-repeat: no-repeat;
+		background-size: 100% auto;
+		background-color: rgb(255, 255, 255);
 	}
-	.tabBanner{
+
+	.tabBanner {
 		position: sticky;
-		.tabItemBox{
-			.tahItem{
-				.actionIcon{
-					background: linear-gradient(268deg, rgba(244,177,228,0.99), #9D47C6, #5D289A);
+		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{
-			.rightTipImg{
+
+		.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>

static/css/cmy.css

@@ -566,5 +566,5 @@
 	border: 2px solid transparent;
 	background-clip: padding-box, border-box;
 	background-origin: padding-box, border-box;
-	background-image: linear-gradient(to right, rgb(12, 8, 21), rgb(12, 8, 21)), linear-gradient(90deg, #8F41E9, #578AEF);
+	background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255,255, 255)), linear-gradient(-66deg, #F4B1E4, #9D47C6, #5D289A);
 }