ai探究中心添加点击上课

src/components/main/AIexploration.vue

@@ -21,6 +21,31 @@
 				查看更多
 		</div>
 	</div>
+	<div>
+		<el-dialog
+			v-model="dialogVisible"
+			:before-close="handleClose"
+			fullscreen
+		>
+			 <template #header>
+				<div class="dialog-header">
+					<span class="warning_text">{{ Tips }}</span>
+				</div>
+			</template>
+			<div class="courseL" @click="openCourseDetail">
+				<span>点击进入对应课程</span>
+                <img :src="dian" alt="">
+			</div>
+			<iframe 
+				allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
+				ref="iframeRef1" 
+				:src="iframeRef1Url" 
+				style="width: 100%;height: 100%;"
+				frameborder="0">
+			</iframe>
+		</el-dialog>
+	</div>
+	 
 </template>
 
 <script setup>
@@ -29,34 +54,83 @@ import { useRouter } from "vue-router";
 import taideng from '@/assets/img/taideng.png'
 import esy from '@/assets/img/esy.png'
 import ludeng from '@/assets/img/ludeng.png'
+import { userInfoStore } from '../../stores/counter'
+import dian from '@/assets/icon/dianji.png'
 
+const user = userInfoStore()
 
-
+const iframeRef1Url = ref('')
+const cid = ref('')
+const dialogVisible = ref(false)
+const Tips = ref('')
 const router = useRouter();
 const listData = ref([
 	{
 		name: "智能台灯设计模拟器",
 		url: "https://v0.cocorobo.cn/SmartDeskLamp/%E6%99%BA%E8%83%BD%E5%8F%B0%E7%81%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E6%8B%9F%E5%99%A8.html",
 		img: taideng,
+		courselink: "8ba49e1a-87f0-11f0-9c7b-005056924926"
 	},
 	{
 		name: "校园里的智能眼睛",
 		url: "https://v0.cocorobo.cn/sensor-learning/out/index.html",
 		img: esy,
+		courselink: "c9c76a3e-87e1-11f0-9c7b-005056924926"
 	},
 	{
 		name: "智慧校园路灯系统",
 		url: "https://v0.cocorobo.cn/smart-streetlight-system/out/index.html",
 		img: ludeng,
+		courselink: "5948e83d-87da-11f0-9c7b-005056924926"
 	},
 ]);
-// 拉取用户信息并处理
+const handleClose = (done) => {
+    done()
+}
+// 打开课程弹框
 const gotoUrl = (val) => {
-	window.open(val.url, "_blank");
+	console.log('val',val);
+	
+	iframeRef1Url.value = val.url
+	cid.value = val.courselink
+	dialogVisible.value = true
+	Tips.value = val.name
+	// window.open(val.url, "_blank");
+
 };
 const gotoPage = () => {
 	router.push("/details/AI探究中心");
 };
+
+const openCourseDetail = () => {
+	let id = cid.value
+	console.log(user.user)
+	// 会返回复制得课程
+	top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", [id, user.user.userid], function (res) {
+		console.log(res)
+		if (res.value[0].length > 0) {
+		// let isSave = res.value[0].filter(x => {
+		//   return x.courseId == id
+		// })
+		//这个是打开指定的课程接口
+		top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
+		} else {
+			updateCourseId(id, "studyDetail")
+		}
+	}, [], { "type": "POST", "withCredentials": true });
+}
+const updateCourseId = (id, type) => {
+  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
+    console.log(res)
+    if (res.value[0][0].courseId != "") {
+      if (type == "openCourseNewUpdate") {
+        top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
+      } else {
+        top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
+      }
+    }
+  }, [], { "type": "POST", "withCredentials": true });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -99,4 +173,37 @@ const gotoPage = () => {
   font-size: 16px;
   font-weight: 500;
 }
