地图和失败弹窗修改

src/pages/mapPage/mappage.jsx

@@ -16,19 +16,19 @@ import { Button, Toast } from "@grace/ui";
 //研学地图页面+地图详情
 
 const cities = [
-  { name: '北京', icon: '../src/assets/mapPage/icon_1.png', lock_icon: '../src/assets/mapPage/lock_icon_1.png' },
-  { name: '西安', icon: '../src/assets/mapPage/icon_2.png', lock_icon: '../src/assets/mapPage/lock_icon_2.png' },
-  { name: '上海', icon: '../src/assets/mapPage/icon_3.png', lock_icon: '../src/assets/mapPage/lock_icon_3.png' },
-  { name: '杭州', icon: '../src/assets/mapPage/icon_4.png', lock_icon: '../src/assets/mapPage/lock_icon_4.png' },
-  { name: '成都', icon: '../src/assets/mapPage/icon_5.png', lock_icon: '../src/assets/mapPage/lock_icon_5.png' }
+  { spId: 'sp_landmark1', name: '北京', icon: '../src/assets/mapPage/icon_1.png', lock_icon: '../src/assets/mapPage/lock_icon_1.png' },
+  { spId: 'sp_landmark2', name: '西安', icon: '../src/assets/mapPage/icon_2.png', lock_icon: '../src/assets/mapPage/lock_icon_2.png' },
+  { spId: 'sp_landmark3', name: '上海', icon: '../src/assets/mapPage/icon_3.png', lock_icon: '../src/assets/mapPage/lock_icon_3.png' },
+  { spId: 'sp_landmark4', name: '杭州', icon: '../src/assets/mapPage/icon_4.png', lock_icon: '../src/assets/mapPage/lock_icon_4.png' },
+  { spId: 'sp_landmark5', name: '成都', icon: '../src/assets/mapPage/icon_5.png', lock_icon: '../src/assets/mapPage/lock_icon_5.png' }
 ];
 
 const cities_info = [
-  { name: '北京', icon: '../src/assets/mapPage/map_info_1.png' },
-  { name: '西安', icon: '../src/assets/mapPage/map_info_2.png' },
-  { name: '上海', icon: '../src/assets/mapPage/map_info_3.png' },
-  { name: '杭州', icon: '../src/assets/mapPage/map_info_4.png' },
-  { name: '成都', icon: '../src/assets/mapPage/map_info_5.png' }
+  { spId: 'sp_landmark1', name: '北京', icon: '../src/assets/mapPage/map_info_1.png' },
+  { spId: 'sp_landmark2', name: '西安', icon: '../src/assets/mapPage/map_info_2.png' },
+  { spId: 'sp_landmark3', name: '上海', icon: '../src/assets/mapPage/map_info_3.png' },
+  { spId: 'sp_landmark4', name: '杭州', icon: '../src/assets/mapPage/map_info_4.png' },
+  { spId: 'sp_landmark5', name: '成都', icon: '../src/assets/mapPage/map_info_5.png' }
 ];
 
 @observer
@@ -36,7 +36,7 @@ class Mappage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      curIndex: 0,
+      curIndex: '',
       spInfoList: []
     };
   }
@@ -48,6 +48,45 @@ class Mappage extends React.Component {
   getMapInfo = async () => {
 
     let res = await API.mapInfo();
+    // res = {
+    //   "success": true,
+    //   "code": "",
+    //   "message": "",
+    //   "data": {
+    //     "spInfoList": [
+    //       {
+    //         "spId": "sp_landmark1",
+    //         "name": "北京",
+    //         "icon": "https://www.baidu.com/tiananmen.png",
+    //         "unlockFlag": true
+    //       },
+    //       {
+    //         "spId": "sp_landmark2",
+    //         "name": "上海",
+    //         "icon": "https://www.baidu.com/dongfangmingzhu.png",
+    //         "unlockFlag": false
+    //       },
+    //       {
+    //         "spId": "sp_landmark3",
+    //         "name": "广州",
+    //         "icon": "https://www.baidu.com/guangzhouta.png",
+    //         "unlockFlag": false
+    //       },
+    //       {
+    //         "spId": "sp_landmark4",
+    //         "name": "深圳",
+    //         "icon": "https://www.baidu.com/shenzhendiwangdasha.png",
+    //         "unlockFlag": true
+    //       },
+    //       {
+    //         "spId": "sp_landmark5",
+    //         "name": "杭州",
+    //         "icon": "https://www.baidu.com/hangzhoudasha.png",
+    //         "unlockFlag": false
+    //       }
+    //     ]
+    //   }
+    // }
     console.log('res:::::', res);
     if (res?.success) {
       this.setState({
@@ -60,21 +99,22 @@ class Mappage extends React.Component {
     PageCtrl.changePage(HomePage);
   }
 
-  onSee = (index) => {
+  onSee = (spId) => {
     const { curIndex, spInfoList } = this.state;
-    if (!spInfoList[index].unlockFlag) {
+    const targetCity = spInfoList.find(city => city.spId === spId);
+    if (!targetCity.unlockFlag) {
       Toast.show("当前城市未解锁，快去参与游戏解锁吧~");
       return;
     }
     this.setState({
-      curIndex: index + 1
+      curIndex: spId
     })
-    console.log('查看:', index + 1)
+    console.log('查看:', spId)
   }
 
   onInfoClose = () => {
     this.setState({
-      curIndex: 0
+      curIndex: ''
     })
     console.log('关闭')
   }
@@ -89,17 +129,17 @@ class Mappage extends React.Component {
           <div className="city_box">
             {spInfoList.map((city, index) => (
               <div key={index} className="city_card">
-                <div className="city_icon" style={{ backgroundImage: `url(${city.unlockFlag ? cities[index].icon : cities[index].lock_icon})` }}>
+                <div className="city_icon" style={{ backgroundImage: `url(${city.unlockFlag ? cities.find(item => item.spId === city.spId).icon : cities.find(item => item.spId === city.spId).lock_icon})` }}>
                 </div>
                 <div className="city_overlay">
                   <div className="city_name">{city.name}</div>
-                  <div className={city.unlockFlag ? 'see_btn' : 'lock_see_btn'} onClick={() => this.onSee(index)}></div>
+                  <div className={city.unlockFlag ? 'see_btn' : 'lock_see_btn'} onClick={() => this.onSee(city.spId)}></div>
                 </div>
               </div>
             ))}
           </div>
         </div>
-        <div className="info_box" style={{ 'display': curIndex > 0 ? 'block' : 'none' }}>
+        <div className="info_box" style={{ 'display': curIndex != '' ? 'block' : 'none' }}>
           <div className="info_mask"></div>
           <div className={"info_img info_img_" + curIndex}></div>
           <div className="close_btn" onClick={this.onInfoClose}></div>

src/pages/mapPage/mappage.less

@@ -106,24 +106,24 @@
       left: 25px;
     }
 
-    .info_img_1 {
-      .sparkBg('mapPage/map_info_1.png')
+    .info_img_sp_landmark1 {
+      .sparkBg('mapPage/map_info_sp_landmark1.png')
     }
 
-    .info_img_2 {
-      .sparkBg('mapPage/map_info_2.png')
+    .info_img_sp_landmark2 {
+      .sparkBg('mapPage/map_info_sp_landmark2.png')
     }
 
-    .info_img_3 {
-      .sparkBg('mapPage/map_info_3.png')
+    .info_img_sp_landmark3 {
+      .sparkBg('mapPage/map_info_sp_landmark3.png')
     }
 
-    .info_img_4 {
-      .sparkBg('mapPage/map_info_4.png')
+    .info_img_sp_landmark4 {
+      .sparkBg('mapPage/map_info_sp_landmark4.png')
     }
 
-    .info_img_5 {
-      .sparkBg('mapPage/map_info_5.png')
+    .info_img_sp_landmark5 {
+      .sparkBg('mapPage/map_info_sp_landmark5.png')
     }
 
     .close_btn {

src/panels/FailPopup/index.jsx

@@ -39,18 +39,18 @@ class FailPopup extends React.Component {
     }
 
     render() {
-        const { leftGameTimes } = store?.indexData || {}
+        const { gameData, data } = this.state || {}
         return (
             <div className="FailPopup">
                 <div className="fp_mask"></div>
                 <div className='fp_bg'>
                     <div className='fp_txt'>还需要合成以下个数才可解锁地标</div>
                     <div className='fp_icon'>
-                        <div className='fp_mb_1'>还差{this.state?.targetTravel}个</div>
-                        <div className='fp_mb_2'>还差{this.state?.targetStudy}个</div>
+                        <div className='fp_mb_1'>还差{gameData?.targetTravel}个</div>
+                        <div className='fp_mb_2'>还差{gameData?.targetStudy}个</div>
                     </div>
                     <div className='fp_btn' onClick={() => this.onReceive()}>
-                        <div className='fp_btn_txt'>剩余次数：{leftGameTimes}</div>
+                        <div className='fp_btn_txt'>剩余次数：{data.leftGameTimes}</div>
                     </div>
                 </div>
                 <div className='fp_close' onClick={() => this.onClose()}></div>

src/store/gameStore.ts

@@ -77,7 +77,7 @@ class GameStore {
     if (suc) {
       ModalCtrl.showModal(VictoryPopup, data);
     } else {
-      ModalCtrl.showModal(FailPopup, gameData);
+      ModalCtrl.showModal(FailPopup, { gameData: gameData, data: data });
     }
     return success;
   }