feat: 未来展品页面逻辑

mock/home.js

 import Mock from "mockjs"
 
-export const homeJs = [{
+export const homeJs = [
+  {
     url: '/api/test', //请求地址
     method: 'post', //请求方式
     response: () => {
@@ -12,7 +13,8 @@ export const homeJs = [{
         }
       }
     },
-}, {
+  },
+  {
     url: '/activity/index', //请求地址
     response: () => {
       return {
@@ -48,5 +50,26 @@ export const homeJs = [{
           }
         }
       }
+    }
+  },
+  {
+    url: '/activity/futureActivity', //请求地址
+    response: () => {
+      return {
+        "ok": true,
+        "code": 200,
+        "msg": 'nodano',
+        "timestamp": +new Date(),
+        "data": {
+          "activityInfoList": new Array(20).fill(0).map((item, index) => ({
+            "name": `活动名称${index + 1}`,
+            "introduction": `活动描述${index + 1}`,
+            "thumbnail": `https://yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png`,
+            "upTime": +new Date() + 1000 * index * 60 * 60 * 24 * 30,
+            "previewPage": `https://yun.duiba.com.cn/polaris/1.7daf1cf068b7ed6f80c9bff91236be64624d5ac6.png`,
+          }))
+        }
+      }
     },
-}]
+  }
+]

src/api/api.js

@@ -17,10 +17,10 @@ export const indexApi = (data) => {
   })
 }
 
-export const join = (data) => {
+export const futureActivityApi = (data) => {
   return request({
     method: 'post',
-    url: '/activity/join',
+    url: '/activity/futureActivity',
     data
   })
 }

src/app.jsx

@@ -8,12 +8,14 @@ import store from './store/index.js'
 import modalStore from './store/modal.js'
 import HomePage from './pages/homePage/homePage.jsx'
 import PrizePage from './pages/prizePage/prizePage.jsx'
+import FuturePage from './pages/futurePage/futurePage.jsx'
 import { PAGE_MAP } from './utils/constants.js'
 
 
 const pageMap = {
   [PAGE_MAP.HOME_PAGE]: <HomePage />,
   [PAGE_MAP.PRIZE_PAGE]: <PrizePage />,
+  [PAGE_MAP.FUTURE_PAGE]: <FuturePage />,
 };
 
 @observer

src/assetList.json

-{"preLoadImg":[],"asyncLoadImg":["./assets/homePage/homeBg.png"]}
+{"preLoadImg":[],"asyncLoadImg":["./assets/common/back.png","./assets/common/close.png","./assets/common/sub_page_bg.png","./assets/common/sub_page_bg_cover.png","./assets/futurePage/btn.png","./assets/futurePage/item_bg.png","./assets/futurePage/prize_img_bg.png","./assets/futurePage/title.png","./assets/homePage/arrow_left.png","./assets/homePage/bg_type1.png","./assets/homePage/bg_type2.png","./assets/homePage/btn_future.png","./assets/homePage/btn_prize.png","./assets/homePage/btn_rule.png","./assets/homePage/btn_share.png","./assets/homePage/mainbtn.png","./assets/homePage/mainbtn_popover.png","./assets/homePage/tab1.png","./assets/homePage/tab2.png","./assets/homePage/title.png","./assets/prizePage/item_bg.png","./assets/prizePage/prize_img_bg.png","./assets/prizePage/tab_active_bg.png","./assets/prizePage/title.png","./assets/rulePop/bg.png","./assets/svga/4输出徽章紫色.svga","./assets/svga/5输出礼盒按钮.svga","./assets/svga/6输出徽章绿色.svga","./assets/svga/home.svga","./assets/svga/huadong.svga","./assets/svga/light.svga","./assets/svga/pop.svga"]}
\ No newline at end of file

src/components/longImgPop/longImgPop.jsx

+import React, { Component } from 'react';
+import './longImgPop.less';
+import { _asyncThrottle, _throttle } from '../../utils/utils';
+import skinStore from '../../store/newSkin';
+import { observer } from 'mobx-react';
+import modalStore from '../../store/modal';
+@observer
+class LongImgPop extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activityList: [],
+    }
+  }
+
+  // 返回
+  backHandle = _asyncThrottle(() => {
+    modalStore.closePop();
+  })
+
+  render() {
+    const { back } = skinStore.common;
+    const { img } = this.props.popData;
+    return (
+      <div className="longImgPop">
+        <img className="img" src={img} alt="" />
+        {/* 返回 */}
+        <div className="back" onClick={this.backHandle} style={{ 'backgroundImage': `url(${back})` }}></div>
+      </div>
+    );
+  }
+}
+
+export default LongImgPop;

src/components/longImgPop/longImgPop.less

