From 491cf1edc35549ae4e615a6d4940d5682df24b44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E4=B8=9C=E9=98=B3?= <15147476661@163.com>
Date: Tue, 6 May 2025 16:17:07 +0800
Subject: [PATCH] chore: v3.0.0-4030620241128001

---
 package.json                  |   1 +
 src/pages/shangke/shangke.vue | 285 ++++++++++++++++++++++------------
 2 files changed, 183 insertions(+), 103 deletions(-)

diff --git a/package.json b/package.json
index 9fbc6d6..bfe3a57 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@dcloudio/uni-ui": "^1.5.7",
     "@hyoga/uni-socket.io": "^3.0.4",
     "dayjs": "^1.11.13",
+    "moment": "^2.30.1",
     "pinia": "^3.0.2",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9",
diff --git a/src/pages/shangke/shangke.vue b/src/pages/shangke/shangke.vue
index d57aeaf..42bce14 100644
--- a/src/pages/shangke/shangke.vue
+++ b/src/pages/shangke/shangke.vue
@@ -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>