Merge branch 'master' of http://150.158.33.144:3000/lalalashen/MoeNovaClient

components/guide/GuideManager.vue

@@ -0,0 +1,329 @@
+<template>
+  <view class="guide-manager">
+    <!-- 遮罩层 -->
+    <view class="guide-mask" v-if="currentStage" @click="handleMaskClick">
+      <!-- 高亮区域 -->
+      <view class="highlight-area" :style="highlightStyle"></view>
+      
+      <!-- 提示框 -->
+      <view class="guide-tips" :style="tipsStyle">
+        <view class="tips-content">
+          <text class="tips-text">{{ currentStep.tips }}</text>
+          <view class="tips-buttons">
+            <text class="skip-btn" @click.stop="skipStage">跳过</text>
+            <text class="next-btn" @click.stop="nextStep">{{ isLastStep ? '完成' : '下一步' }}</text>
+          </view>
+        </view>
+        <!-- 箭头 -->
+        <view class="arrow" :style="arrowStyle"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'GuideManager',
+  data() {
+    return {
+      // 当前引导阶段
+      currentStage: null,
+      // 当前步骤索引
+      currentStepIndex: 0,
+      // 已完成阶段
+      completedStages: [],
+      // 引导配置
+      guideConfig: {
+        // 主岛引导
+        mainLand: {
+          id: 'mainLand',
+          steps: [
+            {
+              target: '.house-image',
+              tips: '这是你的房屋，点击可以进入查看',
+              position: 'bottom'
+            },
+            {
+              target: '.farm-image',
+              tips: '这是农场，可以种植作物',
+              position: 'bottom'
+            },
+            {
+              target: '.shop-image',
+              tips: '这是商店，可以购买物品',
+              position: 'bottom'
+            }
+          ]
+        },
+        // 家园引导
+        homeLand: {
+          id: 'homeLand',
+          steps: [
+            {
+              target: '.house-image',
+              tips: '这是你的家，点击可以进入',
+              position: 'bottom'
+            },
+            {
+              target: '.table-image',
+              tips: '这是工作台，可以制作物品',
+              position: 'bottom'
+            },
+            {
+              target: '.taskBoard-image',
+              tips: '这是任务板，可以查看任务',
+              position: 'bottom'
+            }
+          ]
+        }
+      }
+    }
+  },
+  computed: {
+    // 当前步骤
+    currentStep() {
+      if (!this.currentStage) return null
+      return this.currentStage.steps[this.currentStepIndex]
+    },
+    // 是否是最后一步
+    isLastStep() {
+      if (!this.currentStage) return false
+      return this.currentStepIndex === this.currentStage.steps.length - 1
+    },
+    // 高亮区域样式
+    highlightStyle() {
+      if (!this.currentStep) return {}
+      return this.currentStep.rect ? {
+        top: `${this.currentStep.rect.top}px`,
+        left: `${this.currentStep.rect.left}px`,
+        width: `${this.currentStep.rect.width}px`,
+        height: `${this.currentStep.rect.height}px`
+      } : {}
+    },
+    // 提示框样式
+    tipsStyle() {
+      if (!this.currentStep || !this.currentStep.rect) return {}
+      
+      const rect = this.currentStep.rect
+      const position = this.currentStep.position
+      const systemInfo = uni.getSystemInfoSync()
+      
+      let style = {}
+      switch (position) {
+        case 'top':
+          style = {
+            bottom: `${systemInfo.windowHeight - rect.top + 10}px`,
+            left: `${rect.left + rect.width / 2}px`,
+            transform: 'translateX(-50%)'
+          }
+          break
+        case 'bottom':
+          style = {
+            top: `${rect.bottom + 10}px`,
+            left: `${rect.left + rect.width / 2}px`,
+            transform: 'translateX(-50%)'
+          }
+          break
+        case 'left':
+          style = {
+            top: `${rect.top + rect.height / 2}px`,
+            right: `${systemInfo.windowWidth - rect.left + 10}px`,
+            transform: 'translateY(-50%)'
+          }
+          break
+        case 'right':
+          style = {
+            top: `${rect.top + rect.height / 2}px`,
+            left: `${rect.right + 10}px`,
+            transform: 'translateY(-50%)'
+          }
+          break
+      }
+      
+      return style
+    },
+    // 箭头样式
+    arrowStyle() {
+      if (!this.currentStep) return {}
+      const position = this.currentStep.position
+      
+      let style = {}
+      switch (position) {
+        case 'top':
+          style = {
+            transform: 'rotate(180deg)',
+            bottom: '0'
+          }
+          break
+        case 'bottom':
+          style = {
+            transform: 'rotate(0deg)',
+            top: '0'
+          }
+          break
+        case 'left':
+          style = {
+            transform: 'rotate(90deg)',
+            right: '0'
+          }
+          break
+        case 'right':
+          style = {
+            transform: 'rotate(-90deg)',
+            left: '0'
+          }
+          break
+      }
+      
+      return style
+    }
+  },
+  methods: {
+    // 开始引导
+    startGuide(stageId) {
+      // 检查是否已完成
+      if (this.completedStages.includes(stageId)) {
+        return
+      }
+      
+      // 设置当前阶段
+      this.currentStage = this.guideConfig[stageId]
+      this.currentStepIndex = 0
+      
+      // 等待DOM更新后更新位置
+      this.$nextTick(() => {
+        this.updatePositions()
+      })
+    },
+    // 下一步
+    nextStep() {
+      if (this.isLastStep) {
+        this.completeStage()
+      } else {
+        this.currentStepIndex++
+        this.$nextTick(() => {
+          this.updatePositions()
+        })
+      }
+    },
+    // 跳过当前阶段
+    skipStage() {
+      this.completeStage()
+    },
+    // 完成当前阶段
+    completeStage() {
+      if (this.currentStage) {
+        // 添加到已完成列表
+        this.completedStages.push(this.currentStage.id)
+        // 保存到本地存储
+        this.saveCompletedStages()
+        // 重置状态
+        this.currentStage = null
+        this.currentStepIndex = 0
+      }
+    },
+    // 更新位置
+    updatePositions() {
+      if (!this.currentStep) return
+      
+      const query = uni.createSelectorQuery().in(this)
+      query.select(this.currentStep.target).boundingClientRect(data => {
+        if (data) {
+          // 更新当前步骤的位置信息
+          this.$set(this.currentStage.steps[this.currentStepIndex], 'rect', data)
+        }
+      }).exec()
+    },
+    // 保存已完成阶段
+    saveCompletedStages() {
+      uni.setStorageSync('completedGuideStages', this.completedStages)
+    },
+    // 加载已完成阶段
+    loadCompletedStages() {
+      const stages = uni.getStorageSync('completedGuideStages')
+      if (stages) {
+        this.completedStages = stages
+      }
+    },
+    // 处理遮罩层点击
+    handleMaskClick() {
+      // 可以在这里添加点击遮罩层的处理逻辑
+    }
+  },
+  mounted() {
+    // 加载已完成阶段
+    this.loadCompletedStages()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.guide-manager {
+  .guide-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+    
+    .highlight-area {
+      position: absolute;
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
+      border-radius: 4px;
+      transition: all 0.3s ease;
+    }
+    
+    .guide-tips {
+      position: absolute;
+      background: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      min-width: 200px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      
+      .tips-content {
+        .tips-text {
+          font-size: 14px;
+          color: #333;
+          line-height: 1.5;
+          margin-bottom: 12px;
+        }
+        
+        .tips-buttons {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          
+          .skip-btn,
+          .next-btn {
+            font-size: 14px;
+            padding: 4px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+          
+          .skip-btn {
+            color: #999;
+          }
+          
+          .next-btn {
+            color: #fff;
+            background-color: #1890ff;
+          }
+        }
+      }
+      
+      .arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 8px solid transparent;
+        border-bottom-color: #fff;
+      }
+    }
+  }
+}
+</style> 

