Просмотр исходного кода

feat(pptEasyClass): add course sharing feature

1. 新增多语言文案:授课识别码、分享课程及分享提示文本
2. 新增课程分享链接展示、复制功能和对应的分享提示
3. 重构获取基础URL逻辑,拆分open方法内的代码
4. 初始化分享链接表单字段,修复数据回显时的分享链接缺失问题
lsc 5 дней назад
Родитель
Сommit
b4896f1249
4 измененных файлов с 77 добавлено и 12 удалено
  1. 65 9
      src/components/pptEasyClass/shareDialog.vue
  2. 4 1
      src/lang/cn.json
  3. 4 1
      src/lang/en.json
  4. 4 1
      src/lang/hk.json

+ 65 - 9
src/components/pptEasyClass/shareDialog.vue

@@ -6,6 +6,24 @@
       width="600px"
       v-loading="loading"
     >
+      <!-- 分享课程链接 -->
+      <div class="sc_formUrl" v-show="form.shareUrl" style="margin-top: 20px;">
+        <!-- <div class="shareTitle">{{ lang.ssShareCourse }}</div> -->
+        <el-input
+          class="sc_fu_input"
+          style="color: black"
+          disabled
+          v-model="form.shareUrl"
+        >
+          <template slot="append"
+            ><div class="sc_fu_copyBtn" @click.stop="copyShareUrl()">
+              {{ lang.ssShareCourseLink }}
+            </div></template
+          >
+        </el-input>
+        <div class="qrcodeTip">{{ lang.ssShareCourseTip }}</div>
+      </div>
+      <!-- 授课识别码 -->
       <div class="sc_formUrl" v-show="form.url">
         <el-input
           class="sc_fu_input"
@@ -15,7 +33,7 @@
         >
           <template slot="append"
             ><div class="sc_fu_copyBtn" @click.stop="copyUrl()">
-              {{ lang.ssCopyLink }}
+              {{ lang.ssTeachCode }}
             </div></template
           >
         </el-input>
@@ -49,7 +67,8 @@ export default {
         setDownload: false,
         download: "1",
         setHomeWorkUpload: false,
-        url: ""
+        url: "",
+        shareUrl: ""
       }
     };
   },
@@ -71,11 +90,7 @@ export default {
     }
   },
   methods: {
-    open(courseId, classid) {
-      this.courseId = courseId;
-      this.classId = classid;
-      this.dialogVisible = true;
-      this.form.id = "default";
+    getBaseUrl() {
       let url = 'https://beta.cloud.cocorobo.cn'
       if (window.location.href.includes('beta')) {
         url = url
@@ -89,7 +104,16 @@ export default {
       else if (this.lang.lang === 'com') {
         url = 'https://cloud.cocorobo.com'
       }
+      return url;
+    },
+    open(courseId, classid) {
+      this.courseId = courseId;
+      this.classId = classid;
+      this.dialogVisible = true;
+      this.form.id = "default";
+      const url = this.getBaseUrl();
       this.form.url = `${url}/admin.html?orgnum=${this.courseId}&classcode=${this.classId}`;
+      this.form.shareUrl = `${url}/#/?shareCourseId=${this.$route.query.courseId}&type=prievew`;
       // this.getData();
     },
     close() {
@@ -104,7 +128,8 @@ export default {
         setDownload: false,
         download: "1",
         setHomeWorkUpload: false,
-        url: ""
+        url: "",
+        shareUrl: ""
       };
       this.date = "0";
       this.courseId = "";
@@ -224,6 +249,26 @@ export default {
         return this.$message.success(this.lang.ssCopySuccess);
       }
     },
+    copyShareUrl() {
+      if (!this.form.shareUrl) {
+        return this.$message.info(this.lang.ssPleaseGenerateLink);
+      }
+      const input = document.createElement("input");
+      input.style.opacity = 0;
+      input.style.position = "fixed";
+      input.style.left = "-100%";
+      input.style.top = "-100%";
+      input.value = this.form.shareUrl;
+      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,
@@ -235,7 +280,8 @@ export default {
         setDownload: false,
         download: "1",
         setHomeWorkUpload: false,
-        url: ""
+        url: "",
+        shareUrl: ""
       };
       this.date = "0";
       this.loading = true;
@@ -250,6 +296,9 @@ export default {
           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 };
+          // 后端 jsonData 不含 shareUrl,重新生成
+          const baseUrl = this.getBaseUrl();
+          this.form.shareUrl = `${baseUrl}/#/?shareCourseId=${this.courseId}&type=prievew`;
           this.date = _data[0].time;
           this.loading = false;
         })
@@ -363,4 +412,11 @@ export default {
 	color: #7f7f7f;
 	margin-top: 5px;
 }
+
+.shareTitle{
+	font-size: 14px;
+	color: #303133;
+	margin-bottom: 10px;
+	font-weight: 500;
+}
 </style>

+ 4 - 1
src/lang/cn.json

@@ -910,5 +910,8 @@
   "ssLongTimeNoOperation": "长时间无操作,将自动退出",
   "ssConfirmExit": "确认退出登录嘛?",
   "ssDownloadQRCode": "下载二维码",
-  "ssLinkNote": "注:课程识别码仅当天有效,每日重新生成"
+  "ssLinkNote": "注:课程识别码仅当天有效,每日重新生成",
+  "ssTeachCode": "授课识别码",
+  "ssShareCourse": "分享课程",
+  "ssShareCourseTip": "该链接无须登录可查看课程内容(PPT、工具等),不包含学生的提交结果。"
 }

+ 4 - 1
src/lang/en.json

@@ -910,5 +910,8 @@
   "ssLongTimeNoOperation": "Long time no operation, will be logged out",
   "ssConfirmExit": "Are you sure you want to exit login?",
   "ssDownloadQRCode": "Download QR Code",
-  "ssLinkNote": "Note: Course identification code is only valid for the day, regenerated daily."
+  "ssLinkNote": "Note: Course identification code is only valid for the day, regenerated daily.",
+  "ssTeachCode": "Teaching Code",
+  "ssShareCourse": "Share Course",
+  "ssShareCourseTip": "This link can be viewed without login and contains course content (PPT, tools, etc.), but does not include student submissions."
 }

+ 4 - 1
src/lang/hk.json

@@ -910,5 +910,8 @@
   "ssLongTimeNoOperation": "長時間無操作,將自動退出",
   "ssConfirmExit": "確認退出登錄嘛?",
   "ssDownloadQRCode": "下載二維碼",
-  "ssLinkNote": "註:課程識別碼僅當天有效,每日重新生成"
+  "ssLinkNote": "註:課程識別碼僅當天有效,每日重新生成",
+  "ssTeachCode": "授課識別碼",
+  "ssShareCourse": "分享課程",
+  "ssShareCourseTip": "該鏈接無須登錄可查看課程內容(PPT、工具等),不包含學生的提交結果。"
 }