|
|
|
@ -8,115 +8,194 @@
|
|
|
|
|
<H4>课堂活动与 PPT 列表</H4>
|
|
|
|
|
<ul >
|
|
|
|
|
<li v-for="item in kctivityAndPPT" :key="item.id">
|
|
|
|
|
展示:{{ item.name }}
|
|
|
|
|
展示:课程活动
|
|
|
|
|
<view v-if="item.lx=='ppt'">
|
|
|
|
|
<view class="content" >
|
|
|
|
|
<image
|
|
|
|
|
:src="item.src"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer">
|
|
|
|
|
<text class="time">{{moment(item.time).fromNow()}}</text>
|
|
|
|
|
<text class="status">已完成</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="item.lx=='activity'">
|
|
|
|
|
<view :style="{backgroundColor:item.color,width:'90vw',height:'70px'}">
|
|
|
|
|
<view :style="{fontSize:'30px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.showname}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view :style="{fontSize:'15px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.title}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="activity-item" :style="{backgroundColor:item.color}">
|
|
|
|
|
<view class="content" :style="{backgroundColor:item.color}">
|
|
|
|
|
<view class="title">{{ item.showname }}</view>
|
|
|
|
|
<view class="subtitle">{{ item.title }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<image class="icon" src="/src/static/student-course/course-active.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer">
|
|
|
|
|
<text class="time">{{moment(item.time).fromNow()}}</text>
|
|
|
|
|
<text class="status">已完成</text>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- <view :style="{backgroundColor:item.color,width:'90vw',height:'70px'}">
|
|
|
|
|
<view :style="{fontSize:'30px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.name}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view :style="{fontSize:'15px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.title}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="item.lx=='notice'">
|
|
|
|
|
|
|
|
|
|
<view class="notice-view">
|
|
|
|
|
<text >1233</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else>
|
|
|
|
|
<p>暂无课堂活动或 PPT 数据</p>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
|
|
|
|
|
|
import io from '@hyoga/uni-socket.io'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import {onLoad} from "@dcloudio/uni-app";
|
|
|
|
|
|
|
|
|
|
// 课堂活动and PPT
|
|
|
|
|
const kctivityAndPPT = ref([
|
|
|
|
|
{lx:'ppt',id:1,name:'PPT展示1',src:'https://img11.360buyimg.com/n1/s720x720_jfs/t1/303510/33/1806/82651/6815a7a6F2e5d77b6/08d231a86927b0ce.jpg'},
|
|
|
|
|
{lx :'activity',id:2,name:'课堂活动1',lxA:'讨论',color:'green',showname:'课程讨论',title:'历史为什么选择了中国共产党'}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义 socket 变量
|
|
|
|
|
let socket
|
|
|
|
|
|
|
|
|
|
// 初始化连接
|
|
|
|
|
onLoad((options) => {
|
|
|
|
|
console.log('load',options)
|
|
|
|
|
console.log(kctivityAndPPT.value)
|
|
|
|
|
socket = null;
|
|
|
|
|
if(options) {
|
|
|
|
|
socket= io('ws://localhost:3400', {
|
|
|
|
|
transports: ['websocket'],
|
|
|
|
|
auth: {
|
|
|
|
|
xuehao: "202413501062",
|
|
|
|
|
sf: "stu",
|
|
|
|
|
kch: options.kch,
|
|
|
|
|
kctime: options.kctime,
|
|
|
|
|
k_id: options.uuid,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}else {
|
|
|
|
|
socket= io('ws://localhost:3400', {
|
|
|
|
|
transports: ['websocket'],
|
|
|
|
|
auth: {
|
|
|
|
|
xuehao: "202413501062",
|
|
|
|
|
sf: "stu",
|
|
|
|
|
kch: "nokch",
|
|
|
|
|
kctime: "nokctime",
|
|
|
|
|
k_id: "nouuid",
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 监听事件
|
|
|
|
|
socket.on('connect', () => console.log('Socket 已连接'))
|
|
|
|
|
socket.on('server', (data) => {
|
|
|
|
|
console.log(data)
|
|
|
|
|
})
|
|
|
|
|
socket.on('message', (data) => handleMessage(data))
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 断开连接并移除监听
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
if (socket) {
|
|
|
|
|
socket.off('message')
|
|
|
|
|
socket.disconnect()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 处理消息的方法
|
|
|
|
|
const handleMessage = (data) => {
|
|
|
|
|
// 处理消息逻辑
|
|
|
|
|
console.log('处理消息:', data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 发送数据的方法
|
|
|
|
|
const sendData = () => {
|
|
|
|
|
if (socket) {
|
|
|
|
|
socket.emit('chat', { text: 'Hello' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.container {
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.classactivetitle{
|
|
|
|
|
font-size: 32rpx
|
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else>
|
|
|
|
|
<p>暂无课堂活动或 PPT 数据</p>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
|
import moment from "moment/min/moment-with-locales";
|
|
|
|
|
|
|
|
|
|
import io from '@hyoga/uni-socket.io'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import {onLoad} from "@dcloudio/uni-app";
|
|
|
|
|
|
|
|
|
|
// 课堂活动and PPT
|
|
|
|
|
const kctivityAndPPT = ref([{id:0,lx:'notice'},
|
|
|
|
|
{lx:'ppt',id:1,name:'PPT展示1',src:'https://img11.360buyimg.com/n1/s720x720_jfs/t1/303510/33/1806/82651/6815a7a6F2e5d77b6/08d231a86927b0ce.jpg',time:'2025-05-06T19:54:43+08:00'},
|
|
|
|
|
{lx :'activity',id:2,name:'课堂活动1',lxA:'讨论',color:'green',showname:'课程讨论',title:'历史为什么选择了中国共产党',time:'2025-05-06T19:54:43+08:00'}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义 socket 变量
|
|
|
|
|
let socket
|
|
|
|
|
moment.locale('zh-cn');
|
|
|
|
|
// 初始化连接
|
|
|
|
|
onLoad((options) => {
|
|
|
|
|
console.log('load',options)
|
|
|
|
|
|
|
|
|
|
console.log(kctivityAndPPT.value)
|
|
|
|
|
socket = null;
|
|
|
|
|
if(options) {
|
|
|
|
|
socket= io('ws://localhost:3400', {
|
|
|
|
|
transports: ['websocket'],
|
|
|
|
|
auth: {
|
|
|
|
|
xuehao: "202413501062",
|
|
|
|
|
sf: "stu",
|
|
|
|
|
kch: options.kch,
|
|
|
|
|
kctime: options.kctime,
|
|
|
|
|
k_id: options.uuid,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}else {
|
|
|
|
|
socket= io('ws://localhost:3400', {
|
|
|
|
|
transports: ['websocket'],
|
|
|
|
|
auth: {
|
|
|
|
|
xuehao: "202413501062",
|
|
|
|
|
sf: "stu",
|
|
|
|
|
kch: "nokch",
|
|
|
|
|
kctime: "nokctime",
|
|
|
|
|
k_id: "nouuid",
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 监听事件
|
|
|
|
|
socket.on('connect', () => console.log('Socket 已连接'))
|
|
|
|
|
socket.on('server', (data) => {
|
|
|
|
|
console.log(data)
|
|
|
|
|
})
|
|
|
|
|
socket.on('activeandppt', (data) => {
|
|
|
|
|
kctivityAndPPT.value.unshift(data)
|
|
|
|
|
})
|
|
|
|
|
socket.on('message', (data) => handleMessage(data))
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 断开连接并移除监听
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
if (socket) {
|
|
|
|
|
socket.off('message')
|
|
|
|
|
socket.disconnect()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 处理消息的方法
|
|
|
|
|
const handleMessage = (data) => {
|
|
|
|
|
// 处理消息逻辑
|
|
|
|
|
console.log('处理消息:', data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 发送数据的方法
|
|
|
|
|
const sendData = () => {
|
|
|
|
|
if (socket) {
|
|
|
|
|
socket.emit('chat', { text: 'Hello' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.container {
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.classactivetitle {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
.activity-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 1px solid #080808;
|
|
|
|
|
background-color: #c5c3c3;
|
|
|
|
|
width: 90vw;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.subtitle {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
.notice-view {
|
|
|
|
|
color:white;
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: #666;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|