p975i2czf
/
universitymanage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

chore: v3.0.0-4030620241128001

Browse Source
main
刘东阳 3 months ago
parent 5744b428a1
commit 4dff64e8b1
3 changed files with 267 additions and 184 deletions
Show Stats Download Patch File Download Diff File

17
src/pages/dati/dati.vue
Unescape View File

@ -0,0 +1,17 @@
<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";
</script>
<template>
</template>
<style scoped>
</style>

35
src/pages/shangke/fgx.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<!-- 基础分隔线 -->
<view class="divider-line"></view>
<!-- 带文本的分隔线 -->
</template>
<style scoped>
/* 基础分隔线 */
.divider-line {
height: 1rpx;
background-color: red;
margin: 20rpx 0;
}
/* 带文本的分隔线 */
.divider-with-text {
display: flex;
align-items: center;
margin: 30rpx 0;
}
.divider-with-text::before,
.divider-with-text::after {
content: '';
flex: 1;
height: 1rpx;
background: linear-gradient(90deg, transparent, #e4e7ed 50%, transparent);
}
.divider-text {
padding: 0 20rpx;
color: #909399;
font-size: 24rpx;
}
</style>

399
src/pages/shangke/shangke.vue
Unescape View File

@ -1,201 +1,232 @@
<template> <template>
<view class="container"> <view class="container">
<!-- 页面内容 --> <!-- 页面内容 -->
<h3 > <view class="page-content" v-if="kctivityAndPPT.length > 0">
上课
</h3>
<view v-if="kctivityAndPPT.length > 0">
<H4>课堂活动与 PPT 列表</H4> <H4>课堂活动与 PPT 列表</H4>
<ul > <ul>
<li v-for="item in kctivityAndPPT" :key="item.id"> <li v-for="(item,index) in kctivityAndPPT" :key="item.id">
展示：课程活动 <view v-if="item.lx == 'ppt'">
<view v-if="item.lx=='ppt'"> <view class="content-ppt">
<view class="content" > <view class="page-number">第{{ currentPage }}页</view>
<image <image :src="item.src" mode="aspectFit" />
:src="item.src"
mode="aspectFit"
/>
</view> </view>
<view class="footer"> <view class="footer">
<text class="time">{{moment(item.time).fromNow()}}</text> <text class="time">{{ moment(item.time).fromNow() }}</text>
<text class="status">已完成</text> <text class="status">已完成</text>
</view> </view>
</view> </view>
<view v-else-if="item.lx=='activity'"> <view v-else-if="item.lx == 'activity'">
<view class="activity-item" :style="{backgroundColor:item.color}"> <view class="activity-item" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
<view class="content" :style="{backgroundColor:item.color}"> <view class="content" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
<view class="title">{{ item.showname }}</view> <view class="title">{{ item.showname }}</view>
<view class="subtitle">{{ item.title }}</view> <view class="subtitle">{{ item.title }}</view>
</view> </view>
<image class="icon" src="/src/static/student-course/course-active.png" mode="aspectFit"></image> <image class="icon" src="/static/student-course/course-active.png" mode="aspectFit"></image>
</view> </view>
<view class="footer"> <view class="footer">
<text class="time">{{moment(item.time).fromNow()}}</text> <text class="time">{{ moment(item.time).fromNow() }}</text>
<text class="status">已完成</text> <text class="status">{{ finish.includes(item.id) ? '已完成' : '' }}</text>
</view> </view>
<!-- <view :style="{backgroundColor:item.color,width:'90vw',height:'70px'}"> </view>
<view :style="{fontSize:'30px'}"> <view v-else-if="item.lx == 'notice'">
<text :style="{color:'white'}">{{item.name}}</text> <view class="notice-view">
</view> <text>{{ item.wb }}</text>
<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 >{{item.wb}}</text>
</view> </view>
</view> </view>
</li> <view v-if="index!==kctivityAndPPT.length - 1">
</ul> <uv-divider
</view>
<view v-else> text="没有更多了"
<p>暂无课堂活动或 PPT 数据</p> :dashed="true"
</view> :hairline="false"
</view> text-position="center"
</template> line-color="#e4e7ed"
text-color="#909399"
/>
<script setup> </view>
import { onMounted, onUnmounted } from 'vue' </li>
import moment from "moment/min/moment-with-locales"; </ul>
</view>
import io from '@hyoga/uni-socket.io' <view v-else>
import { ref } from 'vue' <p>暂无课堂活动或 PPT 数据</p>
import {onLoad} from "@dcloudio/uni-app"; </view>
</view>
// 课堂活动and PPT </template>
const kctivityAndPPT = ref([{id:0,lx:'notice',wb:'上课了'},
{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'} <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'
// 定义 socket 变量 import { onLoad } from "@dcloudio/uni-app";
let socket import uvDivider from '@/pages/shangke/fgx.vue';
moment.locale('zh-cn'); // 课堂活动and PPT
// 初始化连接 const kctivityAndPPT = ref([
onLoad((options) => { { id: 0, lx: 'notice', wb: '上课了' },
console.log('load',options) { lx: 'ppt', id: 1, name: 'PPT展示1', src: '/static/course-image/ppt1.png', 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' }
console.log(kctivityAndPPT.value) ])
socket = null; const finish = ref([1])
if(options) { const currentPage = ref(1)
socket= io('ws://localhost:3400', {
transports: ['websocket'], // 定义 socket 变量
auth: { let socket
xuehao: "202413501062", moment.locale('zh-cn');
sf: "stu", // 初始化连接
kch: options.kch, onLoad((options) => {
kctime: options.kctime, console.log('load', options)
k_id: options.uuid,
} console.log(kctivityAndPPT.value)
}) socket = null;
}else { if (options) {
socket= io('ws://localhost:3400', { socket = io('ws://localhost:3400', {
transports: ['websocket'], transports: ['websocket'],
auth: { auth: {
xuehao: "202413501062", xuehao: "202413501062",
sf: "stu", sf: "stu",
kch: "nokch", kch: options.kch,
kctime: "nokctime", kctime: options.kctime,
k_id: "nouuid", k_id: options.uuid,
} }
}) })
} } else {
// 监听事件 socket = io('ws://localhost:3400', {
socket.on('connect', () => console.log('Socket 已连接')) transports: ['websocket'],
socket.on('server', (data) => { auth: {
console.log(data) xuehao: "202413501062",
}) sf: "stu",
socket.on('activeandppt', (data) => { kch: "nokch",
kctivityAndPPT.value.unshift(data) kctime: "nokctime",
}) k_id: "nouuid",
socket.on('message', (data) => handleMessage(data)) }
}) })
}
// 断开连接并移除监听 // 监听事件
onUnmounted(() => { socket.on('connect', () => console.log('Socket 已连接'))
if (socket) { socket.on('server', (data) => {
socket.off('message') console.log(data)
socket.disconnect() })
} socket.on('activeandppt', (data) => {
}) kctivityAndPPT.value.unshift(data)
})
// 处理消息的方法 socket.on('message', (data) => handleMessage(data))
const handleMessage = (data) => { })
// 处理消息逻辑
console.log('处理消息:', data) // 断开连接并移除监听
} onUnmounted(() => {
if (socket) {
// 发送数据的方法 socket.off('message')
const sendData = () => { socket.disconnect()
if (socket) { }
socket.emit('chat', { text: 'Hello' }) })
}
} // 处理消息的方法
</script> const handleMessage = (data) => {
// 处理消息逻辑
<style scoped> console.log('处理消息:', data)
.container { }
padding: 20rpx;
} // 发送数据的方法
const sendData = () => {
.classactivetitle { if (socket) {
font-size: 32rpx; socket.emit('chat', { text: 'Hello' })
} }
.activity-item { }
display: flex; </script>
align-items: center;
justify-content: space-between; <style scoped>
padding: 10px; .page-content{
border: 1px solid #080808; /* margin-top: 20rpx; */
background-color: #c5c3c3; padding: auto;
width: 90vw; background-color: #c0c0c0;
} }
.content{ .container {
flex: 1; padding: 20rpx;
display: flex; }
flex-direction: column;
background-color: #fff; .classactivetitle {
padding: 10px; font-size: 32rpx;
} }
.icon { .content-ppt {
width: 50px; width: 100%;
height: 50px; height: auto;
} border: 1px solid #4e01f5;
.title { padding: 10rpx;
font-size: 18px; background-color: #ffffff;
color: white; box-sizing: border-box;
} display: flex;
.subtitle { justify-content: center; /* 水平居中 */
font-size: 14px; align-items: center; /* 垂直居中 */
color: white; position: relative;
} }
.footer { .activity-item {
display: flex; display: flex;
justify-content: space-between; align-items: center;
margin-top: 10px; justify-content: space-between;
} padding: 6rpx;
border: 1px solid #000000;
.time { background-color: #c5c3c3;
font-size: 12px; width: 93rvw;
color: #666; }
} .page-number {
position: absolute;
.status { top: 10px;
font-size: 12px; right: 10px;
color: #666; background-color: rgba(0, 0, 0, 0.5);
} color: white;
.notice-view { padding: 5px 10px;
color:white; border-radius: 5px;
display: flex; font-size: 14px;
background-color: #666; z-index: 10;
align-items: center; }
.content {
} flex: 1;
display: flex;
</style> flex-direction: column;
background-color: #fff;
padding: 10px;
align-self: center;
}
.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 {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
background-color: #d3d3d3;
height: 23px; /* 可根据需求调整高度 */
font-size: 18px;
color: #333; /* 可根据需求调整字体大小 */
}
</style>

Write Preview
Loading…
Cancel
Save