pages/isLand/TaskDialog.vue

@@ -10,30 +10,30 @@
         <view v-for="(task, index) in tasks" :key="index" class="task-card">
           <view class="task-header">
             <text class="task-label">任务目标：</text>
-            <text class="task-content">{{task.title}}</text>
+            <text class="task-content">{{task.name}}</text>
           </view>
           <view class="task-desc">
             <text class="task-label">任务描述：</text>
-            <text class="task-content">{{task.description}}</text>
+            <text class="task-content">{{task.content}}</text>
           </view>
           <view class="task-rewards">
             <text class="task-label">任务奖励：</text>
             <view class="reward-list">
-              <view v-for="(reward, rIndex) in task.rewards" :key="rIndex" class="reward-item">
+              <view v-for="(prize, pIndex) in task.prize_list" :key="pIndex" class="reward-item">
                 <view class="reward-box">
-                  <image :src="reward.icon" class="reward-icon"></image>
+                  <image :src="prize.shop.image || '/static/island/items/default.png'" class="reward-icon"></image>
                 </view>
-                <text class="reward-text">{{reward.text}}</text>
+                <text class="reward-text">{{prize.shop.name.length > 3 ? prize.shop.name.substring(0, 3) + '' : prize.shop.name}}x{{ prize.num }}</text>
               </view>
             </view>
           </view>
           <view class="task-footer">
-            <text class="task-date">{{task.date}}</text>
+            <text class="task-date">{{task.create_time}}</text>
             <view 
