MoeNovaClient/pages/my/my.vue

<template>
	<view class="page">
		<view class="topBody">
			<view class="header">
				<view class="topBg"></view>
				<view class="settingBtn" @click="navigateToSettings">
					<image src="/static/me/setting.png"></image>
				</view>
				<view class="top_num">
					<view class="num_1">
						<text>M币</text>
						<text>{{myinfo.num_gmd}}</text>
					</view>
					<view class="num_2">
						<text>彩豆</text>
						<text>{{myinfo.num_gmd}}</text>
					</view>
				</view>
				<view class="infoBg">
					<view class="top_row">
						<view class="left" @click="goPage('/pages/my/editInfo')">
							<image class="img" mode="aspectFill" :src="myinfo.avator"></image>
						</view>
						<view class="right" @click="goPage('/pages/my/editInfo')">
							<view class="nickname">
								<text>{{myinfo.nickname}}</text>
								<image src="../../static/icon/man.png" mode="widthFix" v-if="myinfo.sex_id == 1" />
								<image src="../../static/icon/man.png" mode="widthFix" v-else-if="myinfo.sex_id == 2" />
								<view class="level">Lv{{myinfo.my_level}}</view>
							</view>
							<view class="tags_list">
								<block v-for="(item,index) in aihao_tags">
									<uni-tag class="tag" type="primary" :inverted="false" :text="item" size="mini" />
								</block>
							</view>
						</view>
					</view>

					<view class="bottom_row">
						<view class="intro_row">
							<block v-if="myinfo.content == ''">
								<text class="intro_text">添加简介</text>
								<image src="../../static/icon/add.png" mode="widthFix" class="add_icon" />
							</block>
							<block v-else>
								<text class="intro_text">{{myinfo.content}}</text>
							</block>
						</view>
						<view class="follow_info">
							<text class="num">{{myinfo.num_attention}}</text>
							<text class="label">关注</text>
							<text class="separator"></text>
							<text class="num">{{myinfo.num_fans}}</text>
							<text class="label">粉丝</text>
							<text class="separator"></text>
							<text class="num">{{myinfo.num_like}}</text>
							<text class="label">获赞</text>
						</view>
					</view>
				</view>

			</view>
			<view class="whiteItem">
				<view class="btn">开启专属会员权益</view>
			</view>
			<view class="myinfo">
				<view class="line"></view>
				<view class="tablist">
					<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
						<view class="name">我的作品</view>
					</view>
					<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
						<view class="name">生成中</view>
					</view>
				</view>
				<view class="numlist2" style="margin-top: 60rpx;">
					<view class="item" v-for="(item,index) in worksList" :key="index">
						<view class="num" @click="goWork(item)">
							<!-- 当activeTab为0时显示图片 -->
							<image v-if="activeTab === 0" class="icon"
								:src="item.images || item.img_url || item.url || '../../static/logo.png'"
								mode="aspectFit" />

							<!-- 当activeTab为1时显示队列状态 -->
							<view v-else class="queue-status">
								<!-- 排队中 -->
								<view v-if="item.status === 1" class="status-text">
									排队中({{item.queue_position}}/{{item.all_position}})</view>
								<!-- 制作中 -->
								<view v-else-if="item.status < 9" class="status-text">制作中</view>
								<!-- 创作完成 -->
								<view v-else-if="item.status === 9" class="status-text">创作完成</view>
							</view>

							<view class="name">{{item.title || item.description || '作品'+index}}</view>

							<!-- 显示任务类型标签 -->
							<view v-if="activeTab === 1" class="task-type-tag">
								<text v-if="item.task_type === 1">灵感创作</text>
								<text v-else-if="item.task_type === 2">音乐</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<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 class="blankHeight"></view>
		</view>


		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
		<tabbar-view :tabbars="tabbars" :currentIndex="4" ref="tabbar"></tabbar-view>
	</view>
</template>

<script>
	import tabbarView from "@/components/tabbar/tabbar.vue";
	import tabbar from "@/mixins/tabbar";
	export default {
		components: {
			tabbarView,
		},
		mixins: [tabbar],
		data() {
			return {
				title: '',
				sel: 1,
				myinfo: {
					avator: '../../static/logo.png',
					nickname: '王思思',
					join_name: '注册日期：2024年5月',
					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: [{
						url: 'https://e.zhichao.art/AI_images/a_1112_10.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1112_108.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1112_113.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1112_13.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1112_137.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1112_141.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__562.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__568.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__569.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__570.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__571.png',
					},
					{
						url: 'https://e.zhichao.art/AI_images/a_1114__575.png',
					},


				],
				activeTab: 0,
				offset: 0,
				hasMore: true,
				isLoading: false,
				worksList: []
			}
		},
		onLoad() {
			// setTimeout(function() {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#ffffff',
			// 		backgroundColor: '#00000000',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 200);
		},
		onShow() {
			// this.loadData();
			this.offset = 0;
			this.hasMore = true;
			this.worksList = [];
			this.loadInfo();
			this.loadWorksList();
		},
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.loadMoreWorks();
			}
		},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			goPage(page) {
				if (page == 'kefu') {
					let that = this;
					// #ifdef APP-PLUS
					plus.share.getServices(res => {
						const wechat = res.find(i => i.id === 'weixin')
						if (wechat) {
							wechat.openCustomerServiceChat({
								corpid: 'wwbc06aa8311b6ac08',
								// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
								url: that.myinfo.wxkf
							}, src => {
								console.log("success:")
							}, err => {
								console.log("error:")
							})
						} else {
							uni.showToast({
								title: '没有检测到微信，请先安装',
								icon: "error"
							});
						}
					});
					// #endif

				} else if (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("----:", res.data);
						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.activeTab === 0) {
					apiUrl = '/Work/getlist';
				} else {
					apiUrl = '/WorkAI/getMyQueueList';
				}

				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("列表数据:", 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();
						}
					},
					complete: () => {
						this.isLoading = false;
					},
					fail: (e) => {
						console.log("请求列表失败:", e);
						this.isLoading = false;
					}
				});
			},
			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) {
				if (this.activeTab == 0) {
					uni.navigateTo({
						url: '/pages/index/workDetail?id=' + item.id
					})
				} else {
					if (item.status >= 9) {
						uni.navigateTo({
							url: '/pages/makedetail/makeDetail?id=' + item.id
						})
					}
				}
			},
			navigateToSettings() {
				uni.navigateTo({
					url: '/pages/my/setting'
				});
			},
		}
	}
</script>

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