2

pages/rollcall/rollcall.js

@@ -6,11 +6,13 @@ Page({
     selectedStudent: {},        // 选中的学生
     rankings: [] ,
     currentIndex: 0,
-    isAllspot: 0
+    isAllspot: 0,
+    showSolidMode: false
   },
 
   onLoad: function() {
     // 假设从全局或云端获取学生数据
+    showSolidMode = false;
     const studentsWithDetails = app.globalData.array.map(student => {
       return {
         ...student,
@@ -27,10 +29,14 @@ Page({
   },
 
   titleClick: function (e) {
+    const index = e.currentTarget.dataset.idx;
     this.setData({
         //拿到当前索引并动态改变
         currentIndex: e.currentTarget.dataset.idx
     })
+    if (index == 2) {
+      this.showRankings();
+    }
   },
 
   switch1Change: function(e) {
@@ -63,7 +69,7 @@ Page({
   },
 
   // 课中点名 - 随机点名
-  randomRollCall: function() {
+  beginrandom: function(e) {
     app.globalData.part = 0;
     wx.navigateTo({
       url: '/pages/cardM/cardM',
@@ -76,13 +82,18 @@ Page({
     })
   },
 
-  // 课中点名 - 指定点名
+  beginsolid: function() {
-  specifiedRollCall: function() {
-    app.globalData.part = 1;
       this.setData({
-      showStudentPicker: true  // 显示下拉选择框
+        showSolidMode: true,   // 设置为 true 来隐藏当前内容并显示新的内容
       });
-  },
+  }
+  // 课中点名 - 指定点名
+  // specifiedRollCall: function() {
+  //   app.globalData.part = 1;
+  //   this.setData({
+  //     showStudentPicker: true 
+  //   });
+  // },
 
   // 选择学生
   selectStudent: function(e) {
@@ -139,6 +150,7 @@ Page({
     })
     
   },
+
   showRankings: function() {
     // 处理学生没有积分的情况，将没有积分的学生默认积分设为0
     const studentsWithScores = this.data.students.map(student => ({
@@ -163,13 +175,6 @@ Page({
     });
 
     // 进入排行榜页面，并携带排行榜数据
-    wx.navigateTo({
-        url: '/pages/rankings/rankings',  // 假设有一个显示排行榜的页面
-        success: (res) => {
-            // 将排名数据传递给排行榜页面
-            res.eventChannel.emit('sendRankingsData', { rankings });
-        }
-    });
   }
 
 

pages/rollcall/rollcall.wxml

@@ -37,6 +37,7 @@
   </view>
 
   <view wx:if="{{currentIndex == 1}}" class="content-container">
+    <view wx:if="{{!showSolidMode}}">
       <image class="picture101" src="cloud://yz-7g23c92hf3223f1d.797a-yz-7g23c92hf3223f1d-1330140432/pictures/10.png" mode="aspectFit"></image>
       <view class="random-button"></view>
       <button class="random-content" bindtap="beginrandom">随机点名</button>
@@ -45,4 +46,26 @@
       <button class="solid-content" bindtap="beginsolid">固定点名</button>
     </view>
     
+  </view>
+
+  <view wx:if="{{currentIndex == 2}}" class="content-container">
+    <view class="ranking-top">排行榜</view>
+    <view class="ranking-list">
+    <view class="headerr">
+      <text class="ranking-header">排名</text>
+      <text class="ranking-header">学号</text>
+      <text class="ranking-header">姓名</text>
+      <text class="ranking-header">积分</text>
+    </view>
+    <view wx:for="{{rankings}}" wx:key="rank" wx:for-item="item">
+        <view class="ranking-item">
+          <text class="ranking-text1">{{item.rank}}</text>
+          <text class="ranking-text2">{{item.student_ID}}</text>
+          <text class="ranking-text3">{{item.name}}</text>
+          <text class="ranking-text4">{{item.score}}</text>
+        </view>
+    </view>
+  </view>
+  </view>
+
 </view>

pages/rollcall/rollcall.wxss

@@ -159,8 +159,136 @@
   z-index: 2;
 }
 
-/* .button-container {
+.picture101 {
-  display: flex;
+  position: fixed;
-  width: 100%;
+  width: 35%;
+  left: 31%;
+  top: 10%;
+}
 
-} */
+.random-button {
+  position: fixed;
+  width: 47%;
+  height: 10.5%;
+  left: 22%;
+  bottom: 54.4%;
+  border: 2px solid #D88A8E;  /* 边框颜色 */
+  background-color: #D88A8E;  /* 按钮背景颜色 */
+  color: #D88A8E;             /* 字体颜色 */
+  border-radius: 20px;        /* 圆角设置 */
+  padding: 5px 10px;         /* 内边距 */
+  font-size: 40px;            /* 字体大小 */
+  text-align: center;
+  justify-content: center;
+}
+
+.random-content {
+  position: fixed;
+  width: 60%;
+  height: 10%;
+  bottom: 55.5%;
+  left: 25%;
+  background-color: #FAE39F;  /* 内部背景颜色 */
+  color: #D88A8E;
+  padding: 12px;              /* 内边距 */
+  border-radius: 15px;        /* 内部圆角半径 */
+  font-size: 40px;            /* 字体大小 */
+  font-family: "youshebiaotihei";
+  line-height: 130%;
+  z-index: 2;
+}
+
+.picture26 {
+  position: fixed;
+  width: 35%;
+  left: 31%;
+  top: 40%;
+}
+
+.solid-button {
+  position: fixed;
+  width: 47%;
+  height: 10.5%;
+  left: 22%;
+  bottom: 24.4%;
+  border: 2px solid #5994DB;  /* 边框颜色 */
+  background-color: #5994DB;  /* 按钮背景颜色 */
+  color: #5994DB;             /* 字体颜色 */
+  border-radius: 20px;        /* 圆角设置 */
+  padding: 5px 10px;         /* 内边距 */
+  font-size: 40px;            /* 字体大小 */
+  text-align: center;
+  justify-content: center;
+}
+
+.solid-content {
+  position: fixed;
+  width: 60%;
+  height: 10%;
+  bottom: 25.5%;
+  left: 25%;
+  background-color: #FAE39F;  /* 内部背景颜色 */
+  color: #5994DB;
+  padding: 12px;              /* 内边距 */
+  border-radius: 15px;        /* 内部圆角半径 */
+  font-size: 40px;            /* 字体大小 */
+  font-family: "youshebiaotihei";
+  line-height: 130%;
+  z-index: 2;
+}
+
+.ranking-header {
+  margin-right: 7%;
+  margin-left: 7%;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+
+.ranking-top {
+  background-color: #9BD1F1; /* 设置背景为蓝色 */
+  color: white;              /* 设置字体颜色为白色 */
+  font-size: 36px;           /* 设置字体大小 */
+  text-align: center;        /* 让文本水平居中 */
+  padding: 10px 10px;           /* 添加上下内边距，使其在背景中垂直居中 */
+  margin-bottom: 4%;
+  font-weight: bold;         /* 设置字体加粗 */
+}
+
+.ranking-text1 {
+  margin-left: 10%;
+  font-weight: bold;
+  font-size: 30px;
+  color: #4D95DF;
+}
+
+.ranking-text2{
+  margin-left: 9%;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.ranking-text3 {
+  margin-left: 1%;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.ranking-text4 {
+  position: absolute;
+  right: 14%;
+  font-weight: bold;
+  text-align: left;
+  font-size: 20px;
+  color: #A73E33;
+}
+
+.ranking-item {
+  margin-bottom: 3%;
+  margin-top: 3%;
+  display: flex;
+  align-items: center;
+  /* border-bottom: 1px solid #E0E0E0;  */
+  border-top: 1px solid #E0E0E0;
+  padding-top: 3%;
+}