隐藏： 签到类型： 页面：
<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; }