+:deep(.el-dialog__body){
+	width: 100% !important;
+	height: calc(100% - 65px);
+	padding: 0 !important;
+	position: relative;
+}
+.dialog-header{
+	font-size: 18px;
+	display: flex;
+	gap: 10px;
+}
+.courseL{
+	background: #FFFFFF;
+	cursor: pointer;
+	color: #F5A70C;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 5px 10px;
+	box-sizing: border-box;
+	border-radius: 5px;
+	font-weight: 600;
+	font-size: 18px;
+	border: 2px #e7e7e7 solid;
+	top: 10px;
+	left: 65%;
+	gap: 5px;
+    img{
+        height: 25px;
+        object-fit: contain;
+    }
+}
 </style>

src/components/main/AIexplorationCon.vue

@@ -15,12 +15,43 @@
             </div>
         </div>
     </div>
+    <div>
+        <el-dialog
+            v-model="dialogVisible"
+            :before-close="handleClose"
+            fullscreen
+        >
+            <template #header>
+                <div class="dialog-header">
+                    <span class="warning_text">{{ Tips }}</span>
+                </div>
+            </template>
+            <div class="courseL" @click="openCourseDetail">
+                <span>点击进入对应课程</span>
+                <img :src="dian" alt="">
+            </div>
+            <iframe 
+                allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
+                ref="iframeRef1" 
+                :src="iframeRef1Url" 
+                style="width: 100%;height: 100%;"
+                frameborder="0">
+            </iframe>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup>
 import axios from 'axios';
 import { ref,onMounted } from 'vue';
+import { userInfoStore } from '../../stores/counter'
+import dian from '@/assets/icon/dianji.png'
 
+const user = userInfoStore()
+const iframeRef1Url = ref('')
+const cid = ref('')
+const dialogVisible = ref(false)
+const Tips = ref('')
 
 const listData = ref([])
 const loading = ref(false)
@@ -50,8 +81,45 @@ const requestUser = () => {
         loading.value = false
     })
 };
+const handleClose = (done) => {
+    done()
+}
 const gotoPage = (val)=>{
-    window.open(val.link, "_blank")
+    // window.open(val.link, "_blank")
+    console.log('val',val);
+	iframeRef1Url.value = val.link
+	cid.value = val.courselink
+	dialogVisible.value = true
+	Tips.value = val.name
+}
+const openCourseDetail = () => {
+	let id = cid.value
+	console.log(user.user)
+	// 会返回复制得课程
+	top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", [id, user.user.userid], function (res) {
+		console.log(res)
+		if (res.value[0].length > 0) {
+		// let isSave = res.value[0].filter(x => {
+		//   return x.courseId == id
+		// })
+		//这个是打开指定的课程接口
+		top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
+		} else {
+			updateCourseId(id, "studyDetail")
+		}
+	}, [], { "type": "POST", "withCredentials": true });
+}
+const updateCourseId = (id, type) => {
+  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
+    console.log(res)
+    if (res.value[0][0].courseId != "") {
+      if (type == "openCourseNewUpdate") {
+        top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
+      } else {
+        top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
+      }
+    }
+  }, [], { "type": "POST", "withCredentials": true });
 }
 </script>
 
@@ -124,4 +192,37 @@ const gotoPage = (val)=>{
 		}
 	}
 }
+:deep(.el-dialog__body){
+	width: 100% !important;
+	height: calc(100% - 65px);
+	padding: 0 !important;
+	position: relative;
+}
+.dialog-header{
+	font-size: 18px;
+	display: flex;
+	gap: 10px;
+}
+.courseL{
+	background: #FFFFFF;
+	cursor: pointer;
+	color: #F5A70C;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 5px 10px;
+	box-sizing: border-box;
+	border-radius: 5px;
+	font-weight: 600;
+	font-size: 18px;
+	border: 2px #e7e7e7 solid;
+	top: 10px;
+	left: 65%;
+    gap: 5px;
+    img{
+        height: 25px;
+        object-fit: contain;
+    }
+}
 </style>