MoeNovaClient/pages/my/task.vue

<template>
	<view class="page">
		<!-- 顶部黄色背景 -->
		<view class="top-bg"></view>
		
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 彩豆余额展示区 -->
			<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">2560</view>
			</view>

			<!-- 星愿打卡区域 -->
			<view class="sign-cards">
				<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">80%</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>
			</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.desc}}</view>
					</view>
					<view class="task-reward">+{{item.reward}}彩豆</view>
					<view class="task-btn" :class="{'task-completed': item.completed}" @click="claimReward(index)">
						{{item.completed ? '已领取' : '领取'}}
					</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>
		
		<!-- 签到弹窗 -->
		<view class="sign-popup" v-if="showSign">
			<view class="popup-mask" @click="hideSignPopup"></view>
			<view class="sign-popup-content">
				<!-- 弹窗顶部 -->
				<view class="sign-popup-header">
					<text class="sign-popup-title">每日签到领好礼</text>
					<view class="sign-notify-switch">
						<text class="sign-notify-text">签到消息提醒</text>
						<switch class="sign-switch" color="#9C27B0" :checked="signNotify" @change="toggleSignNotify" />
					</view>
					<view class="sign-days-tag">已签到1天</view>
				</view>
				
				<!-- VIP特权区域 -->
				<view class="vip-area">
					<view class="vip-left">
						<text class="vip-text">VIP十通会员，签到享专属好礼</text>
					</view>
					<view class="vip-right">
						<text class="vip-offer">限时优惠 ></text>
					</view>
				</view>
				
				<!-- 签到奖励网格布局 -->
				<view class="sign-grid">
					<view class="sign-grid-item" v-for="(item, index) in signRewards" :key="index"
						:class="{'sign-received': index === 0}">
						<view class="sign-day-num">{{item.dayNum}}</view>
						<view class="sign-item-img"></view>
						<view class="sign-item-name">{{item.reward}}</view>
						<view class="sign-vip-tag" v-if="item.isVip">VIP</view>
						<view class="sign-received-mask" v-if="index === 0">
							<text class="received-text">已领取</text>
						</view>
					</view>
				</view>
				
				<!-- 底部签到按钮 -->
				<view class="sign-btn-large" @click="confirmSign">签到领取奖励</view>
			</view>
		</view>

		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '任务中心',
				myinfo: {},
				realname: '',
				idcard: '',
				beanBalance: 2560,
				showExchange: false,
				exchangeAmount: '',
				mCoinBalance: 14500,
				showSign: false,
				signNotify: true,
				signRewards: [
					{ dayNum: '01', reward: '海浪*3天', isVip: false },
					{ dayNum: '02', reward: '红玫瑰*3', isVip: false },
					{ dayNum: '03', reward: '樱花*3', isVip: false },
					{ dayNum: '04', reward: '星辰*7天', isVip: false },
					{ dayNum: '05', reward: '红玫瑰*5', isVip: false },
					{ dayNum: '06', reward: '樱花*5', isVip: true },
					{ dayNum: '07', reward: '特别奖励', isVip: true }
				],
				taskList: [
					{
						name: '每日首次发布作品',
						desc: '当日首次发布作品即可获得奖励',
						reward: 20,
						completed: false
					},
					{
						name: '分享作品领彩豆',
						desc: '分享作品到社交平台即可获得奖励',
						reward: 20,
						completed: false
					},
					{
						name: '邀请好友领彩豆',
						desc: '成功邀请一位好友注册',
						reward: 50,
						completed: false
					},
					{
						name: '充值赠礼',
						desc: '首次充值即可获得额外奖励',
						reward: 30,
						completed: false
					},
					{
						name: '口碑缔造者',
						desc: '给他人作品评论5次',
						reward: 20,
						completed: false
					}
				]
			}
		},
		onLoad() {
			this.loadInfo();
		},
		onShow() {},
		methods: {
			onBack() {},

			loadInfo() {
				uni.request({
					url: this.$apiHost + '/My/idcheck',
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						this.myinfo = res.data;
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
			
			// 显示兑换弹窗
			showExchangePopup() {
				this.showExchange = true;
			},
			
			// 隐藏兑换弹窗
			hideExchangePopup() {
				this.showExchange = false;
			},
			
			// 显示签到弹窗
			showSignPopup() {
				this.showSign = true;
			},
			
			// 隐藏签到弹窗
			hideSignPopup() {
				this.showSign = false;
			},
			
			// 切换签到通知开关
			toggleSignNotify(e) {
				this.signNotify = e.detail.value;
			},
			
			// 确认签到
			confirmSign() {
				uni.showToast({
					title: "签到成功，获得今日奖励",
					icon: 'none'
				});
				this.hideSignPopup();
			},
			
			// 确认兑换
			confirmExchange() {
				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;
				}
				
				// 模拟兑换处理
				uni.showToast({
					title: "兑换成功，获得" + amount + "彩豆",
					icon: 'none'
				});
				
				this.beanBalance += amount;
				this.hideExchangePopup();
				this.exchangeAmount = '';
			},
			
			claimReward(index) {
				if(this.taskList[index].completed) {
					uni.showToast({
						title: "已领取该奖励",
						icon: 'none'
					});
					return;
				}
				
				// 模拟领取奖励
				this.taskList[index].completed = true;
				this.beanBalance += this.taskList[index].reward;
				
				uni.showToast({
					title: "成功领取" + this.taskList[index].reward + "彩豆",
					icon: 'none'
				});
			},
			setSFZ() {
				if (this.realname == '') {
					uni.showToast({
						title: "请填写姓名",
						icon: 'none'
					});
					return;
				}
				if (this.idcard.length < 15) {
					uni.showToast({
						title: "请填写身份证号",
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: this.$apiHost + '/My/setsfz',
					data: {
						uuid: getApp().globalData.uuid,
						realname: this.realname,
						idcard: this.idcard
					},
					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.loadInfo();
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
		}
	}
</script>

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