xiaoe_mp_npm 0.1.4 → 0.1.7

package/src/SharePoster/sharePopup/index.js

@@ -7,6 +7,7 @@ import {
 } from '../../common/api/sharePoster'
 
 import {POSTER_CLS,LOADING_DELAY} from '../libs/constant'
+import { sensorLog }  from "live-mp-tools";
 
 const computedBehavior = require('miniprogram-computed').behavior
 
@@ -23,6 +24,10 @@ Component({
       //   })
       // }
     },
+    isShareCircleTipDisplayed: {
+      type: Boolean,
+      value: false
+    },
     aliveId: {
       type: String,
       value: 'l_61921db160b2c37884d51f6e'
@@ -42,6 +47,10 @@ Component({
     unionId: {
       type: String,
       value: ''
+    },
+    sensorReportParams: {
+      type: Object,
+      value: () => {},
     }
   },
   options: {
@@ -61,6 +70,19 @@ Component({
     recommendPopupVisible: false,
     loadingTimer: 0, // loading的定时器。场景：加载太快时不必展示loading
     posterList: [],
+    isAndroid: false, // 是否是安卓手机
+    isShowSettingModal: false, // 拒绝授权后弹窗
+    isShowUnauthorizedModal: false, // ios微信未授权相册弹窗
+    isShowSaveTip: false,
+    firstContent: '',
+    secondContent: '',
+    isShowShareCircleTip: false,
+    selectItem: null, // 选中的海报
+    isClickShareCircle: false, // 判断是点击分享到朋友圈还是保存海报弹起的授权窗
+    forwardFriend: 0,
+    shareMoments: 0,
+    savePoster: 0,
+    roomInfo: {}
   },
   observers: {
     posterItem(val) {
@@ -74,12 +96,31 @@ Component({
         this.selectFirstOnePoster();
       }
     },
+    // 同步分享提示隐藏
+    isShareCircleTipDisplayed(val) {
+      if(!val) {
+        this.setData({
+          isShowShareCircleTip: val
+        })
+      }
+    },
   },
   lifetimes: {
     attached() {
+      let params = {
+        appId: this.properties.appId,
+        userId: this.properties.userId,
+        aliveId: this.properties.aliveId,
+        unionId: this.properties.unionId,
+      }
+      this.setData({
+         roomInfo: params
+      })
+      console.log('roomInfo11111111', params)
       // 在组件实例进入页面节点树时执行
       // this.getPosterList()
       this.initData()
+      this.checkIsAndroid()
     },
   },
   computed: {
@@ -91,6 +132,82 @@ Component({
     // },
   },
   methods: {
+    sharePopupSensors( buttonValue , eventName='click_butt' ) {
+      try{
+        let sersorsParam = {
+          page_id: 'e_alive#mini#first#alive_room',
+          l_program: '鹅直播',
+          page_name: '直播间页面',
+          page_path: '鹅直播#小程序#首页#直播间页面',
+          app_id: this.properties.appId,
+          c_user_id: this.properties.userId,
+          union_id:this.properties.unionId,
+          resource_id: this.properties.aliveId,
+          current_role:this.properties.sensorReportParams.current_role,
+          type:this.properties.sensorReportParams.type,
+          cmm1:this.properties.sensorReportParams.alive_type,
+          cmm2:this.properties.sensorReportParams.version_type,
+          comm2:this.properties.sensorReportParams.pay_type,
+          cmm3:'鹅直播增长',
+          page_button: buttonValue
+        }
+        sensorLog.sensors.track(eventName,{
+            ...sersorsParam
+        })
+      }catch(e){
+          console.log('埋点',e)
+      }
+    },
+    clickForwardFriend() {
+      // 转发给朋友时关闭弹窗
+      this.setData({
+        showPopup: false
+      })
+      this.triggerEvent('changePosterStatus',false)
+      try{
+        this.sharePopupSensors("转发给朋友")
+        console.log("当前点击了 转发给朋友" , Number(++this.data.forwardFriend) ,"次");
+      }catch(e){
+        console.log("埋点", e)
+      }
+     
+    },
+    clickShareMoments() {
+      try{
+        this.sharePopupSensors("分享到朋友圈")
+        console.log("当前点击了 分享到朋友圈" , Number(++this.data.shareMoments) ,"次");
+      }catch(e) {
+        console.log("埋点", e)
+      }
+      
+    },
+    clickSavePoster() {
+      try{
+        this.sharePopupSensors("保存海报")
+        console.log("当前点击了 保存海报" , Number(++this.data.savePoster) ,"次");
+      }catch(e) {
+        console.log("埋点", e)
+      }      
+    },
+    checkIsAndroid(){
+      const that = this
+      wx.getSystemInfo({
+        success (res) {
+          console.log('分享到朋友圈', res)
+          if(res.system.includes('iOS')) {
+            console.log('是ios系统')
+            that.setData({
+              isAndroid: false
+            })
+          } else if(res.system.includes('Android')){
+            console.log('是安卓系统')
+            that.setData({
+              isAndroid: true
+            })
+          }
+        }
+      })
+    },
     async initData() {
       await Promise.all([this.getPromotion(), this.getPosterSetting(), this.getPosterList()]);
       // await this.getQrcode();
@@ -100,14 +217,29 @@ Component({
         return
       }
       this.setData({
-        selection: this.data.posterList[0].id
+        selection: this.data.posterList[0].id,
       })
       this.getPosterDetail(this.data.posterList[0].id)
     },
     openPopup() {
-      this.setData({
-        showPopup: true
-      })
+      if(this.data.isAndroid) {
+        this.setData({
+          showPopup: true
+        })
+      } else {
+        this.setData({
+          firstContent: '苹果手机暂不支持将小程序分享到朋友圈',
+          secondContent: '请长按海报保存并分享',
+          isShowSaveTip: true,
+          showPopup: true
+        }, ()=>{
+          setTimeout(()=>{
+            this.setData({
+              isShowSaveTip: false
+            })
+          }, 1000)
+        })
+      }
     },
     onClose() {
       this.setData({
@@ -150,8 +282,11 @@ Component({
       console.log('draw poster begin')
       console.time('draw poster using')
     },
-    drawPosterFulfilled() {
+    drawPosterFulfilled(e) {
       console.log('draw poster fulfilled')
+      this.setData({
+        selectItem: e.detail
+      })
       console.timeEnd('draw poster using')
       this.hideLoading()
     },
@@ -332,5 +467,192 @@ Component({
         console.error(err)
       })
     },
+
+    shareCircle(){
+      if(this.data.isAndroid) {
+        // 安卓展示分享tip 关闭弹出组件
+        this.setData({
+          isShowShareCircleTip: true,
+          showPopup: false
+        })
+        this.triggerEvent('changePosterStatus',false)
+        this.triggerEvent('showShareTip', true)
+      this.clickShareMoments();
+      } else {
+        this.setData({
+          isClickShareCircle: true
+        })
+        this.savePhoto('share')
+      }
+    },
+    // 关闭弹窗 点击分享状态重置
+    closeModal(){
+      this.setData({
+        isShowSettingModal: false,
+        isClickShareCircle: false
+      })
+    },
+    closeUnauthorizedModal(){
+      this.setData({
+        isShowUnauthorizedModal: false
+      })
+    },
+    closeShareTip(){
+      this.setData({
+        isShowShareCircleTip: false
+      })
+      this.triggerEvent('showShareTip', false)
+    },
+    confirmModal(){
+      const that = this
+      wx.openSetting({
+        success(settingData) {
+          if (settingData.authSetting['scope.writePhotosAlbum']) {
+            that.data.isClickShareCircle ? that.canSavePhoto('share') : that.canSavePhoto()
+          } else {
+            wx.showToast({
+              title: '保存失败',
+              icon: 'error'
+            })
+          }
+        },
+        fail(failData) {
+          console.log("failData", failData)
+          that.setData({
+            isClickShareCircle: false
+          })
+        },
+        complete(finishData) {
+          console.log("finishData", finishData)
+        }
+      })
+      this.setData({
+        isShowSettingModal: false
+      })
+    },
+    savePhoto(type){
+      if( type !== 'share' ){
+        this.clickSavePoster();
+      }else{
+        this.clickShareMoments();
+      }
+      wx.showLoading({
+        title: '加载中'
+      })
+      var self =this
+      // 如果是ios 需要先判断微信相册权限
+      if(!this.data.isAndroid) {
+        // 判断是否支持该api
+        if (wx.getAppAuthorizeSetting) {
+          const appAuthorizeSetting = wx.getAppAuthorizeSetting()
+          if(appAuthorizeSetting.albumAuthorized === 'denied') {
+            // toast提示
+            this.setData({
+              isShowUnauthorizedModal: true
+            })
+            wx.hideLoading()
+            return
+          }
+        } else {
+          wx.hideLoading()
+          // 提示升级微信
+          this.setData({
+            firstContent: '当前微信版本版本过低，请升级后再使用',
+            secondContent: '可先长按保存海报再进行分享～',
+            isShowSaveTip: true,
+          }, ()=>{
+            setTimeout(()=>{
+              this.setData({
+                isShowSaveTip: false
+              })
+            }, 2000)
+          })
+        }
+      }
+      wx.getSetting({
+        success(res) {
+          wx.hideLoading()
+          console.log(res, res.authSetting['scope.writePhotosAlbum'])
+          //判断是否已授权
+          if (!res.authSetting['scope.writePhotosAlbum']) {
+            wx.authorize({
+              scope: 'scope.writePhotosAlbum',
+              success() {
+                //授权成功
+                self.canSavePhoto(type)
+              },
+              fail() {
+                //未授权
+                self.setData({
+                  isShowSettingModal: true
+                })
+              }
+            })
+          }else{
+            //已授权直接保存图片
+            self.canSavePhoto(type)
+          }
+        },
+      })
+    },
+    // type: save 点击保存海报 提示有区别 
+    canSavePhoto(type){
+      let imgSrc = this.data.selectItem
+      if(!imgSrc) {
+        wx.showToast({
+          title: '海报未加载完成，请重试'
+        })
+        wx.hideLoading()
+        return
+      }
+      const that = this
+      //图片保存到本地
+      wx.saveImageToPhotosAlbum({
+        filePath: imgSrc,
+        success(data) {
+          if(type === 'share') {
+            that.setData({
+              firstContent: '海报已保存至相册',
+              secondContent: '快去朋友圈分享吧～',
+              isShowSaveTip: true,
+              showPopup: false
+            }, ()=>{
+              that.triggerEvent('changePosterStatus',false)
+              setTimeout(()=>{
+                that.setData({
+                  isShowSaveTip: false
+                })
+              }, 1000)
+            })
+          } else {
+            that.triggerEvent('changePosterStatus',false)
+            that.setData({
+              showPopup: false
+            })
+            wx.showToast({
+              title: '保存成功',
+              icon: 'success'
+            })
+          }
+        },
+        fail(err) {
+          console.log('保存失败');
+          console.log(err)
+          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
+            //在这种逻辑下这种错误不会出现
+            console.log("未授权")
+          } else if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
+            //用户点击了取消
+            console.log('用户点击了取消')
+          }
+        },
+        complete(res) {
+          //结束回调 需要清空判断点击分享按钮的状态
+          that.setData({
+            isClickShareCircle: false
+          })
+        }
+      })
+    },
   }
 })

package/src/SharePoster/sharePopup/index.json

@@ -4,6 +4,10 @@
       "ShareTextPopup": "../ShareTextPopup/index",
       "van-popup": "@vant/weapp/popup/index",
       "van-icon": "@vant/weapp/icon/index",
-      "PosterDom": "../PosterDom/index"
+      "PosterDom": "../PosterDom/index",
+      "SettingModal": "../components/settingModal/index",
+      "SaveTip": "../components/saveTip/index",
+      "ShareCircleTip": "../components/shareCircleTip/index",
+      "UnauthorizedModal": "../components/unauthorizedModal/index"
     }
   }

package/src/SharePoster/sharePopup/index.wxml

@@ -8,13 +8,16 @@
         promotionInfo="{{ promotionInfo }}"
         resBaseInfo="{{ resBaseInfo }}"
         isSinglePoster="{{ isSinglePoster }}"
+        sensorReportParams="{{ sensorReportParams }}"
+        roomInfo="{{ roomInfo }}"
         bind:drawPosterBegin="drawPosterBegin"
         bind:drawPosterFulfilled="drawPosterFulfilled"></PosterDom>
-        <view class="share-content {{isSinglePoster? 'single-poster': '' }}">
+        <view class="share-content">
             <view class="header-close">
-                <van-icon name="cross" bindtap="onClose" />
+                <image bindtap="onClose" src="https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ky1bv4le0k5v.png">
+                </image>
             </view>
-            <view wx:if="{{!isSinglePoster}}" class="selector">
+            <view class="selector">
                 <scroll-view
                     class="poster-list"
                     scroll-x="{{true}}" bindscroll="scroll">
@@ -36,7 +39,6 @@
                     </view>
                 </scroll-view>
                 <view
-                    wx:if="{{!isSinglePoster}}"
                     class="recommend-btn"
                     bindtap="showRecommendPopup">
                     <image
@@ -48,38 +50,45 @@
                 </view>
             </view>
             <view class="share-methods" >
-                <view class="operator">
-                    <button 
+                <view class="operator" catchtap="clickForwardFriend">
+                    <button
+                    
                     class="shareBtn" 
-                    open-type="share"></button>
+                    open-type="share">
+                        <view class="operator-btn">
+                            <image
+                                src="https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ky1acpth0n87.png"
+                                class="wechat">
+                            </image>
+                        </view>
+                    </button>
+                    <div class="desc">转发给朋友</div>
+                </view>
+                <view class="operator" catchtap="shareCircle">
                     <view class="operator-btn">
-                    <image
-                        src="../../common/assets/images/wechat.svg"
-                        class="wechat">
-                    </image>
+                        <image
+                            src="https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ky1acpth049r.png"
+                            class="wechat">
+                        </image>
                     </view>
-                    <span class="desc">
-                    微信
-                    </span>
+                    <div class="desc">分享到朋友圈</div>
                 </view>
-                <view
-                    wx:if="{{isSinglePoster}}"
-                    class="operator">
-                    <view
-                    class="operator-btn"
-                    bindtap="showRecommendPopup">
-                    <image
-                        src="../../common/assets/images/recommend_with_bg.png"
-                        class="recommend">
-                    </image>
+                <view class="operator" catchtap="savePhoto">
+                    <view class="operator-btn">
+                        <image
+                            src="https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ky1acpt20kmb.png"
+                            class="wechat">
+                        </image>
                     </view>
-                    <span class="word">
-                    推荐语
-                    </span>
+                    <div class="desc">保存海报</div>
                 </view>
             </view>
         </view>
     </van-popup>
-  <ShareTextPopup recommendInfo="{{recommendInfo}}" recommendPopupVisible="{{recommendPopupVisible}}"  wx:if="{{recommendInfo.length!=0}}" bind:changePopupVisible="changePopupVisible"></ShareTextPopup>
+    <SaveTip wx:if="{{isShowSaveTip}}" firstContent="{{firstContent}}" secondContent="{{secondContent}}"/>
+    <SettingModal wx:if="{{isShowSettingModal}}" bindclose="closeModal" bindconfirm="confirmModal"/>
+    <UnauthorizedModal wx:if="{{isShowUnauthorizedModal}}" bindclose="closeUnauthorizedModal"/>
+    <ShareCircleTip wx:if="{{isShowShareCircleTip}}" bindclose="closeShareTip"/>
+    <ShareTextPopup recommendInfo="{{recommendInfo}}" recommendPopupVisible="{{recommendPopupVisible}}"  wx:if="{{recommendInfo.length!=0}}" bind:changePopupVisible="changePopupVisible"></ShareTextPopup>
 </view>
 

package/src/SharePoster/sharePopup/index.wxss

@@ -9,13 +9,13 @@
 }
 .popUp .share-content {
   box-sizing: border-box;
-  height: 426rpx;
+  height: 480rpx;
   width: 100%;
   background-color: #ffffff;
   border-radius: 16rpx;
 }
 .popUp .share-content .header-close {
-  height: 76rpx;
+  height: 72rpx;
   width: 100%;
   background-color: #ffffff;
   display: flex;
@@ -23,6 +23,10 @@
   justify-content: flex-end;
   align-items: center;
 }
+.popUp .share-content .header-close image {
+  width: 32rpx;
+  height: 32rpx;
+}
 .popUp .share-content .selector {
   display: flex;
   align-items: flex-end;
@@ -80,6 +84,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding-left: 10rpx;
 }
 .popUp .share-content .selector .recommend-btn .recommend {
   width: 48rpx;
@@ -92,38 +97,43 @@
 }
 .popUp .share-content .share-methods {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-around;
 }
 .popUp .share-content .share-methods .operator {
-  padding-top: 32rpx;
-  display: inline-flex;
+  padding-top: 36rpx;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-size: 24rpx;
 }
 .popUp .share-content .share-methods .operator .shareBtn {
-  width: 150rpx;
-  height: 96rpx;
-  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: auto;
+  /* position: absolute; */
   border-color: transparent;
   background-color: transparent;
+  line-height: 0;
 }
 .popUp .share-content .share-methods .operator .shareBtn::after {
   border: none;
 }
 .popUp .share-content .share-methods .operator .operator-btn {
+  color: #333333;
+  /* margin-left: 16rpx; */
   width: 96rpx;
   height: 96rpx;
 }
 .popUp .share-content .share-methods .operator .operator-btn .wechat,
 .popUp .share-content .share-methods .operator .operator-btn .recommend {
-  width: 100%;
-  height: 100%;
+  width: 96rpx;
+  height: 96rpx;
 }
 .popUp .share-content .share-methods .operator .desc,
 .popUp .share-content .share-methods .operator .word {
-  font-size: 24rpx;
-  color: #333333;
-  margin-left: 16rpx;
+  margin-top: 12rpx;
 }
 .popUp .share-content .share-methods .operator.vertical {
   flex-direction: column;
@@ -177,3 +187,7 @@
   font-weight: 500;
   font-size: 28rpx;
 }
+.van-toast {
+  width: 568rpx;
+  margin: 0 auto;
+}