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