MoeNovaClient/pages/isLand/HuaTian.vue

<template>
	<view class="page">
		<view class="task-board">
			<view class="board-title">
			</view>
			<view class="bodyContent">

				<block v-for="(reward, index) in 20" :key="index">
					<view class="blank" v-if="index == 0 || index == 7 || index == 10"></view>
					<view class="item">
						<image src="../../static/island/huatian/suo.png" class="suo"></image>
						<image src="../../static/island/huatian/flower3.png" class="flower"></image>
						<image src="../../static/island/huatian/tian_suo.png" class="tian"></image>
					</view>
					<view class="blank" v-if="index == 2 || index == 9 || index == 12"></view>
				</block>

			</view>
			<view class="close">
				<image src="../../static/island/close.png" class="close"></image>
			</view>
		</view>

		<view class="guild">
			<view class="content">
				"欢迎来到花田!在这里,你将成为农场的主人,体验种植和经营农场的乐趣。首先,让我们来开垦一块土地吧。只需支付100金币即可解锁!"
			</view>
			<view class="title">
				罗奇
			</view>
			<view class="npc">
				<image src="../../static/island/npc.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TaskDialog',
		components: {

		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tasks: [{
						title: '负债累累的冒险家',
						description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
						rewards: [{
								icon: '/static/icons/coin.png',
								text: '金币×3000'
							},
							{
								icon: '/static/icons/exp.png',
								text: '经验×3000'
							},
							{
								icon: '/static/icons/blueprint.png',
								text: '升级房屋图纸×1'
							}
						],
						date: '2024/04/08',
						status: 'completed'
					},
					{
						title: '负债累累的冒险家',
						description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
						rewards: [{
								icon: '/static/icons/coin.png',
								text: '金币×3000'
							},
							{
								icon: '/static/icons/exp.png',
								text: '经验×3000'
							},
							{
								icon: '/static/icons/blueprint.png',
								text: '升级房屋图纸×1'
							}
						],
						date: '2024/04/08',
						status: 'available'
					}
				]
			}
		},
		methods: {
			onClose() {
				this.$emit('close')
			},
			handleTaskAction(task) {
				if (task.status === 'completed') {
					// 处理完成任务的逻辑
					uni.showToast({
						title: '任务已完成！',
						icon: 'success'
					})
				} else {
					// 处理领取任务的逻辑
					uni.showToast({
						title: '已领取任务',
						icon: 'success'
					})
				}
			}
		}
	}
</script>



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