2021-08-09

记录小程序 点击选择/取消选中 切换

【微信小程序添加班级-哔哩哔哩】哔哩哔哩

效果如下：

代码如下：

wxml文件

<view class="title">参与班级：</view>
 <!--<view class="class-btn" bindtap="showHideClass">添加班级</view>-->
<view class="class-box">
     <block wx:for="{{classList}}" wx:key="this">
          <view class="item {{isChecked[index]?'isChecked':''}}" data-index="{{index}}" data-goodsId="{{item.goods_id}}" bindtap="getClassId">{{item.name}}</view>
     </block>   
</view>

js 文件

// pages/classEventAdd/classEventAdd.js
const App = getApp();
let richText = null;  //富文本编辑器实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 组件参数设置，传递到组件
    defaultData: {
      title: "添加班级活动", // 导航栏标题
    },
    readOnly: false, //编辑器是否只读
    placeholder: '在这里输入内容...',
    title: '',
    imgUrl: '',
    //isShow: false, //班级开关列表
    classList: [
      {
        'name': '六年级（2）班',
        'goods_id': 102356
      },
      {
        'name': '308班',
        'goods_id': 102366
      },
      {
        'name': '301班',
        'goods_id': 103356
      },
      {
        'name': '508班',
        'goods_id': 102366
      },
      {
        'name': '707班',
        'goods_id': 103356
      },


    ],
    isChecked: [],//判断选中
    ids: []//选中的班级id
  },

 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //自定义头部(全局变量)
    this.setData({
      navBarHeight: App.globalData.navBarHeight
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },



  //添加班级
  getClassId: function (e) {
    //获取当前班级的索引 及 goods_id
    let index = e.target.dataset.index;
    let goodsid = e.target.dataset.goodsid;
    //记录点击状态  true选中    false取消选中
    this.setData({
      [`isChecked[${index}]`]: !this.data.isChecked[index]
    })

    //记录选中班级的 goods_id , 取消时记为 ''
    if (this.data.isChecked[index] == true) {
      this.setData({
        [`ids[${index}]`]: goodsid
      })
    } else {
      this.setData({
        [`ids[${index}]`]: ""
      })

    }

  },

  // 编辑器初始化完成时触发，可以获取组件实例
  onEditorReady() {
    console.log('[onEditorReady callback]')
    richText = this.selectComponent('#richText'); //获取组件实例
  },

  //设置富文本内容
  setContents(rechtext) {
    this.editorCtx.setContents({
      html: rechtext,
      success: res => {
        console.log('[setContents success]', res)
      }
    })
  },

  //撤销
  undo() {
    console.log('[undo callback]')
  },

  //恢复
  restore() {
    console.log('[restore callback]')
  },

  //清空编辑器内容
  clear() {
    this.editorCtx.clear({
      success: res => {
        console.log("[clear success]", res)
      }
    })
  },

  //清空编辑器事件
  clearBeforeEvent() {
    console.log('[clearBeforeEvent callback]')
    wx.showModal({
      cancelText: '取消',
      confirmText: '确认',
      content: '确认清空编辑器内容吗？',
      success: (result) => {
        if (result.confirm) {
          richText.clear();
        }
      },
      fail: (res) => { },
    })
  },

  //清空编辑器成功回调
  clearSuccess() {
    console.log('[clearSuccess callback]')
  },

  //清除当前选区的样式
  removeFormat() {
    this.editorCtx.removeFormat();
  },

  //单张图片插入
  addHomeworkPic() {
    let _self = this;

    wx.chooseImage({

      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {

        // tempFilePath可以作为img标签的src属性显示图片
        let path = res.tempFilePaths[0];
        //构造参数
        let openInfo = wx.getStorageSync("openInfo");
        //处理图片
        const Multipart = require("../../utils/Multipart.min.js")
        //
        const fields = [{
          name: 'openid',
          value: openInfo.openid
        }, {
          name: 'session_key',
          value: openInfo.session_key
        }, {
          name: 'image_type',
          value: 'exam'
        }
        ];

        const files =
          [
            //可上传多个file文件类型
            { name: "upload_file", filePath: path },
          ];

        let result = new Multipart({ files, fields }).submit(App.globalData.baseUrl + '/upload_image');

        wx.showLoading({
          title: '上传中...',
          mask: true,
        });

        result.then(function (res) {

          let url = res.data.data.file_url;
          _self.setData({
            imgUrl: url
          })
          wx.hideLoading();
        });
      }
    })
  },

  //编辑器插入图片
  insertImageEvent() {

    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {

        // tempFilePath可以作为img标签的src属性显示图片
        let path = res.tempFilePaths[0];
        //构造参数
        let openInfo = wx.getStorageSync("openInfo");
        //处理考试图片
        const Multipart = require("../../utils/Multipart.min.js")
        //
        const fields = [{
          name: 'openid',
          value: openInfo.openid
        }, {
          name: 'session_key',
          value: openInfo.session_key
        }, {
          name: 'image_type',
          value: 'exam'
        }
        ];

        const files =
          [
            //可上传多个file文件类型
            { name: "upload_file", filePath: path },
          ];

        let result = new Multipart({ files, fields }).submit(App.globalData.baseUrl + '/upload_image');
        result.then(function (res) {

          let url = res.data.data.file_url;
          //调用子组件方法，图片应先上传再插入，不然预览时无法查看图片。
          richText.insertImageMethod(url).then(res => {
            console.log('[insert image success callback]=>', res)
          }).catch(res => {
            console.log('[insert image fail callback]=>', res)
          });

        });
      }
    })
  },

  //保存，获取编辑器内容,并提交到后台
  getEditorContent(res) {
    let {
      value
    } = res.detail;

    wx.showToast({
      title: '获取编辑器内容成功',
      icon: 'none',
    })
    console.log('[getEditorContent callback]=>', value)
    console.log(this.data.title)
    console.log(this.data.imgUrl)
    console.log(this.data.ids)
  },

  //show文本工具栏
  showTextTool() {
    this.setData({
      textTool: !this.data.textTool
    })
  },

  //编辑器聚焦时触发
  bindfocus(res) {
    let {
      value
    } = res.detail;
    // console.log('[bindfocus callback]=>', value)
  },

  //编辑器失去焦点时触发
  bindblur(res) {
    let {
      value
    } = res.detail;
    // console.log('[bindblur callback]=>', value)
  },

  //编辑器输入中时触发
  bindinput(res) {
    let {
      value
    } = res.detail;
    // console.log('[bindinput callback]=>', value)
    App.globalData.richTextContents = value.detail.html;
  }

})