MoeNovaClient/pages/my/my.vue

<template>
	<view class="page">
		<view class="topBody">
			<!-- <view class="header" :class="{ 'header-isvip': !isRecharge }"> -->
			<view class="header">
				<view class="reserveASeat"></view>
				<view class="card-box">
					<view class="card-top">
						<view class="top-box">
							<view class="hello-box"> Hello! </view>
							<view class="settingBtn-box">
								<image @click="clickShare()" src="@/static/me/wd_icon_fenxian.png" mode=""></image>
								<image src="@/static/me/wd_icon_shezhi.png" mode="" @click="navigateToSettings"></image>
							</view>
						</view>
						<view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
							<view class="userinfo-left">
								<CircleAvatar class="avator" :src="myinfo.avator"></CircleAvatar>
							</view>
							<view class="userinfo-right">
								<view class="nickname">
									<text class="one-omit">{{ myinfo.nickname }}</text>
									<image src="../../static/icon/wd_icon_nan.png" mode="widthFix"
										v-if="myinfo.sex_id == 1"></image>
									<image src="../../static/icon/wd_icon_nv.png" mode="widthFix"
										v-else-if="myinfo.sex_id == 2"></image>
									<view class="level">Lv{{ myinfo.my_level }}</view>
								</view>
								<view class="label">
									<view v-for="(item, index) in aihao_tags" :key="index + item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view class="intro_row">
							<block v-if="myinfo.content == ''">
								<text class="intro_text two-omit">添加简介</text>
								<image src="@/static/icon/wd_icon_edit.png" mode="widthFix" class="add_icon"></image>
							</block>
							<uv-text v-else :text="myinfo.content" class="intro_text two-omit">

							</uv-text>
						</view>
						<view class="bom">
							<view class="follow_info" @click="navigateToFollow">
								<view class="follow-box">
									<view class="num">{{ myinfo.num_attention }}</view>
									<view class="label">关注</view>
								</view>
								<view class="separator"></view>
								<view class="follow-box">
									<view class="num">{{ myinfo.num_fans }}</view>
									<view class="label">粉丝</view>
								</view>
								<view class="separator"></view>
								<view class="follow-box">
									<view class="num">{{ myinfo.num_like }}</view>
									<view class="label">获赞</view>
								</view>
							</view>
							<view class="points-box">
								<view class="points" @click="isRecharge ? goPage('/pages/vip/M_purchase') : ''">
									<image src="@/static/icon/wd_icon_coin.png" mode=""></image>
									{{ myinfo.num_gmm | formatNumberToK }}
									<view class="money-add" v-if="isRecharge">+</view>
								</view>
								<view class="points" @click="isRecharge ? goPage('/pages/my/job?type=recharge') : ''">
									<image src="@/static/icon/coin_cd.png" mode=""></image>
									{{ myinfo.num_gmd | formatNumberToK }}
									<view class="money-add" v-if="isRecharge">+</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="card-bom" v-if="isRecharge" @click="goPage('/pages/vip/index')"> -->
					<view class="card-bom" @click="isRecharge ? goPage('/pages/vip/index') : ''">
						<view class="content-box">
							<image v-if="false" src="@/static/me/icon-vip2.png" mode=""></image>
							<image v-else-if="0" src="@/static/me/icon-vip1.png" mode=""></image>
							<image v-else src="@/static/me/icon-vip0.png" mode=""></image>
							<text v-if="myinfo.is_vip == 0">开启专属会员权益</text>
							<text v-else style="font-size: 24rpx;">会员权益生效中   <text style="color: rgba(172 ,249 ,52, .5);"> ({{myinfo.vip_date}})  </text>  </text>
						</view>
						<!-- <view class=""> -->
						
						<image v-if="isRecharge" src="@/static/me/wd_icon_jiantou.png" mode=""></image>
						<!-- </view> -->
					</view>
				</view>
			</view>

			<view class="myinfo">
				<!-- <view class="line"></view> -->
				<view class="tablist">
					<view class="item" :class="{ active: firstLevelNavActive === 0 }"
						@click="firstLevelNavActiveSwitch(0)">我的作品
						<view class="indicator-triangle"> </view>
					</view>
					<view class="item" :class="{ active: firstLevelNavActive === 1 }"
						@click="firstLevelNavActiveSwitch(1)">我的帖子
						<view class="indicator-triangle"> </view>
					</view>
				</view>
				<!-- 作品列表 -->
				<template v-if="firstLevelNavActive == 0">
					<view class="line"></view>
					<view class="subtitle">
						<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
							作品
						</view>
						<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
							生成中
						</view>
					</view>
					<view class="numlist1" v-if="activeTab === 0" style="margin-top: 30rpx">
						<WorkItem v-for="(item, index) in worksList" :secrecy="true" :subtitle="true" :key="index"
							:item="item" @click="goWork(item)" />
						<!-- 暂无内容提示 -->
						<view v-if="worksList.length === 0" class="empty-state">
							<image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image">
							</image>
							<text class="empty-text">暂无作品</text>
							<text class="empty-subtext">快来创作你的第一个作品吧~</text>
						</view>
					</view>
					<view class="numlist2" v-if="activeTab === 1" style="margin-top: 30rpx">
						<view class="item" v-for="(item, index) in worksList" :key="index" style="margin-bottom: 28rpx;">
							<view class="num" @click="goWork(item)" :class="{'clickable': item.status !== 3 && item.status !== 4}">
								<WorkItem :item="item" style="margin-bottom: 12rpx" />

								<image class="incomplete-bg" v-if="item.status != 9"
									src="@/static/me/wd_bg_zhizuozhong.png"></image>
								<view class="maskLayer"></view>
								<!-- 当activeTab为1时显示队列状态 -->
								<view class="queue-status">
									<!-- 排队中 -->
									<view v-if="item.status === 1" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image>
									</view>
									<!-- 生成失败 -->
									<view v-if="item.status === 3 || item.status === 4" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_zhizuoshibai.png"></image>
									</view>
									<!-- 制作中 -->
									<view v-else-if="item.status < 9" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_zhizuozhong.png"></image>
									</view>
									<!-- 创作完成 -->
									<view v-else-if="item.status === 9" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_chuangzuowancheng.png">
										</image>
									</view>
								</view>
								<view class="name" style="
                    font-family: 'PingFang SC-Medium';
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #1a4d2e;
                  ">
									{{ item.title || item.description || "作品" + index }}
								</view>

								<!-- 显示任务类型标签 -->
								<view class="task-type-tag">
									<image style="width: 120rpx; height: 36rpx" v-if="item.task_type === 1"
										src="@/static/me/wd_icon_lingganchuangzuo.png"></image>
									<image style="width: 82rpx; height: 36rpx" v-else-if="item.task_type === 2"
										src="@/static/me/wd_icon_yinyue.png"></image>
									<!-- <text v-if="item.task_type === 1">灵感创作</text>
                  <text v-else-if="item.task_type === 2">音乐</text> -->
								</view>
							</view>
						</view>
						<!-- 暂无内容提示 -->
						<view v-if="worksList.length === 0" class="empty-state">
							<image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image">
							</image>
							<text class="empty-text">暂无生成中的作品</text>
							<text class="empty-subtext">快去创作新作品吧~</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="numlist2" style="margin-top: 30rpx">
						<view class="item" v-for="(item, index) in worksList" :key="index" style="margin-bottom: 15rpx">
							<view class="num" @click="goWork2(item)" :class="{'clickable': item.status !== 3 && item.status !== 4}">
								<WorkItem :item="item" style="margin-bottom: 20rpx" />

								<view class="incomplete-bg" style="background: #f8f9fa"></view>
								<image class="incomplete-bg" v-if="item.status != 1"
									src="@/static/me/wd_bg_zhizuozhong.png"></image>
								<image class="incomplete-bg2" v-else-if="item.status == 1" :src="item.image"
									mode="aspectFill" style="max-height: 520rpx;"></image>

								<view class="maskLayer" v-if="item.status != 1"></view>
								<!-- 当activeTab为1时显示队列状态 -->
								<view class="queue-status">
									<!-- 已发布 -->
									<view v-if="item.status == 1" class="status-text">
									</view>
									<!-- 待审核 -->
									<view v-if="item.status == 2 || item.status === 4" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_shenhezhong.png"></image>
									</view>
									<!-- 审核失败 -->
									<view v-else-if="item.status == 3" class="status-text">
										<image class="state-img" src="@/static/me/wd_icon_fabushibai.png"></image>
									</view>
								</view>
								<view class="name" style="
                    font-family: 'PingFang SC-Medium';
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #1a4d2e;
                  ">
									{{ item.title || item.description || "作品" + index }}
								</view>
							</view>
						</view>
						<!-- 暂无内容提示 -->
						<view v-if="worksList.length === 0" class="empty-state">
							<image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image">
							</image>
							<text class="empty-text">暂无帖子</text>
							<text class="empty-subtext">快来发布你的第一个帖子吧~</text>
						</view>
					</view>
				</template>
				<!-- 加载更多提示 -->
				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
			</view>

			<view class="blankHeight"></view>
		</view>
		<view class="reserveASeatBom"></view>
		<!-- 确认框 -->
		<CustomConfirm ref="customConfirm"></CustomConfirm>
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
		<tabbar-view :tabbars="tabbars" :currentIndex="4" ref="tabbar"></tabbar-view>
		<!-- SharePopup组件 -->
		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" view="makeDetail" @close="showShare = false" />

	</view>
