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

在这里插入图片描述
页面:

<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
}

猜你喜欢

转载自blog.csdn.net/xu_ze_qin/article/details/107105219
今日推荐