记录小程序 点击选择/取消选中 切换
【微信小程序添加班级-哔哩哔哩】哔哩哔哩
效果如下:
代码如下:
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;
}
})