modify

mock/capsule.ts

@@ -56,11 +56,20 @@ export default [
         "success": true,
         "data": {
           "boolPrize": true, // true-中奖，取prizeInfo信息，false-为中奖，取productInfo
-          "productInfos":
-          {
-            "productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
-            "productText": "介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1"
-          },
+          "productInfos": [
+            {
+              "productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
+              "productText": "介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1"
+            },
+            {
+              "productImg": "//yun.duiba.com.cn/polaris/111.8b981b3fc7d090da2457b4f29b9feec496dc95fd.png",
+              "productText": "介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2"
+            },
+            {
+              "productImg": "//yun.duiba.com.cn/polaris/mgtv.e5f0709a2a4083bc57ce52ff200a50a2e56b2658.png",
+              "productText": "介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3"
+            }
+          ],
           "prizeInfo": {
             "prizeName": "reprehenderit tempor non",
             "prizeImg": "Duis veniam ipsum voluptate eiusmod"

pnpm-lock.yaml

@@ -4177,7 +4177,7 @@ packages:
     resolution: {integrity: sha1-ZtE2jae9+SHrnZW9GpIp5/IaQ+4=}
 
   sa-sdk-javascript@1.27.4:
-    resolution: {integrity: sha512-w0Kv237KHDjH1amgchECzzC9c1aruC0LMgqgYC/ISTfijRroJAEQrVPDvHJqJpD8uD1+spN7q6hgfT3x+EncmQ==, tarball: http://npm.dui88.com:80/sa-sdk-javascript/-/sa-sdk-javascript-1.27.4.tgz}
+    resolution: {integrity: sha512-w0Kv237KHDjH1amgchECzzC9c1aruC0LMgqgYC/ISTfijRroJAEQrVPDvHJqJpD8uD1+spN7q6hgfT3x+EncmQ==}
 
   safe-buffer@5.1.2:
     resolution: {integrity: sha1-mR7GnSluAxN0fVm9/St0XDX4go0=}
@@ -4460,7 +4460,7 @@ packages:
       typescript: '>=4.8.4'
 
   tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==, tarball: http://npm.dui88.com:80/tslib/-/tslib-2.8.1.tgz}
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tweedle.js@2.1.0:
     resolution: {integrity: sha512-0ReQgVjepoZkE6t0upWNgCRbplHkQJQYk1LStXugwSR728GLFmGDRuaQJlxeC/iBlxud6+P1RdODjaO25vHAqw==}

src/pages/CapsulePage/CapsulePage.jsx

@@ -18,6 +18,8 @@ import Homepage from "../HomePage/HomePage.tsx";
 import machineSvga from "../../assets/svga/1输出扭蛋机常态.svga";
 import normalSvga from "../../assets/svga/2输出待机啊.svga";
 import dynamicSvga from "../../assets/svga/3输出出奖啊.svga";
+import output1Svga from "../../assets/svga/4中奖扭蛋.svga";
+import output2Svga from "../../assets/svga/5中奖弹窗.svga";
 
 // import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
 
@@ -28,6 +30,7 @@ class Capsulepage extends React.Component {
     this.state = {
       drawInfo: {},
       btnDynamic: false, // 抽奖机是否动态中
+      btnOutput: false, // 开扭蛋效果是否启动
     };
     this.btnStarting = false; // 抽奖机是否启动
     // this.turntableRef = null; // 大转盘
@@ -97,9 +100,8 @@ class Capsulepage extends React.Component {
       this.setState({ btnDynamic: true });
       // this.drawResultInfo = data || {};
 
-      const { boolPrzie, prizeInfo = {}, productInfo = {} } = data || {};
+      const { boolPrzie, prizeInfo = {}, productInfo = [] } = data || {};
       const { prizeName = "", prizeImg = "" } = prizeInfo || {};
-      const { productImg = "", productText = "" } = productInfo || {};
 
       // const index = prizeVOs?.findIndex(
       //   (item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
@@ -109,18 +111,10 @@ class Capsulepage extends React.Component {
       // 抽奖机停止转动
       setTimeout(() => {
         this.setState({ btnDynamic: false });
+        this.btnOutput = true;
         this.stopOkHandle();
       }, 2000);
       // this.turntableRef.braking(index);
-
-      // 此时判断是否中奖 true-中奖，取prizeInfo信息，false-为中奖，取productInfo
-      if (boolPrzie) {
-        // 中奖
-        ModalCtrl.pushPop("Pop_winprize", { prizeName, prizeImg });
-      } else {
-        // 没中奖
-        ModalCtrl.pushPop("NoPrizeCard", { productImg, productText });
-      }
     } else {
       this.btnStarting = false;
       this.getDrawInfo();
@@ -130,12 +124,19 @@ class Capsulepage extends React.Component {
   // 抽奖停止处理
   stopOkHandle = () => {
     this.btnStarting = false;
-
-    if (!this.drawResultInfo?.prizeId) {
-      // modalStore.pushPop("NoPrizeCard", { data: this.drawResultInfo })
+    setTimeout(() => {
+      this.setState({ btnOutput: false });
+    }, 2000);
+
+    // 此时判断是否中奖 true-中奖，取prizeInfo信息，false-为中奖，取productInfo
+    if (boolPrzie) {
+      // 中奖
+      ModalCtrl.pushPop("Pop_winprize", { prizeName, prizeImg });
     } else {
-      // modalStore.pushPop("Pop_winprize", { data: this.drawResultInfo })
+      // 没中奖
+      ModalCtrl.pushPop("NoPrizeCard", productInfo || []);
     }
+
     this.getDrawInfo();
   };
 
@@ -161,7 +162,7 @@ class Capsulepage extends React.Component {
   });
 
   render() {
-    const { btnDynamic } = this.state;
+    const { btnDynamic, btnOutput } = this.state;
     const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
     return (
       <div className="capsule modal_center">
@@ -179,6 +180,12 @@ class Capsulepage extends React.Component {
           <SvgaPlayer className="normal" src={normalSvga} />
         )}
         <SvgaPlayer className="machine" src={machineSvga} />
+        {btnOutput && (
+          <>
+            <SvgaPlayer className="output1" src={output1Svga} />
+            <SvgaPlayer className="output2" src={output2Svga} />
+          </>
+        )}
         {/* <div className="turantable">
           <CircleTurntable
             className="turantable_box"

src/pages/CapsulePage/CapsulePage.less

@@ -57,9 +57,20 @@
     left: 114px;
   }
 
-  .fade-out {
-    transition: opacity 0.3s ease-out;
-    opacity: 0;
+  .output1 {
+    position: absolute;
+    width: 750px;
+    height: 830px;
+    top: 427px;
+    // left: 114px;
+  }
+
+  .output2 {
+    position: absolute;
+    width: 750px;
+    height: 830px;
+    top: 427px;
+    // left: 114px;
   }
 
   // .task_btn {

src/utils/sensors.js

-import sensors from "sa-sdk-javascript/dist/web/sensorsdata.es6";
-import SMEncryption from "sa-sdk-javascript/dist/web/plugin/sm-encryption/index.es6";
+import sensors from "sa-sdk-javascript/dist/web/sensorsdata.es6.js";
+import SMEncryption from "sa-sdk-javascript/dist/web/plugin/sm-encryption/index.es6.js";
 import { extranceName, platFormName, platformType } from "./constants.ts";
 import { GetCurrSkinId } from "./utils";
 import store from "@/store/store.ts";