dy-admin-manager/src/views/liveClassManager/modals/shareDetail.vue

<template>
  <div>
    <el-form :model="form" ref="form" class="form">
      <el-form-item label="分享对象" v-if="row.os !== 'mobile'">
        <el-radio-group v-model="form.shareTarget" @change="changeShareTarget">
          <el-radio v-model="form.shareTarget" label="1">主讲人</el-radio>
          <el-radio v-model="form.shareTarget" label="2">学员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分享方式" v-if="form.shareTarget == 2">
        <el-radio v-model="form.shareType" label="1">链接分享</el-radio>
        <el-radio v-model="form.shareType" label="2">二维码分享</el-radio>
        <el-radio
          v-model="form.shareType"
          label="3"
          v-if="row.viewMode != 'VISITOR'"
          >群聊分享</el-radio
        >
      </el-form-item>
    </el-form>
    <div>
      <div class="linkWrap" v-if="form.shareType == 1">
        <div class="shareWrap">
          <h2>乐团老师邀请您参与直播课！</h2>
          <h4>{{ row.roomTitle }}</h4>
          <p v-if="form.shareTarget != 1">主讲人：{{ row.speakerName }}</p>
          <p>开播时间：{{ row.liveStartTime }}</p>
          <p>直播内容：{{ row.liveRemark }}</p>
          <!-- 为1是主讲人的 -->
          <template v-if="this.row.os == 'client'">
            <p v-if="form.shareTarget == 1">
              下载地址：https://www.dayaedu.com
            </p>
            <p v-else>直播地址：{{ url }}</p>
            <p v-if="form.shareTarget == 1">
              请在电脑浏览器中打开以上链接进行下载
            </p>
          </template>
          <template v-else>
            <p v-if="form.shareTarget == 1">直播地址：{{ Teacherurl }}</p>
            <p v-else>直播地址：{{ url }}</p>
            <p v-if="form.shareTarget == 1">
              请在电脑浏览器中打开以上链接进行直播
            </p>
          </template>
        </div>
        <div
          class="shareBtn shareText"
          :class="row.liveState == 2 ? 'disabled' : ''"
          data-clipboard-action="copy"
          data-clipboard-target=".shareBtn"
          @click="copyText"
        >
          复制分享内容
        </div>
      </div>
      <div class="codeWrap" v-if="form.shareType == 2">
        <div class="shareWrap">
          <preview :form="row" id="preview" :url="url" />
        </div>
        <div
          class="shareBtn"
          :class="row.liveState == 2 ? 'disabled' : ''"
          @click="shareImage"
        >
          下载图片
        </div>
      </div>
      <div class="groupWrap" v-if="form.shareType == 3">
        <!-- im分享 -->
        <groupChat ref="groupChat" />
        <div
          class="shareBtn"
          :class="row.liveState == 2 ? 'disabled' : ''"
          @click="shareChat"
        >
          发送分享信息
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { toPng } from "html-to-image";
// import copy from "copy-to-clipboard";
import Clipboard from "clipboard";
import preview from "./preview";
import groupChat from "./groupChat";
import { shareGroup } from "../api";
import { vaildUrl } from "@/utils/validate";
export default {
  props: ["row"],
  components: { preview, groupChat },
  data() {
    return {
      form: {
        shareTarget: "1",
        shareType: "1"
      },
      content: "",
      url: "",
      Teacherurl: "",
      clipboard: null
    };
  },
  mounted() {
    // 直播分享地址分为 登录或者不登陆的
    console.log(this.row);
    if (this.row.viewMode == "VISITOR") {
      this.url =
        vaildUrl() +
        `/mlive/?roomUid=${this.row.roomUid}&speakerId=${
          this.row.speakerId
        }&isLogin=false#/live`;
    } else {
      this.url =
        vaildUrl() +
        `/mlive/?roomUid=${this.row.roomUid}&speakerId=${
          this.row.speakerId
        }&isLogin=true#/login`;
      // this.url = vaildUrl() + `/#/liveClassTransfer?roomUid=${this.row.roomUid}`;
    }

    let domain = window.location.origin;
    this.Teacherurl = domain
      ? domain + `/live/?roomUid=${this.row.roomUid}`
      : "https://test.dayaedu.com" + `/live/?roomUid=${this.row.roomUid}`;
    // this.copyText()

    // 判断一下

    if (this.row.os == "mobile") {
      console.log("设置学员观看");
      this.form.shareTarget = "2";
    } else {
      this.form.shareTarget = "1";
    }
  },
  methods: {
    copyText(e) {
      if (this.row.liveState == 2) {
        return;
      }
      let text = "";
      if (this.form.shareTarget == 1) {
        if (this.row.os == "client") {
          text = `乐团老师邀请您参与直播课！\n${this.row.roomTitle ||
            ""}\n开播时间：${this.row.liveStartTime || ""}\n直播内容：${this.row
            .liveRemark ||
            ""}\n下载地址：https://www.dayaedu.com\n请在电脑浏览器中打开以上链接进行下载`;
        } else {
          text = `乐团老师邀请您参与直播课！\n${this.row.roomTitle ||
            ""}\n开播时间：${this.row.liveStartTime || ""}\n直播内容：${this.row
            .liveRemark || ""}\n直播地址：${
            this.Teacherurl
          }\n请在电脑浏览器中打开以上链接进行直播`;
        }
      } else {
        text = `乐团老师邀请您参与直播课！\n${this.row.roomTitle ||
          ""}\n主讲人：${this.row.speakerName}\n开播时间：${this.row
          .liveStartTime || ""}\n直播内容：${this.row.liveRemark ||
          ""}\n直播地址：${this.url}\n`;
      }

      var clipboard = new Clipboard(".shareText", {
        text: function(trigger) {
          // console.log(trigger,text)
          return text;
        }
      });
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        this.$emit("close");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });

      // if (text) {

      //   console.log(clipboard)
      //   clipboard.on("success", function (e) {
      //     console.info("Action:", e.action);
      //     console.info("Text:", e.text);
      //     console.info("Trigger:", e.trigger);
      //     this.$message.success("复制成功");
      //     this.$emit("close");
      //     e.clearSelection();
      //   });
      // }
      // return text
    },

    shareImage() {
      if (this.row.liveState == 2) {
        return;
      }
      var node = document.getElementById("preview");
      toPng(node)
        .then(dataUrl => {
          var img = new Image();
          img.src = dataUrl;
          // 在这里下载
          let link = document.createElement("a");
          let fname = this.row.roomTitle || "分享图片文件.png"; //下载文件的名字
          link.href = dataUrl;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
          this.$emit("close");
        })
        .catch(function(error) {
          console.error("oops, something went wrong!", error);
        });
    },
    async shareChat() {
      if (this.row.liveState == 2) {
        return;
      }
      let checkList = this.$refs.groupChat.checkList;
      if (!(checkList.length > 0)) {
        this.$message.error("请至少选择一个群聊");
        return;
      }
      try {
        let obj = {
          groupIds: checkList.join(","),
          roomUid: this.row.roomUid
        };
        const res = await shareGroup(obj);
        this.$message.success("分享成功");
        this.$emit("close");
      } catch (e) {
        console.log(e);
      }
    },
    changeShareTarget(val) {
      if (val == 2) {
        this.form.shareType = "1";
      }
      if (val == 1) {
        this.form.shareType = "1";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shareWrap {
  background: #f9f9f9;
  padding: 16px;
  h2 {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
    margin-bottom: 18px;
  }
  h4 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
  p {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 30px;
  }
}
.shareBtn {
  height: 48px;
  background: var(--color-primary);
  border-radius: 32px;
  width: 192px;
  color: #fff;
  margin: 24px auto 0;
  text-align: center;
  line-height: 48px;
  font-size: 20px;
  cursor: pointer;

  &.disabled {
    background: #80d3ce;
    border-color: #80d3ce;
    color: #fff;
    cursor: not-allowed;
  }
}
</style>