-              :class="['task-button', task.status === 'completed' ? 'completed' : 'uncompleted']"
+              :class="['task-button', task.state === 1 ? 'completed' : 'uncompleted']"
               @click="handleTaskAction(task)"
             >
-              {{task.status === 'completed' ? '完成任务' : '未完成'}}
+              {{task.state === 1 ? '已完成' : '未完成'}}
             </view>
           </view>
           <view class="card-divider"></view>
@@ -59,94 +59,87 @@ export default {
   },
   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'
-        },
-        {
-          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'
-        }
-      ]
+      tasks: [],
+      loading: false
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.fetchTaskData()
+      }
     }
   },
   methods: {
     onClose() {
       this.$emit('close')
     },
+    // 获取任务数据
+    async fetchTaskData() {
+      if (this.loading) return
+      this.loading = true
+      
+      try {
+        uni.request({
+          url: this.$apiHost + '/Game/get_task_list',
+          method: 'GET',
+          data: {
+            uuid: getApp().globalData.uuid,
+            type: 'main'
+          },
+          header: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'sign': getApp().globalData.headerSign,
+          },
+          success: (res) => {
+            console.log("任务数据:", res.data)
+            if (res.data && res.data.code === 0) {
+              this.tasks = res.data.list || []
+            } else {
+              uni.showToast({
+                title: res.data?.msg || '获取任务数据失败',
+                icon: 'none'
+              })
+            }
+          },
+          fail: (err) => {
+            console.error('获取任务数据异常', err)
+            uni.showToast({
+              title: '网络异常，请重试',
+              icon: 'none'
+            })
+          },
+          complete: () => {
+            this.loading = false
+          }
+        })
+      } catch (error) {
+        console.error('获取任务数据异常', error)
+        uni.showToast({
+          title: '网络异常，请重试',
+          icon: 'none'
+        })
+        this.loading = false
+      }
+    },
     handleTaskAction(task) {
-      if (task.status === 'completed') {
-        // 处理完成任务的逻辑
+      if (task.state === 1) {
+        // 处理已完成任务的逻辑
         uni.showToast({
           title: '任务已完成！',
           icon: 'success'
         })
       } else {
-        // 处理领取任务的逻辑
-        // uni.showToast({
-        //   title: '已领取任务',
-        //   icon: 'success'
-        // })
+        // 处理未完成任务的逻辑
+        uni.showToast({
+          title: '任务未完成',
+          icon: 'none'
+        })
       }
     }
   }
 }
-</script> 
-
-
+</script>
 
 <style lang="scss">
 @import './TaskDialog.scss';

pages/isLand/homeLand.scss

@@ -67,6 +67,7 @@
       pointer-events: auto; /* 货币计数器接收事件 */
       
       .currency-item {
+			min-width: 160rpx;
         display: flex;
         align-items: center;
         background: url('/static/island/UI/money_kuang.png') no-repeat center center;

pages/isLand/homeLand.vue

@@ -38,11 +38,11 @@
         <view class="currency-display" >
           <view class="currency-item">
             <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
-            <text class="currency-value">9999</text>
+            <text class="currency-value">{{userInfo.num_gmd}}</text>
           </view>
           <view class="currency-item">
             <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon"></image>
-            <text class="currency-value">9999</text>
+            <text class="currency-value">{{userInfo.num_gmg}}</text>
           </view>
         </view>
         <view class="ui-buttons">
@@ -66,6 +66,9 @@
 
     <!-- 制造台对话框组件 -->
     <crafting-dialog :visible.sync="craftingVisible" @close="craftingVisible = false"></crafting-dialog>
+
+    <!-- 引导管理器 -->
+    <guide-manager ref="guideManager"></guide-manager>
   </view> 
 </template>
 
@@ -77,6 +80,7 @@ import ShopDialog from '@/components/dialogs/ShopDialog.vue'
 import TaskDialog from './TaskDialog.vue'
 import TalkGuide from './talkGuide.vue'
 import CraftingDialog from '@/components/dialogs/CraftingDialog.vue'
+import GuideManager from '@/components/guide/GuideManager.vue'
 
 export default {
 	components: {
@@ -85,7 +89,8 @@ export default {
 		ShopDialog,
 		TaskDialog,
 		TalkGuide,
-		CraftingDialog
+		CraftingDialog,
+		GuideManager
 	},
 	data() {
 		return {
@@ -144,7 +149,13 @@ export default {
 					isMirror: true
 				}
 			],
-			craftingVisible: false
+			craftingVisible: false,
+			guideManager: null,
+			userInfo: {
+				num_gmd: 0,
+				num_gmg: 0,
+			},
+			moneyTimer: null, // 添加定时器变量
 		}
 	},
 	onLoad() {
@@ -156,9 +167,16 @@ export default {
 				console.log('屏幕宽度:', self.screenWidth);
 			}
 		});
+		this.getUserMoney();
+		
+		// 启动定时器，每2秒更新一次铃钱
+		this.moneyTimer = setInterval(() => {
+			this.getUserMoney();
+		}, 2000);
 	},
 	onShow() {
-		// this.loadData();
+		// 检查是否需要显示引导
+		this.checkAndShowGuide();
 	},
 	onReady() {
 		// 在组件渲染完成后获取图片尺寸
@@ -171,6 +189,13 @@ export default {
 			}, 1000);
 		}, 300);
 	},
