隐藏：

签到类型：

页面：

<view class="container">
  <!-- 头部 -->
  <view class="header">
    <view class="top">
      <image class="logo" src="/static/images/ban.png"></image>
      <label class="classname">{{teacherinfo.classname}}</label>
      <tui-icon name="manage" style="position: absolute;right:30rpx;" size="24" color="#fff" bindtap="showMenu"></tui-icon>
      
    </view>
  </view>

  <tui-grid wx:if="{{showMenu}}">
    <block wx:for="{{dataList}}" wx:key="{{index}}">
      <tui-grid-item cell="4" data-name="{{item.name}}" tui-griditem-class="tui-grid-four" bind:click="itemClick">
        <view class="tui-grid-icon">
          <image src="{{item.icon}}"></image>
        </view>
        <text class="tui-grid-label">{{item.name}}</text>
      </tui-grid-item>
    </block>
  </tui-grid>

  <my-edit wx:if="{{showEdit}}" classid="{{teacherinfo.classid}}" classname="{{teacherinfo.classname}}" bindhide="hideEdit"></my-edit>
  <my-qrcode wx:if="{{showQrcode}}" classid="{{teacherinfo.classid}}" classname="{{teacherinfo.classname}}" bindclose="hideQrcode"></my-qrcode>
  <my-teacher wx:if="{{showTeacher}}" classid="{{teacherinfo.classid}}" classname="{{teacherinfo.classname}}"></my-teacher>
  <my-student wx:if="{{showStudent}}" classid="{{teacherinfo.classid}}" classname="{{teacherinfo.classname}}"></my-student>
  <my-jilu wx:if="{{showJilu}}" classid="{{teacherinfo.classid}}" classname="{{teacherinfo.classname}}"></my-jilu>
  <tui-actionsheet show="{{showActionSheet}}" tips="请选择签到类型" item-list="{{itemList}}" mask-closable="{{maskClosable}}" is-cancel="{{true}}" bind:click="selectedKaoqin" bind:cancel="closeActionSheet"></tui-actionsheet>
</view>

js:

