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

<template>
  <div>
    <el-form :model="form" ref="form" class="form">
      <el-form-item label="分享对象">
        <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">群聊分享</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是主讲人的 -->
          <p v-if="form.shareTarget == 1">直播地址：{{ Teacherurl }}</p>
          <p v-else>直播地址：{{ url }}</p>
          <p v-if="form.shareTarget == 1">
            请在电脑浏览器中打开以上链接进行直播
          </p>
        </div>
        <div
          class="shareBtn shareText"
          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" @click="shareImage">复制分享内容</div>
      </div>
      <div class="groupWrap" v-if="form.shareType == 3">
        <!-- im分享 -->
        <groupChat ref="groupChat" />
        <div class="shareBtn" @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 { vaildStudentUrl } from "@/utils/validate";
export default {
  props: ["row"],
  components: { preview, groupChat },
  data() {
    return {
      form: {
        shareTarget: "1",
        shareType: "1",
      },
      content: "",
      url: "",
      Teacherurl: "",
      clipboard: null,
    };
  },
  mounted() {
    this.url =
      vaildStudentUrl() + `/#/liveClassTransfer?roomUid=${this.row.roomUid}`;
    let domain = window.location.domain;
    this.Teacherurl = domain
      ? domain + `/live/?roomUid=${this.row.roomUid}`
      : "https://test.dayaedu.com/" + `/live/?roomUid=${this.row.roomUid}`;
  },
  methods: {
    copyText(e) {
      let text = "";
      if (this.form.shareTarget == 1) {
        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.liveStartTime || ""}\n直播内容:${
          this.row.liveRemark || ""
        }\n直播地址:${this.url}\n`;
      }

      var clipboard = new Clipboard(".shareText", {
        text: function (trigger) {
          return text;
        },
      });
      clipboard.on("success", (e) => {
        console.log("复制成功");
        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() {
      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() {
      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 == 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;
}
</style>