MoeNovaClient/pages/make/index.vue

<template>
	<view class="container">
		<!-- 顶部标题和积分区 -->
		<view class="header">
			<text class="title">星球造物</text>
			<view class="currency-area">
				<view class="coin-box">
					<image src="/static/icon/coin.png" class="coin-icon"></image>
					<text class="coin-count">999</text>
				</view>
				<view class="gold-box">
					<image src="/static/icon/gold.png" class="gold-icon"></image>
					<text class="gold-count">2</text>
				</view>
			</view>
		</view>

		<!-- 功能卡片区域 -->
		<view class="card-grid">
			<!-- AI创角卡片 -->
			<view class="card card-large blue">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI创角</text>
						<text class="card-desc">生成独一无二的星球成员</text>
					</view>
					<image src="/static/icon/ai-character.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- AI灵感写歌卡片 -->
			<view class="card card-medium pink">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI灵感写歌</text>
						<text class="card-desc">快速生成专属原创曲目</text>
					</view>
					<image src="/static/icon/planet.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 萌萌智绘魔方卡片 -->
			<view class="card card-medium purple">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">萌萌智绘魔方</text>
						<text class="card-desc">AI随机生成萌玩原型</text>
					</view>
					<image src="/static/icon/book.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- AI造物卡片 -->
			<view class="card card-small gray">
				<view class="card-content">
					<text class="card-title">AI造物</text>
					<text class="card-desc">一键生成想要的建筑</text>
				</view>
			</view>

			<!-- 潮能充能站卡片 -->
			<view class="card card-small gray">
				<view class="card-content">
					<text class="card-title">潮能充能站</text>
					<text class="card-desc">一键生成想要的建筑</text>
				</view>
			</view>

			<!-- 星轨预测卡片 -->
			<view class="card card-small gray">
				<view class="card-content">
					<text class="card-title">星轨预测</text>
					<text class="card-desc">AI大数据综合星座为你测算</text>
				</view>
			</view>
		</view>

		<!-- 引导教程区域 -->
		<view class="tutorial">
			<text class="tutorial-title">引导教程</text>
			<view class="tutorial-content">
				<!-- 教程内容将在这里添加 -->
			</view>
		</view>
		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
	</view>
</template>

<script>
	import sortble from "@/components/sortble/sortble.vue";
	import tabbarView from "@/components/tabbar/tabbar.vue";
	import pageNavbar from "@/components/page-navbar/page-navbar.vue";
	import wWaterfall from "@/components/w-waterfall/w-waterfall.vue";
	import tabbar from "@/mixins/tabbar";
	import swiperItemList from "@/components/swiper-item-list/swiper-item-list.vue";
	import card from "@/components/card/card.vue";
	export default {
		components: {
			sortble,
			tabbarView,
			pageNavbar,
			wWaterfall,
			swiperItemList
		},
		mixins: [tabbar],
		data() {
			return {
				refreshing: false,
				loadinging: false,
				windowHeight: uni.getWindowInfo().windowHeight,
				bannerList: [
					'https://e.zhichao.art/AI_images/1112 (1).png',
					'https://e.zhichao.art/AI_images/1112 (101).png',
					'https://e.zhichao.art/AI_images/1112 (102).png',
				],
				cardList: [{
					img: '/static/img/img-1.png',
					bgimg: '/static/image/bg-2.png'
				}, {
					img: '/static/img/img-3.png',
					bgimg: '/static/image/bg-3.png'
				}, {
					img: '/static/img/img-2.png',
					bgimg: '/static/image/bg-1.png'
				}, ],
				list: [], // 瀑布流全部数据
				dataList: [],
				tabList: ['收藏', '关注', '推荐', '音频', '视频', '图片'],
				tabCurrent: 0
			}
		},
		onLoad() {
			this.getData().then(res => {
				this.list = res.data;
			});
		},

		// 下拉刷新数据
		methods: {
			goMake() {
				uni.navigateTo({
					url: '/pages/make/make'
				})
			},
			goMake2() {
				uni.navigateTo({
					url: '/pages/make/make2'
				})
			},
			queryList() {
				this.getData().then(res => {
					this.list = res.data;
					this.$refs.paging.complete(this.list);
				});
			},
			async init() {
				const {
					data
				} = await this.getData();
				this.list.push.apply(this.list, data);
			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			// swiper change时触发
			swiperChange(e) {
				let current = e.target.current || e.detail.current;
				this.tabChange(current);
			},
			queryData(params) {
				const {
					pageNo,
					pageSize,
					type,
					complete
				} = params;
				this.getData(pageNo, pageSize).then(res => {
					const dataList = complete(res.data);
					this.list = pageNo !== 1 ? [...this.list, ...dataList] : dataList;
				});
			},
			// 模拟的后端数据
			getData(pageNo, pageSize) {
				return new Promise((resolve) => {
					const imgs = [{
							url: 'https://e.zhichao.art/AI_images/1112 (103).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (104).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (116).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (116).png',
						}
					];
					let list = [];
					const doFn = (i) => {
						const randomIndex = Math.floor(Math.random() * 10);
						return {
							allowEdit: i == 0,
							image: imgs[randomIndex].url,
							w: imgs[randomIndex].width,
							h: imgs[randomIndex].height,
							title: i % 2 == 0 ? `玛丽` : `凌音`,
							desc: i % 2 == 0 ?
								`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
						}
					};
					// 模拟异步
					setTimeout(() => {
						for (let i = 0; i < 20; i++) {
							list.push(doFn(i));
						}
						resolve({
							data: list
						});
					}, 200)
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
		padding: 30rpx 30rpx 0 0;
	}

	.header {
		padding-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.currency-area {
			display: flex;
			gap: 20rpx;

			.coin-box, .gold-box {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				background: #fff;
				border-radius: 30rpx;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.coin-box {
				background: #90d369;
				.coin-count {
					color: #478C2A;
				}
			}

			.gold-box {
				background: #FFD700;
				.gold-count {
					color: #B8860B;
				}
			}
		}
	}

	.card-grid {
		padding-left: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;

		.card {
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;
			overflow: hidden;

			&.blue { background: #3B82F6; }
			&.pink { background: #EC4899; }
			&.purple { background: #8B5CF6; }
			&.gray { background: #4B5563; }

			&.card-large {
				grid-column: span 2;
				height: 240rpx;
			}

			&.card-medium {
				height: 200rpx;
			}

			&.card-small {
				height: 160rpx;
			}

			.card-content {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.text-area {
					z-index: 1;
				}

				.card-title {
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.card-desc {
					font-size: 24rpx;
					color: rgba(255,255,255,0.8);
				}

				.card-image {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					width: 120rpx;
					height: 120rpx;
					z-index: 0;
				}
			}
		}
	}

	.tutorial {
		margin-left: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

		.tutorial-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.tutorial-content {
			min-height: 200rpx;
		}
	}
</style>