classRoll/front/pages/attend/attend.js

import { toast } from '../../utils/extendApi'  
import { getStorage, setStorage } from '../../utils/storage'  
// 导入ComponentWithStore方法  
import { ComponentWithStore } from 'mobx-miniprogram-bindings'  
import { userStore } from '../../stores/userstore'  
const computedBehavior = require('miniprogram-computed').behavior;  
  
ComponentWithStore({    
  storeBindings: {  
    store: userStore,  
    fields: ['id', 'identify'], // 从Store中获取id和identify，存放在页面的data里  
    actions: []  
  },  
  behaviors: [computedBehavior],  
//监听函数    
  watch :{  
    'status_roll': function(status_roll){  
      if(status_roll){
        //status_roll>0，开始动画
        this.startScrolling(); 
      } 
    }  
  },  
  data: {    
    status_lesson:1,
    status_sign:0,
    status_roll:0,//点名状态初始化为0 
    status_roll_string:'',//将status_roll转为文本
    texts: [], // 存储从后端获取的数组    
    displayText: '', // 当前显示的文本（滚动时显示随机文本，停止时显示最终结果）    
    // finalResult: '', // 最终要显示的点名结果    
    animation: {}, // 动画数据    
    animationData: {}, // 动画实例    
    intervalId: null, // 动画定时器ID，后面在轮询函数StartPolling函数中设置了另外一个定时器intervalId2
    timeoutId: null // 超时ID    
  },    
  methods:{  
 //   
    onLoad: function () {
      this.startPolling();      
      this.fetchTexts(); // 从后端获取文本数组    
    //   this.startScrolling(); // 开始滚动随机文本 
    // setStorage('status_sign',0);
    // console.log(getStorage('status_sign'));
    //   this.setData({
    //     status_sign:getStorage('status_sign')
    //   })   
      this.setData({ //初始化本地点名状态
        status_roll:0,
        LessonName:getStorage('LessonName')
      })  
    },
    SignIn(){
      console.log(this.data.status_sign)
        if( this.data.status_sign === 0){//未签到状态
          wx.request({
              url: `http://172.20.10.2:8600/student-api/student/studentsignin/${getStorage('id')}/${getStorage('LessonId')}`, // id在onload函数里面getStore获取
              success: (res) => {
                  if (res.data.code === 200) {
                   
                      this.setData({
                        status_sign: 1 //置1,，表示已经签完到
                      })
                      toast({ title: '签到成功', icon: 'success' });
                } else {
                  console.error('签到失败:', res.data);
                  toast({ title: '签到失败', icon: 'error' });
                }
              },
              fail(err) {
                console.error('请求失败:', err);
              }
            });
      } else {
          toast({ title: '无需重复签到！', icon: 'none' });
      }
      
      },
      SignOut(){
        wx.request({
          url: `http://172.20.10.2:8600/student-api/student/lessonstatus/${getStorage('LessonId')}`, // id在onload函数里面getStore获取
          success: (res) => {
              if (res.data.code === 200) {
                  this.setData({
                    status_lesson:   res.data.data                    })
                      
            } else {
              console.error('获取课程状态失败', res.data);
            }
          },
          fail(err) {
            console.error('请求失败:', err);
          }
        });

        if(this.data.status_lesson){
          toast({title:'未下课不能签退！',icon:'error'})
        } else{
          if( this.data.status_sign === 1){//已签到状态
            wx.request({
                url: `http://172.20.10.2:8600/student-api/student/studentsignout/${getStorage('id')}/${getStorage('LessonId')}`, // id在onload函数里面getStore获取
                success: (res) => {
                    if (res.data.code === 200) {
                     
                        this.setData({
                          status_sign: 0 //置0,，表示已经签退
                        })
                        toast({ title: '签退成功', icon: 'success' });
                        wx.switchTab({
                          url: '/pages/home/home',
                        })
                  } else {
                    console.error('签退失败', res.data);
                    toast({ title: '签退失败', icon: 'error' });
                  }
                },
                fail(err) {
                  console.error('请求失败:', err);
                }
              });
        } else {
            toast({ title: '还未签到！', icon: 'none'});
            
        }
        }
        
      },
// 从后端获取学号对应的文本数组    
    fetchTexts: function () {  
        const self = this;  
        wx.request({  
          url: `http://172.20.10.2:8600/student-api/student/getnolist/${getStorage('LessonId')}`, // 替换为实际的后端API地址  
          method: 'GET',  
          success: function (res) {  
            if (res.data && res.data.code === 200 &&  Array.isArray(res.data.data)) {  
              self.setData({ texts: res.data.data });  
            } else {  
              console.error('从后端获取文本数组失败:', res);  
            }  
          },  
          fail: function (err) {  
            console.error('函数调用失败:', err);  
          }  
        });  
      },    
//轮询      
    startPolling: function() {  
        // 设置轮询  
        this.intervalId2 = setInterval(() => {  
            wx.request({
                url: `http://172.20.10.2:8600/student-api/student/lessonroll/${getStorage('LessonId')}`, //学生根据课程id，轮询访问后端，点名状态
                success: (res) => {//如果成功
                if (res.data != null && res.data.code === 200) {//后端响应成功
                    console.log('后端响应成功',res.data.data)
                    if(res.data.data !== this.data.status_roll ){
                        console.log('roll值与本地记录不同,更新为',res.data.data)
                        this.setData({
                            status_roll : res.data.data //更新roll值
                        })
                    }
                        
                    } else {
                    console.error('后端响应出错:', res.data);
                    toast({ title: '后端响应出错', icon: 'error' });
                }
                },
                fail(err) {
                console.error('请求函数调用失败:', err);
                }
            });
        }, 1000); // 每1秒检查一次  
      },  
      startScrolling: function () {    
        const self = this;    
        const texts = this.data.texts;    
        if (texts.length === 0) return;    
        
        let currentIndex = Math.floor(Math.random() * texts.length); // 随机初始化当前索引    
        self.setData({ displayText: texts[currentIndex] });    
        
        this.data.intervalId = setInterval(function () {    
          currentIndex = (currentIndex + 1) % texts.length; // 更新索引    
          self.setData({ displayText: texts[currentIndex] }); // 更新显示的文本    
        }, 300); // 假设每300ms切换一次文本，可以根据需要调整速度  
        
        // 设置一个超时，在指定时间后停止滚动  
        const autoStopTime = 3000; // 例如，5秒后停止  
        this.data.timeoutId = setTimeout(function () {  
          self.stopScrollingAndShowResult();  
        }, autoStopTime);  
      },
//停止滚动   
    stopScrollingAndShowResult: function () {    
      clearInterval(this.data.intervalId); // 停止定时器  
      clearTimeout(this.data.timeoutId); // 清除超时设置，以防多次触发  
      
      const texts = this.data.texts;    
      const finalIndex = this.data.status_roll // 本地的roll值代表被抽中的学号  
      this.setData({ 
      
         status_roll_string : this.data.status_roll.toString() ,  
       
        // finalResult: texts[finalIndex] // 存储最终结果（如果需要后续使用）和data{}配合使用    
      });    
      this.setData({
        displayText: this.data.status_roll_string, // 更新显示文本为最终结果    
      })
    },    
//生命周期卸载      
    onUnload: function () {    
  
      this.stopPolling();           // 页面卸载时停止轮询
      clearInterval(this.data.intervalId); // 页面卸载时清除定时器  
      clearTimeout(this.data.timeoutId); // 页面卸载时清除超时设置  
    },
    //停止轮询
    stopPolling: function() {  
        if (this.intervalId2) {  
          clearInterval(this.intervalId2);  
          this.intervalId2 = null; // 清除引用  
        }  
      }  
  }    
  
});