MoeNovaClient/pages/make/index copy.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>
					<image class="money-add" v-if="isRecharge" src="/static/icon/coin_add.png" mode="aspectFit"></image>
				</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>
					<image class="money-add" v-if="isRecharge" src="/static/icon/coin_add.png" mode="aspectFit"></image>
				</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" style="align-items: flex-start;">
						<view>
							<text class="card-title">AI创角</text>
							<text class="card-desc">生成独一无二的星球成员</text>
						</view>
					</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"   >
						<view>
							<text class="card-title">AI灵感写歌</text>
							<text class="card-desc">快速生成专属原创曲目</text>
						</view>

					</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"  >
						<view>
							<text class="card-title">萌萌智绘魔方</text>
							<text class="card-desc">AI随机生成萌玩原型</text>
						</view>
					</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'
						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>