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" @click="handleCardClick('character')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI创角</text>
						<text class="card-desc">生成独一无二的星球成员</text>
					</view>
					<image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
					<image src="/static/icon/star.png" class="star-icon star-2" mode="aspectFit"></image>
					<image src="/static/make/character.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

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

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

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

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

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

		<!-- 引导教程区域 -->
		<view class="tutorial">
			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5" :key="index">
				<text class="tutorial-title">引导教程{{ index + 1 }}</text>
				<view class="tutorial-content">
					<!-- 教程内容将在这里添加 -->
				</view>
			</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)
				})
			},
			handleCardClick(type) {
				console.log('Card clicked:', type);
			},
			handleTutorialClick(index) {
				console.log('Tutorial clicked:', index + 1);
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>