Skip to content

M
mallapp
Commit 3418cea1 authored by Mac's avatar Mac
Browse files
Options

1

parent 7187387a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 569 additions and 380 deletions
pages/friendcircle/components/sound-recording/sound-recording.vue deleted 100644 → 0
View file @ 7187387a
<template>
<view class="recorder">
<view class="re-top" v-if="showTop">
<view class="re-cancel" @click="cancel">取消</view>
<view class="re-confirm" :style="{color: theme}" @click="confirm">{{ confirmText }}</view>
</view>
<text class="title">{{ finish ? '点击播放' : '长按录制语音' }}</text>
<view class="recorder-box"
v-if="!finish"
@click="handle"
@longpress="onStartRecoder"
@touchend="onEndRecoder">
<!-- <u-circle-progress :active-color="theme" :duration="0" :percent="calcProgress"> -->
<view class="u-progress-content">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongweikaishi.png" mode="aspectFit" :style="{
width: width,
height: height
}"></image>
</view>
<!-- </u-circle-progress> -->
</view>
<view class="recorder-box"
v-else
@click="playVoice">
<!-- <u-circle-progress :active-color="theme" :duration="0" :percent="playProgress"> -->
<view class="u-progress-content">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongweikaishi.png" mode="aspectFit" :style="{
width: width,
height: height
}" v-if="!playStatus"></image>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongweikaishi.png" mode="aspectFit" :style="{
width: width,
height: height
}" v-else></image>
</view>
<!-- </u-circle-progress> -->
</view>
<text class="now-date">{{ reDate }}</text>
<view @click="reset">重新录制</view>
</view>
</template>
<script>
// import uCircleProgress from '../u-circle-progress/u-circle-progress.vue'
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
components: {
// uCircleProgress
},
props: {
width: {
type: String,
default: '60rpx'
},
height: {
type: String,
default: '60rpx'
},
showTop: {
type: Boolean,
default: true
},
maximum: {
type: [Number, String],
default: 15
},
duration: {
type: Number,
default: 20
},
theme: {
type: String,
default: '#32b99d'
},
confirmText: {
type: String,
default: '完成'
}
},
data() {
return {
reDate: '00:00',
sec: 0,
min: 0,
finish: false,
voicePath: '',
playProgress: 100,
playTimer: null,
timer: null,
playStatus: false
};
},
created () {
// 监听
this.onMonitorEvents()
},
computed: {
// 录制时间计算
calcProgress () {
return (this.sec + (this.min * 60)) / this.maximum * 100
}
},
methods: {
// 完成事件
confirm () {
if (!innerAudioContext.paused) {
innerAudioContext.stop()
}
this.$emit('confirm', this.voicePath)
},
// 取消事件
cancel () {
if (!innerAudioContext.paused) {
innerAudioContext.stop()
}
this.$emit('cancel')
},
// 点击事件
handle () {
this.$emit('click')
},
// 重新录制
reset () {
this.voicePath = ''
this.min = 0
this.sec = 0
this.reDate = '00:00'
this.playProgress = 100
this.finish = false
this.$emit('reset')
},
// 播放暂停录音
playVoice() {
innerAudioContext.src = this.voicePath;
if (innerAudioContext.paused) {
innerAudioContext.play()
this.playStatus = true
} else {
innerAudioContext.stop();
}
this.$emit('playVoice', innerAudioContext.paused)
},
// 录制结束
onEndRecoder () {
recorderManager.stop()
},
// 开始录制
onStartRecoder () {
console.log(2323)
recorderManager.start({
duration: this.maximum * 1000
})
},
// 监听
onMonitorEvents () {
// 录制开始
recorderManager.onStart(() => {
uni.showLoading({
title: '录制中...'
})
this.startDate()
this.$emit('start')
})
recorderManager.onError((err)=>{
console.log(err)
})
// 录制结束
recorderManager.onStop(({ tempFilePath }) => {
this.voicePath = tempFilePath
clearInterval(this.timer)
uni.hideLoading()
this.finish = true
this.$emit('end')
})
// 播放进度
innerAudioContext.onTimeUpdate(() => {
let totalDate = innerAudioContext.duration
let nowTime = innerAudioContext.currentTime
let surplus = totalDate - nowTime
this.playProgress = surplus / totalDate * 100
let _min = Math.floor(surplus / 60)
if (_min < 10) _min = '0' + _min;
let _sec = Math.floor(surplus%60)
if (_sec < 10) _sec = '0' + _sec;
this.reDate = _min + ':' + _sec
})
// 播放暂停
innerAudioContext.onPause(() => {
this.resetDate()
this.playProgress = 100
this.playStatus = false
console.log('播放暂停')
this.$emit('stop')
})
// 播放停止
innerAudioContext.onStop(() => {
this.resetDate()
this.playProgress = 100
this.playStatus = false
console.log('播放停止')
this.$emit('stop')
})
},
// 录音计时
startDate () {
console.log(2333)
clearInterval(this.timer)
this.sec = 0
this.min = 0
this.timer = setInterval(() => {
this.sec += this.duration / 1000
if (this.sec >= 60) {
this.min ++
this.sec = 0
}
this.resetDate()
}, this.duration)
},
// 播放时间
resetDate () {
let _s = this.sec < 10 ? '0' + parseInt(this.sec) : parseInt(this.sec)
let _m = this.min < 10 ? '0' + this.min : this.min
this.reDate = _m + ':' + _s
}
}
}
</script>
<style lang="scss">
.recorder {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
background-color: #fff;
font-size: 24rpx;
width: 100%;
.re-top {
display: flex;
justify-content: space-between;
padding: 10rpx 20rpx;
width: 100%;
font-size: 28rpx;
box-sizing: border-box;
}
.title {
font-size: 36rpx;
color: #333;
padding: 20rpx 0 30rpx;
}
.recorder-box {
position: relative;
}
.now-date {
font-size: 28rpx;
color: #666;
padding: 20rpx 0;
}
}
</style>
pages/friendcircle/enlargevideo.vue 0 → 100644
View file @ 3418cea1
<template>
<view class="enlargevideo">
<video id="myVideo" :src="file"
@error="videoErrorCallback" autoplay controls :show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
</view>
</template>
<script>
export default {
data() {
return {
file:'',
}
},
onLoad(options) {
if(options && options.file){
this.file = options.file
}
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
})
},
methods: {
videoErrorCallback(){//视频出错返回
wx.showToast({
title: '播放失败!',
icon:'none',
duration: 1000
})
uni.navigateBack({})
},
videoControl(e){
console.log(e.detail)
if(e.detail.fullScreen==false){
uni.navigateBack({})
}
}
},
}
</script>
<style>
.enlargevideo{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000000;
}
#myVideo{
width: 100%;
}
</style>
pages/friendcircle/my-news.vue
View file @ 3418cea1
This diff is collapsed.
pages/friendcircle/release.vue
View file @ 3418cea1
This diff is collapsed.
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