+@import url('../../res.less');
+
+.longImgPop {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+
+  .img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: auto;
+  }
+
+  .back {
+    width: 96px;
+    height: 47px;
+    position: absolute;
+    left: 0;
+    top: 152px;
+    .formatBg();
+  }
+
+}

src/modal/modal.jsx

@@ -5,12 +5,14 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react";
 import WanLiuDialog from "../components/wanLiuDialog";
 import RulePop from "../components/rulePop/rulePop";
+import LongImgPop from "../components/longImgPop/longImgPop";
 /**
  * 弹窗配置
 */
 export const cfg = {
   WanLiuDialog: WanLiuDialog,
   RulePop: RulePop,
+  LongImgPop: LongImgPop,
 };
 
 

src/pages/futurePage/futurePage.jsx

+import React, { Component } from 'react';
+import './futurePage.less';
+import { _asyncThrottle, _throttle } from '../../utils/utils';
+import skinStore from '../../store/newSkin';
+import store from '../../store';
+import { PAGE_MAP } from '../../utils/constants';
+import { observer } from 'mobx-react';
+import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
+import { futureActivityApi } from '../../api/api';
+import modalStore from '../../store/modal';
+@observer
+class FuturePage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activityList: [],
+    }
+
+  }
+
+  async componentDidMount() {
+    sensorMdExpouse("xcxPage", { pageName: `未来展品` })
+    const res = await futureActivityApi();
+    if (res.ok) {
+      this.setState({ activityList: res.data?.activityInfoList || [] })
+    }
+  }
+
+  // 显示长图弹窗
+  showLongImgPop = _asyncThrottle((item) => {
+    modalStore.pushPop("LongImgPop", { img: item.previewPage })
+  })
+
+  // 切换tab
+  toggleTab = _asyncThrottle((index) => {
+    this.setState({ curTab: index })
+  })
+
+  // 返回
+  backHandle = _asyncThrottle(() => {
+    sensorMdClick("xcxClick", { pageName: `未来展品`, buttonName: '返回' })
+    store.changePage(PAGE_MAP.HOME_PAGE)
+  })
+
+  render() {
+    const { prize_img_bg, title, item_bg, btn } = skinStore.futurePage;
+    const { back, sub_page_bg_cover, sub_page_bg } = skinStore.common;
+    const { activityList } = this.state;
+    return (
+      <div className="futurePage">
+        <div className="bg" style={{ 'backgroundImage': `url(${sub_page_bg})` }}></div>
+        {/* 返回 */}
+        <div className="back" onClick={this.backHandle} style={{ 'backgroundImage': `url(${back})` }}></div>
+        {/* 遮罩 */}
+        <div className="bg_cover" style={{ 'backgroundImage': `url(${sub_page_bg_cover})` }}></div>
+        {/* 标题 */}
+        <div className="title" style={{ 'backgroundImage': `url(${title})` }}></div>
+        {/* 活动列表 */}
+        <div className="act_list">
+          {activityList.map((item, index) => (
+            <div className="prize_item" key={index} onClick={() => this.showLongImgPop(item)} style={{ 'backgroundImage': `url(${item_bg})` }}>
+              <div className="prize_img_box" style={{ 'backgroundImage': `url(${prize_img_bg})` }}>
+                <img className="prize_img" src={item.thumbnail} alt="" />
+              </div>
+              <div className="prize_info">
+                <div className="prize_name">{item.name}</div>
+                <div className="prize_desc">{item.introduction}</div>
+              </div>
+              <div className="btn" style={{ 'backgroundImage': `url(${btn})` }}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FuturePage;

src/pages/futurePage/futurePage.less

+@import url('../../res.less');
+
+.futurePage {
+  width: 750px;
+  height: 1624px;
+  position: relative;
+
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: 1624px;
+    .formatBg();
+  }
+
+  .back {
+    width: 96px;
+    height: 47px;
+    position: absolute;
+    left: 0;
+    top: 152px;
+    .formatBg();
+  }
+
+  .bg_cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50px;
+    height: 1624px;
+    .formatBg();
+  }
+
+  .title {
+    position: absolute;
+    left: 281px;
+    top: 155px;
+    width: 194px;
+    height: 54px;
+    .formatBg();
+  }
+
+
+  .act_list {
+    position: absolute;
+    left: 92px;
+    top: 240px;
+    width: 638px;
+    height: calc(100vh - 240px);
+    overflow: hidden;
+    overflow-y: auto;
+    .formatBg();
+
+    .prize_item {
+      position: relative;
+      width: 638px;
+      height: 151px;
+      margin-bottom: 10px;
+      .formatBg();
+
+      .prize_img_box {
+        position: absolute;
+        left: 17px;
+        top: 15px;
+        width: 117px;
+        height: 112px;
+        .formatBg();
+      }
+
+      .prize_img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .prize_info {
+        position: absolute;
+        left: 149px;
+        top: 0px;
+        padding: 10px 0;
+        width: 370px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+      }
+
+      .prize_name {
+        width: 100%;
+        height: 30px;
+        font-size: 28px;
+        line-height: 30px;
+        color: rgb(131, 80, 42);
+        color: rgb(255, 136, 17);
+        font-weight: bold;
+        .lineClamp1();
+      }
+
+      .prize_desc {
+        width: 100%;
+        height: 22px;
+        font-size: 20px;
+        line-height: 22px;
+        color: rgb(255, 136, 17);
+        margin-top: 15px;
+        .lineClampN(2);
+      }
+      
+      .btn {
+        position: absolute;
+        left: 586px;
+        top: 60px;
+        width: 29px;
+        height: 29px;
+        .formatBg();
+      }
+      
+    }
+  }
+
+
+}

src/pages/homePage/homePage.jsx

@@ -28,7 +28,6 @@ class HomePage extends Component {
     sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '开始测试' })
     const flag = store.checkActivityStatus();
     if (!flag) return;
-    store.joinActivity();
   })
 
   // 规则
