zc_saas_h5/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 { mapGetters } from "vuex";
import { tenantId } from "@/common/request.js";
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
    };
  },
  onLoad(option) {
    console.log("--option-", option);
    this.options = option;
  },
  async onShow() {
    // 刷新令牌
    if (this.options.user_account) {
      await this.doRequest();
    }
    if (this.$method.isGoLogin()) {
      // 扫二维码进来的没登录需要跳到登录页，登录后返回
      return;
    }
    // #ifdef H5
    this.options.scene = window.atob(this.options.scene);
    // #endif

    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];
      }
    }
    // 有a字段是标识是扫二维码进来的
    if (this.optObj.a == 1) {
      if (!this.userInfo) {
        this.getInfo();
      } else {
        this.getParam();
      }
    } else {
      this.url =
        decodeURIComponent(decodeURIComponent(this.options.url)) +
        "&tid=" +
        tenantId;
      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 || "";
      this.studyLog(paramObj);
    }
  },
  computed: {
    ...mapGetters(["userInfo", "config"]),
  },
  methods: {
    async doRequest() {
      const res = await this.$api.refreshToken(this.options.user_account);
      if (res.data.code === 200) {
        uni.setStorageSync("token", res.data.data.token);
        this.$store.state.userInfo = null;
        return Promise.resolve();
      } else {
        return Promise.reject("请求错误");
      }
    },
    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;
          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 =
              this.config.hostLive +
              "/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 +
              "&tid=" +
              tenantId;
            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 + "&goodsType=6",
        });
      } 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>