Merge branch 'master' of gitlab2.dui88.com:sparkprojects/rb_strongestbrain_250520

package.json

@@ -28,6 +28,7 @@
     "crypto-js": "^4.2.0",
     "cssnano": "^7.0.6",
     "detect-collisions": "^9.26.4",
+    "dplayer": "^1.27.1",
     "duiba-utils": "^2.0.2",
     "emittery": "^1.1.0",
     "gsap": "^3.12.7",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       detect-collisions:
         specifier: ^9.26.4
         version: 9.26.4
+      dplayer:
+        specifier: ^1.27.1
+        version: 1.27.1
       duiba-utils:
         specifier: ^2.0.2
         version: 2.0.2
@@ -2112,6 +2115,9 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  axios@1.2.3:
+    resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==, tarball: http://npm.dui88.com:80/axios/-/axios-1.2.3.tgz}
+
   axios@1.9.0:
     resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
 
@@ -2133,6 +2139,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=}
 
+  balloon-css@1.2.0:
+    resolution: {integrity: sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==, tarball: http://npm.dui88.com:80/balloon-css/-/balloon-css-1.2.0.tgz}
+
   base64-arraybuffer@1.0.2:
     resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
     engines: {node: '>= 0.6.0'}
@@ -2548,6 +2557,9 @@ packages:
     resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
+  dplayer@1.27.1:
+    resolution: {integrity: sha512-2laBMXs5V1B9zPwJ7eAIw/OBo+Xjvy03i4GHTk3Cg+IWbrq8rKMFO0fFr6ClAYotYOCcFGOvaJDkOZcgKllsCA==, tarball: http://npm.dui88.com:80/dplayer/-/dplayer-1.27.1.tgz}
+
   duiba-utils@1.0.13:
     resolution: {integrity: sha512-VEFzmfiujSZcl40jgRhkuv1lAsvLxhfArENFbI1NXxAz9iihdGOH1SdTektWaH5hrwsWvy/6kB088KzxJ+QvtA==}
 
@@ -4018,6 +4030,9 @@ packages:
     resolution: {integrity: sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=}
     engines: {node: '>=0.4.0'}
 
+  promise-polyfill@8.3.0:
+    resolution: {integrity: sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==, tarball: http://npm.dui88.com:80/promise-polyfill/-/promise-polyfill-8.3.0.tgz}
+
   protobufjs@7.5.0:
     resolution: {integrity: sha512-Z2E/kOY1QjoMlCytmexzYfDm/w5fKAiRwpSzGtdnXW1zC88Z2yXazHHrOtwCzn+7wSxyE8PYM4rvVcMphF9sOA==}
     engines: {node: '>=12.0.0'}
@@ -6800,6 +6815,14 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
+  axios@1.2.3:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axios@1.9.0:
     dependencies:
       follow-redirects: 1.15.9
@@ -6834,6 +6857,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balloon-css@1.2.0: {}
+
   base64-arraybuffer@1.0.2: {}
 
   base64-js@1.5.1: {}
@@ -7286,6 +7311,14 @@ snapshots:
 
   dotenv@16.4.7: {}
 
+  dplayer@1.27.1:
+    dependencies:
+      axios: 1.2.3
+      balloon-css: 1.2.0
+      promise-polyfill: 8.3.0
+    transitivePeerDependencies:
+      - debug
+
   duiba-utils@1.0.13: {}
 
   duiba-utils@2.0.2: {}
@@ -8696,6 +8729,8 @@ snapshots:
 
   progress@2.0.3: {}
 
+  promise-polyfill@8.3.0: {}
+
   protobufjs@7.5.0:
     dependencies:
       '@protobufjs/aspromise': 1.1.2

src/core/ctrls/ModalCtrl.tsx

 import React, { ComponentType, Component } from "react";
 
 import styles from "./ModalCtrl.module.less";
-import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
+import TipPanel from "@/panels/TipPanel/TipPanel.tsx";
 
 // 弹窗优先级配置Map，key为弹窗组件名（建议用组件.displayName或组件名字符串），value为优先级数值
 // 数值越大优先级越高，未配置的默认0
 const modalPriorityMap = new Map<ComponentType<any>, number>([
-  [SignSucPanel, 15],
+  [TipPanel, 15],
 ]);
 
 interface ModalItem {

src/pages/DrawPage/DrawPage.jsx

@@ -13,6 +13,19 @@ import { Button, Toast } from "@grace/ui";
 import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 
+<<<<<<< HEAD
+=======
+import React from 'react';
+import { observer } from 'mobx-react';
+import './DrawPage.less';
+import { _asyncThrottle } from '../../utils/utils.ts';
+import store from '../../store/store.ts';
+import { CHANNEL_PARAMS } from '@/utils/constants';
+import { CircleTurntable } from '@spark/circle-turntable'
+// import { Button } from '@src/components/Button';
+// import { Marquee, Toast } from '@spark/ui';
+// import { isWeChat } from '@src/utils/share';
+>>>>>>> 9220288db04479c19dd6c72d8df036f6453c36b0
 // import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
 
 @observer

src/pages/HomePage/HomePage.tsx

@@ -10,6 +10,9 @@ import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 import Rulepop from "../../components/rulepop/rulepop.jsx";
 import DrawPage from "../DrawPage/DrawPage.js";
 import store from '@/store/store';
+import Taskpop from '@/panels/taskpop/taskpop.js';
+import RankPage from '../RankPage/RankPage.js';
+import MyPrize from '../MyPrize/MyPrize.js';
 
 
 @observer
@@ -23,7 +26,6 @@ class Homepage extends React.Component {
   componentDidMount() {
     store.updateIndex()
   }
-
   handleButtonClick = _asyncThrottle(async (number) => {
     // 活动时间判断
     // 规则 奖品始终可以点击 我的排名结束可以点击 其余常规逻辑
@@ -37,19 +39,19 @@ class Homepage extends React.Component {
       // 0 我的排名
       case 0:
         // TODO 换成我的排名页面 记得引用
-        // PageCtrl.changePage(); 
+        PageCtrl.changePage(RankPage);
         break;
 
       // 1 抽奖
       case 1:
-        PageCtrl.changePage(DrawPage);
+        // PageCtrl.changePage(DrawPage);
         break;
 
       // 2 做任务
       case 2:
         // TODO
+        ModalCtrl.showModal(Taskpop);
         break;
-
       // 3 答题
       case 3:
         // TODO
@@ -58,7 +60,7 @@ class Homepage extends React.Component {
       // 4 我的奖品
       case 4:
         // TODO 换成我的奖品页面 记得引用
-        // PageCtrl.changePage(); 
+        PageCtrl.changePage(MyPrize);
         break;
 
       // 5 活动规则

src/panels/SignSucPanel/SignSucPanel.tsx → src/panels/TipPanel/TipPanel.tsx

@@ -4,24 +4,13 @@ import "./SignSucPanel.less";
 import {Button} from "@grace/ui";
 import {_asyncThrottle} from "@/utils/utils.ts";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
-import HomePage from "@/pages/HomePage/HomePage.tsx";
-import { SvgaPlayer } from "@grace/svgaplayer";
 
-import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
-
-export interface ISignSucPanelProps {
-  signCredits: number;
-  extraCredits: number;
-  boolLimit: boolean;
-  multipleValue: number;
-  url: string;
-  taskId: string;
-  newLuckCreditsNum: number;
+export interface ITipPanelProps {
+  tip: string;
 }
 
 @observer
-class SignSucPanel extends React.Component<ISignSucPanelProps> {
+class TipPanel extends React.Component<ITipPanelProps> {
 
   componentDidMount() {
   }
@@ -35,33 +24,15 @@ class SignSucPanel extends React.Component<ISignSucPanelProps> {
   });
 
   render() {
-    const { signCredits, extraCredits } = this.props;
+    const { tip } = this.props;
 
     return <div className="SignSucPanel modal_center">
-      <SvgaPlayer className="bgEffect" src={bgEffectSvga}/>
       <div className="bg"/>
-      <div className="title"/>
-
-      {
-        !!extraCredits
-          ? <div className="vip">
-            <div className="tip">获得</div>
-            <div className="left">{signCredits}积分</div>
-            <div className="right">{extraCredits}积分</div>
-            <div className="img"/>
-          </div>
-          : <div className="normal">
-            <div className="tip">获得{signCredits}积分</div>
-            <div className="img"/>
-          </div>
-      }
-
-      <div className="com_banner"/>
-
+      <div></div>
       <Button className="btn" onClick={this.clickBtn}/>
       <Button className="close" onClick={this.clickClose}/>
     </div>;
   }
 }
 
-export default SignSucPanel;
+export default TipPanel;

src/panels/longImgPop/longImgPop.less

+@import "../../res.less";
+
+.longImgPop {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .mainImg {
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+
+  .back_home {
+    width: 60px;
+    height: 60px;
+    left: 40px;
+    top: 65px;
+    position: fixed;
+    .sparkBg("PrizePage/back.png");
+    // .sparkBg("TaskPop/longBackBtn.png");
+  }
+
+  .countdown {
+    width: 113px;
+    height: 50px;
+    text-align: center;
+    position: fixed;
+    left: 588px;
+    top: 65px;
+    color: #fff;
+    border: 2px solid rgb(255, 255, 255);
+    border-left: none;
+    border-radius: 8px;
+    background-color: rgba(70, 0, 0, 0.302);
+    box-shadow: inset 0.707px 0.707px 2px 0px rgba(225, 253, 255, 0.83);
+    font-size: 31px;
+    text-align: center;
+    line-height: 50px;
+    box-sizing: border-box;
+  }
+
+  .v-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .vjs-tech {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  // .dplayer-controller{
+  //   display: none;
+  // }
+  #my-player {
+    width: 100% !important;
+    // height: 420px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    // pointer-events: none;
+  }
+  .dplayer-setting-loop {
+    display: none !important;
+  }
+}

src/panels/longImgPop/longImgPop.tsx

+"use strict";
+
+import React from "react";
+import { observer } from "mobx-react";
+import "./longImgPop.less";
+import { _throttle } from "@/utils/utils.ts";
+import DPlayer from "dplayer";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+import Taskpop from "../taskpop/taskpop";
+import { Button } from "@grace/ui";
+
+@observer
+class LongImgPop extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isFinish: false,
+      countdownTime: 15, // 单位s
+    };
+    this.timer = "";
+    this.isStart = false;
+    this.stop = false;
+    this.dp = null;
+  }
+
+  componentDidMount() {
+    console.log('this.props?.type',this.props?.type)
+    if (this.props?.type == 2) {
+      this.dp = new DPlayer({
+        container: this.videoNode,
+        video: {
+          url: this.props?.imgUrl,
+        },
+        loop: true,
+      });
+      this.dp.on("play", () => {
+        this.startInterval();
+      });
+      this.dp.on("pause", () => {
+        // this.endCountDown()
+      });
+    }
+    if (this.props?.noCount) {
+      this.setState({
+        isFinish: true,
+      });
+    } else {
+      if(this.props?.type == 2) return
+      this.startInterval();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timer) clearInterval(this.timer);
+  }
+
+  /** 开始倒计时 */
+  startInterval = () => {
+    if (this.timer) clearInterval(this.timer);
+    this.timer = setInterval(async () => {
+      if (this.state.countdownTime === 0) {
+        this.setState({
+          isFinish: true,
+        });
+        clearInterval(this.timer);
+        this.timer = "";
+        // 完成任务
+        const { taskSucCb } = this.props || {};
+        taskSucCb && taskSucCb();
+        return;
+      }
+      this.setState({
+        countdownTime: Math.max(0, this.state.countdownTime - 1),
+      });
+    }, 1000);
+  };
+
+  /** 关闭当前页面 */
+  closeHandle = () => {
+    ModalCtrl.closeModal()
+    if (!this.props.noCount) {
+      ModalCtrl.showModal(Taskpop)
+    }
+  };
+
+  render() {
+    const { imgUrl, type } = this.props || {};
+    const { isFinish, countdownTime } = this.state;
+    return (
+      <div className="longImgPop">
+        {type == 1 && <img src={imgUrl} alt="" className="mainImg" />}
+        {type == 2 && (
+          <div className="v-wrapper">
+            <div ref={(node) => (this.videoNode = node)} id="my-player" className="video-js"></div>
+          </div>
+        )}
+
+        <Button className="back_home" onClick={this.closeHandle}></Button>
+        {!isFinish && <span className="countdown">{`${countdownTime}s`}</span>}
+      </div>
+    );
+  }
+}
+
+export default LongImgPop;

src/panels/taskpop/taskpop.less

@@ -23,10 +23,10 @@
     .sparkBg("TaskPop/icon.png");
   }
   .close {
-    width: 62px;
-    height: 62px;
-    left: 668px;
-    top: -70px;
+    width: 64px;
+    height: 64px;
+    left: 648px;
+    top: -10px;
     position: absolute;
     .sparkBg("TaskPop/close.png");
   }

src/store/task.ts

@@ -9,6 +9,8 @@ import { isWeChat } from "../utils/share";
 import { appJump, getUrlParam, windowJumpUrl } from "../utils/utils";
 import { CHANNEL_PARAMS, TASK_CODE } from "../utils/constants";
 import { Toast } from "@grace/ui";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+import LongImgPop from "@/panels/longImgPop/longImgPop";
 
 const taskStore = makeAutoObservable({
   /** 当前任务 */
@@ -50,17 +52,15 @@ const taskStore = makeAutoObservable({
         break;
       //增员介绍 海报or视频
       case code?.indexOf("browse_zeng_yuan") > -1:
-        // if(code == "browser_zeng_yuan_1"){
-        // modalStore.closePop("Taskpop");
-        // modalStore.pushPop("LongImgPop", {
-        //   imgUrl: jumpUrl,
-        //   taskSucCb: async () => {
-        //     await this.complete(item);
-        //   },
-        //   noCount: false,
-        //   type: code == "browse_zeng_yuan_1" ? 1 : 2, //1海报 2视频
-        // });
-        // }
+        ModalCtrl.closeModal();
+        ModalCtrl.showModal(LongImgPop,{
+          imgUrl: jumpUrl,
+          taskSucCb: async () => {
+            await this.complete(item);
+          },
+          noCount: false,
+          type: code == "browse_zeng_yuan_1" ? 1 : 2, //1海报 2视频
+        })
 
         break;
       // 七秒浏览 or 税优关爱百万任务