MoeNovaClient/pages/make/index.vue

<template>
	<view class="container">

		<!-- 顶部导航栏 -->
		<view class="header-box">
			<text class="title">星球造物</text>
			<view class="currency-area" >
				<view class="coin-box" @click="isRecharge ? goPage('/pages/vip/M_purchase')  : ''">
					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
					<text>{{ myinfo.num_gmm | formatNumberToK}}</text> <view class="money-add" v-if="isRecharge">+</view>
				</view>
				<view class="gold-box"  @click="isRecharge ?goPage('/pages/my/job?type=recharge')  : ''">
					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
					<text>{{ myinfo.num_gmd | formatNumberToK}}</text> <view class="money-add" v-if="isRecharge">+</view>
				</view>
			 
					<image style="width: 64rpx ; height: 64rpx;" src="/static/icon/renwu.png" mode="aspectFit"  @click="goPage('/pages/my/job')"></image>
			 
			</view>
		</view>
 
		<!-- 功能卡片区域 -->
		<view class="card-grid">
			<!-- AI创角卡片 -->
			<view class="card card-large character" @click="handleCardClick('character')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI创角</text>
						<text class="card-desc">生成独一无二的星球成员</text>
					</view>
					<view class="btn-box">立即查看</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 music" @click="handleCardClick('music')">
				<view class="card-content">
					<view class="text-area" style="display: flex;flex-direction: column;;">
						<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 cube" @click="handleCardClick('cube')">
				<view class="card-content">
					<view class="text-area" style="display: flex;flex-direction: column;">
						<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>

		</view>
		<view class="guide-title"> 引导教程</view>
		<!-- 引导教程区域 -->
		<view class="tutorial">
			<view class="tutorial-block " @click="goWeb(item.url,item.subheading )" v-for="(item, index) in tutorial"
				:key="index">
				<text class="tutorial-btn-box">
					<view class="tutorial-btn">
						<image src="../../static/make/cz_icon_guanfangjiaocheng.png"></image>
						<text>{{ item.title }}</text>
					</view>
				</text>
				<text class="tutorial-title"> {{ item.subheading }}</text>
				<view class="tutorial-content">{{ item.content }}</view>
			</view>
		</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",subheading:"萌萌智绘魔方",content:"教你如何创作内容，激发创作灵感!" },
				{title:"官方教程",url:"https://docs.qingque.cn/d/home/eZQDGgIXzR08ssYlwoy2tjiNA?identityId=2HSXOrUAEOx",subheading:"AI灵感写歌",content:"使用AI超能力释放你的无限创造力!"},
				{title:"官方教程",url:"https://docs.qingque.cn/d/home/eZQC3yyQj9gK-KnVUZOT6vYmn?identityId=2HSXOrUAEOx",subheading:"星球造物,AI创角",content:"使用自然语言,创建独属于你的智能体"},
			]
		}
	}, 
	computed: {
		...mapState('switchingModule', ['isRecharge', 'isGuiding'])
	},
	onLoad() {
	
	 },
	onShow() {
		this.getMyInfo();
	},

	// 下拉刷新数据
	methods: {
		goWeb(url, title) {
			uni.navigateTo({
				url: `/pages/webview/index?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)	}`
			})},
		getMyInfo() {
			uni.request({
				url: this.$apiHost + '/My/getnum',
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				data: {
					uuid: getApp().globalData.uuid
				},
				success: (res) => {
					console.log("获取用户信息：", res.data);
					this.myinfo = res.data
				}
			})

		},
		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'
					})
				} else if (type == 'music') {
					uni.navigateTo({
						url: '/pages/makedetail/makeMusicDetail'
					})
				} else if (type == 'character') {
					uni.navigateTo({
						url: '/pages/my/myStar'
					})
				} else {
					uni.showToast({
						title: '待开放'
					})
				}
			})
		},
		handleTutorialClick(index) {
			console.log('Tutorial clicked:', index + 1);
		},
		goPage(page) {
			uni.navigateTo({
				url: page,
			});
		},
	}
}
</script>

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