xc/pages/user/blindBox.vue

<template>
	<view class="page">
		<view class="listBox">
			<view class="item"v-for="(item,index) in list">
				<view class="titleBox flex-start">
					<image class="tipImg margin-r-10" src="../../static/index/game/mhtip.png" mode="scaleToFill">
					</image>
					<text>盲盒一号</text>
				</view>
				<view class="itemListTypeBox">
					<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>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 0,
				page: 1,
				limit: 10,
				loadingType: 'more',
				list: [{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: false,
				},
				{
					hide: 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 navItem =this;
				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);
	}

	.item {
		margin: 0 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		border: 1px solid #C1C1C1;
		padding: 20rpx 0;
		color: #222222;

		.titleBox {
			font-weight: bold;
			font-size: 33rpx;
			padding: 0rpx 30rpx;

			.tipImg {
				width: 65rpx;
				height: 60rpx;
			}
		}

		.itemListTypeBox {
			font-weight: 500;
			font-size: 28rpx;
			padding-bottom: 10rpx;

			.listItem {
				padding: 0rpx 30rpx;
				margin-top: 20rpx;

				.typeNum {
					font-weight: bold;

					.strongText {
						color: #5E379E;
					}
				}
			}

		}
	}
</style>