2

src/api/index.ts

@@ -167,6 +167,11 @@ const API = generateAPI({
     uri: "game/agreePrivacy.do",
   },
 
+   /** 获取地图详情 */
+  mapInfo: {
+    uri: "map/info.do",
+  },
+
 })
 
 // console.log('======', API)

src/pages/HomePage/HomePage.tsx

@@ -19,8 +19,11 @@ import { LOG_KEY, MatterShareOpt, MatterViewDuration, MatterViewOpt, pageView, s
 import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
 import gameStore from "@/store/gameStore.ts";
 import GamePage from "@/pages/GamePage/GamePage.tsx";
+import MapPage from "@/pages/MapPage/mappage.jsx";
 import MusicBtn from '@/core/components/MusicBtn/MusicBtn.tsx';
 import AwardPopup from '@/panels/AwardPopup/index.jsx'
+import NotWinPopup from '@/panels/NotWinPopup/index.jsx'
+import QRCodePopup from '@/panels/QRCodePopup/index.jsx'
 import VictoryPopup from '@/panels/VictoryPopup/index.jsx'
 import FailPopup from '@/panels/FailPopup/index.jsx'
 import { SvgaPlayer } from "@grace/svgaplayer";
@@ -65,7 +68,7 @@ class Homepage extends React.Component {
           page_name: "活动首页",
           button_name: "我的排名按钮",
         });
-        // PageCtrl.changePage(FISH_TODO);
+        PageCtrl.changePage(MapPage);
         break;
 
       // 1 抽奖
@@ -78,7 +81,7 @@ class Homepage extends React.Component {
           page_name: "活动首页",
           button_name: "抽奖按钮",
         });
-        // ModalCtrl.showModal(FISH_TODO);
+        ModalCtrl.showModal(QRCodePopup);
         break;
 
       // 2 做任务

src/pages/mapPage/mappage.jsx

+"use strict";
+
+import React from "react";
+import { observer } from "mobx-react";
+import "./mappage.less";
+import { dateFormatter, getUrlParam, isMiniprogram, windowJumpUrl } from "@/utils/utils.ts";
+// import { accessLog } from "duiba-utils";
+import store from "@/store/store.ts";
+import API from "@/api";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import HomePage from '../HomePage/HomePage.tsx';
+import { handleLogClick, handleLogExposure } from "../../MD.js";
+import { LOG_KEY, MatterViewDuration, MatterViewOpt, sensorLog } from "../../utils/sensors.js";
+import { _throttle } from "@/utils/utils.js";
+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' }
+];
+
+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' }
+];
+
+@observer
+class Mappage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      curIndex: 0,
+      spInfoList: []
+    };
+  }
+
+  componentDidMount() {
+    this.getMapInfo();
+
+  }
+  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({
+        spInfoList: res.data.spInfoList
+      })
+    }
+  }
+
+  onBack = () => {
+    PageCtrl.changePage(HomePage);
+  }
+
+  onSee = (index) => {
+    const { curIndex, spInfoList } = this.state;
+    if (!spInfoList[index].unlockFlag) {
+      Toast.show("当前城市未解锁，快去参与游戏解锁吧~");
+      return;
+    }
+    this.setState({
+      curIndex: index + 1
+    })
+    console.log('查看:', index + 1)
+  }
+
+  onInfoClose = () => {
+    this.setState({
+      curIndex: 0
+    })
+    console.log('关闭')
+  }
+
+  render() {
+    const { curIndex, spInfoList } = this.state;
+    return (
+      <div className="Mappage">
+        <div className="map_bg">
+          <div className="back_btn" onClick={this.onBack}></div>
+          <div className="map_title"></div>
+          <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>
+                <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>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="info_box" style={{ 'display': curIndex > 0 ? 'block' : 'none' }}>
+          <div className="info_mask"></div>
+          <div className={"info_img info_img_" + curIndex}></div>
+          <div className="close_btn" onClick={this.onInfoClose}></div>
+        </div>
+      </div >
+    );
+  }
+}
+export default Mappage;

src/pages/mapPage/mappage.less

