Skip to content

R
RB-studyChina-20250617
Commit 2314a1ee authored by jtwu's avatar jtwu
Browse files
Options

地图和失败弹窗修改

parent 92824a2a
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 34 deletions
src/pages/mapPage/mappage.jsx
View file @ 2314a1ee
...@@ -16,19 +16,19 @@ import { Button, Toast } from "@grace/ui"; ...@@ -16,19 +16,19 @@ import { Button, Toast } from "@grace/ui";
//研学地图页面+地图详情 //研学地图页面+地图详情
const cities = [ const cities = [
{ name: '北京', icon: '../src/assets/mapPage/icon_1.png', lock_icon: '../src/assets/mapPage/lock_icon_1.png' }, { spId: 'sp_landmark1', 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' }, { spId: 'sp_landmark2', 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' }, { spId: 'sp_landmark3', 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' }, { spId: 'sp_landmark4', 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_landmark5', name: '成都', icon: '../src/assets/mapPage/icon_5.png', lock_icon: '../src/assets/mapPage/lock_icon_5.png' }
]; ];
const cities_info = [ const cities_info = [
{ name: '北京', icon: '../src/assets/mapPage/map_info_1.png' }, { spId: 'sp_landmark1', name: '北京', icon: '../src/assets/mapPage/map_info_1.png' },
{ name: '西安', icon: '../src/assets/mapPage/map_info_2.png' }, { spId: 'sp_landmark2', name: '西安', icon: '../src/assets/mapPage/map_info_2.png' },
{ name: '上海', icon: '../src/assets/mapPage/map_info_3.png' }, { spId: 'sp_landmark3', name: '上海', icon: '../src/assets/mapPage/map_info_3.png' },
{ name: '杭州', icon: '../src/assets/mapPage/map_info_4.png' }, { spId: 'sp_landmark4', name: '杭州', icon: '../src/assets/mapPage/map_info_4.png' },
{ name: '成都', icon: '../src/assets/mapPage/map_info_5.png' } { spId: 'sp_landmark5', name: '成都', icon: '../src/assets/mapPage/map_info_5.png' }
]; ];
@observer @observer
...@@ -36,7 +36,7 @@ class Mappage extends React.Component { ...@@ -36,7 +36,7 @@ class Mappage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
curIndex: 0, curIndex: '',
spInfoList: [] spInfoList: []
}; };
} }
...@@ -48,6 +48,45 @@ class Mappage extends React.Component { ...@@ -48,6 +48,45 @@ class Mappage extends React.Component {
getMapInfo = async () => { getMapInfo = async () => {
let res = await API.mapInfo(); 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); console.log('res:::::', res);
if (res?.success) { if (res?.success) {
this.setState({ this.setState({
...@@ -60,21 +99,22 @@ class Mappage extends React.Component { ...@@ -60,21 +99,22 @@ class Mappage extends React.Component {
PageCtrl.changePage(HomePage); PageCtrl.changePage(HomePage);
} }
onSee = (index) => { onSee = (spId) => {
const { curIndex, spInfoList } = this.state; const { curIndex, spInfoList } = this.state;
if (!spInfoList[index].unlockFlag) { const targetCity = spInfoList.find(city => city.spId === spId);
if (!targetCity.unlockFlag) {
Toast.show("当前城市未解锁，快去参与游戏解锁吧~"); Toast.show("当前城市未解锁，快去参与游戏解锁吧~");
return; return;
} }
this.setState({ this.setState({
curIndex: index + 1 curIndex: spId
}) })
console.log('查看:', index + 1) console.log('查看:', spId)
} }
onInfoClose = () => { onInfoClose = () => {
this.setState({ this.setState({
curIndex: 0 curIndex: ''
}) })
console.log('关闭') console.log('关闭')
} }
...@@ -89,17 +129,17 @@ class Mappage extends React.Component { ...@@ -89,17 +129,17 @@ class Mappage extends React.Component {
<div className="city_box"> <div className="city_box">
{spInfoList.map((city, index) => ( {spInfoList.map((city, index) => (
<div key={index} className="city_card"> <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>
<div className="city_overlay"> <div className="city_overlay">
<div className="city_name">{city.name}</div> <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> </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_mask"></div>
<div className={"info_img info_img_" + curIndex}></div> <div className={"info_img info_img_" + curIndex}></div>
<div className="close_btn" onClick={this.onInfoClose}></div> <div className="close_btn" onClick={this.onInfoClose}></div>
......
src/pages/mapPage/mappage.less
View file @ 2314a1ee
...@@ -106,24 +106,24 @@ ...@@ -106,24 +106,24 @@
left: 25px; left: 25px;
} }
.info_img_1 { .info_img_sp_landmark1 {
.sparkBg('mapPage/map_info_1.png') .sparkBg('mapPage/map_info_sp_landmark1.png')
} }
.info_img_2 { .info_img_sp_landmark2 {
.sparkBg('mapPage/map_info_2.png') .sparkBg('mapPage/map_info_sp_landmark2.png')
} }
.info_img_3 { .info_img_sp_landmark3 {
.sparkBg('mapPage/map_info_3.png') .sparkBg('mapPage/map_info_sp_landmark3.png')
} }
.info_img_4 { .info_img_sp_landmark4 {
.sparkBg('mapPage/map_info_4.png') .sparkBg('mapPage/map_info_sp_landmark4.png')
} }
.info_img_5 { .info_img_sp_landmark5 {
.sparkBg('mapPage/map_info_5.png') .sparkBg('mapPage/map_info_sp_landmark5.png')
} }
.close_btn { .close_btn {
......
src/panels/FailPopup/index.jsx
View file @ 2314a1ee
...@@ -39,18 +39,18 @@ class FailPopup extends React.Component { ...@@ -39,18 +39,18 @@ class FailPopup extends React.Component {
} }
render() { render() {
const { leftGameTimes } = store?.indexData || {} const { gameData, data } = this.state || {}
return ( return (
<div className="FailPopup"> <div className="FailPopup">
<div className="fp_mask"></div> <div className="fp_mask"></div>
<div className='fp_bg'> <div className='fp_bg'>
<div className='fp_txt'>还需要合成以下个数才可解锁地标</div> <div className='fp_txt'>还需要合成以下个数才可解锁地标</div>
<div className='fp_icon'> <div className='fp_icon'>
<div className='fp_mb_1'>还差{this.state?.targetTravel}个</div> <div className='fp_mb_1'>还差{gameData?.targetTravel}个</div>
<div className='fp_mb_2'>还差{this.state?.targetStudy}个</div> <div className='fp_mb_2'>还差{gameData?.targetStudy}个</div>
</div> </div>
<div className='fp_btn' onClick={() => this.onReceive()}> <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> </div>
<div className='fp_close' onClick={() => this.onClose()}></div> <div className='fp_close' onClick={() => this.onClose()}></div>
......
src/store/gameStore.ts
View file @ 2314a1ee
...@@ -77,7 +77,7 @@ class GameStore { ...@@ -77,7 +77,7 @@ class GameStore {
if (suc) { if (suc) {
ModalCtrl.showModal(VictoryPopup, data); ModalCtrl.showModal(VictoryPopup, data);
} else { } else {
ModalCtrl.showModal(FailPopup, gameData); ModalCtrl.showModal(FailPopup, { gameData: gameData, data: data });
} }
return success; return success;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment