MoeNovaClient/pages/my/job.vue

<template>
	<view class="page">
		<!-- 顶部黄色背景 -->
		<PageHeader class="PageHeader">
			<template slot="center"> 任务中心 </template>
			<template slot="right">
				<DropdownMenu :options="dropdownOptions" @select="handleDropdownSelect" />
			</template>
		</PageHeader>
		<view class="occupyHigh"></view>
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 星源余额展示区 -->
			<view class="person-info">
				<view class="person-info-left">
					<CircleAvatar class="avator" v-if="myinfo.avator" :src="myinfo.avator"></CircleAvatar>
					<view class="title-area">
						<text class="my-bean-title">我的星源</text>
						<view class="bean-number">
							<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
							{{ num_gmd | formatNumberToK }}
						</view>
					</view>
				</view>
				<view class="exchange-btn" @click="openNicknamePopUpWindow()">兑换</view>
			</view>
			<!-- 星源余额展示区 -->
			<!-- <view class="bean-balance"  >
				<view class="balance-header">
					<view class="title-area">
						<view class="yellow-dot"></view>
						<text class="my-bean-title">我的星源</text>
					</view>
					<view class="exchange-btn" @click="showExchangePopup">兑换</view>
				</view>
				<view class="bean-number">{{ num_gmd }}</view>
			</view> -->
			<view class="starWishCheckIn">
				<image src="@/static/me/job/rw_wenzi_01.png" class="title"></image>
				<view class="card purple-card" @click="newer_bfb == 'finish' ? '' : goPage('/pages/my/editInfo')">
					<view class="bg-box" v-if="newer_bfb == 'finish'">
						<image src="@/static/me/job/sy_icon_yilingqu.png" class="bg"></image>
					</view>
					<view class="card-title">初次见面礼</view>
					<view class="card-desc">完善个人资料领取星源奖励</view>
					<view class="card-btn card-reward" v-if="newer_bfb != 'finish'">+20星源</view>
					<view class="card-btn card-reward" v-else>已领取</view>
				</view>
				<view class="card yellow-card">
					<view class="card-title">每日签到</view>
					<view class="card-desc">签到领奖励，快来签到吧！</view>
					<view class="card-btn sign-btn" @click="opencheckInPopUpWindow()">
						<template v-if="signInfo.isSigned">已签到</template>
						<template v-else>立即签到</template>
					</view>
				</view>
			</view>
			<!-- 星愿打卡区域 -->
			<!-- <view class="sign-cards" v-if="false">
				<view class="card purple-card">
					<view class="card-title">初次见面礼</view>
					<view class="card-desc">完善个人资料可得</view>
					<view class="card-reward">奖励+100星源</view>
					<view class="card-progress">{{ newer_bfb }}</view>
				</view>
				<view class="card yellow-card">
					<view class="card-title">每日签到</view>
					<view class="card-desc">连续签到奖励更多</view>
					<view class="sign-btn" @click="showSignPopup">立即签到</view>
					<view class="sign-btn" @click="opencheckInPopUpWindow()">立即签到</view>
				</view>
			</view> -->

			<!-- 每日任务列表 -->
			<view class="task-list-box">
				<view class="task-header">
					<image src="@/static/me/job/rw_wenzi_02.png"></image>
					<text class="task-subtitle">(获取免费星源)</text>
				</view>

				<!-- 任务项列表 -->
				<view class="task-item" v-for="(item, index) in taskList" :key="index">
					<view class="task-info">
						<image :src="item.image"></image>
						<view>
							<view class="task-name one-omit">{{ item.name }}</view>
							<view class="task-desc one-omit">{{ item.content }}</view>
						</view>
					</view>
					<view class="task-reward">
						<image src="@/static/me/job/wd_icon_xingyuan.png"></image>+{{
							item.num
						}}
					</view>
					<view class="task-btn" :class="{ 'task-completed': item.status == 9 || item.status == 1 }"
						@click="claimReward(index, item)">
						<text v-if="item.status == 1">未完成</text>
						<text v-if="item.status == 2">领取</text>
						<text v-if="item.status == 9">已领取</text>
					</view>
				</view>
			</view>

			<!-- 每日任务列表 
			<view class="task-list">
				<view class="task-header">
					<text class="task-title">每日任务</text>
					<text class="task-subtitle">获取免费星源</text>
				</view> 
				<view class="task-item" v-for="(item, index) in taskList" :key="index">
					<view class="task-info">
						<view class="task-name">{{ item.name }}</view>
						<view class="task-desc">{{ item.content }}</view>
					</view>
					<view class="task-reward">+{{ item.num }}星源</view>
					<view class="task-btn" :class="{ 'task-completed': item.status == 9 }" @click="claimReward(index)">
						{{ item.status == 9 ? "已领取" : "领取" }}
					</view>
				</view>
			</view>-->
		</view>

		<!-- 星源兑换弹窗 -->
		<view class="exchange-popup" v-if="showExchange">
			<view class="popup-mask" @click="hideExchangePopup"></view>
			<view class="popup-content">
				<!-- 弹窗顶部信息栏 -->
				<view class="popup-header">
					<text class="available-balance">可用M币: 14500</text>
					<text class="exchange-title">兑换星源</text>
				</view>

				<!-- 兑换区域主体 -->
				<view class="exchange-area">
					<view class="exchange-title-area">
						<text class="exchange-main-title">M币兑换星源数</text>
						<text class="exchange-subtitle">兑换星源数必须是10的倍数</text>
					</view>

					<view class="input-area">
						<view class="bean-icon"></view>
						<input type="number" class="exchange-input" placeholder="请输入兑换星源数量" v-model="exchangeAmount" />
					</view>

					<!-- 操作按钮 -->
					<view class="action-area">
						<view class="exchange-btn-large" @click="confirmExchange">立即兑换星源</view>
						<text class="tips-text">星源可用于创作（生成图片、音乐等AI创作功能）</text>
					</view>
				</view>
			</view>
		</view>

		<checkInPopUpWindow :checkInDays="6" :signInfo="signInfo" :signNotify="signNotify"
			@toggleSignNotify="toggleSignNotify" ref="checkInPopUpWindow" @confirmSign="confirmSign()">
		</checkInPopUpWindow>

		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
		<!-- 兑换m币弹窗-->
		<view class="NicknamePopUpWindowBox">
			<NicknamePopup title="" subtitle="" class="NicknamePopUpWindow" ref="NicknamePopUpWindow">
				<template slot="heard">
					<view class="nickname-heard">
						<view class="available-mCoin">可用M币：{{ myinfo.num_gmm | formatNumberToK }}</view>
						<view class="exchange-title">兑换星源</view>
					</view>
				</template>
				<template slot="content">
					<view class="content-box">
						<view class="prompt">
							M币兑换星源数<text>（兑换星源数必须是10的倍数）</text>
						</view>
						<view class="input-box">
							<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
							<uv-input type="number" class="input" placeholder="请输入昵称" border="none"
								v-model="exchangeAmount" maxlength="20"></uv-input>
						</view>
						<view class="btn-box" @click="showExchangeConfirm">立即兑换星源</view>
						<text class="tips-text">星源可用于创作（生成图片、音乐等AI创作功能）</text>
					</view>
				</template>
			</NicknamePopup>
		</view>
	</view>
