Skip to content

W
wechatapp.shangjiadao.com
Commit 087f6d56 authored by wangxuelai's avatar wangxuelai
Browse files
Options

'新的富文本编辑组件把callback暴露出来'

parent 58f4b506
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 178 deletions
business/pages/themeeditor/index.js
View file @ 087f6d56
......@@ -22,6 +22,7 @@ var app = getApp();
Page({
// mixins: [deepCopy(require('../../../mixins/myMins/audioCallback'))],
data: {
editType: 1, // 1作业打卡 2 日历打卡 3 闯关打卡
maxLength: 500,
maxImgCount: 9,
maxVideoCount: 9,
......@@ -32,12 +33,45 @@ Page({
id: 0,
tid: 0,
sid: 0,
calendarparams: {
type: 0, // 0无限制 1录音 2视频 3照片
title: '',
content: [{
type: 'text',
value: '闯关打卡的描述'
}],
is_cheat: 0,
is_encrypt: 0,
force_status: 2,
force_num: 0,
push_status: 2,
text_require_status: 2,
text_require_num: 0,
image_require_status: 2,
image_require_num: 0,
video_require_status: 2,
video_require_num: 0,
audio_require_status: 2,
audio_require_num: 0,
supplement_status: 2,
supplement_num: 0,
startDate: formatDate(new Date().getTime()/1000).split(' ')[0],
startTime: formatDate(new Date().getTime()/1000).split(' ')[1],
endDate: formatDate((new Date().getTime()+86400*1000*7)/1000).split(' ')[0],
endTime: formatDate((new Date().getTime()+86400*1000*7)/1000).split(' ')[1],
clock_start_time: '00:00',
clock_end_time: '23:59',
push_time: '09:00',
join_rule_type: 1,
join_secret: '',
class_ids: '',
},
params: {
type: 0, // 0无限制 1录音 2视频 3照片
title: '',
content: [{
type: 'text',
value: '养成练字习惯将有助于培养耐性，同时还能陶冶情操、提升审美能力，今天起请同学们坚持！养成练字习惯将有助于培养耐性，同时还能陶冶情操、提升审美能力。今天起请同学们坚持！养成练字习惯将有助于培养耐性，同时还能陶冶情操、提升审美能力。'
value: '作业打卡的描述'
}],
is_cheat: 0,
// is_encrypt: 0,
......@@ -113,14 +147,6 @@ Page({
title: '',
id: 0,
},
mockTitleList: [
{type: 1,label:"课后作业",title: '请各位同学提交本次课后布置的作业'},
{type: 2,label:"周末作业",title: '请各位同学提交本周周末布置的作业'},
{type: 3,label:"演讲一段话",title: '请各位同学演讲本次作业要讲的话'},
{type: 4,label:"练习动作",title: '请各位同学练习一下动作'},
{type: 5,label:"今日练字作业",title: '请各位同学认真查看今日要练习的作业，并跟着练习'}
],
currentMockType: 0,
successDailogShow: false,
actPalyaudioValue: ''
},
......@@ -133,13 +159,15 @@ Page({
sid,
my,
classes,
editType,
} = options;
this.setData({
id,
tid,
clone: clone || '',
sid: sid || '',
my: my || 0
my: my || 0,
editType,
});
if (tid == 0) {
const currentclasses = classes ? JSON.parse(decodeURIComponent(classes)) : [];
......@@ -413,11 +441,18 @@ Page({
const {
value
} = e.detail;
let currentMockItem = this.data.mockTitleList.filter(item=>item.title == value)[0];
this.setData({
'params.title': value.length > 36 ? value.substr(0, 36) : value,
currentMockType: currentMockItem? currentMockItem.type: 0
})
const { editType } = this.data;
if (editType == 1) {
this.setData({
'params.title': value.length > 36 ? value.substr(0, 36) : value,
})
} else if (editType == 2) {
this.setData({
'calendarparams.title': value.length > 36 ? value.substr(0, 36) : value,
})
} else if (editType == 3) {
}
},
selectType() {
const that = this;
......@@ -562,6 +597,80 @@ Page({
this.data.submiting = false
})
},
// 跟文本编辑器有关的操作
addeditoritem (e) {
const { editType, calendarparams, params } = this.data;
if (editType == 1) {
const content = params.content;
content.push(e.detail);
this.setData({
'params.content': content,
})
} else if (editType == 2) {
const content = calendarparams.content;
content.push(e.detail);
this.setData({
'calendarparams.content': content,
})
} else if (editType == 3) {
}
},
textChange(e) {
const { value, index } = e.detail;
const { editType, calendarparams, params } = this.data;
if (editType == 1) {
this.setData({
[`params.content[${index}].value`]: value,
})
} else if (editType == 2) {
this.setData({
[`calendarparams.content[${index}].value`]: value,
})
} else if (editType == 3) {
}
},
delitem(e) {
const { editType, calendarparams, params } = this.data;
if (editType == 1) {
const content = params.content;
content.splice(e.detail, 1);
this.setData({
'params.content': content,
})
} else if (editType == 2) {
const content = calendarparams.content;
content.splice(e.detail, 1);
this.setData({
'calendarparams.content': content,
})
} else if (editType == 3) {
}
},
exchange(e) {
// const content = this.data.content;
// content.splice(index-1, 2, content[index], content[index - 1]);
const index = e.detail;
const { editType, calendarparams, params } = this.data;
if (editType == 1) {
const content = params.content;
content.splice(index-1, 2, content[index], content[index - 1]);
this.setData({
'params.content': content,
})
} else if (editType == 2) {
const content = calendarparams.content;
content.splice(index-1, 2, content[index], content[index - 1]);
this.setData({
'calendarparams.content': content,
})
} else if (editType == 3) {
}
},
// 跟文本编辑器有关的操作
// 跟录音相关的操作
addVoice(e) {
const {
......@@ -577,10 +686,30 @@ Page({
src,
duration
} = e.detail;
this.selectComponent('#sjd-media-editor').pushVoice({
src,
duration
}); // 页面向组件传递参数
const { editType, calendarparams, params } = this.data;
if (editType == 1) {
const content = params.content;
content.push({
type: 'voice',
value: src,
duration
});
this.setData({
'params.content': content,
})
} else if (editType == 2) {
const content = calendarparams.content;
content.push({
type: 'voice',
value: src,
duration
});
this.setData({
'calendarparams.content': content,
})
} else if (editType == 3) {
}
},
// 跟录音相关的操作
// 跟录音相关的操作
......@@ -1159,5 +1288,14 @@ Page({
wx.navigateTo({
url: `/business/pages/themead/list?sid=${this.data.sid}&id=${id}`,
})
},
editTypeChange(e) {
const { type } = e.currentTarget.dataset;
if (type == this.data.editType) {
return;
}
this.setData({
editType: type,
});
}
})
\ No newline at end of file
business/pages/themeeditor/index.wxml
View file @ 087f6d56
......@@ -3,104 +3,198 @@
<view class="theme-editor-container clearfix {{showWarn ? 'opacitybody' : ''}}">
<view class="themetypebox">
<view class="themetab">
<view class="themetypeitem active">作业打卡</view>
<view class="themetypeitem ">日历打卡</view>
<view class="themetypeitem">闯关打卡</view>
<view class="themetypeitem {{editType == 1 ? 'active' : ''}}" data-type="1" bindtap="editTypeChange">作业打卡</view>
<view class="themetypeitem {{editType == 2 ? 'active' : ''}}" data-type="2" bindtap="editTypeChange">日历打卡</view>
<view class="themetypeitem {{editType == 3 ? 'active' : ''}}" data-type="3" bindtap="editTypeChange">闯关打卡</view>
</view>
<view style="color: #999999; text-align: right;">
<view style="color: #999999; text-align: right;" wx:if="{{editType == 1}}">
<text style="color: #16B0FD;font-size: 22rpx;">什么是作业打卡?</text>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item title" >
<view class="item-l">作业标题</view>
<view class="item-r">
<textarea class="title-input" bindinput="titleInput" value="{{params.title}}" placeholder="请输入此次作业标题" wx:if="{{!modalClass}}" auto-height="true"></textarea>
</view>
</view>
<view style="color: #999999; text-align: right;" wx:if="{{editType == 2}}">
<text style="color: #16B0FD;font-size: 22rpx;">什么是日历打卡?</text>
</view>
<view style="color: #999999; text-align: right;" wx:if="{{editType == 3}}">
<text style="color: #16B0FD;font-size: 22rpx;">什么是闯关打卡?</text>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item" style="padding-bottom: 8px;">
<view class="form-item title" >
<view class="item-l">作业内容</view>
<block wx:if="{{editType == 1}}">
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item title" >
<view class="item-l">作业标题</view>
<view class="item-r">
<textarea class="title-input" bindinput="titleInput" value="{{params.title}}" placeholder="请输入此次作业标题" auto-height="true"></textarea>
</view>
</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item section-content">
<view class="sjd-component-box">
<sjd-media-editor content="{{params.content}}"
id="sjd-media-editor" sid="{{sid}}"
bind:addVoice="addVoice"
placeholder="{{placeholder}}"
bind:playvoice="playvoice"
actionsPalyvalue="{{actPalyaudioValue}}"
bind:pausevoice="pausevoice"
bind:voiceslide="voiceslide"
audioStorage="{{audioStorage}}"
bind:slidestart="slidestart"
bind:slideend="slideend"
bind:delvoice="delvoice"
bind:playvideo="playvideo"
withmask="{{showWarn}}">
</sjd-media-editor>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item" style="padding-bottom: 8px;">
<view class="form-item title" >
<view class="item-l">打卡内容</view>
</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item time">
<view class="item-l">打卡开始时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{startDateInfoArr}}" bindchange="startTimeChange" bindcolumnchange="startDatePickerChange">
{{params.startDate}} {{params.startTime}}
</picker>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item section-content">
<view class="sjd-component-box">
<sjd-media-editor
content="{{params.content}}"
id="sjd-media-editor"
sid="{{sid}}"
bind:addVoice="addVoice"
placeholder="{{placeholder}}"
bind:playvoice="playvoice"
actionsPalyvalue="{{actPalyaudioValue}}"
bind:pausevoice="pausevoice"
bind:voiceslide="voiceslide"
audioStorage="{{audioStorage}}"
bind:slidestart="slidestart"
bind:slideend="slideend"
bind:delvoice="delvoice"
bind:playvideo="playvideo"
withmask="{{showWarn}}"
bind:textchange="textChange"
bind:additem="addeditoritem"
bind:delitem="delitem"
bind:exchange="exchange"
>
</sjd-media-editor>
</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item">
<view class="form-item time">
<view class="item-l">打卡结束时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{endDateInfoArr}}" bindchange="endTimeChange" bindcolumnchange="endDatePickerChange" style="line-height: 40rpx;">
{{params.endDate}} {{params.endTime}}
</picker>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item time">
<view class="item-l">打卡开始时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{startDateInfoArr}}" bindchange="startTimeChange" bindcolumnchange="startDatePickerChange">
{{params.startDate}} {{params.startTime}}
</picker>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="section-tip" style="color: #999999;margin-bottom:12px;">打卡时间结束后将无法提交打卡!</view>
<view class="section-wrap" bindtap="goyinxiaoPage">
<view class="section-item">
<view class="form-item">
<view class="item-l">打卡营销页</view>
<view class="item-r">
<view class="label">{{themeAdInfo.id != 0 ? themeAdInfo.title : '请选择营销页'}}</view>
<image class="icon-arr" src="{{imageRoot}}2b/organizationalmgt/right.png?{{imageVersion}}"/>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item">
<view class="form-item time">
<view class="item-l">打卡结束时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{endDateInfoArr}}" bindchange="endTimeChange" bindcolumnchange="endDatePickerChange" style="line-height: 40rpx;">
{{params.endDate}} {{params.endTime}}
</picker>
</view>
</view>
</view>
</view>
</view>
<view class="section-tip" style="color: #999999;">可在学生加入打卡前展示, 此功能可收集有意向学生的联系方式 <text style="color: #16B0FD;">了解详情</text></view>
</view>
<view class="section-wrap" bindtap="bindMoreSetting">
<view class="section-tip" style="color: #999999;margin-bottom:12px;">打卡时间结束后将无法提交打卡!</view>
<view class="section-wrap" bindtap="goyinxiaoPage">
<view class="section-item">
<view class="form-item">
<view class="item-l">高级设置</view>
<view class="item-r" bindtap="bindMoreSetting">
<view class="item-l">打卡营销页</view>
<view class="item-r">
<view class="label">{{themeAdInfo.id != 0 ? themeAdInfo.title : '请选择营销页'}}</view>
<image class="icon-arr" src="{{imageRoot}}2b/organizationalmgt/right.png?{{imageVersion}}"/>
</view>
</view>
</view>
<view class="section-tip" style="color: #999999;">设置学生打卡参与方式、作业要求、打卡模式等</view>
</view>
<view class="section-tip" style="color: #999999;">可在学生加入打卡前展示, 此功能可收集有意向学生的联系方式 <text style="color: #16B0FD;">了解详情</text></view>
</view>
<view class="section-wrap" bindtap="bindMoreSetting">
<view class="section-item">
<view class="form-item">
<view class="item-l">高级设置</view>
<view class="item-r" bindtap="bindMoreSetting">
<image class="icon-arr" src="{{imageRoot}}2b/organizationalmgt/right.png?{{imageVersion}}"/>
</view>
</view>
</view>
<view class="section-tip" style="color: #999999;">设置学生打卡参与方式、作业要求、打卡模式等</view>
</view>
</block>
<block wx:if="{{editType == 2}}">
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item title" >
<view class="item-l">作业标题</view>
<view class="item-r">
<textarea class="title-input" bindinput="titleInput" value="{{calendarparams.title}}" placeholder="请输入此次日历打卡标题" auto-height="true"></textarea>
</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item" style="padding-bottom: 8px;">
<view class="form-item title" >
<view class="item-l">打卡内容</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item section-content">
<view class="sjd-component-box">
<sjd-media-editor
content="{{calendarparams.content}}"
id="sjd-media-editor"
sid="{{sid}}"
bind:addVoice="addVoice"
placeholder="{{placeholder}}"
bind:playvoice="playvoice"
actionsPalyvalue="{{actPalyaudioValue}}"
bind:pausevoice="pausevoice"
bind:voiceslide="voiceslide"
audioStorage="{{audioStorage}}"
bind:slidestart="slidestart"
bind:slideend="slideend"
bind:delvoice="delvoice"
bind:playvideo="playvideo"
withmask="{{showWarn}}"
bind:textchange="textChange"
bind:additem="addeditoritem"
bind:delitem="delitem"
bind:exchange="exchange"
>
</sjd-media-editor>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item borderbottom1px">
<view class="form-item time">
<view class="item-l">打卡开始时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{startDateInfoArr}}" bindchange="startTimeChange" bindcolumnchange="startDatePickerChange">
{{calendarparams.startDate}} {{calendarparams.startTime}}
</picker>
</view>
</view>
</view>
</view>
</view>
<view class="section-wrap pdlpdr24" style="margin-bottom: 0;">
<view class="section-item">
<view class="form-item time">
<view class="item-l">打卡结束时间</view>
<view class="item-r">
<view class="label">
<picker mode="multiSelector" range="{{datePickerArr}}" value="{{endDateInfoArr}}" bindchange="endTimeChange" bindcolumnchange="endDatePickerChange" style="line-height: 40rpx;">
{{calendarparams.endDate}} {{calendarparams.endTime}}
</picker>
</view>
</view>
</view>
</view>
</view>
<view class="section-tip" style="color: #999999;margin-bottom:12px;">打卡时间结束后将无法提交打卡!</view>
</block>
<block wx:if="{{editType == 3}}">
闯关打卡
</block>
<sound-recording sid="{{sid}}" show="{{audioStatus.show}}" bind:addVoice="addVoice" bind:pushVoice="pushVoice">
</sound-recording>
</view>
......
components/newsjdmediaeditor/index.js
View file @ 087f6d56
......@@ -91,7 +91,6 @@ Component({
iosPhoneWarn: false,
},
created () {
console.log(this.data.content, 'this.data.content')
},
attached () {
},
......@@ -109,8 +108,9 @@ Component({
textareaChange (e) {
const {currentTarget, detail} = e;
const index = currentTarget.dataset.index;
this.setData({
[`content[${index}].value`]: detail.value
this.triggerEvent('textchange', {
value: detail.value,
index,
})
},
addText () { // 添加文本的操作
......@@ -123,13 +123,10 @@ Component({
value: '',
style: ''
});
this.setData({
content,
}, () => {
// 进行textBoxLength计算
this.setData({
textBoxLength: this.countCaculate('text', this.data.content)
})
this.triggerEvent('additem', {
type: 'text',
value: '',
style: ''
})
},
addImg (tempFiles) { // 添加图片的操作
......@@ -203,19 +200,12 @@ Component({
})
let uploadingIndex = this.data.uploadingIndex + 1;
let content = JSON.parse(JSON.stringify(this.data.content));
content.push({
this.triggerEvent('additem', {
type: 'img',
value: filename
})
console.log(content,'content')
});
this.setData({
content,
uploadingIndex,
}, () => {
this.setData({
imgBoxLength: this.countCaculate('img', this.data.content),
})
})
this.singleUploadFile(access);
} else { // 失败的处理
......@@ -253,13 +243,6 @@ Component({
}
let mySystem = wx.getSystemInfoSync();
let needIosWarn = LocalStorage.getItem('needIosWarn');
// if (mySystem.system && mySystem.system.toLowerCase().indexOf('ios') != -1 && !needIosWarn) {
// this.setData({
// iosPhoneWarn: true
// })
// } else {
// this.addVideoMethod();
// }
this.addVideoMethod();
},
closeIosWarnDia () {
......@@ -339,20 +322,12 @@ Component({
wx.showToast({
title: '上传成功'
})
let content = JSON.parse(JSON.stringify(this.data.content));
content.push({
this.triggerEvent('additem', {
type: 'video',
value: filename,
poster: filename,
mode: 'm3u8'
})
this.setData({
content,
}, () => {
this.setData({
videoBoxLength: this.countCaculate('video', this.data.content)
})
})
});
} else {
wx.hideLoading();
wx.showModal({
......@@ -378,58 +353,13 @@ Component({
const {currentTarget} = e;
const index = currentTarget.dataset.index;
const type = currentTarget.dataset.type;
let content = JSON.parse(JSON.stringify(this.data.content));
content.splice(index, 1);
this.triggerEvent('delitem', index);
// 删除录音的操作
if (type == 'voice') {
this.triggerEvent('delvoice', {
value: currentTarget.dataset.value
})
}
this.setData({
content
}, () => {
switch(type) {
case 'text':
this.setData({
textBoxLength: this.countCaculate('text', this.data.content)
})
break;
case 'img':
this.setData({
imgBoxLength: this.countCaculate('img', this.data.content)
})
break;
case 'voice':
this.setData({
voiceBoxLength: this.countCaculate('voice', this.data.content)
})
break;
case 'video':
this.setData({
videoBoxLength: this.countCaculate('video', this.data.content)
})
break;
default:
break;
}
})
},
pushVoice ({src, duration}) {
let content = JSON.parse(JSON.stringify(this.data.content));
content.push({
type: 'voice',
value: src,
duration
});
this.setData({
content,
}, () => {
// 进行textBoxLength计算
this.setData({
voiceBoxLength: this.countCaculate('voice', this.data.content)
})
})
},
// 播放音频的相关操作 只是作为一个触发器 所有的录音操作在视频中进行
playvoice (e) {
......@@ -480,10 +410,11 @@ Component({
exchangeIndex: index
})
setTimeout(() => {
const content = this.data.content;
content.splice(index-1, 2, content[index], content[index - 1]);
// const content = this.data.content;
// content.splice(index-1, 2, content[index], content[index - 1]);
this.triggerEvent('exchange', index)
this.setData({
content,
// content,
exchangeIndex: -1
})
}, 500)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment