12--微信小程序 长按加入班级(返回complete,index下标处理)

    技术2023-07-06  65

    页面:

    <view> <view class="tui-list-view tui-view"> <view class="tui-list-title">长按可以加入班级</view> <view class="tui-list-content"> <block wx:for="{{jiaru}}"> <tui-cell bind:longpress="add" data-index="{{index}}" tui-cell-class="tui-msg"> <view class="tui-msg-box"> <image src="/static/images/my_banji.png" class="tui-msg-pic" mode="widthFix"></image> <view class="tui-msg-item"> <view class="tui-msg-name">{{item.classname}}</view> <view class="tui-msg-content">创建人:{{item.name}}</view> </view> </view> <view class="tui-msg-right"> <view class="tui-msg-time">{{item.time}}</view> <view class="count">学生人数:{{item.studentcount}}</view> </view> </tui-cell> </block> </view> </view> </view>

    js:

    // pages/teacher/banji/join.js const app = getApp() var util = require('../../../utils/util.js') Page({ data: { jiaru: [], classid:'' }, onLoad: function(options) { this.jiaru() }, jiaru: function() { let token = wx.getStorageSync('token') wx.request({ url: app.globalData.noadd_banji, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded', 'cookie': token }, data: { token }, //成功后 success: res => { let list = Array.prototype.slice.call(res.data); list.forEach(item => { let time = util.formatTimeToYmd(item.time) let classname = item.classname let name = item.name let studentcount = item.studentcount item['time'] = time item['classname'] = classname item['name'] = name item['studentcount'] = studentcount }) this.setData({ jiaru: list }) wx.setStorageSync('jiaru', list) } }) }, //长按加入班级 add:function(e) { var index = e.currentTarget.dataset.index console.log(index) var jiaru = wx.getStorageSync('jiaru')[index] var classid = jiaru.classid var classname = jiaru.classname wx.showModal({ title: '提示', content: '是否加入'+classname, success(res) { if (res.confirm) { var token = wx.getStorageSync('token'); wx.request({ url: app.globalData.join, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded', 'cookie': token }, data: { token, classid }, //成功后 success: res => { // this.jiaru() wx.showToast({ title:res.data.message, icon: 'success', duration: 3000 }) //移除缓存 wx.removeStorage({ key: 'teacherinfo' }) wx.navigateBack({ complete: (res) => { } }) } }) } } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })

    json:

    { "usingComponents": { "tui-cell": "/static/thorui/components/list-cell/list-cell", "tui-view": "/static/thorui/components/list-view/list-view" } }

    样式:

    .logo { height: 40rpx; width: 40rpx; } .container { padding-bottom: env(safe-area-inset-bottom); } .tui-cell-name { padding-left: 20rpx; vertical-align: middle; line-height: 30rpx; } .tui-list::after{ left: 94rpx !important } .tui-right { margin-left: auto; margin-right: 34rpx; font-size: 26rpx; line-height: 1; color: #999; } .tui-flex { display: flex; align-items: center; } .tui-msg-box { display: flex; align-items: center; } .tui-msg-pic { width: 100rpx; height: 100rpx; border-radius: 50%; display: block; margin-right: 24rpx; } .tui-msg-item { max-width: 500rpx; min-height: 80rpx; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .tui-msg-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 34rpx; line-height: 1; color: #262b3a; } .tui-msg-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 26rpx; line-height: 1; color: #9397a4; } .tui-msg-right { max-width:390rpx; height: 88rpx; margin-left: auto; text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .tui-msg-right.tui-right-dot{ height: 76rpx; padding-bottom: 10rpx; } .tui-msg-time { width: 100%; font-size: 24rpx; line-height: 24rpx; color: #9397a4; } .tui-badge{ width:auto } .tui-msg::after{ left: 154rpx !important }
    Processed: 0.010, SQL: 9