From 4dff64e8b1a2ec29ab040d19832a050aed2bcaea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E4=B8=9C=E9=98=B3?= <15147476661@163.com>
Date: Wed, 7 May 2025 14:14:15 +0800
Subject: [PATCH] chore: v3.0.0-4030620241128001

---
 src/pages/dati/dati.vue       |  17 ++
 src/pages/shangke/fgx.vue     |  35 +++
 src/pages/shangke/shangke.vue | 399 ++++++++++++++++++----------------
 3 files changed, 267 insertions(+), 184 deletions(-)
 create mode 100644 src/pages/dati/dati.vue
 create mode 100644 src/pages/shangke/fgx.vue

diff --git a/src/pages/dati/dati.vue b/src/pages/dati/dati.vue
new file mode 100644
index 0000000..ef18468
--- /dev/null
+++ b/src/pages/dati/dati.vue
@@ -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>
diff --git a/src/pages/shangke/fgx.vue b/src/pages/shangke/fgx.vue
new file mode 100644
index 0000000..d47cb56
--- /dev/null
+++ b/src/pages/shangke/fgx.vue
@@ -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>
diff --git a/src/pages/shangke/shangke.vue b/src/pages/shangke/shangke.vue
index d5fc068..18b52cc 100644
--- a/src/pages/shangke/shangke.vue
+++ b/src/pages/shangke/shangke.vue
@@ -1,201 +1,232 @@
 <template>
   <view class="container">
     <!-- 页面内容 -->
-    <h3 >
-      上课
-    </h3>
-    <view v-if="kctivityAndPPT.length > 0">
+    <view class="page-content" v-if="kctivityAndPPT.length > 0">
       <H4>课堂活动与 PPT 列表</H4>
-      <ul >
-        <li v-for="item in kctivityAndPPT" :key="item.id">
-          展示：课程活动
-          <view v-if="item.lx=='ppt'">
-            <view class="content" >
-            <image
-              :src="item.src"
-              mode="aspectFit"
-            />
+      <ul>
+        <li v-for="(item,index) in kctivityAndPPT" :key="item.id">
+          <view v-if="item.lx == 'ppt'">
+            <view class="content-ppt">
+              <view class="page-number">第{{ currentPage }}页</view>
+              <image :src="item.src" mode="aspectFit" />
             </view>
             <view class="footer">
-              <text class="time">{{moment(item.time).fromNow()}}</text>
+              <text class="time">{{ moment(item.time).fromNow() }}</text>
               <text class="status">已完成</text>
             </view>
           </view>
-          <view v-else-if="item.lx=='activity'">
-            <view class="activity-item" :style="{backgroundColor:item.color}">
-              <view class="content" :style="{backgroundColor:item.color}">
+          <view v-else-if="item.lx == 'activity'">
+            <view class="activity-item" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
+              <view class="content" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
                 <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>
+              <image class="icon" 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>
+              <text class="time">{{ moment(item.time).fromNow() }}</text>
+              <text class="status">{{ finish.includes(item.id) ? '已完成' : '' }}</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 >{{item.wb}}</text>
+          </view>
+          <view v-else-if="item.lx == 'notice'">
+            <view class="notice-view">
+              <text>{{ item.wb }}</text>
             </view>
           </view>
-           </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',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'}
-   ])
-
-
-
-   // 定义 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>
+            <view v-if="index!==kctivityAndPPT.length - 1">
+            <uv-divider
+
+                text="没有更多了"
+                :dashed="true"
+            :hairline="false"
+            text-position="center"
+            line-color="#e4e7ed"
+            text-color="#909399"
+            />
+            </view>
+        </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";
+import uvDivider from '@/pages/shangke/fgx.vue';
+// 课堂活动and PPT
+const kctivityAndPPT = ref([
+{ id: 0, lx: 'notice', wb: '上课了' },
+{ 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' }
+])
+const finish = ref([1])
+const currentPage = ref(1)
+
+// 定义 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>
+.page-content{
+  /* margin-top: 20rpx; */
+  padding: auto;
+  background-color: #c0c0c0;
+}
+.container {
+  padding: 20rpx;
+}
+
+.classactivetitle {
+  font-size: 32rpx;
+}
+.content-ppt {
+  width: 100%;
+  height: auto;
+  border: 1px solid #4e01f5;
+  padding: 10rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  position: relative;
+}
+.activity-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6rpx;
+  border: 1px solid #000000;
+  background-color: #c5c3c3;
+  width: 93rvw;
+}
+.page-number {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  z-index: 10;
+}
+.content {
+  flex: 1;
+  display: flex;
+  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>