+@import "../../res.less";
+
+.Mappage {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+
+  .map_bg {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    top: 0px;
+    left: 0px;
+    .sparkBg("mapPage/bg.jpg");
+
+    .back_btn {
+      left: 39px;
+      top: 240px;
+      width: 62px;
+      height: 62px;
+      transform-origin: left center;
+      position: absolute;
+      .sparkBg("mapPage/back_btn.png");
+    }
+
+    .map_title {
+      position: absolute;
+      width: 195px;
+      height: 62px;
+      top: 240px;
+      left: 281px;
+      .sparkBg("mapPage/title.png");
+    }
+
+    .city_box {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+      padding: 20px;
+      margin-top: 333px;
+
+      .city_card {
+        // width: 342px;
+        height: 349px;
+        .sparkBg("mapPage/item_bg.png");
+        padding: 18px;
+      }
+
+      .city_icon {
+        position: relative;
+        width: 309px;
+        height: 192px;
+        background-size: cover;
+        background-position: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .city_overlay {
+        padding: 16px;
+        border-radius: 8px;
+        text-align: center;
+        color: #290d10;
+      }
+
+      .city_name {
+        margin: 0 0 15px 0;
+        font-size: 30px;
+      }
+
+      .see_btn {
+        width: 278px;
+        height: 67px;
+        .sparkBg('mapPage/see_btn.png')
+      }
+      .lock_see_btn {
+        width: 278px;
+        height: 67px;
+        .sparkBg('mapPage/lock_see_btn.png')
+      }
+    }
+
+  }
+
+  .info_box {
+    position: absolute;
+    width: 100%;
+    height: 1624px;
+    // visibility: hidden;
+    display: none;
+
+    .info_mask {
+      width: 100%;
+      height: 100%;
+      background: #000;
+      opacity: 0.8;
+    }
+
+    .info_img {
+      position: absolute;
+      width: 702px;
+      height: 993px;
+      top: 270px;
+      left: 25px;
+    }
+
+    .info_img_1 {
+      .sparkBg('mapPage/map_info_1.png')
+    }
+
+    .info_img_2 {
+      .sparkBg('mapPage/map_info_2.png')
+    }
+
+    .info_img_3 {
+      .sparkBg('mapPage/map_info_3.png')
+    }
+
+    .info_img_4 {
+      .sparkBg('mapPage/map_info_4.png')
+    }
+
+    .info_img_5 {
+      .sparkBg('mapPage/map_info_5.png')
+    }
+
+    .close_btn {
+      position: absolute;
+      width: 66px;
+      height: 66px;
+      left: 342px;
+      top: 1342px;
+      .sparkBg("awardPopup/close.png");
+    }
+  }
+
+}
\ No newline at end of file

src/panels/AwardPopup/index.jsx

@@ -22,7 +22,7 @@ class AwardPopup extends React.Component {
 
     //开心收下
     onReceive = ()=>{
-
+        ModalCtrl.closeModal();
     }
 
     render() {

src/panels/GiftPackPopup/index.jsx

@@ -8,7 +8,7 @@ import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
 import store from "@/store/store.js";
 import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import HomePage from '@/pages/HomePage/HomePage.tsx';
-
+//礼包动效弹窗
 @observer
 class GiftPackPopup extends React.Component {
     constructor(props) {

src/panels/NotWinPopup/index.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './index.less';
+import { _asyncThrottle, _throttle } from '../../utils/utils.ts';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import store from "@/store/store.js";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import HomePage from '@/pages/HomePage/HomePage.tsx';
+
+@observer
+class NotWinPopup extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    //关闭
+    onClose = () => {
+        ModalCtrl.closeModal();
+    }
+
+    //我知道了
+    onKnow = ()=>{
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+        return (
+            <div className="NotWinPopup">
+                <div className="nwp_mask"></div>
+                <div className='nwp_bg'>
+                    <div className='nwp_btn' onClick={()=>this.onKnow()}></div>
+                </div>
+                <div className='nwp_close' onClick={()=>this.onClose()}></div>
+            </div>
+        );
+    }
+};
+
+export default NotWinPopup;
\ No newline at end of file

src/panels/NotWinPopup/index.less

+@import "../../res.less";
+
+.NotWinPopup {
+    width: 100vw;
+    height: 100vh;
+    overflow-y: scroll;
+
+    .nwp_mask {
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0.5;
+    }
+
+    .nwp_bg {
+        position: absolute;
+        width: 596px;
+        height: 392px;
+        top: 576px;
+        left: 77px;
+        .sparkBg("notWinPopup/nw_bg.png");
+
+        .nwp_btn {
+            position: absolute;
+            width: 485px;
+            height: 106px;
+            top: 234px;
+            left: 56px;
+            .sparkBg("notWinPopup/know_btn.png");
+        }
+    }
+
+    .nwp_close {
+        position: absolute;
+        width: 66px;
+        height: 66px;
+        left: 342px;
+        top: 1072px;
+        .sparkBg("notWinPopup/close.png");
+    } 
+}
\ No newline at end of file

src/panels/QRCodePopup/index.jsx

+'use strict';
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import './index.less';
+import { _asyncThrottle, _throttle } from '../../utils/utils.ts';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import store from "@/store/store.js";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import HomePage from '@/pages/HomePage/HomePage.tsx';
+
+@observer
+class QRCodePopup extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    //关闭
+    onClose = () => {
+        ModalCtrl.closeModal();
+    }
+
+    //我知道了
+    onKnow = ()=>{
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+        return (
+            <div className="QRCodePopup">
+                <div className="qrcp_mask"></div>
+                <div className='qrcp_bg'>
+                    <div className='qrcp_icon'></div>
+                </div>
+                <div className='qrcp_close' onClick={()=>this.onClose()}></div>
+            </div>
+        );
+    }
+};
+
+export default QRCodePopup;
\ No newline at end of file

src/panels/QRCodePopup/index.less

+@import "../../res.less";
+
+.QRCodePopup {
+    width: 100vw;
+    height: 100vh;
+    overflow-y: scroll;
+
+    .qrcp_mask {
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0.5;
+    }
+
+    .qrcp_bg {
+        position: absolute;
+        width: 596px;
+        height: 541px;
+        top: 467px;
+        left: 77px;
+        .sparkBg("QRCodePopup/qr_bg.png");
+
+        .qrcp_icon {
+            position: absolute;
+            width: 237px;
+            height: 237px;
+            top: 186px;
+            left: 180px;
+            background: #ffffff;
+            border: #efb86c 2px solid;
+            border-radius: 20px;
+        }
+    }
+
+    .qrcp_close {
+        position: absolute;
+        width: 66px;
+        height: 66px;
+        left: 342px;
+        top: 1122px;
+        .sparkBg("QRCodePopup/close.png");
+    }
+}
\ No newline at end of file

src/panels/VictoryPopup/index.jsx

@@ -32,6 +32,7 @@ class VictoryPopup extends React.Component {
 
     //抽奖
     onDraw = ()=>{
+        ModalCtrl.closeModal();
         ModalCtrl.showModal(GiftPackPopup);
     }