|
|
@@ -0,0 +1,359 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ :title="lang.ssShareSetting"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="600px"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <div class="sc_formUrl" v-show="form.url">
|
|
|
+ <el-input
|
|
|
+ class="sc_fu_input"
|
|
|
+ style="color: black"
|
|
|
+ disabled
|
|
|
+ v-model="form.url"
|
|
|
+ >
|
|
|
+ <template slot="append"
|
|
|
+ ><div class="sc_fu_copyBtn" @click.stop="copyUrl()">
|
|
|
+ {{ lang.ssCopyLink }}
|
|
|
+ </div></template
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!-- <div class="qrcode" ref="qrCodeRef"></div>
|
|
|
+ <el-link class="qrcodeBtn" type="primary" @click="downloadQrCode()">下载二维码</el-link> -->
|
|
|
+ </div>
|
|
|
+ <!-- <span slot="footer" class="shareFooter">
|
|
|
+ <el-button @click="close()">{{ lang.ssCancelBtn }}</el-button>
|
|
|
+ </span> -->
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ loading: false,
|
|
|
+ date: "0",
|
|
|
+ courseId: "",
|
|
|
+ form: {
|
|
|
+ setPassword: false,
|
|
|
+ password: "",
|
|
|
+ setStudentLook: false,
|
|
|
+ studentLook: "1",
|
|
|
+ setComment: false,
|
|
|
+ comment: "1",
|
|
|
+ setDownload: false,
|
|
|
+ download: "1",
|
|
|
+ setHomeWorkUpload: false,
|
|
|
+ url: ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "form.url"(newValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.qrCodeRef.innerHTML = "";
|
|
|
+ // if (!newValue) return;
|
|
|
+ // new QRCode(this.$refs.qrCodeRef, {
|
|
|
+ // text: `https://beta.cloud.cocorobo.cn/#/?shareCourseId=${this.courseId}`, // 需要转换为二维码的内容
|
|
|
+ // width: 100,
|
|
|
+ // height: 100,
|
|
|
+ // colorDark: "#000000",
|
|
|
+ // colorLight: "#ffffff",
|
|
|
+ // correctLevel: QRCode.CorrectLevel.H
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(courseId, classid) {
|
|
|
+ this.courseId = courseId;
|
|
|
+ this.classId = classid;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.form.id = "default";
|
|
|
+ let url = 'https://beta.cloud.cocorobo.cn'
|
|
|
+ if (window.location.href.includes('beta')) {
|
|
|
+ url = url
|
|
|
+ }
|
|
|
+ else if (this.lang.lang === 'cn') {
|
|
|
+ url = 'https://cloud.cocorobo.cn'
|
|
|
+ }
|
|
|
+ else if (this.lang.lang === 'hk') {
|
|
|
+ url = 'https://cloud.cocorobo.hk'
|
|
|
+ }
|
|
|
+ else if (this.lang.lang === 'en') {
|
|
|
+ url = 'https://cloud.cocorobo.com'
|
|
|
+ }
|
|
|
+ this.form.url = `${url}/admin.htm?ccid=${this.courseId}&classid=${this.classId}`;
|
|
|
+ // this.getData();
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.form = {
|
|
|
+ setPassword: false,
|
|
|
+ password: "",
|
|
|
+ setStudentLook: false,
|
|
|
+ studentLook: "1",
|
|
|
+ setComment: false,
|
|
|
+ comment: "1",
|
|
|
+ setDownload: false,
|
|
|
+ download: "1",
|
|
|
+ setHomeWorkUpload: false,
|
|
|
+ url: ""
|
|
|
+ };
|
|
|
+ this.date = "0";
|
|
|
+ this.courseId = "";
|
|
|
+ },
|
|
|
+ generate() {
|
|
|
+ if (!this.courseId) return this.$message.error("错误：无课程ID");
|
|
|
+ if (this.loading) return;
|
|
|
+ this.loading = true;
|
|
|
+ if (this.form.setPassword) {
|
|
|
+ // 判断密码是否没输入
|
|
|
+ if (!this.form.password) {
|
|
|
+ this.loading = false;
|
|
|
+ return this.$message.error("请输入密码");
|
|
|
+ }
|
|
|
+ // 判断密码是否符合规则
|
|
|
+ const reg = /^[A-Za-z0-9]+$/;
|
|
|
+ if (!reg.test(this.form.password)) {
|
|
|
+ this.loading = false;
|
|
|
+ return this.$message.error("密码仅支持数字及英文字母");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.form.url = `https://beta.cloud.cocorobo.cn/#/?shareCourseId=${this.courseId}`;
|
|
|
+ let pram = [
|
|
|
+ {
|
|
|
+ cid: this.courseId,
|
|
|
+ jsonData: JSON.stringify(this.form),
|
|
|
+ date: this.date,
|
|
|
+ type: 1
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addShareCourse", pram)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ this.$message.success("生成成功");
|
|
|
+ } else {
|
|
|
+ this.$message.error("生成失败");
|
|
|
+ }
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("生成失败");
|
|
|
+ this.getData();
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.$message.success("生成成功");
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ resetGenerate() {
|
|
|
+ this.$confirm("此操作将重置分享链接, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ this.loading = true;
|
|
|
+ let pram = [
|
|
|
+ {
|
|
|
+ cid: this.courseId,
|
|
|
+ type: 1
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "delShareCourse", pram)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ } else {
|
|
|
+ this.$message.error("重置失败");
|
|
|
+ }
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("重置失败");
|
|
|
+ this.getData();
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ // this.form = {
|
|
|
+ // setPassword: false,
|
|
|
+ // password: "",
|
|
|
+ // setStudentLook: false,
|
|
|
+ // studentLook: "1",
|
|
|
+ // setComment: false,
|
|
|
+ // comment: "1",
|
|
|
+ // setDownload: false,
|
|
|
+ // download: "1",
|
|
|
+ // setHomeWorkUpload: false,
|
|
|
+ // url: "",
|
|
|
+ // };
|
|
|
+ // this.date = "0";
|
|
|
+ // this.$message.success('重置成功')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ copyUrl() {
|
|
|
+ if (!this.form.url) {
|
|
|
+ return this.$message.info(this.lang.ssPleaseGenerateLink);
|
|
|
+ }
|
|
|
+ const input = document.createElement("input");
|
|
|
+ // 设置 display为none会导致无法复制
|
|
|
+ // input.style.display = "none";
|
|
|
+ // 所以只能用其他方法隐藏
|
|
|
+ input.style.opacity = 0;
|
|
|
+ // 为了不影响布局
|
|
|
+ input.style.position = "fixed";
|
|
|
+ input.style.left = "-100%";
|
|
|
+ input.style.top = "-100%";
|
|
|
+ input.value = this.form.url;
|
|
|
+ document.body.appendChild(input);
|
|
|
+ input.select();
|
|
|
+ const success = document.execCommand("copy");
|
|
|
+ document.body.removeChild(input);
|
|
|
+ if (!success) {
|
|
|
+ return this.$message.error(this.lang.ssCopyFailed);
|
|
|
+ } else {
|
|
|
+ return this.$message.success(this.lang.ssCopySuccess);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.form = {
|
|
|
+ setPassword: false,
|
|
|
+ password: "",
|
|
|
+ setStudentLook: false,
|
|
|
+ studentLook: "1",
|
|
|
+ setComment: false,
|
|
|
+ comment: "1",
|
|
|
+ setDownload: false,
|
|
|
+ download: "1",
|
|
|
+ setHomeWorkUpload: false,
|
|
|
+ url: ""
|
|
|
+ };
|
|
|
+ this.date = "0";
|
|
|
+ this.loading = true;
|
|
|
+ // 这里查询数据库是否有数据
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getShareCourse", {
|
|
|
+ cid: this.courseId,
|
|
|
+ type: 1
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data[0];
|
|
|
+ if (_data.length == 0) return (this.loading = false);
|
|
|
+ let jsonData = _data[0].json ? JSON.parse(_data[0].json) : {};
|
|
|
+ this.form = { ...jsonData, id: _data[0].id };
|
|
|
+ this.date = _data[0].time;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadQrCode(){
|
|
|
+ let canvas = this.$refs.qrCodeRef.getElementsByTagName('canvas')[0];
|
|
|
+ let ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 创建一个新的canvas，大小为原来的两倍
|
|
|
+ var newCanvas = document.createElement("canvas");
|
|
|
+ newCanvas.width = canvas.width * 2;
|
|
|
+ newCanvas.height = canvas.height * 2;
|
|
|
+
|
|
|
+ // 获取新canvas的context，并绘制原来的canvas到新canvas上
|
|
|
+ var newCtx = newCanvas.getContext("2d");
|
|
|
+ newCtx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height);
|
|
|
+
|
|
|
+ // 创建一个链接来下载图片
|
|
|
+ var link = document.createElement("a");
|
|
|
+ link.download = "课程分享二维码.png";
|
|
|
+ link.href = newCanvas.toDataURL();
|
|
|
+ link.click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.shareContent {
|
|
|
+ width: 600px;
|
|
|
+ max-width: 600px;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.shareFooter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_formItemDate {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fd_radio {
|
|
|
+ margin-left: 55px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_formAuthorityItem {
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_formAuthorityItem > span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7f7f7f;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fai_switch {
|
|
|
+ width: 190px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fai_input {
|
|
|
+ width: 120px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fai_radio {
|
|
|
+ width: 120px;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.sc_fu_copyBtn {
|
|
|
+ color: black;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.qrcode {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fu_input /deep/.el-input__inner {
|
|
|
+ color: black !important;
|
|
|
+ cursor: text !important;
|
|
|
+}
|
|
|
+
|
|
|
+.sc_fu_input >>> .el-input__inner {
|
|
|
+ color: black !important;
|
|
|
+ cursor: text !important;
|
|
|
+}
|
|
|
+
|
|
|
+.qrcodeBtn{
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+</style>
|
