跳转气泡

app.json

@@ -11,5 +11,17 @@
     "navigationBarTitleText": "",
     "navigationBarTextStyle": "white",
     "backgroundColor": "#E65845"
-  }
+  },
+  "navigateToMiniProgramAppIdList": [
+    "wxd7c2fdc9b64cfb92",
+    "wxf58bd6aff2e0547e",
+    "wxf6fc2a425556b2d9",
+    "wxf9e1cbcfb709e97b",
+    "wxa72dd1b3cb56f532",
+    "wx92753aef11e54d3b",
+    "wx2fbb8e2a718eafd1",
+    "wxcd0798297b047a0c",
+    "wx5fd8df118fd04ca6",
+    "wxefdc5a65ff7766df"
+  ]
 }
\ No newline at end of file

config.js

-// const host = 'miniapp-testapi.wxatech.com';
-const host = 'miniapp-api.wxatech.com';
+const host = 'miniapp-testapi.wxatech.com';
+// const host = 'miniapp-api.wxatech.com';
 const content = 'game-bsdk';
 
 const config = {

pages/index/index.js

@@ -17,6 +17,7 @@ Page({
     progressCanvasContext: '',
     progressCanvasRate: '',
     progressCanvasImage: '',
+    bubbleList: [],
   },
   
   onShow() {
@@ -27,6 +28,7 @@ Page({
       scene: app.globalData.scene
     });
     this.getPageData();
+    this.earnStep();
   },
 
   onReady() {
@@ -503,11 +505,11 @@ Page({
   
   // 活动说明弹窗
   showToast() {
-    let content = '获取步数成功';
     const scene = this.data.scene,
       currentSteps = this.data.currentSteps,
       targetSteps = this.data.targetSteps;
     if (targetSteps) { // 报名比赛了
+      let content = '';
       if (scene === 1048) { // 场景值是二维码进来
         if (currentSteps >= targetSteps) { // 步数达标
           content = '恭喜你今日步数已达标';
@@ -521,12 +523,83 @@ Page({
           content = '提交今日步数成功，去继续行走吧';
         }
       }
+      wx.showToast({
+        title: content,
+        icon: 'none',
+        duration: 2000
+      });
+    }
+  },
+
+  // 赚步数的跳转气泡
+  earnStep() {
+    console.log('earnStep')
+    if (!app.globalData.token) {
+      return setTimeout(() => {
+        this.earnStep();
+      }, 200);
+    }
+    let requestData = {
+      url: config.service.hostUrl + "/v1/user_task",
+      header: {
+        'Authorization': app.globalData.token
+      },
+      success:res => {
+        console.log('earnStep',res)
+        if (res.data.code === 0) {
+          this.setData({
+            bubbleList: res.data.data
+          });
+        }
+      }
+    }
+    if (app.globalData.referrerAppid && app.globalData.scene === 1038) {
+      const bubbleLeaveTime = wx.getStorageSync('bubbleLeaveTime') || 0;
+      const bubbleId = wx.getStorageSync('bubbleId');
+      if (Date.now() - bubbleLeaveTime > 10000 && bubbleId) { // 体验成功,可以加步数
+        requestData.data = {
+          task_id: bubbleId
+        };
+        requestData.method = 'POST';
+        requestData.success = res => {
+          console.log('earnStep',res)
+          if (res.data.code === 0) {
+            wx.showToast({
+              title: '恭喜赚取步数成功',
+              icon: 'none',
+              duration: 2000
+            });
+            this.setData({
+              bubbleList: res.data.data
+            });
+          }
+        };
+      } else {
+        return wx.showToast({
+          title: '体验不达标,获赠步数失败',
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    }
+    wx.request(requestData);
+  },
+
+  // 点击气泡
+  clickBubble(event) {
+    console.log('event',event.currentTarget.dataset.item)
+    const item = event.currentTarget.dataset.item;
+    if (item.task_type === 1) { // 打开小程序
+      wx.navigateToMiniProgram({
+        appId: item.task_content,
+        success: res => {
+          if (res.errMsg === "navigateToMiniProgram:ok") {
+            wx.setStorageSync('bubbleLeaveTime', Date.now());
+            wx.setStorageSync('bubbleId', item.task_id);
+          }
+        }
+      });
     }
-    wx.showToast({
-      title: content,
-      icon: 'none',
-      duration: 2000
-    });
   },
 
   // 暂留==================================================================

pages/index/index.less

@@ -36,6 +36,48 @@ page {
                 margin-right: 6rpx;
             }
         }
+        .bubble-container {
+            width: 110rpx;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: absolute;
+            z-index: 2;
+            &.bubble-fixed0 {
+                left: 40rpx;
+                top: 176rpx;
+            }
+            &.bubble-fixed1 {
+                right: 24rpx;
+                top: 246rpx;
+            }
+            .bg {
+                width: 110rpx;
+                height: 110rpx;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+            .content1 {
+                font-size: 26rpx;
+                line-height: 1;
+                color: #fff;
+                margin-top: 30rpx;
+            }
+            .content2 {
+                font-size: 24rpx;
+                line-height: 1;
+                color: #fff;
+                margin-top: 4rpx;
+            }
+            .title {
+                font-size: 24rpx;
+                line-height: 1;
+                color: #fff;
+                margin-top: 38rpx;
+                white-space: nowrap;
+            }
+        }
         .today-step-info {
             width: 100%;
             height: 330rpx;

pages/index/index.wxml

@@ -2,10 +2,19 @@
 <view class="page-container">
     <view class="today-step-container">
         <!-- <view class="continuity-days">连续打卡5天</view> -->
+        <!-- 说明 -->
         <view class="explain" bindtap="changeActivityExplainShow">
             <image src="/images/index/sy_shuoming.png"></image>
             <view>说明</view>
         </view>
+        <!-- 气泡 -->
+        <view wx:for="{{bubbleList}}" wx:key="{{index}}" class="bubble-container {{'bubble-fixed'+index}}" data-item="{{item}}" catchtap="clickBubble" wx:if="{{index < 2}}">
+            <image class="bg" src="/images/index/bg_bubble.png"></image>
+            <div class="content1">{{item.bonus_step}}</div>
+            <div class="content2">步</div>
+            <div class="title">{{item.task_title}}</div>
+        </view>
+        <!-- 今日步数 -->
         <view class="today-step-info" bindtap="clickStepData">
             <image class="progress-canvas" src="{{progressCanvasImage}}" wx:if="{{activityExplainShow || showGetUserInfo}}"></image>
             <canvas class="progress-canvas" canvas-id="progressCanvas" hidden="{{activityExplainShow || showGetUserInfo}}"></canvas>
@@ -19,6 +28,7 @@
                 <view class="today-progress">{{currentSteps}}/{{targetSteps}}步</view>
             </view>
         </view>
+        <!-- 提交步数按钮 -->
         <view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
     </view>
     <view class="other-step-container" wx:if="{{stepRecordList.length}}">

pages/index/index.wxss

@@ -38,6 +38,48 @@ page {
   height: 30rpx;
   margin-right: 6rpx;
 }
+.page-container .today-step-container .bubble-container {
+  width: 110rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  z-index: 2;
+}
+.page-container .today-step-container .bubble-container.bubble-fixed0 {
+  left: 40rpx;
+  top: 176rpx;
+}
+.page-container .today-step-container .bubble-container.bubble-fixed1 {
+  right: 24rpx;
+  top: 246rpx;
+}
+.page-container .today-step-container .bubble-container .bg {
+  width: 110rpx;
+  height: 110rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.page-container .today-step-container .bubble-container .content1 {
+  font-size: 26rpx;
+  line-height: 1;
+  color: #fff;
+  margin-top: 30rpx;
+}
+.page-container .today-step-container .bubble-container .content2 {
+  font-size: 24rpx;
+  line-height: 1;
+  color: #fff;
+  margin-top: 4rpx;
+}
+.page-container .today-step-container .bubble-container .title {
+  font-size: 24rpx;
+  line-height: 1;
+  color: #fff;
+  margin-top: 38rpx;
+  white-space: nowrap;
+}
 .page-container .today-step-container .today-step-info {
   width: 100%;
   height: 330rpx;