// pages/teacher/banji/detail.js
const app = getApp()
Page({
  data: {
    showMenu: true,
    teacherinfo:{},
    showActionSheet: false,
    maskClosable: true,
    isCancel: true,
    showEdit: false,
    showQrcode: false,
    showTeacher: false,
    showStudent: false,
    showJilu: false,
    itemList: [{
      text: "限时签到",
      color: "#1a1a1a"
    }, {
      text: "人工签到",
      color: "#1a1a1a"
    }],
    dataList: [{
      name: "签到",
      icon: '/static/images/qian.png',
      size: 30
    }, {
      name: "编辑",
      icon: '/static/images/bianji.png',
      size: 30
    }, {
      name: "退出班级",
      icon: '/static/images/tuiban.png',
      size: 30
    }, {
      name: "解散班级",
      icon: '/static/images/jiesan.png',
      size: 30
    }, {
      name: "二维码",
      icon: '/static/images/erweima.png',
      size: 30
    }, {
      name: "签到记录",
      icon: '/static/images/jilu.png',
      size: 30
    }, {
      name: "学生",
      icon: '/static/images/xuesheng.png',
      size: 30
    }, {
      name: "教师",
      icon: '/static/images/jiaoshi.png',
      size: 30
    }]
  },


  //页面加载时
  onLoad: function (options) {
    let index = wx.getStorageSync('index')
    console.log(index)
    let teacherinfo = wx.getStorageSync('teacherinfo')[index]
    this.setData({
      teacherinfo
    })
    let classid = this.data.teacherinfo.classid
    this.setData({
      classid
    })
    wx.setStorageSync('classid', classid)
  },
  //显示隐藏功能栏
  showMenu: function(e) {
    this.setData({
      showMenu: !this.data.showMenu
    })
  },
  //关闭
  closeActionSheet: function() {
    this.setData({
      showActionSheet: false
    })
  },
  //显示哪个组件
  itemClick: function(e) {
    let name = e.currentTarget.dataset.name
    console.log(name)
    switch (name) {
      case '签到':
        this.setData({
          showActionSheet: true
        })
        break
      case "编辑":
        this.setData({
          showEdit: true,
          showQrcode: false,
          showTeacher: false,
          showStudent: false,
          showJilu: false
        })
        break
      case "退出班级":
        this.exitbanji(this.data.teacherinfo.classid)
        break
      case "解散班级":
        this.del()
        break
      case "二维码":
        this.setData({
          showQrcode: true,
          showEdit: false,
          showTeacher: false,
          showStudent: false,
          showJilu: false
        })
        break
      case "签到记录":
        this.setData({
          showJilu: true,
          showQrcode: false,
          showEdit: false,
          showTeacher: false,
          showStudent: false
        })
        break
      case "学生":
        this.setData({
          showStudent: true,
          showJilu: false,
          showQrcode: false,
          showEdit: false,
          showTeacher: false
        })
        break
      case "教师":
        this.setData({
          showTeacher: true,
          showJilu: false,
          showQrcode: false,
          showEdit: false,
          showStudent: false
        })
        break
    } //switch 结束
  }, //itemClick方法结束

  //选择签到类型
  selectedKaoqin: function(e) {
    let index = e.detail.index;
    this.closeActionSheet();
    if (index == 0) {
      wx.navigateTo({
        url: '/pages/teacher/qiandao/index?classid=' + this.data.teacherinfo.classid,
      })
    } else {
      wx.navigateTo({
        url: '/pages/teacher/qiandao/rengong?classid=' + this.data.teacherinfo.classid,
      })
    }

  },




  //退出班级
  exitbanji: function() {
    wx.showModal({
      title: '提示',
      content: '是否退出该班级',
      success(res) {
        if (res.confirm) {
          let token = wx.getStorageSync('token')
          let classid = wx.getStorageSync('classid')
          wx.request({
            url: app.globalData.exitbanji,
            method: 'POST',
            header: {
              'content-type': 'application/x-www-form-urlencoded',
              'cookie': token
            },
            data: {
              token,
              classid
            },
            //成功后
            success: res => {
              wx.showToast({
                title: res.data.message,
                icon: 'success',
                duration: 2000
              })
              //移除缓存
              wx.removeStorage({
                key: 'teacherinfo'
              })
              wx.navigateBack({
                complete: (res) => { }
              })

            }
           
          })

        }
      }
    })
  },
  //解散班级
  del: function() {
    wx.showModal({
      title: '提示',
      content: '是否解散该班级',
      success(res) {
        if (res.confirm) {
          let token = wx.getStorageSync('token')
          let classid = wx.getStorageSync('classid')
          wx.request({
            url: app.globalData.delbanji,
            method: 'POST',
            header: {
              'content-type': 'application/x-www-form-urlencoded',
              'cookie': token
            },
            data: {
              token,
              classid
            },
            //成功后
            success: res => {
              if (res.data.error) {
                wx.showToast({
                  title: res.data.message,
                  icon: 'none',
                  duration: 2000
                })
                return
              } else {
                wx.showToast({
                  title: res.data.message,
                  icon: 'success',
                  duration: 2000
                })
              }

              //移除缓存
              wx.removeStorage({
                key: 'teacherinfo'
              })
              wx.navigateBack({
                complete: (res) => { }
              })

            }

          })


        }
      }
    })
  },

  //隐藏编辑班级
  hideEdit: function(e) {
    this.setData({
      showEdit: false
    })
    if (e.detail.classname) {
      let teacherinfo = this.data.teacherinfo
      teacherinfo.classname = e.detail.classname
      this.setData({
        teacherinfo: teacherinfo
      })
    }


  },

  //关闭二维码
  hideQrcode: function() {
    this.setData({
      showQrcode: false
    })
  },

  
  onReady: function() {

  },

  
  onShow: function() {

  },

  
  onHide: function() {

  },

  
  onUnload: function() {

  },

  
  onPullDownRefresh: function() {

  },

  
  onReachBottom: function() {

  },

  
  onShareAppMessage: function() {

  }
})

json：引用自定义组件和九宫格

{
  "usingComponents": {
    "tui-icon": "/static/thorui/components/icon/icon",
    "tui-grid": "/static/thorui/components/grid/grid",
    "tui-grid-item": "/static/thorui/components/grid-item/grid-item",
    "tui-actionsheet": "/static/thorui/components/actionsheet/actionsheet",
    "my-edit": "/pages/gongneng/edit/index",
    "my-qrcode": "/pages/gongneng/qrcode/index",
    "my-teacher": "/pages/gongneng/teacher/index",
    "my-student": "/pages/gongneng/student/index",
    "my-kaoqin": "/pages/gongneng/kaoqin/index",
    "my-jilu": "/pages/gongneng/jilu/index"
    
  }
}

样式：

.container {
  padding-bottom: env(safe-area-inset-bottom);
}
my-edit{
  width: 92%;
}
my-student{
  width: 92%;
}
my-teacher{
  width: 92%;
}
my-jilu{
  width: 92%;
}


.header {
  background-color: #4e75d3;
  width: 100%;
  height: 106rpx;
  line-height: 106rpx;
}

.top {
  padding-left: 30rpx;
}

.classname {
  color: #fff;
  position: absolute;
  left: 92rpx;
}

.logo {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  top: 11rpx;
}


.tui-title {
  padding: 50rpx 30rpx 30rpx 30rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
  font-weight: bold;
  border-top: 0 !important;
}

.tui-grid-icon {
  width: 64rpx;
  height: 64rpx;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

.tui-grid-icon + .tui-grid-label {
  margin-top: 10rpx;
}

.tui-grid-four {
  padding: 30rpx 20rpx !important;
}

.tui-grid-5 {
  margin-top: 0 !important;
  color: #8a5966 !important;
}

.tui-grid-five {
  padding: 20rpx !important;
}

.tui-grid-label {
  display: block;
  text-align: center;
  font-weight: 400;
  color: #333;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}