</template>

<script>
import checkInPopUpWindow from "@/components/checkIn-popUp-window/checkIn-popUp-window.vue";
import DropdownMenu from "@/components/DropdownMenu.vue";

export default {
	components: {
		checkInPopUpWindow,
		DropdownMenu,
	},
	data() {
		return {
			title: "任务中心",
			myinfo: {},
			realname: "",
			num_gmd: 0,
			newer_bfb: "",
			beanBalance: 2560,
			showExchange: false,
			exchangeAmount: "",
			mCoinBalance: 0,
			signNotify: true,
			signRewards: [{
				dayNum: "01",
				reward: "10星源",
				isVip: false,
			},
			{
				dayNum: "02",
				reward: "15星源",
				isVip: false,
			},
			{
				dayNum: "03",
				reward: "20星源",
				isVip: false,
			},
			{
				dayNum: "04",
				reward: "25星源",
				isVip: false,
			},
			{
				dayNum: "05",
				reward: "30星源", 
				isVip: false,
			},
			{
				dayNum: "06",
				reward: "35星源",
				isVip: true,
			},
			{
				dayNum: "07",
				reward: "50星源",
				isVip: true,
			},
			],
			signInfo: {
				signDay: 1,
				isSigned: false,
				reward: 0,
			},
			taskList: [],
			dropdownOptions: [{
				label: "星源记录",
				type: "starSourceRecord"
			}],
			isRefreshing: false,
		};
	},
	onPullDownRefresh() {
		if (this.isRefreshing) return;

		this.isRefreshing = true;
		this.refreshData();
	},
	onLoad(e) {
		if (e && e.type == "recharge") {
			setTimeout(() => {
				this.openNicknamePopUpWindow();
			}, 0);
		}
		this.loadData();
		this.getSignInfo();
	},
	onShow() { },
	methods: {
		opencheckInPopUpWindow() {
			this.$refs.checkInPopUpWindow.open();
		},
		closecheckInPopUpWindow() {
			this.$refs.checkInPopUpWindow.close();
		},
		openNicknamePopUpWindow() {
			this.$refs.NicknamePopUpWindow.open();
		},
		closeNicknamePopUpWindow() {
			this.$refs.NicknamePopUpWindow.close();
		},
		onBack() { },

		loadData() {
			return new Promise((resolve, reject) => {
				uni.request({
					url: this.$apiHost + "/Job/getlist",
					data: {
						uuid: getApp().globalData.uuid,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("----:", res.data);
						this.num_gmd = res.data.num_gmd;
						this.newer_bfb = res.data.newer_bfb;
						this.taskList = res.data.list;
						resolve(res);
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
						reject(e);
					},
				});
			});
		},

		getSignInfo() {
			return new Promise((resolve, reject) => {
				uni.request({
					url: this.$apiHost + "/User/sign7Day",
					data: {
						uuid: getApp().globalData.uuid,
						action: "get",
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						if (res.data.success === "yes") {
							this.signInfo = {
								signDay: res.data.data.sign_day,
								isSigned: res.data.data.is_signed,
								reward: res.data.data.reward || 0,
							};
						}
						resolve(res);
					},
					fail: (e) => {
						console.log("获取签到信息失败:", e);
						reject(e);
					},
				});

				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) => {
						this.myinfo = res.data;
						resolve(res);
					},
					complete: (com) => { },
					fail: (e) => {
						console.log("----e:", e);
						reject(e);
					},
				});
			});
		},

		showExchangePopup() {
			this.showExchange = true;
		},

		hideExchangePopup() {
			this.showExchange = false;
		},

		toggleSignNotify(falg) {
			this.signNotify = falg;
		},

		confirmSign(type) {
			if (this.signInfo.isSigned) {
				uni.showToast({
					title: "今日已签到，明天再来吧",
					icon: "none",
				});
				return;
			}

			uni.request({
				url: this.$apiHost + "/User/sign7Day",
				data: {
					uuid: getApp().globalData.uuid,
					action: "sign",
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					if (res.data.success === "yes") {
						uni.showToast({
							title: res.data.str,
							icon: "none",
						});
						this.getSignInfo();
						this.loadData();
					} else {
						uni.showToast({
							title: res.data.str,
							icon: "none",
						});
					}
				},
				fail: (e) => {
					console.log("签到失败:", e);
					uni.showToast({
						title: "签到失败，请稍后重试",
						icon: "none",
					});
				},
			});
		},

		confirmExchange() {
			console.log(123465);

			if (!this.exchangeAmount) {
				uni.showToast({
					title: "请输入兑换数量",
					icon: "none",
				});
				return;
			}

			const amount = parseInt(this.exchangeAmount);

			if (isNaN(amount) || amount <= 0) {
				uni.showToast({
					title: "请输入有效数量",
					icon: "none",
				});
				return;
			}

			if (amount % 10 !== 0) {
				uni.showToast({
					title: "兑换数量必须是10的倍数",
					icon: "none",
				});
				return;
			}
			let that = this;
			uni.request({
				url: this.$apiHost + "/User/gmmToGMD",
				data: {
					uuid: getApp().globalData.uuid,
					num: amount,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("----:", res.data);
					uni.showToast({
						title: res.data.str,
						icon: "none",
					});
					if (res.data.success == "yes") {
						this.hideExchangePopup();
						this.exchangeAmount = "";
						setTimeout(function () {
							that.loadData();
						}, 900);
					}
				},
				complete: (com) => {
					this.closeNicknamePopUpWindow();
				},
				fail: (e) => {
					console.log("----e:", e);
				},
			});
		},
		jumpTask(item) { 
			let url = "";
			switch (item.id) {
				case 1:
					uni.switchTab({
						url: "/pages/make/index"
					})
					break;
				case 2:
					uni.switchTab({
						url: "/pages/my/my"
					})
					break;
				case 3:
					uni.switchTab({
						url: "/pages/index/index"
					})
					break;
				case 4:
					uni.switchTab({
						url: "/pages/make/index"
					})
					break;
				case 5:
					uni.navigateTo({
						url: "/pages/vip/index"
					});


					break;
			}

			var arr = [
				{
					"id": 3,
					"image": "https://e.zhichao.art/images/job/newer.png",
					"rule": "newer",
					"type": "all",
					"name": "邀请好友领星源",
					"content": "成功邀请一位好友注册",
					"num": 50,
					"status": 1
				},
				{
					"id": 1,
					"image": "https://e.zhichao.art/images/job/fabu.png",
					"rule": "fabu",
					"type": "day",
					"name": "每日首次发布作品",
					"content": "当日首次发布作品即可获得奖励",
					"num": 20,
					"status": 1
				},
				{
					"id": 2,
					"image": "https://e.zhichao.art/images/job/share.png",
					"rule": "share",
					"type": "day",
					"name": "分享作品领星源",
					"content": "分享作品到社交平台即可获得奖励",
					"num": 20,
					"status": 1
				},
				{
					"id": 5,
					"image": "https://e.zhichao.art/images/job/zan.png",
					"rule": "zan",
					"type": "day",
					"name": "口碑缔造者",
					"content": "给他人作品评论5次",
					"num": 20,
					"status": 1
				},
				{
					"id": 4,
					"image": "https://e.zhichao.art/images/job/congzi.png",
					"rule": "congzi",
					"type": "day",
					"name": "充值赠礼",
					"content": "首次充值即可获得额外奖励",
					"num": 30,
					"status": 1
				}
			]
		},
		claimReward(index, item) {
			if (item.status == 9) {
				uni.showToast({
					title: "已领取该奖励",
					icon: "none",
				});
				return;
			}
			if (item.status == 1) {
				uni.showToast({
					title: "还没有完成该任务",
					icon: "none",
				});
				this.$refs["DialogBox"]
					.confirm({
						title: "任务提示",
						content: item.content,
						DialogType: "inquiry",
						btn1: "暂时不完成",
						btn2: "去完成任务",
						animation: 0,
					})
					.then((res) => {
						if (res.isConfirm) {
							this.jumpTask(item);
						}
					});

				return;
			}
			let that = this;
			uni.request({
				url: this.$apiHost + "/Job/doAct",
				data: {
					uuid: getApp().globalData.uuid,
					id: this.taskList[index].id,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("----:", res.data);
					if (res.data.success == "yes") {
						uni.showToast({
							title: res.data.str,
							icon: "none",
						});
						setTimeout(function () {
							that.loadData();
						}, 900);
					}
				},
				complete: (com) => {
					// uni.hideLoading();
				},
				fail: (e) => {
					console.log("----e:", e);
				},
			});
		},

		handleDropdownSelect(item) {
			switch (item.type) {
				case "starSourceRecord":
					uni.navigateTo({
						url: "/pages/vip/record?type=star",
					});
					break;
			}
		},

		showExchangeConfirm() {
			this.$refs["DialogBox"]
				.confirm({
					title: "确认兑换",
					content: "确定要兑换" + this.exchangeAmount + "星源吗？",
					DialogType: "inquiry",
					btn1: "再考虑一下",
					btn2: "确认兑换",
					animation: 0,
				})
				.then((res) => {
					if (res.isConfirm) {
						this.confirmExchange();
					}
				});
		},

		refreshData() {
			Promise.all([this.loadData(), this.getSignInfo()])
				.then(() => {
					this.isRefreshing = false;
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					this.isRefreshing = false;
					uni.stopPullDownRefresh();
				});
		},
		goPage(page) {
			uni.navigateTo({
				url: page,
			});
		},
	},
};
</script>

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