saas_miniprogram/pages/webview/index.vue

<template>
  <view class="webview">
    <template v-if="url">
      <web-view :webview-styles="webviewStyles" :src="url"></web-view>
    </template>
    
    <u-popup v-model="showAuth" mode="center" border-radius="30">
      <view class="popCentent">
        <view class="tips">您还没有开通直播课程，无法观看</view>
        <view class="btns" @click="toAuth()">立即开通</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { WEBVIEW_URL } from '@/common/request.js'
import { mapGetters } from 'vuex'
export default {
  components: {},
  data() {
    return {
      url: "",
      webviewStyles: {
        progress: {
          color: "#007AFF",
        },
      },
      options: {},
      optObj: {},
      goodsId: 0,
      chapterId: 0,
      moduleId: 0,
      courseId: 0,
      sectionId: 0,
      orderGoodsId: 0,
      paramObj: {},
      showAuth: false,
      checkStatus: 0, // 0没有权限，1有权限
      goodsStatus: 0, // 0未上架，1上架
      sectionType: 2, // 2直播
      vid: '', // 回放id
    };
  },
  // onShareAppMessage() {
  //   let item = this.paramObj
  //   let moduleId = item.moduleId || 0
  //   let chapterId = item.chapterId || 0
  //   let sectionId = item.sectionId
  //   let uuid = new Date().valueOf() + ""
  //   // buyCourse 是否购买课程：1是 0否
  //   let encode = encodeURIComponent(WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='
  //   +item.channelId+'&gradeId='+0+'&courseId='+item.courseId+'&goodsId='+item.goodsId+'&orderGoodsId='+item.orderGoodsId+'&sectionId='+sectionId+'&chapterId='
  //   +chapterId+'&moduleId='+moduleId+'&buyCourse='+item.buyCourse+'&ident='+uuid+'&sectionType='+this.sectionType+'&vid='+this.vid)
	// 	return {
	// 		title: '直播',
	// 		path: `/pages/webview/index?url=` + encode
	// 	};
	// },
  onLoad(option) {
    console.log('--option-', option)
    this.options = option
  },
  onShow() {
    console.log('userInfo:', this.userInfo, this.$method.isGoLogin())
    if (this.$method.isGoLogin()) { // 扫二维码进来的没登录需要跳到登录页，登录后返回
      return;
    }
    if (this.options.scene) {
      this.optObj = {}
      let arrs = decodeURIComponent(this.options.scene).split('&')
      for (let i = 0; i < arrs.length; i++) {
          this.optObj[arrs[i].split('=')[0]] = arrs[i].split('=')[1]
      }
      console.log('this.optObj', this.optObj)
    }
    // 有a字段是标识是扫二维码进来的
    if (this.optObj.a == 1) {
      if (!this.userInfo) {
        console.log('没有userInfo')
        this.getInfo()
      } else {
        console.log('有userInfo')
        this.getParam()
      }
      
    } else {
      this.url = decodeURIComponent(decodeURIComponent(this.options.url))
      console.log('小程序进来的url:', this.url)
      let index = this.url.indexOf('?')
      let paramArr = this.url.slice(index + 1).split('&')
      let paramObj = {}
      for (let i = 0; i < paramArr.length; i++) {
          paramObj[paramArr[i].split('=')[0]] = paramArr[i].split('=')[1]
      }
      this.paramObj = paramObj
      this.sectionType = this.paramObj.sectionType || 2 // 默认直播，回放的加了sectionType=3
      this.vid = this.paramObj.vid || ''
      console.log('paramObj', paramObj)
      this.studyLog(paramObj)
    }
  },
  computed: {
		...mapGetters(['userInfo']),
	},
  methods: {
    getInfo() {
			// /app/user/getInfo 登录用户信息 // fromPlat来源平台 1小程序 2PC网站
			this.$api.getInfo({ fromPlat: 1 }).then(res => {
				if(res.data.code == 200){
					this.$store.state.userInfo = res.data.data
          console.log('this.userInfo', this.userInfo)
          this.getParam()
				}
			})
		},
    // 获取直播间跳转参数的接口
    getParam() {
      const { cid, gid, sid} = this.optObj
      this.$http({
        url: '/course/check/watch/per',
        method: 'get',
        data: {
          courseId: cid, //课程ID	
          goodsId: gid, // 商品id
          sectionId: sid, // 节id
        },
      }).then((res) => {
        if (res.data.code == 200) {
          let item = res.data.data
          this.paramObj = item
          this.goodsId = item.goodsId
          this.goodsStatus = item.goodsStatus
          this.sectionType = item.sectionType
          this.vid = item.recordingUrl || ''
          if (item.checkStatus == 1) { // 有权限
            let moduleId = item.moduleId || 0
            let chapterId = item.chapterId || 0
            let sectionId = item.sectionId
            
            let uuid = new Date().valueOf() + ""
            // buyCourse 是否购买课程：1是 0否
            this.url = WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='
            +item.channelId+'&gradeId='+0+'&courseId='+item.courseId+'&goodsId='+item.goodsId+'&orderGoodsId='+item.orderGoodsId+'&sectionId='+sectionId
            +'&chapterId='+chapterId+'&moduleId='+moduleId+'&buyCourse='+item.buyCourse+'&ident='+uuid+'&sectionType='+ this.sectionType+'&vid='+this.vid
            console.log('url:', this.url)
            this.studyLog(item)
          } else {
            // 没有权限
            this.url = ''
            this.showAuth = true
          }
          
        } else {
          this.$u.toast(res.data.msg)
          uni.switchTab({
            url:'/pages/index/index'
          })
        }
      })

    },
    // 新增用户视频学习日志
    studyLog(item) {
      this.$http({
        url: '/user/study/log',
        method: 'post',
        data: {
          goodsId: item.goodsId,
          courseId: item.courseId,
					moduleId: item.moduleId || 0,
					chapterId: item.chapterId || 0,
          sectionId: item.sectionId || 0,
          fromPlat: 1, //来源平台 1小程序 2PC网站
          goodsType: 6, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: item.orderGoodsId,
        }
      }).then((res) => {
        console.log('直播的用户学习日志:', res)
      })
    },
    toAuth() {
      if (this.goodsStatus == 1) { //已上架
        uni.navigateTo({
          url:'/pages3/course/detail?id='+this.goodsId
        })
      } else {
        uni.switchTab({
          url:'/pages/index/index'
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popCentent {
  width: 600rpx;
  height: 300rpx;
  padding: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .btns {
    width: 500rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #3577E8;
    color: #fff;
    font-size: 24rpx;
    border-radius: 20rpx;
  }
}
</style>