+	onUnload() {
+		// 清除定时器
+		if (this.moneyTimer) {
+			clearInterval(this.moneyTimer);
+			this.moneyTimer = null;
+		}
+	},
 	methods: {
 		loadData() {
 			// 可以在这里加载其他数据
@@ -425,7 +450,34 @@ export default {
 			console.log('引导完成')
 			// 这里可以添加引导完成后的逻辑
 			uni.setStorageSync('isGuideCompleted', true)
-		}
+		},
+		// 检查并显示引导
+		checkAndShowGuide() {
+			// 延迟执行以确保DOM已经渲染
+			setTimeout(() => {
+				this.$refs.guideManager && this.$refs.guideManager.startGuide('homeLand');
+			}, 500);
+		},
+		// 获取用户铃钱
+		getUserMoney() {
+			uni.request({
+				url: this.$apiHost + '/User/getinfo',
+				method: 'GET',
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign,
+				},
+				success: (res) => {
+					if (res.data) {
+						console.log("res.getUserMoney", res.data)
+						this.userInfo = res.data;
+					}
+				}
+			})
+		},
 	},
 	beforeDestroy() {
 		this.mainArrowAnimating = false;

pages/isLand/mainLand.scss

@@ -69,6 +69,7 @@
         pointer-events: auto; /* 货币计数器接收事件 */
         
         .currency-item {
+			min-width: 160rpx;
           display: flex;
           align-items: center;
           background: url('/static/island/UI/money_kuang.png') no-repeat center center;

pages/isLand/mainLand.vue

@@ -93,32 +93,38 @@
 			</view>
 		</view>
 
-		<!-- 对话框组件 -->
-		<backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
-		<character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
-		<shop-dialog :visible.sync="shopVisible" :shopName="currentShopName" @close="onShopClose"
-			@buy="onShopBuy"></shop-dialog>
-		<hua-tian :visible.sync="huaTianVisible" @close="onHuaTianClose" ref="huaTian"></hua-tian>
-		<task-dialog :visible.sync="taskDialogVisible" @close="onTaskDialogClose"></task-dialog>
-	</view>
+
+    <!-- 对话框组件 -->
+    <backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
+    <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
+    <shop-dialog :visible.sync="shopVisible" :shopName="currentShopName" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
+    <hua-tian :visible.sync="huaTianVisible" @close="onHuaTianClose" ref="huaTian"></hua-tian>
+    <task-dialog :visible.sync="taskDialogVisible" @close="onTaskDialogClose"></task-dialog>
+
+    <!-- 引导管理器 -->
+    <guide-manager ref="guideManager"></guide-manager>
+  </view> 
+
 </template>
 
 
 <script>
-	import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
-	import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
-	import ShopDialog from '@/components/dialogs/ShopDialog.vue'
-	import HuaTian from './HuaTian.vue'
-	import TaskDialog from './TaskDialog.vue'
-
-	export default {
-		components: {
-			BackpackDialog,
-			CharacterDialog,
-			ShopDialog,
-			HuaTian,
-			TaskDialog
-		},
+import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
+import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
+import ShopDialog from '@/components/dialogs/ShopDialog.vue'
+import HuaTian from './HuaTian.vue'
+import TaskDialog from './TaskDialog.vue'
+import GuideManager from '@/components/guide/GuideManager.vue'
+
+export default {
+	components: {
+		BackpackDialog,
+		CharacterDialog,
+		ShopDialog,
+		HuaTian,
+		TaskDialog,
+		GuideManager
+	},
 		data() {
 			return {
 				// // 背景位置控制
@@ -445,7 +451,6 @@
 							duration: 1000
 						});
 						this.homeArrowAnimation = animation.export();
-
 						setTimeout(() => {
 							if (this.homeArrowAnimating) {
 								animate();
@@ -492,6 +497,14 @@
 					}
 				})
 			},
+
+			// 检查并显示引导
+			checkAndShowGuide() {
+				// 延迟执行以确保DOM已经渲染
+				setTimeout(() => {
+					this.$refs.guideManager && this.$refs.guideManager.startGuide('mainLand');
+				}, 500);
+			},
 		}
 	}
 </script>