内容发布新版内容编辑

This commit is contained in:
高健 2021-09-06 16:06:51 +08:00
parent 8ac5111337
commit 1e86f1a0f0
5 changed files with 301 additions and 88 deletions

View File

@ -56,6 +56,8 @@ Page({
audioFile: null, //当前的录音文件
audioDuration: 0, //录音文件的时长
isRecording: false, //是否正在录音
speedStep: 5, //快进快退的时间
sourceType: 'add', //用来标识是添加还是编辑 add添加 edit编辑
optionsList: [{
id: '1',
name: '选项一',
@ -315,12 +317,18 @@ Page({
tempVideo['type'] = 'video'
tempVideo['valueList'] = tempList
tempVideo['displayType'] = _self.data.curVideoDisplay
_self.data.valueList.push(tempVideo)
if (_self.data.sourceType == 'add') {
_self.data.valueList.push(tempVideo)
} else {
_self.data.valueList.splice(_self.data.currentIndex, 1, tempVideo)
}
_self.setData({
valueList: _self.data.valueList,
videoList: [],
curVideoDisplay: 1,
isShowVideo: false
isShowVideo: false,
currentIndex: -1,
sourceType: 'add'
})
} else {
wx.showToast({
@ -343,7 +351,8 @@ Page({
this.setData({
isShowInput: false,
isShowLink: false,
isShowSelect: false
isShowSelect: false,
sourceType: 'add' //重置状态
})
},
//输入框监听
@ -384,18 +393,41 @@ Page({
//保存输入的文本
doConfirmInput() {
var _self = this
if (_self.data.curTextValue == '') {
wx.showToast({
title: '请输入内容',
icon: 'error'
})
if (_self.data.sourceType == 'add') {
if (_self.data.curTextValue == '') {
wx.showToast({
title: '请输入内容',
icon: 'error'
})
} else {
//保存
var tempText = {}
tempText['type'] = 'text'
tempText['value'] = _self.data.curTextValue
var textAlign = 'left'
switch (_self.data.curTextAlign) {
case '1':
textAlign = 'left'
break
case '2':
textAlign = 'center'
break
case '3':
textAlign = 'right'
break
}
tempText['textAlign'] = textAlign
_self.data.valueList.push(tempText)
_self.setData({
valueList: _self.data.valueList,
curTextValue: '',
isShowInput: false,
curTextAlign: '1'
})
}
} else {
//保存
var tempText = {}
tempText['type'] = 'text'
tempText['value'] = _self.data.curTextValue
var textAlign = 'left'
console.log(_self.data.curTextAlign)
//编辑
var textAlign = _self.data.valueList[_self.data.currentIndex].textAlign
switch (_self.data.curTextAlign) {
case '1':
textAlign = 'left'
@ -407,12 +439,13 @@ Page({
textAlign = 'right'
break
}
tempText['textAlign'] = textAlign
_self.data.valueList.push(tempText)
_self.data.valueList[_self.data.currentIndex].value = _self.data.curTextValue
_self.data.valueList[_self.data.currentIndex].textAlign = textAlign
_self.setData({
isShowInput: false,
valueList: _self.data.valueList,
curTextValue: '',
isShowInput: false
curTextAlign: '1'
})
}
},
@ -482,6 +515,36 @@ Page({
}
})
},
//预览视频
viewVideo(e) {
var _self = this
var idx = e.currentTarget.dataset.idx
var index = e.currentTarget.dataset.index
var url = _self.data.valueList[index].valueList[idx].path
var tempItem = {}
tempItem['url'] = url
tempItem['type'] = 'video'
wx.previewMedia({
sources: [tempItem],
})
},
//删除视频
delVideo(e) {
var _self = this
var idx = e.currentTarget.dataset.index
wx.showModal({
title: '提示',
content: '确定要删除该视频吗?',
success(res) {
if (res.confirm) {
_self.data.videoList.splice(idx, 1)
_self.setData({
videoList: _self.data.videoList
})
}
}
})
},
//选择定位点
doChooseLocation(e) {
// var index = e.currentTarget.dataset.index
@ -495,7 +558,56 @@ Page({
},
//编辑条目
editItem(e) {
var _self = this
var idx = e.currentTarget.dataset.index
_self.setData({
sourceType: 'edit'
})
switch (_self.data.valueList[idx].type) {
case 'text':
case 'textarea': //文本域
var align = '1'
if (_self.data.valueList[idx].textAlign == 'left') {
align = '1'
} else if (_self.data.valueList[idx].textAlign == 'center') {
align = '2'
} else {
align = '3'
}
this.setData({
isShowInput: true,
curTextValue: _self.data.valueList[idx].value,
curTextAlign: align
})
break
case 'video': //视频
//构建视频数据
_self.setData({
curVideoDisplay: _self.data.valueList[idx].displayType,
videoList: _self.data.valueList[idx].valueList,
isShowVideo: true
})
break
case 'audio': //音频
_self.checkRecordPermission()
break
case 'photo': //图片
console.log(_self.data.valueList[idx])
break
case 'map': //地图
_self.doChooseLocation()
break
case 'select': //选项
_self.setData({
isShowSelect: true
})
break
case 'link': //链接
_self.setData({
isShowLink: true
})
break
}
},
//插入条目
insertItem(e) {
@ -506,12 +618,17 @@ Page({
},
//删除条目
delItem(e) {
var _self = this
wx.showModal({
title: '提示',
content: '确定要删除该条数据吗?',
success(res) {
if (res.confirm) {
_self.data.valueList.splice(_self.data.currentIndex, 1)
_self.setData({
valueList: _self.data.valueList,
currentIndex: -1
})
}
}
})
@ -551,9 +668,16 @@ Page({
//确定音频
doConfirmAudio() {
var _self = this
if (_self.data.audioFile.isPlay) {
innerAudioContext.stop()
}
var tempAudio = {}
tempAudio['type'] = 'audio'
tempAudio['value'] = _self.data.audioFile
//重置文件的状态
_self.data.audioFile.curDurationStr = '00:00'
_self.data.audioFile.curDuration = 0
_self.data.audioFile.isPlay = false
_self.data.valueList.push(tempAudio)
_self.setData({
valueList: _self.data.valueList,
@ -671,6 +795,9 @@ Page({
var _self = this
if (type && type == 'audio') {
if (_self.data.audioFile != null) {
if (_self.data.audioFile.isPlay) {
innerAudioContext.stop()
}
wx.showModal({
title: '警告',
content: '关闭录音弹窗将清除当前录制的音频文件,确定要关闭吗?',
@ -700,15 +827,36 @@ Page({
slider4change(e) {
var _self = this
var audio = e.currentTarget.dataset.item
var type = e.currentTarget.dataset.type
var idx = e.currentTarget.dataset.idx
var time = Number.parseInt(e.detail.value)
if (audio.isPlay) {
innerAudioContext.seek(e.detail.value)
innerAudioContext.pause()
innerAudioContext.seek(time)
setTimeout(() => {
innerAudioContext.play()
}, 500)
if (type == 'record') {
_self.data.audioFile.curDuration = time
_self.data.audioFile.curDurationStr = '00:' + (time > 9 ? time : '0' + time)
console.log(_self.data.audioFile)
_self.setData({
audioFile: _self.data.audioFile
})
} else {
_self.data.valueList[idx].value.curDuration = time
_self.data.valueList[idx].value.curDurationStr = '00:' + (time > 9 ? time : '0' + time)
_self.setData({
valueList: _self.data.valueList
})
}
}
},
play(e) {
//进行播放
var audio = e.currentTarget.dataset.item
var _self = this
var type = e.currentTarget.dataset.type
var type = e.currentTarget.dataset.type //show展示列表 record录音弹框
var idx = e.currentTarget.dataset.idx
if (audio.isPlay) {
innerAudioContext.stop()
@ -721,76 +869,129 @@ Page({
}
//先需要停止其他录音文件的播放
innerAudioContext.onPlay(() => {
_self.data.audioFile.isPlay = true
_self.setData({
audioFile: _self.data.audioFile
})
if (type == 'record') {
_self.data.audioFile.isPlay = true
_self.setData({
audioFile: _self.data.audioFile
})
} else {
_self.data.valueList[idx].value.isPlay = true
_self.setData({
valueList: _self.data.valueList
})
}
});
innerAudioContext.onStop((res) => {
console.log('停止播放')
//重置文件的状态
_self.setAudioDefault()
if (type == 'record') {
_self.setAudioDefault()
} else {
_self.setShowAudioDefault(idx)
}
})
innerAudioContext.onEnded((res) => {
console.log('播放结束')
//重置文件的状态
_self.setAudioDefault()
if (type == 'record') {
_self.setAudioDefault()
} else {
_self.setShowAudioDefault(idx)
}
})
innerAudioContext.onError((res) => {
wx.showToast({
title: '播放失败',
icon: 'error'
})
_self.setAudioDefault()
if (type == 'record') {
_self.setAudioDefault()
} else {
_self.setShowAudioDefault(idx)
}
})
innerAudioContext.onTimeUpdate(() => {
_self.data.audioFile.curDuration = innerAudioContext.currentTime
var time = Number.parseInt(_self.data.audioFile.curDuration)
_self.data.audioFile.curDurationStr = '00:' + (time > 9 ? time : '0' + time)
_self.setData({
audioFile: _self.data.audioFile
})
var curTime = innerAudioContext.currentTime
if (type == 'record') {
_self.data.audioFile.curDuration = curTime
var time = Number.parseInt(_self.data.audioFile.curDuration)
_self.data.audioFile.curDurationStr = '00:' + (time > 9 ? time : '0' + time)
_self.setData({
audioFile: _self.data.audioFile
})
} else {
_self.data.valueList[idx].value.curDuration = curTime
var timeTemp = Number.parseInt(_self.data.valueList[idx].value.curDuration)
_self.data.valueList[idx].value.curDurationStr = '00:' + (timeTemp > 9 ? time : '0' + timeTemp)
_self.setData({
valueList: _self.data.valueList
})
}
})
},
//设置录音文件恢复初始
setAudioDefault() {
var _self = this
//重置文件的状态
_self.data.audioFile.curDurationStr = '00:00'
_self.data.audioFile.curDuration = 0
_self.data.audioFile.isPlay = false
if (_self.data.audioFile != null) {
//重置文件的状态
_self.data.audioFile.curDurationStr = '00:00'
_self.data.audioFile.curDuration = 0
_self.data.audioFile.isPlay = false
_self.setData({
audioFile: _self.data.audioFile
})
}
},
//重置录音文件状态
setShowAudioDefault(idx) {
var _self = this
_self.data.valueList[idx].value.curDurationStr = '00:00'
_self.data.valueList[idx].value.curDuration = 0
_self.data.valueList[idx].value.isPlay = false
_self.setData({
audioFile: _self.data.audioFile
valueList: _self.data.valueList
})
},
//倒退5秒
rewind(e) {
var _self = this
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.item
var idx = e.currentTarget.dataset.idx
var ix = e.currentTarget.dataset.i
var type = e.currentTarget.dataset.type
if (item.isPlay) {
_self.data.dataList[index].list[idx].valueList[ix].curDuration = _self.data.dataList[index].list[idx].valueList[ix].curDuration - _self.data.speedStep
innerAudioContext.seek(_self.data.dataList[index].list[idx].valueList[ix].curDuration)
_self.setData({
dataList: _self.data.dataList
})
if (type == 'record') {
_self.data.audioFile.curDuration = _self.data.audioFile.curDuration - _self.data.speedStep
innerAudioContext.seek(_self.data.audioFile.curDuration)
_self.setData({
audioFile: _self.data.audioFile
})
} else {
_self.data.valueList[idx].value.curDuration = _self.data.valueList[idx].value.curDuration - _self.data.speedStep
innerAudioContext.seek(_self.data.valueList[idx].value.curDuration)
_self.setData({
valueList: _self.data.valueList
})
}
}
},
//快进5秒
speed(e) {
var _self = this
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.item
var idx = e.currentTarget.dataset.idx
var ix = e.currentTarget.dataset.i
var type = e.currentTarget.dataset.type
if (item.isPlay) {
_self.data.dataList[index].list[idx].valueList[ix].curDuration = _self.data.dataList[index].list[idx].valueList[ix].curDuration + _self.data.speedStep
innerAudioContext.seek(_self.data.dataList[index].list[idx].valueList[ix].curDuration)
_self.setData({
dataList: _self.data.dataList
})
if (type == 'record') {
_self.data.audioFile.curDuration = _self.data.audioFile.curDuration + _self.data.speedStep
innerAudioContext.seek(_self.data.audioFile.curDuration)
_self.setData({
audioFile: _self.data.audioFile
})
} else {
_self.data.valueList[idx].value.curDuration = _self.data.valueList[idx].value.curDuration + _self.data.speedStep
innerAudioContext.seek(_self.data.valueList[idx].value.curDuration)
_self.setData({
valueList: _self.data.valueList
})
}
}
},
onUnload() {

View File

@ -47,9 +47,10 @@
<block wx:if="{{valueList.length>0}}">
<view wx:for="{{valueList}}" wx:key="index" style="margin-top: 15rpx;width: 100%;">
<!-- 文本域 -->
<view wx:if="{{item.type=='text' || item.type=='textarea'}}" catchtap="showEditBox" class="item-box"
data-idx="{{index}}">
<view style="width: 100%;text-align: {{item.textAlign}};font-size: 32rpx;">{{item.value}}</view>
<view wx:if="{{item.type=='text' || item.type=='textarea'}}" catchtap="showEditBox"
class="item-box {{currentIndex==index ? 'sel-border':''}}" data-idx="{{index}}">
<view style="width: 100%;text-align: {{item.textAlign}};font-size: 32rpx;overflow-wrap: break-word;">
{{item.value}}</view>
</view>
<!-- 图片 -->
<view wx:if="{{item.type=='photo'}}" catchtap="showEditBox" class="item-box" data-idx="{{index}}">
@ -82,19 +83,22 @@
<view wx:if="{{item.type=='video'}}" catchtap="showEditBox" class="item-box" data-idx="{{index}}">
<!-- 九宫格 -->
<view class="grid col-3 grid-square flex-sub" wx:if="{{item.displayType=='1'}}" style="width: 100%;">
<view class="bg-img" wx:for="{{item.valueList}}" wx:key="idx" wx:for-item="video">
<view class="bg-img" wx:for="{{item.valueList}}" wx:for-index="idx" wx:key="idx"
wx:for-item="video">
<image src='{{video.coverPath}}' mode='aspectFill'></image>
<image src="/images/ic_video_play.png" mode="scaleToFill"
<image src="/images/ic_video_play.png" mode="scaleToFill" catchtap="viewVideo"
data-idx="{{idx}}" data-index="{{index}}"
style="width: 48rpx;height:48rpx;position: absolute;top:40%;left:40%;">
</image>
</view>
</view>
<block wx:if="{{item.displayType=='2'}}">
<view class="movie-box" wx:for="{{item.valueList}}" wx:key="index" wx:for-item="video">
<view class="movie-box" wx:for="{{item.valueList}}" wx:for-index="idx" wx:key="idx"
wx:for-item="video">
<image src='{{video.coverPath}}' mode='scaleToFill'></image>
<view class="play-box-arrow-flex">
<image src="/images/ic_video_play.png" mode="scaleToFill"
style="width: 96rpx;height:96rpx;">
<image src="/images/ic_video_play.png" mode="scaleToFill" catchtap="viewVideo"
data-idx="{{idx}}" data-index="{{index}}" style="width: 96rpx;height:96rpx;">
</image>
</view>
</view>
@ -107,18 +111,20 @@
<text>{{item.value.curDurationStr}}</text>
<slider class="flex-sub" bindchange="slider4change" min="{{0}}" max="{{item.value.duration}}"
value="{{item.value.curDuration}}" backgroundColor="#cacaca" activeColor="#1296db"
block-size="14" data-item="{{item.value}}" block-color="#1296db" data-idx="{{index}}" />
data-type="show" block-size="14" data-item="{{item.value}}" block-color="#1296db"
data-idx="{{index}}" />
<text>{{item.value.totalDurationStr}}</text>
</view>
<view class="flex justify-between" style="width:80%;">
<image src="/images/ic_audio_rewind.png" mode="scaleToFill" catchtap="rewind"
<image src="/images/ic_audio_rewind.png" mode="scaleToFill" catchtap="rewind" data-type="show"
data-idx="{{index}}" data-item="{{item.value}}">
</image>
<image src="{{item.value.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
data-idx="{{index}}" mode="scaleToFill" catchtap="play" data-item="{{item.value}}">
data-type="show" data-idx="{{index}}" mode="scaleToFill" catchtap="play"
data-item="{{item.value}}">
</image>
<image src="/images/ic_audio_speed.png" mode="scaleToFill" catchtap="speed" data-idx="{{index}}"
data-item="{{item.value}}">
data-type="show" data-item="{{item.value}}">
</image>
</view>
</view>
@ -178,7 +184,7 @@
<view class="dir-box">
<view class="cu-capsule radius" catchtap="chooseDirection" data-idx="1">
<view class="cu-tag {{selDirection=='1' ? 'bg-yellowlight':'bg-grey'}}">
<text class="{{selDirection=='1' ? 'cuIcon-apps':'cuIcon-apps'}}"></text>
<text class="{{selDirection=='1' ? 'cuIcon-radiobox':'cuIcon-round'}}"></text>
</view>
<view class="cu-tag {{selDirection=='1' ? 'line-yellowlight2':'line-black'}}">
插入到下面
@ -187,7 +193,7 @@
<view class="cu-capsule radius" style="margin-left: 15rpx;" catchtap="chooseDirection"
data-idx="2">
<view class="cu-tag {{selDirection== '2' ? 'bg-yellowlight':'bg-grey'}}">
<text class="{{selDirection== '2' ? 'cuIcon-apps':'cuIcon-apps'}}"></text>
<text class="{{selDirection== '2' ? 'cuIcon-radiobox':'cuIcon-round'}}"></text>
</view>
<view class="cu-tag {{selDirection=='2' ? 'line-yellowlight2':'line-black'}}">
插入到上面
@ -249,7 +255,8 @@
<textarea placeholder="请输入内容" bindinput="inputWatch" value="{{curTextValue}}"
placeholder-style="color:#333333;"></textarea>
<view style="width: 100%;margin-top: 15rpx;">
<button class="cu-btn bg-blue" style="width:100%" bindtap="doConfirmInput">确定</button>
<button class="cu-btn bg-blue" style="width:100%" bindtap="doConfirmInput"
data-type="{{sourceType}}">确定</button>
</view>
</view>
</van-popup>
@ -277,7 +284,7 @@
style="width:300rpx;height:300rpx;"></image>
<text>00:{{audioDuration > 9 ? audioDuration : '0'+ audioDuration}}</text>
<view class="cu-btn bg-blue radius margin-top-sm" style="width:70%;" bindtouchstart="startRecord"
bindtouchend="doEndRecord">长按录音</view>
bindtouchend="doEndRecord">{{isRecording ? '正在录音' : '长按录音'}}</view>
</view>
<!-- 存在录音文件 -->
<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"
@ -287,17 +294,17 @@
<text>{{audioFile.curDurationStr}}</text>
<slider class="flex-sub" bindchange="slider4change" min="{{0}}" max="{{audioFile.duration}}"
value="{{audioFile.curDuration}}" backgroundColor="#cacaca" activeColor="#1296db"
block-size="14" data-item="{{audioFile}}" block-color="#1296db" />
data-type="record" block-size="14" data-item="{{audioFile}}" block-color="#1296db" />
<text>{{audioFile.totalDurationStr}}</text>
</view>
<view class="flex justify-between" style="width:80%;">
<image src="/images/ic_audio_rewind.png" mode="scaleToFill" bindtap="rewind"
<image src="/images/ic_audio_rewind.png" mode="scaleToFill" bindtap="rewind" data-type="record"
data-item="{{audioFile}}">
</image>
<image src="{{audioFile.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
mode="scaleToFill" bindtap="play" data-item="{{audioFile}}">
data-type="record" mode="scaleToFill" bindtap="play" data-item="{{audioFile}}">
</image>
<image src="/images/ic_audio_speed.png" mode="scaleToFill" bindtap="speed"
<image src="/images/ic_audio_speed.png" mode="scaleToFill" bindtap="speed" data-type="record"
data-item="{{audioFile}}">
</image>
</view>
@ -395,7 +402,7 @@
<view class="grid col-3 grid-square flex-sub">
<view class="bg-img" wx:for="{{videoList}}" wx:for-index="idx" wx:key="idx" wx:for-item="video">
<image src='{{video.coverPath}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="delImg" data-index="{{idx}}" data-itemIndex="{{index}}">
<view class="cu-tag bg-red" catchtap="delVideo" data-index="{{idx}}" data-itemIndex="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>

View File

@ -156,6 +156,11 @@ van-action-sheet .noline:active {
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 15rpx;
}
.movie-box:nth-child(1) {
margin-top: 0rpx;
}
.movie-box image {

View File

@ -223,10 +223,10 @@ Page({
}
})
.catch(err => {
wx.showToast({
title: '获取订单失败',
icon: 'err'
})
// wx.showToast({
// title: '获取订单失败',
// icon: 'err'
// })
})
},
//用户协议

View File

@ -890,16 +890,16 @@ Page({
// 展示名片码
showBarCode: function () {
// TODO 测试
// wx.navigateTo({
// url: '/packagecard/moments/publish/momentpublish',
// })
this.setData({
isNeedRefresh: false
})
var _self = this
wx.navigateTo({
url: '/packagecard/sharePage/cardcode?cardImg=' + _self.data.cardInfo.cardTemplateUsePhotoUrl + '&id=' + _self.data.cardInfo.cardTemplateUseBarcode,
url: '/packagecard/moments/publish/momentpublish',
})
// this.setData({
// isNeedRefresh: false
// })
// var _self = this
// wx.navigateTo({
// url: '/packagecard/sharePage/cardcode?cardImg=' + _self.data.cardInfo.cardTemplateUsePhotoUrl + '&id=' + _self.data.cardInfo.cardTemplateUseBarcode,
// })
},
// 隐藏名片码
hideBarCode: function () {