|
|
@@ -0,0 +1,477 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ title="分享设置"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="600px"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <!-- <div class="shareContent">
|
|
|
+ <div class="sc_formItemDate">
|
|
|
+ <div>有效期：</div>
|
|
|
+ <el-radio
|
|
|
+ class="sc_fd_radio"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="date"
|
|
|
+ label="7"
|
|
|
+ >7天</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ class="sc_fd_radio"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="date"
|
|
|
+ label="31"
|
|
|
+ >31天</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ class="sc_fd_radio"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="date"
|
|
|
+ label="0"
|
|
|
+ >永久有效</el-radio
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sc_formAuthorityItem">
|
|
|
+ <el-switch
|
|
|
+ class="sc_fai_switch"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="form.setPassword"
|
|
|
+ active-text="密码设置"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <el-input
|
|
|
+ class="sc_fai_input"
|
|
|
+ :disabled="!form.setPassword || form.id ? true : false"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ v-model="form.password"
|
|
|
+ ></el-input>
|
|
|
+ <span>仅支持数字及英文字母</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sc_formAuthorityItem">
|
|
|
+ <el-switch
|
|
|
+ class="sc_fai_switch"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="form.setStudentLook"
|
|
|
+ active-text="查看学生作业权限"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setStudentLook || form.id ? true : false"
|
|
|
+ v-model="form.studentLook"
|
|
|
+ label="0"
|
|
|
+ >显示学生姓名</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setStudentLook || form.id ? true : false"
|
|
|
+ v-model="form.studentLook"
|
|
|
+ label="1"
|
|
|
+ >不显示学生真实姓名</el-radio
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sc_formAuthorityItem">
|
|
|
+ <el-switch
|
|
|
+ class="sc_fai_switch"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="form.setComment"
|
|
|
+ active-text="评论权限"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setComment || form.id ? true : false"
|
|
|
+ v-model="form.comment"
|
|
|
+ label="0"
|
|
|
+ >组织内人员</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setComment || form.id ? true : false"
|
|
|
+ v-model="form.comment"
|
|
|
+ label="1"
|
|
|
+ >所有人（包括游客用户）</el-radio
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sc_formAuthorityItem">
|
|
|
+ <el-switch
|
|
|
+ class="sc_fai_switch"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="form.setDownload"
|
|
|
+ active-text="课程资源下载权限"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setDownload || form.id ? true : false"
|
|
|
+ v-model="form.download"
|
|
|
+ label="0"
|
|
|
+ >组织内人员</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ class="sc_fai_radio"
|
|
|
+ :disabled="!form.setDownload || form.id ? true : false"
|
|
|
+ v-model="form.download"
|
|
|
+ label="1"
|
|
|
+ >所有人（包括游客用户）</el-radio
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sc_formAuthorityItem">
|
|
|
+ <el-switch
|
|
|
+ class="sc_fai_switch"
|
|
|
+ :disabled="form.id ? true : false"
|
|
|
+ v-model="form.setHomeWorkUpload"
|
|
|
+ active-text="作业上传权限"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <span>仅组织内成员可使用工具上传内容</span>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <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()">
|
|
|
+ 复制链接
|
|
|
+ </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()">取 消</el-button>
|
|
|
+ <!-- <el-button type="primary" v-if="!form.id" @click="generate()"
|
|
|
+ >生成</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" v-else @click="resetGenerate()"
|
|
|
+ >重置生成</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) {
|
|
|
+ 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) {
|
|
|
+ this.courseId = courseId;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.form.id = "default";
|
|
|
+ this.form.url = `https://beta.cloud.cocorobo.cn/#/?shareCourseId=${this.courseId}`;
|
|
|
+ // 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("请先生成链接");
|
|
|
+ }
|
|
|
+ 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("复制失败");
|
|
|
+ } else {
|
|
|
+ return this.$message.success("复制成功");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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>
|
SanHQin
