chore: v3.0.0-4030620241128001

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",

src/pages/shangke/shangke.vue

@@ -8,21 +8,44 @@
       <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 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.showname}}</text>
+                 <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>
@@ -37,25 +60,27 @@
 
    <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([
-  {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:'历史为什么选择了中国共产党'}
+   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) {
@@ -86,6 +111,9 @@ console.log('load',options)
      socket.on('server', (data) => {
        console.log(data)
      })
+     socket.on('activeandppt', (data) => {
+       kctivityAndPPT.value.unshift(data)
+     })
      socket.on('message', (data) => handleMessage(data))
    })
 
@@ -115,8 +143,59 @@ const sendData = () => {
    .container {
      padding: 20rpx;
    }
+
    .classactivetitle {
-  font-size: 32rpx
-;
+     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>