@@ -45,6 +44,14 @@ class HomePage extends Component {
     store.changePage(PAGE_MAP.PRIZE_PAGE)
   })
 
+  // 未来展品
+  futureHandle = _asyncThrottle(() => {
+    sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '未来展品' })
+    const flag = store.checkActivityStatus();
+    if (!flag) return;
+    store.changePage(PAGE_MAP.FUTURE_PAGE)
+  })
+
   render() {
     const { curTab } = this.state;
     const { bg_type1, bg_type2, title, tab1, tab2, arrow_left, btn_prize, mainbtn, btn_future, mainbtn_popover, btn_rule, btn_share } = skinStore.homePage;
@@ -107,7 +114,7 @@ class HomePage extends Component {
           {/* 时光宝箱 */}
           <div className="btn_prize" onClick={this.prizeHandle} style={{ 'backgroundImage': `url(${btn_prize})` }}></div>
           {/* 未来展品 */}
-          <div className="btn_future" style={{ 'backgroundImage': `url(${btn_future})` }}></div>
+          <div className="btn_future" onClick={this.futureHandle} style={{ 'backgroundImage': `url(${btn_future})` }}></div>
           {/* 主按钮 */}
           <div className="mainbtn_box" onClick={this.drawHandle}>
             <div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div>

src/store/index.js

@@ -15,7 +15,7 @@ import CryptoJS from 'crypto-js'
 import modalStore from './modal';
 import { GetCurrSkinId, getCustomShareId } from "../utils/utils";
 import { PAGE_MAP } from '../utils/constants';
-import { indexApi, join } from "../api/api.js";
+import { indexApi  } from "../api/api.js";
 export const skinId = GetCurrSkinId() || getCustomShareId();
 const store = makeAutoObservable({
 
@@ -62,17 +62,6 @@ const store = makeAutoObservable({
     Toast('活动异常~')
     return false;
   },
-  joinActivity() {
-    join({ activityId: '' }).then(res => {
-      console.log(res)
-      if (res.ok) {
-        this.curQuesIndex = 0;
-        this.changePage(PAGE_MAP.QUES_PAGE)
-      } else {
-        Toast(res.msg)
-      }
-    });
-  }
 });
 
 export default store;

src/store/newSkin.js

@@ -56,6 +56,14 @@ const _prizePage = {
   item_bg: './assets/prizePage/item_bg.png',
 }
 
+// 未来展品
+const _futurePage = {
+  prize_img_bg: './assets/futurePage/prize_img_bg.png',
+  title: './assets/futurePage/title.png',
+  item_bg: './assets/futurePage/item_bg.png',
+  btn: './assets/futurePage/btn.png',
+}
+
 // 处理图片防止缓存
 const dealImg = (obj) => {
 
@@ -74,11 +82,14 @@ let prizePage = dealImg(_prizePage)
 let rulePop = dealImg(_rulePop)
 let common = dealImg(_common)
 let svga = _svga
+let futurePage = dealImg(_futurePage)
+
 const skinStore = makeAutoObservable({
   homePage,
   prizePage,
   rulePop,
   common,
   svga,
+  futurePage,
 })
 export default skinStore;

src/utils/constants.js

 export const PAGE_MAP = {
   HOME_PAGE: 'homePage',
   PRIZE_PAGE: 'prizePage',
+  FUTURE_PAGE: 'futurePage',
 }
 
 export const errMessageMap = {