MoeNovaClient/pages/make/index.vue

<template>
	<view class="container">

		<!-- 顶部导航栏 -->
		<view class="header-box">
			<text class="title">星球造物</text>
			<view class="currency-area">
			</view>
		</view>
		<!-- 功能卡片区域 -->
		<view class="major-function">
			<view class="major-function-left" @click="handleCardClick('character')">
				<image src="../../static/make/chuangjiao.png" class="scale-tap card-image" mode="widthFix"></image>
			</view>
			<view class="major-function-right">
				<image src="../../static/make/songwriting.png" @click="handleCardClick('music')"
					class="scale-tap card-image" mode="widthFix"></image>
				<image src="../../static/make/shengTu.png" @click="handleCardClick('cube')" class="scale-tap card-image"
					mode="widthFix"></image>
			</view>
		</view>





		<view class="guide-title"> 引导教程</view>

		<view class="guide-content">
			<block v-for="(item, index) in guideList" :key="index" >
				<image :src="item.url" class="scale-tap card-image"  @click="goWeb(item.webUrl, item.subheading)" mode="widthFix"></image>
			</block>
		</view>

		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
		<!-- 新手引导组件 -->
		<novice-guidance :step="step"></novice-guidance>
	</view>
</template>

<script>
import tabbarView from "@/components/tabbar/tabbar.vue";
import tabbar from "@/mixins/tabbar";
import { mapState } from 'vuex'
export default {
	components: {
		tabbarView,
	},
	mixins: [tabbar],
	data() {
		return {
			myinfo: {},
			windowHeight: uni.getWindowInfo().windowHeight,
			tabCurrent: 0,
			step: {
				name: "make",
				guideList: [
					{
						el: ".currency-area",
						tips: "积分可在这里查看，每日签到可获得积分！",
						next: "知道了",
					},
					{
						el: ".character",
						tips: "创建星灵,入驻星球",
						next: "知道了",
						tipesStyle: "left: 40px;"
					},
					{
						el: ".music",
						tips: "输入灵感,生成歌曲",
						next: "知道了",
					},
					{
						el: ".cube",
						tips: "输入关键词,生成萌玩",
						next: "完成",
					}]
			},
			tutorial: [
				{
					title: "官方教程"
					, url: "https://docs.qingque.cn/d/home/eZQBj5luSHVkaqpJmL5PTuFfZ?identityId=2HSXOrUAEOx"
				},
				{
					title: "官方教程"
					, url: "https://docs.qingque.cn/d/home/eZQDGgIXzR08ssYlwoy2tjiNA?identityId=2HSXOrUAEOx"
				},
				{
					title: "官方教程"
					, url: "https://docs.qingque.cn/d/home/eZQC3yyQj9gK-KnVUZOT6vYmn?identityId=2HSXOrUAEOx"
				},
			],
			guideList: [
				{ url: '../../static/make/guide-item1.png', webUrl: "https://docs.qingque.cn/d/home/eZQBj5luSHVkaqpJmL5PTuFfZ?identityId=2HSXOrUAEOx", content: "教你如何创作内容，激发创作灵感!", subheading: "萌萌智绘魔方" },
				{ url: '../../static/make/guide-item2.png', webUrl: "https://docs.qingque.cn/d/home/eZQDGgIXzR08ssYlwoy2tjiNA?identityId=2HSXOrUAEOx", content: "使用AI超能力释放你的无限创造力!", subheading: "AI灵感写歌" },
				{ url: '../../static/make/guide-item3.png', webUrl: "https://docs.qingque.cn/d/home/eZQC3yyQj9gK-KnVUZOT6vYmn?identityId=2HSXOrUAEOx", content: "使用自然语言,创建独属于你的智能体", subheading: "星球造物,AI创角" },
				{ url: '../../static/make/guide-item4.png', webUrl: "https://docs.qingque.cn/d/home/eZQCk1MWQJHxZvrIXODj-3ALk?identityId=2HSXOrUAEOx", content: "使用自然语言,创建独属于你的智能体", subheading: "星球造物,AI创角" },
			]
		}
	},
	computed: {
		...mapState('switchingModule', ['isRecharge', 'isGuiding'])
	},
	onLoad() {

	},
	onShow() {
		this.getMyInfo();
	},

	// 下拉刷新数据
	methods: {
		goWeb(url, title) {
			console.log(1);
			
			uni.navigateTo({
				url: `/pages/webview/index?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
			})
		},
		getMyInfo() {

		},
		tabChange(index) {
			this.tabCurrent = index;
		},
		handleCardClick(type) {
			console.log('Card clicked:', type);
			uni.$emit('check_login', () => {
				if (type == 'cube') {
					uni.navigateTo({
						// url: '/pages/makedetail/makeImgDetail'
						url: '/pages/makedetail/intelligentLifeChart'
						// url: '/pages/my/dome/dome'
					})
				} else if (type == 'music') {
					uni.navigateTo({
						//url: '/pages/makedetail/makeMusicDetail'
						url: '/pages/makedetail/intelligentMusicProduction'
					})
				} else if (type == 'character') {
					uni.navigateTo({
						url: '/pages/my/myStar'
					})
				} else {
					uni.showToast({
						title: '待开放'
					})
				}
			})
		},
		handleTutorialClick(index) {
			console.log('Tutorial clicked:', index + 1);
		},
		goPage(page) {
			console.log('page: ', page);
			if (page.includes('/pages/my/job') || page.includes('vip')) {
				uni.$emit("check_login", () => {
					uni.navigateTo({
						url: page,
					});
				})
			} else {
				uni.navigateTo({
					url: page,
				});
			}


		},
	}
}
</script>

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