xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/SharePoster/sharePopup/index.js

@@ -0,0 +1,658 @@
+import {
+  getPosterSetting,
+  getPromotion,
+  getPosterList,
+  getPosterDetail,
+  getQrcode
+} from '../../common/api/sharePoster'
+
+import {POSTER_CLS,LOADING_DELAY} from '../libs/constant'
+import { sensorLog }  from "live-mp-tools";
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  properties: {
+    isSharePosterDisplayed: {
+      type: Boolean,
+      value: false,
+      // observer(newVal) {
+      //   console.log(newVal,'showPopupnewVal')
+      //   this.setData({
+      //     showPopup: newVal
+      //   })
+      // }
+    },
+    isShareCircleTipDisplayed: {
+      type: Boolean,
+      value: false
+    },
+    aliveId: {
+      type: String,
+      value: 'l_61921db160b2c37884d51f6e'
+    },
+    appId:{
+      type: String,
+      value: ''
+    },
+    userId:{
+      type: String,
+      value: ''
+    },
+    envName:{
+      type: String,
+      value: ''
+    },
+    unionId: {
+      type: String,
+      value: ''
+    },
+    sensorReportParams: {
+      type: Object,
+      value: () => {},
+    }
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  data: {
+    showPopup: false,
+    title: "推荐语",
+    noticeText: "分享到好友/朋友圈，附上推荐语更有诚意。",
+    recommendWord: "看，这个课程绝对棒，不看你会后悔的，来跟我一起学习吧",
+    shareText: "换一条",
+    posterItem: {},
+    recommendInfo: [],
+    motiveInfo: [],
+    promotionInfo: {},
+    selection: 507,
+    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) {
+      console.log("val: ", val);
+    },
+    isSharePosterDisplayed(val) {
+      this.setData({
+        showPopup:val
+      })
+      if(val){
+        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: {
+    isSinglePoster(data) {
+      return data.posterList.length === 1
+    },
+    // arePosterDetailPropsReady(data) {
+    //   return Object.getOwnPropertyNames(data.posterItem).length && Object.getOwnPropertyNames(data.promotionInfo).length && data.motiveInfo.length
+    // },
+  },
+  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();
+    },
+    selectFirstOnePoster() {
+      if (!this.data.posterList.length) {
+        return
+      }
+      this.setData({
+        selection: this.data.posterList[0].id,
+      })
+      this.getPosterDetail(this.data.posterList[0].id)
+    },
+    openPopup() {
+      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({
+        showPopup: false
+      });
+      this.triggerEvent('changePosterStatus',false)
+    },
+    copyWord() {
+      console.log("复制成功");
+    },
+    changeShareText() {
+      console.log("切换文字成功")
+    },
+    showRecommendPopup() {
+      this.setData({
+        recommendPopupVisible: true
+      })
+    },
+    changePopupVisible(val) {
+      this.setData({
+        recommendPopupVisible: val.detail
+      })
+    },
+    // 防止加载过快导致 loading 闪烁
+    showLoading() {
+      clearTimeout(this.loadingTimer);
+      this.loadingTimer = setTimeout(() => {
+        wx.showLoading({
+            title:"加载中",
+            mask:true
+        })
+      }, LOADING_DELAY);
+    },
+    hideLoading() {
+        clearTimeout(this.loadingTimer);
+        wx.hideLoading();
+    },
+    drawPosterBegin() {
+      this.showLoading()
+      console.log('draw poster begin')
+      console.time('draw poster using')
+    },
+    drawPosterFulfilled(e) {
+      console.log('draw poster fulfilled')
+      this.setData({
+        selectItem: e.detail
+      })
+      console.timeEnd('draw poster using')
+      this.hideLoading()
+    },
+    sharePopupInitialData() {
+      return {
+        resourceId: "l_6194aa0f60b219ba0025f437",
+        productId: "l_6194aa0f60b219ba0025f437",
+        resourceType: 4,
+        paymentType: 2,
+        contentAppId: ""
+      }
+    },
+    // 切换海报预览图改变邀请卡样式
+    changePoster({currentTarget}) {
+      const posterItemData = currentTarget.dataset.item
+      this.setData({
+        selection: posterItemData.id
+      })
+      if (posterItemData.default_poster_mark === POSTER_CLS.STUDY) {
+        this.data.posterStyle = POSTER_CLS.STUDY
+      } else {
+        this.data.posterStyle = ''
+      }
+      // 默认图片不请求接口
+      if (posterItemData.is_default) {
+        if (this.data.posterItem && this.data.posterItem.shop_name) {
+          this.setData({
+            posterItem: {
+              id: posterItemData.id,
+              default_poster_mark: posterItemData.default_poster_mark,
+              shop_name: this.data.posterItem.shop_name,
+              ...posterItemData
+            }
+          })
+        } else {
+          this.getPosterDetail(posterItemData.id);
+        }
+      } else {
+        this.getPosterDetail(posterItemData.id);
+      }
+    },
+    // 获得励志语及分享语信息
+    getPosterSetting() {
+      getPosterSetting({}).then(res => {
+        const {code, data} = res.data
+        if (code === 0) {
+          const settingData = data.recommend_text || []
+          this.setData({
+            recommendInfo: settingData
+          })
+          this.setData({
+            motiveInfo: data.motive_text.filter(item => {
+              return item !== null
+            })
+          })
+        }
+      }).catch((err) => {
+        console.error(err)
+      })
+      // setting_type 3海报励志语 4海报推荐语
+      // API.getPosterSet({}).then((res) => {
+      //     let { code, data } = res;
+      //     if (code === 0) {
+      //         this.shareAddInfo = data || { auther: '', text: '' };
+      //         this.motiveInfo = this.shareAddInfo.motive_text.filter( item => {
+      //             return item !== null; 
+      //         });
+      //     }
+      // }).catch((err)=>{
+      //     console.error(err);
+      // });
+    },
+    // 获取推广员信息
+    getPromotion() {
+      // let params = {
+      //   resource_id: this.data.aliveId || "l_6194aa0f60b219ba0025f437",
+      //   product_id: this.data.aliveId || "l_6194aa0f60b219ba0025f437",
+      //   resource_type: 4,
+      //   payment_type:2,
+      //   content_app_id:''
+      // };
+      const params = {
+        resource_id: this.data.aliveId,
+        product_id: this.data.aliveId,
+        resource_type: 4,
+        payment_type: 2,
+        content_app_id: ''
+      }
+      if(!this.data.aliveId){
+        return
+      }
+      getPromotion(params).then(res => {
+        const {code, data} = res.data
+        if (code === 0) {
+          this.setData({
+            promotionInfo: data
+          })
+          this.getQrcode()
+        }
+      }).catch((error) => {
+        console.error(error)
+      })
+    },
+    // 获取海报列表
+    getPosterList() {
+      // const params = {
+      //   resource_id: this.data.aliveId || "l_6194aa0f60b219ba0025f437",
+      //   resource_type: 4
+      // }
+      // this.showLoading();
+      const params = {
+        resource_id: this.data.aliveId,
+        resource_type: 4
+      }
+      getPosterList(params).then((res) => {
+        const {code, data} = res.data
+        if (code === 0) {
+          const posterListData = data.list || []
+          this.setData({
+            posterList: posterListData
+          })
+          this.selectFirstOnePoster()
+        }
+      }).catch((err) => {
+        console.error(err)
+        this.hideLoading();
+      })
+    },
+    // 获取海报内容
+    getPosterDetail(poster_id) {
+      // const params = {
+      //   resource_id: this.data.aliveId || "l_6194aa0f60b219ba0025f437",
+      //   product_id: this.data.aliveId || "l_6194aa0f60b219ba0025f437",
+      //   resource_type: 4,
+      //   posterId
+      // }
+      const params = {
+        resource_id: this.data.aliveId,
+        product_id: this.data.aliveId,
+        resource_type: 4,
+        poster_id
+      }
+      getPosterDetail(params)
+        .then((res) => {
+          const {code, data} = res.data
+          if (code === 0) {
+            const posterDetailData = data || {}
+            this.setData({
+              posterItem: posterDetailData
+            })
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+    },
+    // 获取小程序二维码
+    getQrcode() {
+      const LIVE_BASE_URL = `https://${this.properties.appId}.h5${this.properties.envName ? `.${this.properties.envName}` : '' }.xiaoeknow.com/v2/course/alive/`;
+      const shareUrl = `${LIVE_BASE_URL}${this.properties.aliveId}?app_id=${this.properties.appId}&alive_mode=1&pro_id=&type=2&share_user_id=${this.properties.userId}&union_id=${this.properties.unionId}&share_scene=1&share_type=5`
+      // console.log(this.data,this.data.promotionInfo,'this.data.promotionInfo')
+      // const originalQrcodeUrl = this.data.promotionInfo.resource_info.qr_code
+      // const suffix = originalQrcodeUrl.includes('?') ? '&' : '?'
+      // const params = {
+      //   h5_url: `${originalQrcodeUrl}${suffix}share_user_id=${this.data.promotionInfo.user_info.user_id}&share_scene=1`
+      // }
+      const params = {
+        h5_url: shareUrl
+      }
+      getQrcode(params).then(res => {
+        const {code, data} = res.data
+        if (code === 0) {
+          this.setData({
+            ["promotionInfo.resource_info.qr_code"]: data
+          })
+        }
+      }).catch((err) => {
+        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/miniprogram_dist/SharePoster/sharePopup/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+      "ShareTextPopup": "../ShareTextPopup/index",
+      "van-popup": "@vant/weapp/popup/index",
+      "van-icon": "@vant/weapp/icon/index",
+      "PosterDom": "../PosterDom/index",
+      "SettingModal": "../components/settingModal/index",
+      "SaveTip": "../components/saveTip/index",
+      "ShareCircleTip": "../components/shareCircleTip/index",
+      "UnauthorizedModal": "../components/unauthorizedModal/index"
+    }
+  }