</template>

<script>
import tabbarView from "@/components/tabbar/tabbar.vue";
import tabbar from "@/mixins/tabbar";
import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
import meCard from "@/components/meCard/meCard.vue";
import WorkItem from "@/components/WorkItem/WorkItem.vue";
import { mapState } from 'vuex'
export default {
	components: {
		tabbarView,
		CustomConfirm,
		CircleAvatar,
		meCard,
		WorkItem,
	},
	mixins: [tabbar],
	data() {
		return {
			title: "",
			sel: 1,
			firstLevelNavActive: 0,
			myinfo: {
				avator: "../../static/logo.png",
				nickname: "",
				join_name: "",
				num_1: 0,
				num_2: 0,
				num_3: 0,
				num_4: 0,
				is_login: "no",
				num_history: 0,
				num_collection: 0,
			},
			aihao_tags: [],
			menu_list: [],
			data_list: [],
			activeTab: 0,
			offset: 0,
			hasMore: true,
			isLoading: false,
			worksList: [],
			showShare: false,
			shareTitle: "",
			shareDesc: "",
			shareImg: "",
			userId: 0,
		};
	},
	onLoad(e) {
		// setTimeout(function() {
		// 	uni.setNavigationBarColor({
		// 		frontColor: '#ffffff',
		// 		backgroundColor: '#00000000',
		// 		animation: {
		// 			duration: 400,
		// 			timingFunc: 'easeIn'
		// 		}
		// 	})
		// }, 200); 
		uni.$on('switchToMyPage', (data) => {
			if (data.type === 'article') {
				this.firstLevelNavActiveSwitch(1);
			} else if (data.type === 'generatingInProgress') {
				this.firstLevelNavActiveSwitch(0)
				this.switchTab(1);
			} else {
				this.firstLevelNavActiveSwitch(0)
				this.switchTab(0);
			}
		});
	},
	onUnload() {
		// 移除事件监听
		uni.$off('switchToMyPage');
	},
	computed: {
		...mapState('switchingModule', ['isRecharge'])
	},
	onShow() {
		uni.$emit("check_login", () => { });
		// this.loadData();
		this.offset = 0;
		this.hasMore = true;
		this.worksList = [];
		this.loadInfo();


		// 检查全局变量，如果需要切换到生成中标签
		if (getApp().globalData.needSwitchToGenerating) {
			setTimeout(() => {
				this.switchTab(1);
				// 重置全局变量
				getApp().globalData.needSwitchToGenerating = false;
			}, 300);
		} else {
			this.loadWorksList();
		}
	},
	onReachBottom() {
		if (this.hasMore && !this.isLoading) {
			this.loadMoreWorks();
		}
	},
	methods: {
		clickShare(item) {
			this.showShare = true;
		},
		async showConfirm() {
			let that = this;
			this.$refs["customConfirm"]
				.confirm({
					title: "确认解绑",
					content: "解绑微信账号后将无法继续使用它登录该App账号？",
					DialogType: "inquiry",
					btn1: "再考虑一下",
					btn2: "确认解绑",
					animation: 0,
				})
				.then((res) => { });
		},
		onBack() { },
		chkSel() {
			if (this.sel == 1) {
				this.sel = 0;
			} else {
				this.sel = 1;
			}
		},
		goPage(page) {

			uni.navigateTo({
				url: page,
			});

		},
		loadInfo() {
			console.log({
				uuid: getApp().globalData.uuid,
				skey: getApp().globalData.skey,
			});
			uni.request({
				url: this.$apiHost + "/User/getinfo",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("----:", JSON.parse(JSON.stringify(res.data)));
					if (res.data) {

						this.shareTitle = res.data.nickname
						this.shareDesc = res.data.content
						this.shareImg = res.data.avator
						this.userId = res.data.user_id
					}
					if (res.data.need_login == "yes") {
						// getApp().globalData.skey = "";
						// getApp().globalData.uuid = "";

						uni.removeStorageSync("wapptoken");
						uni.redirectTo({
							url: "/pages/login/login",
						});
						return;
					}
					if (res.data.aihao) {
						this.aihao_tags = res.data.aihao.split(",");
					}
					this.myinfo = res.data;
				},
				complete: (com) => {
					// uni.hideLoading();
				},
				fail: (e) => {
					console.log("----e:", e);
				},
			});
		},
		onLogout() {
			let that = this;
			this.$refs["DialogBox"]
				.confirm({
					title: "提示",
					content: "确定退出吗？",
					DialogType: "inquiry",
					btn1: "取消",
					btn2: "退出",
					animation: 0,
				})
				.then((res) => {
					uni.request({
						url: that.$apiHost + "/My/logout",
						data: {
							uuid: getApp().globalData.uuid,
							skey: getApp().globalData.skey,
						},
						header: {
							"content-type": "application/json",
							sign: getApp().globalData.headerSign,
						},
						success: (res) => {
							console.log("----:", res.data);
							// getApp().globalData.skey = "";
							// getApp().globalData.uuid = "";
							uni.removeStorageSync("wapptoken");
							uni.redirectTo({
								url: "/pages/login/login",
							});
						},
						complete: (com) => {
							// uni.hideLoading();
						},
						fail: (e) => {
							console.log("----e:", e);
						},
					});
				});
		},
		switchTab(index) {
			this.activeTab = index;
			this.offset = 0;
			this.hasMore = true;
			this.worksList = [];
			this.loadWorksList();
		},
		loadWorksList() {
			if (this.isLoading) return;
			this.isLoading = true;

			// 根据activeTab选择不同的API
			let apiUrl = "";
			if (this.firstLevelNavActive == 0) {
				if (this.activeTab === 0) {
					apiUrl = "/Work/getlist";
				} else {
					apiUrl = "/WorkAI/getMyQueueList";
				}
			} else if (this.firstLevelNavActive == 1) {
				apiUrl = "/Article/getlist";
			}
			uni.request({
				url: this.$apiHost + apiUrl,
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
					type: "my", // 固定为my，表示获取自己的作品
					offset: this.offset,
					status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
					if (res.data.success == "yes" && res.data.list) {
						if (res.data.list.length > 0) {
							this.worksList = [...this.worksList, ...res.data.list];
							this.offset += res.data.list.length;
						}

						if (res.data.list.length < 20) {
							this.hasMore = false;
						}
					} else {
						this.hasMore = false;
					}

					// 只有在"我的作品"标签下才更新data_list
					if (this.activeTab === 0) {
						this.updateDataList();
					}
					console.log("作品列表数据:", this.worksList);
				},
				complete: () => {
					this.isLoading = false;
				},
				fail: (e) => {
					console.log("请求列表失败:", e);
					this.isLoading = false;
				},
			});
		},
		firstLevelNavActiveSwitch(n) {
			this.firstLevelNavActive = n;
			this.offset = 0;
			this.hasMore = true;
			this.worksList = [];
			if (this.firstLevelNavActive == 0) {
				this.activeTab = 0;
			}
			this.loadWorksList();
		},

		loadMoreWorks() {
			if (this.hasMore && !this.isLoading) {
				this.loadWorksList();
			}
		},
		updateDataList() {
			this.data_list = this.worksList.map((item) => {
				return {
					url: item.images || item.img_url || item.url || "../../static/logo.png",
					title: item.title || item.description || "作品",
					id: item.id,
				};
			});
		},
		goWork(item) {
			uni.$emit("check_login", () => { });
			// , //任务状态(1:排队中,3:生成失败,4:生成失败,9:创作完成)
			if (this.activeTab == 0) {
				uni.navigateTo({
					// url: "/pages/index/workDetail?id=" + item.id,
					url: "/pages/makedetail/makeDetail?id=" +
						item.queue_id +
						"&queueId=" +
						item.id,
				});
			} else {
				if (item.status >= 9) {
					uni.navigateTo({
						url: "/pages/makedetail/makeDetail?id=" + item.id,
					});
				}
				if (item.status < 9 && item.status != 3 && item.status != 4) {
					// <!-- <text v-if="item.task_type === 1">灵感创作</text>
					// <text v-else-if="item.task_type === 2">音乐</text> -->
					var url = "";
					if (item.task_type === 1) {
						url = "/makedetail/makeImgDetail";
					}
					if (item.task_type === 2) {
						url = "/makedetail/makeMusicDetail";
					}
					if (url) {
						uni.navigateTo({
							url: "/pages" + url + "?id=" + item.id,
						});
					}
				}
			}
		},
		goWork2(item) {
			uni.navigateTo({
				// url: "/pages/index/workDetail?id=" + item.id,
				url: "/pages/index/articleDetail?id=" + item.id,
			});
		},
		navigateToSettings() {
			uni.$emit("check_login", () => {
				uni.navigateTo({
					url: "/pages/my/setting",
				});
			});
		},
		navigateToFollow() {
			uni.navigateTo({
				url: "/pages/my/follow",
			});
		},
	},
};
</script>

<style scoped lang="scss">
@import "my.scss";

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
	margin-top: 40rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	width: 710rpx;

	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.empty-subtext {
		font-size: 28rpx;
		color: #999999;
	}
}
</style>