HuaTian.vue 31 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120
  1. <template>
  2. <!--
  3. 设定:
  4. suo:锁;
  5. flower:花,共7种,图片分别为flower1.png flower2.png flower7.png;
  6. zacao:杂草;
  7. tian:田地,如果是待解锁的田地,图片用tian_suo.png,如果是已解锁就用tian.png;
  8. souhuo:收获标识;
  9. select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种结束后隐藏
  10. 4个按钮:
  11. 解锁荒地:点击时,将第一块待解锁的田地转换为已解锁地
  12. 除草:点击时,让杂草隐藏
  13. 播种:点击时,需要先将7种花显示出来,选择其中一种,然后再点击除去杂草的地,然后该块地上显示种子,然后10分钟倒计时,然后显示对应的花,以及收获标识
  14. 收获:点击后,有收获标识的土地上的收获标识图片隐藏,花隐藏,出现杂草
  15. 操作流程:
  16. 默认显示待解锁的田地(其他几个图标都隐藏),点击"解锁荒地",点击"除草",点击"播种",到时间后点击"收获" -->
  17. <view class="page" v-if="show">
  18. <view class="task-board">
  19. <view class="task_day" @click="handleTaskDayClick" :class="{'task-day-active': taskDayActive}">
  20. <image src="../../static/island/huatian/btn_task_day.png" class="task"></image>
  21. </view>
  22. <view class="board-title">
  23. </view>
  24. <view class="bodyContent">
  25. <block v-for="(field, index) in fields" :key="index">
  26. <view class="blank" v-if="index == 0 || index == 7 || index == 10"></view>
  27. <view class="item" :class="{
  28. 'locked': !field.isUnlocked,
  29. 'weedy': field.hasWeed,
  30. 'weed-blink': weedMode && field.hasWeed,
  31. 'planted': field.flower,
  32. 'growing': field.isGrowing,
  33. 'ready': field.canHarvest,
  34. 'harvest-blink': harvestMode && field.canHarvest
  35. }" @click="handleFieldClick(index)">
  36. <image v-if="!field.isUnlocked" src="../../static/island/huatian/suo.png" class="suo"></image>
  37. <image v-if="field.flower && field.growthCompleted"
  38. :src="`../../static/island/huatian/flower${field.flowerType}.png`" class="flower"></image>
  39. <image v-if="field.seedStage && field.isGrowing" src="../../static/island/huatian/zongzi.png"
  40. class="flower"></image>
  41. <image v-if="field.hasWeed && field.isUnlocked" src="../../static/island/huatian/zacao.png"
  42. class="zacao"></image>
  43. <image
  44. :src="field.isUnlocked ? '../../static/island/huatian/tian.png' : '../../static/island/huatian/tian_suo.png'"
  45. class="tian"></image>
  46. <image v-if="field.canHarvest" src="../../static/island/huatian/souhuo.png" class="souhuo">
  47. </image>
  48. <view class="timer" v-if="field.isGrowing">
  49. <image src="../../static/island/huatian/timer.png" class="icon"></image>
  50. <text>{{formatTime(field.remainingTime)}}</text>
  51. </view>
  52. </view>
  53. <view class="blank" v-if="index == 2 || index == 9 || index == 12"></view>
  54. </block>
  55. </view>
  56. <view class="close" @click="onClose">
  57. <image src="../../static/island/UI/btn_close.png" class="close"></image>
  58. </view>
  59. <view class="huatian-tips" @click="showHuaTianTips">
  60. <image src="../../static/island/huatian/tips_icon.png" class="tips-icon"></image>
  61. </view>
  62. <view class="btn_list">
  63. <view class="item item1" @click="showUnlockConfirm">
  64. 解锁荒地
  65. </view>
  66. <view class="item item2" @click="removeWeed">
  67. 除草
  68. </view>
  69. <view class="item item3" @click="showFlowerSelect">
  70. 播种
  71. </view>
  72. <view class="item item4" @click="enterHarvestMode">
  73. 收获
  74. </view>
  75. </view>
  76. <view class="select_zz" v-if="showFlowerSelection">
  77. <view class="item" v-for="(flower, idx) in flowers" :key="idx" @click="selectFlower(idx)"
  78. v-if="flower.count > 0">
  79. <view class="img">
  80. <image :src="`../../static/island/huatian/flower${idx+1}.png`"></image>
  81. </view>
  82. <view class="foot">
  83. {{flower.count}}
  84. </view>
  85. </view>
  86. <view class="jiantou">
  87. <image class="jiantou" src="../../static/island/huatian/jiantou.png"></image>
  88. </view>
  89. </view>
  90. </view>
  91. <!-- 解锁确认对话框 -->
  92. <view class="confirm-dialog" v-if="showUnlockDialog">
  93. <view class="dialog-content">
  94. <view class="dialog-title">解锁荒地</view>
  95. <view class="dialog-text">是否支付{{nextLandPrice}}铃钱解锁荒地?</view>
  96. <view class="dialog-buttons">
  97. <view class="btn-cancel" @click="cancelUnlock">取消</view>
  98. <view class="btn-confirm" @click="confirmUnlock">确认</view>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="guild" v-if="showGuide">
  103. <view class="content">
  104. "欢迎来到花田!在这里,你将成为农场的主人,体验种植和经营农场的乐趣。首先,让我们来开垦一块土地吧。只需支付铃钱即可解锁!"
  105. </view>
  106. <view class="title">
  107. 罗奇
  108. </view>
  109. <view class="npc">
  110. <image src="../../static/island/npc.png"></image>
  111. </view>
  112. </view>
  113. <view class="huatian-tips-dialog" v-if="showTipsDialog">
  114. <view class="tips-content">
  115. <view class="tips-title">花田心得</view>
  116. <view class="tips-close" @click="closeTipsDialog">
  117. <image src="../../static/island/UI/btn_close.png"></image>
  118. </view>
  119. <swiper class="tips-swiper" :current="currentPage" @change="handlePageChange">
  120. <swiper-item>
  121. <view class="tips-items">
  122. <view class="tips-item">
  123. <image src="../../static/island/huatian/tips1.png" class="tips-img"></image>
  124. <view class="tips-text">点击【解锁荒地】,中高亮闪烁的荒地,消耗铃钱解锁新的种植地块。</view>
  125. </view>
  126. <view class="tips-item">
  127. <image src="../../static/island/huatian/tips2.png" class="tips-img"></image>
  128. <view class="tips-text">点击【除草】,选中高亮闪烁的地块进行消除杂草,放能进行种植。</view>
  129. </view>
  130. </view>
  131. </swiper-item>
  132. <swiper-item>
  133. <view class="tips-items">
  134. <view class="tips-item">
  135. <image src="../../static/island/huatian/tips3.png" class="tips-img"></image>
  136. <view class="tips-text">点击【播种】,选心仪的花种播撒至高亮区域,查看成熟期或消耗 M 币加速生长。</view>
  137. </view>
  138. <view class="tips-item">
  139. <image src="../../static/island/huatian/tips4.png" class="tips-img"></image>
  140. <view class="tips-text">当花朵绽放成熟期已至,点击【收获】选中,进行采摘吧。</view>
  141. </view>
  142. </view>
  143. </swiper-item>
  144. <swiper-item>
  145. <view class="tips-items">
  146. <view class="tips-item">
  147. <image src="../../static/island/huatian/tips5.png" class="tips-img"></image>
  148. <view class="tips-text">收获的花朵将放在你的背包中,你可以对花朵进行出售,来赚取铃钱哟。</view>
  149. </view>
  150. <view class="tips-item">
  151. <image src="../../static/island/huatian/tips6.png" class="tips-img"></image>
  152. <view class="tips-text">花朵种子可以在花田旁边的【花店】中购买哟。</view>
  153. </view>
  154. </view>
  155. </swiper-item>
  156. </swiper>
  157. <view class="tips-dots">
  158. <view class="dot" v-for="index in 3" :key="index" :class="{'active': currentPage === index-1}"></view>
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. </template>
  164. <script>
  165. export default {
  166. name: 'TaskDialog',
  167. components: {
  168. },
  169. props: {
  170. visible: {
  171. type: Boolean,
  172. default: false
  173. }
  174. },
  175. data() {
  176. return {
  177. show: false,
  178. dataLoaded: false,
  179. // 用户ID
  180. ssoId: 0,
  181. // 是否第一次打开花田
  182. isFirstOpenHuaTian: true,
  183. // 田地数据
  184. fields: Array(20).fill().map(() => ({
  185. id: 0, // 后端数据库ID
  186. tid: 0, // 对应的土地表ID
  187. isUnlocked: false,
  188. hasWeed: false,
  189. flower: false,
  190. flowerType: null,
  191. isGrowing: false,
  192. growthCompleted: false,
  193. canHarvest: false,
  194. remainingTime: 0,
  195. timer: null,
  196. seedStage: false,
  197. plantTime: '',
  198. state: 0 // 与后端对应的状态
  199. })),
  200. // 花的数据
  201. flowers: [],
  202. // 种子数据
  203. seeds: [],
  204. // 用户铃钱
  205. money: 0,
  206. // 下一块要解锁的土地价格
  207. nextLandPrice: 100,
  208. // 选择状态
  209. selectedFlowerIndex: -1,
  210. showFlowerSelection: false,
  211. showGuide: false,
  212. plantMode: false,
  213. showUnlockDialog: false, // 解锁确认对话框显示状态
  214. // 当前选择的土地ID
  215. selectedLandId: 0,
  216. // 成长检查定时器
  217. growthCheckTimer: null,
  218. weedMode: false, // 添加除草模式状态
  219. weedyFields: [], // 添加可除草的地块列表
  220. harvestMode: false, // 添加收获模式状态
  221. harvestableFields: [], // 添加可收获的地块列表
  222. taskDayActive: false,
  223. // 主岛引用
  224. mainLand: null,
  225. showTipsDialog: false, // 添加花田心得弹框显示状态
  226. currentPage: 0, // 当前页码
  227. }
  228. },
  229. watch: {
  230. visible: {
  231. immediate: true,
  232. handler(val) {
  233. if (val) {
  234. this.fetchData();
  235. } else {
  236. this.show = false;
  237. this.dataLoaded = false;
  238. }
  239. }
  240. }
  241. },
  242. onLoad() {
  243. // 初始化获取数据
  244. this.fetchData();
  245. },
  246. onShow() {
  247. // 重新获取数据
  248. this.fetchData();
  249. },
  250. beforeDestroy() {
  251. // 清除所有定时器
  252. this.fields.forEach(field => {
  253. if (field.timer) {
  254. clearInterval(field.timer);
  255. }
  256. });
  257. // 清除生长检查定时器
  258. if (this.growthCheckTimer) {
  259. clearInterval(this.growthCheckTimer);
  260. }
  261. },
  262. methods: {
  263. // 关闭界面
  264. onClose() {
  265. this.show = false;
  266. this.$emit('update:visible', false);
  267. this.$emit('close');
  268. },
  269. // 初始化获取数据
  270. async fetchData() {
  271. console.log("uuid", getApp().globalData.uuid)
  272. try {
  273. // 检查是否是第一次打开花田
  274. const isFirstOpen = uni.getStorageSync('isFirstOpenHuaTian');
  275. if (isFirstOpen === '') {
  276. // 第一次打开,设置标志并显示提示对话框
  277. uni.setStorageSync('isFirstOpenHuaTian', 'false');
  278. this.isFirstOpenHuaTian = true;
  279. } else {
  280. this.isFirstOpenHuaTian = false;
  281. }
  282. uni.request({
  283. url: this.$apiHost + '/Game/huatian/index',
  284. method: 'POST',
  285. data: {
  286. uuid: getApp().globalData.uuid,
  287. },
  288. header: {
  289. 'Content-Type': 'application/x-www-form-urlencoded',
  290. 'sign': getApp().globalData.headerSign,
  291. },
  292. success: (res) => {
  293. if (res.data && res.data.code === 0) {
  294. // 更新用户铃钱
  295. this.money = res.data.money;
  296. // 更新种子数据
  297. this.seeds = res.data.seeds || [];
  298. // 更新背包数据
  299. const bagItems = res.data.bag_list || [];
  300. // 更新花的数据(背包中type=1的是种子)
  301. this.flowers = [];
  302. for (let i = 1; i <= 7; i++) {
  303. // 找到对应的种子数量
  304. const seedBag = bagItems.find(item => item.type === 1 && item.tid === i);
  305. this.flowers.push({
  306. id: i,
  307. name: this.seeds[i - 1]?.name || `花${i}`,
  308. count: seedBag ? seedBag.num : 0
  309. });
  310. }
  311. // 更新土地数据
  312. const tudiList = res.data.tudi_list || [];
  313. // 重置田地数据
  314. this.fields = Array(20).fill().map((_, index) => ({
  315. id: 0,
  316. tid: index + 1,
  317. isUnlocked: false,
  318. hasWeed: false,
  319. flower: false,
  320. flowerType: null,
  321. isGrowing: false,
  322. growthCompleted: false,
  323. canHarvest: false,
  324. remainingTime: 0,
  325. timer: null,
  326. seedStage: false,
  327. plantTime: '',
  328. state: 0
  329. }));
  330. // 更新已解锁的田地状态
  331. tudiList.forEach(land => {
  332. const fieldIndex = land.tid - 1;
  333. if (fieldIndex >= 0 && fieldIndex < this.fields.length) {
  334. const field = this.fields[fieldIndex];
  335. field.id = land.id;
  336. field.tid = land.tid;
  337. field.isUnlocked = true;
  338. field.state = land.state;
  339. field.plantTime = land.plant_time;
  340. // 根据状态设置不同的显示
  341. if (land.state === -1) {
  342. // 杂草地
  343. field.hasWeed = true;
  344. } else if (land.state === 0) {
  345. // 待播种的空地
  346. field.hasWeed = false;
  347. } else if (land.state >= 1 && land.state <= 7) {
  348. // 种植了花
  349. field.hasWeed = false;
  350. field.flowerType = land.zzid;
  351. // 计算是否已经成熟
  352. if (land.plant_time) {
  353. const plantTime = new Date(land.plant_time);
  354. const now = new Date();
  355. const growthHours = (now - plantTime) / (1000 * 60 * 60);
  356. // 获取对应种子的生长周期
  357. const seed = this.seeds.find(s => s.id === land.state);
  358. const limitHours = seed ? seed.limit_time : 0;
  359. if (growthHours >= limitHours) {
  360. // 已成熟
  361. field.flower = true;
  362. field.growthCompleted = true;
  363. field.canHarvest = true;
  364. } else {
  365. // 未成熟,显示生长中
  366. field.isGrowing = true;
  367. field.seedStage = true;
  368. field.remainingTime = Math.ceil((limitHours - growthHours) * 60 * 60);
  369. this.startGrowthTimer(fieldIndex);
  370. }
  371. }
  372. } else if (land.state === 99) {
  373. // 成熟待收割
  374. field.hasWeed = false;
  375. field.flower = true;
  376. field.flowerType = land.flowerType || land.zzid;
  377. field.growthCompleted = true;
  378. field.canHarvest = true;
  379. }
  380. }
  381. });
  382. // 找到下一块可解锁土地的价格
  383. for (let i = 0; i < this.fields.length; i++) {
  384. if (!this.fields[i].isUnlocked) {
  385. console.log("this.landpric", i + 1)
  386. // 从服务端获取土地价格
  387. uni.request({
  388. url: this.$apiHost + '/Game/huatian/get_land_price',
  389. method: 'POST',
  390. data: {
  391. uuid: getApp().globalData.uuid,
  392. land_id: i + 1
  393. },
  394. header: {
  395. 'Content-Type': 'application/x-www-form-urlencoded',
  396. 'sign': getApp().globalData.headerSign,
  397. uuid: getApp().globalData.uuid,
  398. },
  399. success: (res) => {
  400. console.log('res.data', res.data);
  401. if (res.data && res.data.code === 0) {
  402. this.nextLandPrice = res.data.data.price;
  403. } else {
  404. // 如果获取失败,使用默认值
  405. this.nextLandPrice = 100;
  406. }
  407. // 数据加载完成,显示界面
  408. this.dataLoaded = true;
  409. this.show = true;
  410. // 如果是第一次打开,显示提示对话框
  411. if (this.isFirstOpenHuaTian) {
  412. this.showTipsDialog = true;
  413. }
  414. },
  415. fail: (err) => {
  416. console.error('获取土地价格异常', err);
  417. // 如果获取失败,使用默认值
  418. this.nextLandPrice = 100;
  419. // 数据加载完成,显示界面
  420. this.dataLoaded = true;
  421. this.show = true;
  422. }
  423. });
  424. break;
  425. }
  426. }
  427. // 启动定时检查植物生长状态
  428. this.startGrowthCheck();
  429. } else {
  430. uni.showToast({
  431. title: res.data?.msg || '获取数据失败',
  432. icon: 'none'
  433. });
  434. this.dataLoaded = true;
  435. this.show = true;
  436. }
  437. },
  438. fail: (err) => {
  439. console.error('获取数据异常', err);
  440. uni.showToast({
  441. title: '网络异常,请重试',
  442. icon: 'none'
  443. });
  444. this.dataLoaded = true;
  445. this.show = true;
  446. }
  447. });
  448. } catch (error) {
  449. console.error('获取数据异常', error);
  450. uni.showToast({
  451. title: '网络异常,请重试',
  452. icon: 'none'
  453. });
  454. this.dataLoaded = true;
  455. this.show = true;
  456. }
  457. },
  458. // 显示解锁确认对话框
  459. showUnlockConfirm() {
  460. this.harvestMode = false;
  461. this.weedMode = false;
  462. this.showUnlockDialog = true;
  463. },
  464. // 取消解锁
  465. cancelUnlock() {
  466. this.showUnlockDialog = false;
  467. },
  468. // 确认解锁
  469. async confirmUnlock() {
  470. try {
  471. uni.request({
  472. url: this.$apiHost + '/Game/huatian/unlock_land',
  473. method: 'POST',
  474. data: {
  475. uuid: getApp().globalData.uuid,
  476. },
  477. header: {
  478. 'Content-Type': 'application/x-www-form-urlencoded',
  479. 'sign': getApp().globalData.headerSign,
  480. uuid: getApp().globalData.uuid,
  481. },
  482. success: (res) => {
  483. if (res.data && res.data.code === 0) {
  484. uni.showToast({
  485. title: '解锁成功',
  486. icon: 'success'
  487. });
  488. // 更新用户铃钱
  489. this.money = res.data.data.money;
  490. // 重新获取数据
  491. this.fetchData();
  492. } else {
  493. uni.showToast({
  494. title: res.data?.msg || '解锁失败',
  495. icon: 'none'
  496. });
  497. }
  498. },
  499. fail: (err) => {
  500. console.error('解锁土地异常', err);
  501. uni.showToast({
  502. title: '网络异常,请重试',
  503. icon: 'none'
  504. });
  505. }
  506. });
  507. } catch (error) {
  508. console.error('解锁土地异常', error);
  509. uni.showToast({
  510. title: '网络异常,请重试',
  511. icon: 'none'
  512. });
  513. }
  514. this.showUnlockDialog = false;
  515. },
  516. // 除草
  517. async removeWeed() {
  518. this.harvestMode = false;
  519. if (this.weedMode) {
  520. // 如果已经在除草模式,则退出
  521. this.weedMode = false;
  522. this.weedyFields = [];
  523. return;
  524. }
  525. // 找到所有有杂草的已解锁土地
  526. this.weedyFields = this.fields.filter(field => field.isUnlocked && field.hasWeed);
  527. if (this.weedyFields.length === 0) {
  528. uni.showToast({
  529. title: '没有需要除草的土地',
  530. icon: 'none'
  531. });
  532. return;
  533. }
  534. // 进入除草模式
  535. this.weedMode = true;
  536. uni.showToast({
  537. title: '请点击需要除草的土地',
  538. icon: 'none'
  539. });
  540. },
  541. // 进入收获模式
  542. enterHarvestMode() {
  543. this.weedMode = false;
  544. if (this.harvestMode) {
  545. // 如果已经在收获模式,则退出
  546. this.harvestMode = false;
  547. this.harvestableFields = [];
  548. return;
  549. }
  550. // 找到所有可收获的土地
  551. this.harvestableFields = this.fields.filter(field => field.canHarvest);
  552. if (this.harvestableFields.length === 0) {
  553. uni.showToast({
  554. title: '没有可收获的花',
  555. icon: 'none'
  556. });
  557. return;
  558. }
  559. // 进入收获模式
  560. this.harvestMode = true;
  561. uni.showToast({
  562. title: '请点击需要收获的土地',
  563. icon: 'none'
  564. });
  565. },
  566. // 显示花的选择
  567. showFlowerSelect() {
  568. this.harvestMode = false;
  569. this.weedMode = false;
  570. if (this.showFlowerSelection) {
  571. this.showFlowerSelection = false;
  572. return;
  573. }
  574. // 检查是否有可播种的土地
  575. const canPlantFields = this.fields.filter(field => field.isUnlocked && !field.hasWeed && !field.flower && !
  576. field.isGrowing);
  577. if (canPlantFields.length === 0) {
  578. uni.showToast({
  579. title: '没有可播种的土地',
  580. icon: 'none'
  581. });
  582. return;
  583. }
  584. this.showFlowerSelection = true;
  585. this.plantMode = false;
  586. this.selectedFlowerIndex = -1;
  587. },
  588. // 选择花
  589. selectFlower(idx) {
  590. this.selectedFlowerIndex = idx;
  591. this.showFlowerSelection = false;
  592. this.plantMode = true;
  593. },
  594. // 点击田地
  595. handleFieldClick(index) {
  596. if (this.weedMode) {
  597. // 在除草模式下,只处理有草的地块
  598. if (this.fields[index].hasWeed) {
  599. this.removeWeedFromField(index);
  600. }
  601. return;
  602. }
  603. if (this.harvestMode) {
  604. // 在收获模式下,只处理可收获的地块
  605. if (this.fields[index].canHarvest) {
  606. this.harvestField(this.fields[index].id);
  607. }
  608. return;
  609. }
  610. if (this.plantMode) {
  611. if (this.fields[index].canHarvest) {
  612. }
  613. this.handleFieldClickBZ(index);
  614. return;
  615. }
  616. // 原有的种植逻辑
  617. if (!this.fields[index].isUnlocked) {
  618. uni.showToast({
  619. title: '该地块未解锁',
  620. icon: 'none'
  621. });
  622. return;
  623. }
  624. if (this.fields[index].flower) {
  625. if (this.fields[index].canHarvest) {
  626. this.harvestField(this.fields[index].id);
  627. } else {
  628. uni.showToast({
  629. title: '花朵正在生长中',
  630. icon: 'none'
  631. });
  632. }
  633. return;
  634. }
  635. // 打开种子选择弹窗
  636. this.currentFieldIndex = index;
  637. this.showSeedSelector = true;
  638. },
  639. // 点击田地
  640. async handleFieldClickBZ(index) {
  641. const field = this.fields[index];
  642. // 已解锁土地且处于播种模式
  643. if (this.plantMode && field.isUnlocked && !field.hasWeed && !field.flower && !field.isGrowing) {
  644. // 设置当前选中的土地
  645. this.selectedLandId = field.id;
  646. // 播种
  647. try {
  648. uni.request({
  649. url: this.$apiHost + '/Game/huatian/plant_seed',
  650. method: 'POST',
  651. data: {
  652. uuid: getApp().globalData.uuid,
  653. land_id: field.id,
  654. seed_id: this.selectedFlowerIndex + 1
  655. },
  656. header: {
  657. 'Content-Type': 'application/x-www-form-urlencoded',
  658. 'sign': getApp().globalData.headerSign,
  659. uuid: getApp().globalData.uuid,
  660. },
  661. success: (res) => {
  662. if (res.data && res.data.code === 0) {
  663. // 更新土地状态
  664. field.isGrowing = true;
  665. field.seedStage = true;
  666. field.flowerType = this.selectedFlowerIndex + 1;
  667. field.state = this.selectedFlowerIndex + 1;
  668. field.plantTime = res.data.data.plantTime;
  669. // 计算剩余生长时间
  670. const limitTimeHours = res.data.data.limitTime;
  671. field.remainingTime = limitTimeHours * 60 * 60;
  672. // 开始计时
  673. this.startGrowthTimer(index);
  674. // 更新种子数量
  675. const flowerData = this.flowers[this.selectedFlowerIndex];
  676. if (flowerData && flowerData.count > 0) {
  677. flowerData.count--;
  678. }
  679. // 退出播种模式
  680. this.plantMode = false;
  681. uni.showToast({
  682. title: '播种成功',
  683. icon: 'success'
  684. });
  685. } else {
  686. uni.showToast({
  687. title: res.data?.msg || '播种失败',
  688. icon: 'none'
  689. });
  690. this.plantMode = false;
  691. }
  692. },
  693. fail: (err) => {
  694. console.error('播种异常', err);
  695. uni.showToast({
  696. title: '网络异常,请重试',
  697. icon: 'none'
  698. });
  699. this.plantMode = false;
  700. }
  701. });
  702. } catch (error) {
  703. console.error('播种异常', error);
  704. uni.showToast({
  705. title: '网络异常,请重试',
  706. icon: 'none'
  707. });
  708. this.plantMode = false;
  709. }
  710. } else if (field.canHarvest) {
  711. // 收获花朵
  712. this.harvestField(field.id);
  713. }
  714. },
  715. // 从特定地块移除杂草
  716. removeWeedFromField(index) {
  717. // 调用除草API
  718. uni.request({
  719. url: this.$apiHost + '/Game/huatian/remove_weed',
  720. method: 'POST',
  721. data: {
  722. uuid: getApp().globalData.uuid,
  723. land_id: this.fields[index].id
  724. },
  725. header: {
  726. 'Content-Type': 'application/x-www-form-urlencoded',
  727. 'sign': getApp().globalData.headerSign,
  728. uuid: getApp().globalData.uuid,
  729. },
  730. success: (res) => {
  731. if (res.data && res.data.code === 0) {
  732. // 更新地块状态
  733. this.fields[index].hasWeed = false;
  734. this.fields[index].state = 0;
  735. // 从可除草地块列表中移除
  736. this.weedyFields = this.weedyFields.filter(f => f.id !== this.fields[index].id);
  737. uni.showToast({
  738. title: '除草成功',
  739. icon: 'success'
  740. });
  741. // 如果所有草都已清除,退出除草模式
  742. if (this.weedyFields.length === 0) {
  743. this.weedMode = false;
  744. uni.showToast({
  745. title: '所有杂草已清除',
  746. icon: 'success'
  747. });
  748. }
  749. } else {
  750. uni.showToast({
  751. title: res.data?.msg || '除草失败',
  752. icon: 'none'
  753. });
  754. }
  755. },
  756. fail: (err) => {
  757. console.error('除草异常', err);
  758. uni.showToast({
  759. title: '网络异常,请重试',
  760. icon: 'none'
  761. });
  762. }
  763. });
  764. },
  765. // 开始生长计时器
  766. startGrowthTimer(fieldIndex) {
  767. const field = this.fields[fieldIndex];
  768. // 清除可能存在的旧定时器
  769. if (field.timer) {
  770. clearInterval(field.timer);
  771. }
  772. field.timer = setInterval(() => {
  773. field.remainingTime--;
  774. if (field.remainingTime <= 0) {
  775. // 生长完成
  776. clearInterval(field.timer);
  777. field.isGrowing = false;
  778. field.seedStage = false;
  779. field.growthCompleted = true;
  780. field.flower = true;
  781. field.canHarvest = true;
  782. }
  783. }, 1000);
  784. },
  785. // 收获特定地块
  786. async harvestField(landId) {
  787. console.log("land", landId);
  788. try {
  789. uni.request({
  790. url: this.$apiHost + '/Game/huatian/harvest',
  791. method: 'POST',
  792. data: {
  793. uuid: getApp().globalData.uuid,
  794. land_id: landId
  795. },
  796. header: {
  797. 'Content-Type': 'application/x-www-form-urlencoded',
  798. 'sign': getApp().globalData.headerSign,
  799. uuid: getApp().globalData.uuid,
  800. },
  801. success: (res) => {
  802. if (res.data && res.data.code === 0) {
  803. // 找到对应的田地
  804. const fieldIndex = this.fields.findIndex(f => f.id === landId);
  805. if (fieldIndex >= 0) {
  806. const field = this.fields[fieldIndex];
  807. // 重置状态
  808. field.flower = false;
  809. field.flowerType = null;
  810. field.growthCompleted = false;
  811. field.canHarvest = false;
  812. field.hasWeed = true;
  813. field.state = -1;
  814. // 如果有定时器,清除它
  815. if (field.timer) {
  816. clearInterval(field.timer);
  817. field.timer = null;
  818. }
  819. }
  820. // 重新获取数据以更新背包
  821. this.fetchData();
  822. uni.showToast({
  823. title: `收获了${res.data.data.harvestNum}朵花`,
  824. icon: 'success'
  825. });
  826. // 从可收获地块列表中移除
  827. this.harvestableFields = this.harvestableFields.filter(f => f.id !==
  828. landId);
  829. // 如果所有花都已收获,退出收获模式
  830. if (this.harvestableFields.length === 0) {
  831. this.harvestMode = false;
  832. uni.showToast({
  833. title: '所有花已收获',
  834. icon: 'success'
  835. });
  836. }
  837. } else {
  838. uni.showToast({
  839. title: res.data?.msg || '收获失败',
  840. icon: 'none'
  841. });
  842. }
  843. },
  844. fail: (err) => {
  845. console.error('收获异常', err);
  846. uni.showToast({
  847. title: '网络异常,请重试',
  848. icon: 'none'
  849. });
  850. }
  851. });
  852. } catch (error) {
  853. console.error('收获异常', error);
  854. uni.showToast({
  855. title: '网络异常,请重试',
  856. icon: 'none'
  857. });
  858. }
  859. },
  860. // 收获所有可收获的花
  861. async harvest() {
  862. const harvestFields = this.fields.filter(field => field.canHarvest);
  863. if (harvestFields.length === 0) {
  864. uni.showToast({
  865. title: '没有可收获的花',
  866. icon: 'none'
  867. });
  868. return;
  869. }
  870. try {
  871. for (const field of harvestFields) {
  872. await this.harvestField(field.id);
  873. }
  874. } catch (error) {
  875. console.error('批量收获异常', error);
  876. }
  877. },
  878. // 格式化时间显示
  879. formatTime(seconds) {
  880. const hours = Math.floor(seconds / 3600);
  881. const minutes = Math.floor((seconds % 3600) / 60);
  882. const secs = seconds % 60;
  883. // 获取当前时间,用于控制冒号闪烁
  884. const now = new Date();
  885. const blinkState = now.getSeconds() % 2 === 0;
  886. // 格式化为 "HH:MM" 格式
  887. return `${hours.toString().padStart(2, '0')}${blinkState ? ':' : ' '}${minutes.toString().padStart(2, '0')}`;
  888. },
  889. // 开始定时检查植物生长状态
  890. startGrowthCheck() {
  891. // 清除可能存在的旧定时器
  892. if (this.growthCheckTimer) {
  893. clearInterval(this.growthCheckTimer);
  894. }
  895. // 每分钟检查一次植物生长状态
  896. this.growthCheckTimer = setInterval(async () => {
  897. try {
  898. uni.request({
  899. url: this.$apiHost + '/Game/huatian/check_growth',
  900. method: 'POST',
  901. data: {
  902. uuid: getApp().globalData.uuid,
  903. },
  904. header: {
  905. 'Content-Type': 'application/x-www-form-urlencoded',
  906. 'sign': getApp().globalData.headerSign,
  907. uuid: getApp().globalData.uuid,
  908. },
  909. success: (res) => {
  910. if (res.data && res.data.code === 0) {
  911. const growthData = res.data.data || [];
  912. // 更新每块土地的状态
  913. growthData.forEach(item => {
  914. if (item.isReady) {
  915. // 找到对应的田地
  916. const field = this.fields.find(f => f.id ===
  917. item.landId);
  918. if (field) {
  919. // 更新为可收获状态
  920. field.isGrowing = false;
  921. field.seedStage = false;
  922. field.growthCompleted = true;
  923. field.flower = true;
  924. field.canHarvest = true;
  925. field.state = 99;
  926. // 清除定时器
  927. if (field.timer) {
  928. clearInterval(field.timer);
  929. field.timer = null;
  930. }
  931. }
  932. }
  933. });
  934. }
  935. },
  936. fail: (err) => {
  937. console.error('检查生长状态异常', err);
  938. }
  939. });
  940. } catch (error) {
  941. console.error('检查生长状态异常', error);
  942. }
  943. }, 60000); // 60秒检查一次
  944. },
  945. handleTaskDayClick() {
  946. this.taskDayActive = true;
  947. setTimeout(() => {
  948. this.taskDayActive = false;
  949. }, 200);
  950. // 如果mainLand存在,调用其onTaskClick方法
  951. if (this.mainLand) {
  952. // 关闭当前花田界面
  953. // this.onClose();
  954. // 打开任务对话框
  955. this.mainLand.onTaskClick();
  956. }
  957. },
  958. // 设置mainLand引用
  959. setMainLand(mainLand) {
  960. this.mainLand = mainLand;
  961. },
  962. // 显示花田心得弹框
  963. showHuaTianTips() {
  964. this.showTipsDialog = true;
  965. },
  966. // 关闭花田心得弹框
  967. closeTipsDialog() {
  968. this.showTipsDialog = false;
  969. },
  970. handlePageChange(e) {
  971. this.currentPage = e.detail.current;
  972. },
  973. },
  974. }
  975. </script>
  976. <style lang="scss">
  977. @import './HuaTian.scss';
  978. @keyframes weedBlink {
  979. 0% {
  980. opacity: 1;
  981. transform: scale(1);
  982. }
  983. 50% {
  984. opacity: 0.5;
  985. transform: scale(1.1);
  986. }
  987. 100% {
  988. opacity: 1;
  989. transform: scale(1);
  990. }
  991. }
  992. .weed-blink {
  993. animation: weedBlink 1s infinite;
  994. z-index: 10;
  995. }
  996. @keyframes harvestBlink {
  997. 0% {
  998. opacity: 1;
  999. transform: scale(1);
  1000. }
  1001. 50% {
  1002. opacity: 0.5;
  1003. transform: scale(1.1);
  1004. }
  1005. 100% {
  1006. opacity: 1;
  1007. transform: scale(1);
  1008. }
  1009. }
  1010. .harvest-blink {
  1011. animation: harvestBlink 1s infinite;
  1012. z-index: 10;
  1013. }
  1014. .task-day-active {
  1015. transform: scale(0.95);
  1016. opacity: 0.8;
  1017. transition: all 0.2s ease;
  1018. }
  1019. </style>