|
|
@@ -9,11 +9,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="audio-card">
|
|
|
- <view class="card-title text_oneLine">
|
|
|
- {{ title }}
|
|
|
- </view>
|
|
|
<view class="slider-paly">
|
|
|
- <view style="flex: 1; padding-top: 20rpx">
|
|
|
+ <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
|
|
|
+ <view style="flex: 1; margin: 0 30rpx 0 38rpx; padding-top: 20rpx">
|
|
|
<slider
|
|
|
activeColor="#376cbb"
|
|
|
:max="audioTime"
|
|
|
@@ -29,24 +27,58 @@
|
|
|
<text class="time">{{ audioTime | formatVoiceTime }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="is-paly-card">
|
|
|
- <image
|
|
|
- @click.stop="handleChangePlayStatus"
|
|
|
- :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
+ <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
|
|
|
</view>
|
|
|
<view class="fast-reverse">
|
|
|
- <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
|
|
|
<block v-for="(item, index) in timesTheSpeed" :key="item.value">
|
|
|
- <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
|
|
|
+ <view class="speed-button multiple-button global_content_center" v-if="isTimes == item.value" @click="isTimesHandler(index)">
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
</block>
|
|
|
- <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
|
|
|
+ <view>
|
|
|
+ <image v-if="PreviousNextSong == 0" class="previous_play_next" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/previous_disable.png"></image>
|
|
|
+ <image
|
|
|
+ v-else
|
|
|
+ @click="isPreviousNextSongHandler(PreviousNextSong == 0, '上')"
|
|
|
+ class="previous_play_next"
|
|
|
+ src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/previous_play.png"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="is-paly-card" @click="handleChangePlayStatus">
|
|
|
+ <image v-if="playImg" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/suspend_play.png"></image>
|
|
|
+ <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/play_circle_filled.png"></image>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image v-if="PreviousNextSong == playlistData.length - 1" class="previous_play_next" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/next_disable.png"></image>
|
|
|
+ <image
|
|
|
+ @click="isPreviousNextSongHandler(PreviousNextSong == playlistData.length - 1, '下')"
|
|
|
+ v-else
|
|
|
+ class="previous_play_next"
|
|
|
+ src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/next_play.png"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="speed-button global_content_center play-list-content" @click="showTabulation = true">
|
|
|
+ <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/paly_list_play.png"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <van-popup :show="showTabulation" closeable position="bottom" round custom-style="height: 50%;" @close="onCloseHandler">
|
|
|
+ <view class="play-ul">
|
|
|
+ <view class="global_title play-ul_title">播放列表</view>
|
|
|
+ <view class="play-li-box">
|
|
|
+ <view class="play-li" v-for="(item, index) in playlistData" :key="item.indexId" @click="palyHandler(item)">
|
|
|
+ <view class="item-content-play-list">
|
|
|
+ <view :class="['text_oneLine', 'play-li-name', audioInit.indexId == item.indexId && 'active-play-li-name']">{{ item.Name }}</view>
|
|
|
+ <image v-if="audioInit.indexId == item.indexId" class="play_audio" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/play_audio.gif"></image>
|
|
|
+ </view>
|
|
|
+ <view class="delete_play">
|
|
|
+ <image @click.native.stop="removeAudioListHandler(item, index)" class="delete_play" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/delete_play.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -75,17 +107,19 @@ export default {
|
|
|
audioTime: 0, //当前音频总时长
|
|
|
title: "", //当前音频标题
|
|
|
activityTitle: "", //当前活动标题
|
|
|
- play: false,
|
|
|
+ playImg: false,
|
|
|
isosName: "",
|
|
|
palyTimeout: null,
|
|
|
palyTime: 0,
|
|
|
timesTheSpeed: [
|
|
|
{ name: "倍速", value: 1 },
|
|
|
- { name: "1.25倍", value: 1.25 },
|
|
|
- { name: "1.5倍", value: 1.5 },
|
|
|
- { name: "2倍", value: 2 },
|
|
|
+ { name: "1.25", value: 1.25 },
|
|
|
+ { name: "1.5", value: 1.5 },
|
|
|
+ { name: "2", value: 2 },
|
|
|
],
|
|
|
isRecord: true, //是否记录播放
|
|
|
+ showTabulation: false,
|
|
|
+ isCommunication: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -108,6 +142,17 @@ export default {
|
|
|
isEnded() {
|
|
|
return this.$store.state.audioBg.isAudioEnded;
|
|
|
},
|
|
|
+ // 播放列表数据
|
|
|
+ playlistData() {
|
|
|
+ return this.$store.state.audioJoinPlaylist.playlist;
|
|
|
+ },
|
|
|
+ // 上、下一首歌曲禁用
|
|
|
+ PreviousNextSong() {
|
|
|
+ const curAudio = this.$store.state.audioBg.list;
|
|
|
+ let indexId = this.audioInit.indexId;
|
|
|
+ let indexPlay = this.playlistData.findIndex((_) => _.Name === curAudio.Name && _.indexId === indexId);
|
|
|
+ return indexPlay;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
audioInit: {
|
|
|
@@ -127,6 +172,10 @@ export default {
|
|
|
this.isosName = res.osName;
|
|
|
},
|
|
|
});
|
|
|
+ uni.$on("play-list-emit", () => {
|
|
|
+ this.showTabulation = true;
|
|
|
+ this.isCommunication = true;
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
//点击隐藏事件
|
|
|
@@ -136,6 +185,7 @@ export default {
|
|
|
//数据初次加载
|
|
|
init() {
|
|
|
const curAudio = this.$store.state.audioBg.list;
|
|
|
+ this.isExistList(curAudio);
|
|
|
if ((this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) || (this.isEnded && this.isosName !== "ios" && curAudio.Url)) {
|
|
|
this.$store.commit("audioBg/setAudioEnd", false);
|
|
|
this.globalBgAudioManager.playbackRate = 1;
|
|
|
@@ -152,7 +202,7 @@ export default {
|
|
|
this.title = curAudio.Name ? curAudio.Name.replace(/<\/?font.*?>/g, "") : "";
|
|
|
let activityTitle = this.$store.state.audioBg.activityTitle;
|
|
|
this.activityTitle = activityTitle ? activityTitle.replace(/<\/?font.*?>/g, "") : "";
|
|
|
- this.play = !this.globalBgAudioManager.paused;
|
|
|
+ this.playImg = !this.globalBgAudioManager.paused;
|
|
|
this.listenAudio();
|
|
|
},
|
|
|
//音频播放事件
|
|
|
@@ -160,52 +210,46 @@ export default {
|
|
|
// 音频播放
|
|
|
this.globalBgAudioManager.onPlay(async () => {
|
|
|
if (this.isRecord) {
|
|
|
- console.log("音频播放");
|
|
|
this.palyTime = 0;
|
|
|
this.backAudioPlay();
|
|
|
this.palyTimeout = setInterval(() => {
|
|
|
this.palyTime++;
|
|
|
}, 1000);
|
|
|
}
|
|
|
- this.play = true;
|
|
|
+ this.playImg = true;
|
|
|
this.$store.commit("audioBg/updateAudioPause", false);
|
|
|
this.isRecord = true;
|
|
|
});
|
|
|
// 音频暂停
|
|
|
this.globalBgAudioManager.onPause(() => {
|
|
|
- console.log("音频暂停");
|
|
|
this.backAudioPlay();
|
|
|
clearInterval(this.palyTimeout);
|
|
|
- this.play = false;
|
|
|
+ this.playImg = false;
|
|
|
this.$store.commit("audioBg/updateAudioPause", true);
|
|
|
});
|
|
|
// 音频停止
|
|
|
this.globalBgAudioManager.onStop(() => {
|
|
|
- console.log("音频停止");
|
|
|
+ this.showTabulation = false;
|
|
|
this.backAudioPlay();
|
|
|
clearInterval(this.palyTimeout);
|
|
|
this.$emit("update:showAudioPop", false);
|
|
|
- if (this.isosName == "ios") {
|
|
|
- this.play = false;
|
|
|
- this.$store.commit("audioBg/removeAudio");
|
|
|
+ this.playImg = false;
|
|
|
+ this.$store.commit("audioBg/removeAudio");
|
|
|
+ if (this.isosName !== "ios") {
|
|
|
} else {
|
|
|
- this.play = false;
|
|
|
this.$store.commit("audioBg/updateAudioPause", true);
|
|
|
}
|
|
|
});
|
|
|
// 音频onEnded
|
|
|
this.globalBgAudioManager.onEnded(() => {
|
|
|
- console.log("音频onEnded");
|
|
|
+ const curAudio = this.$store.state.audioBg.list;
|
|
|
+ let indexId = this.audioInit.indexId;
|
|
|
+ this.onEndedpalyHandler(curAudio, indexId);
|
|
|
this.backAudioPlay();
|
|
|
clearInterval(this.palyTimeout);
|
|
|
- this.$emit("update:showAudioPop", false);
|
|
|
- this.$store.commit("audioBg/setAudioEnd", true);
|
|
|
- this.$store.commit("audioBg/parseIntAudio", false);
|
|
|
- this.$store.commit("audioBg/removeAudio");
|
|
|
});
|
|
|
// 音频onError
|
|
|
this.globalBgAudioManager.onError((e) => {
|
|
|
- console.log("音频onError", e);
|
|
|
this.$store.commit("audioBg/removeAudio");
|
|
|
this.$store.commit("audioBg/setMultiple", 1);
|
|
|
uni.showToast({
|
|
|
@@ -270,7 +314,7 @@ export default {
|
|
|
// 播放了记录
|
|
|
backAudioPlay() {
|
|
|
let recordList = this.$store.state.audioBg.recordList;
|
|
|
- if ((this.$store.state.audioBg.activityId || this.$store.state.audioBg.indexId) && this.palyTime >= 0) {
|
|
|
+ if ((this.$store.state.audioBg.activityId || this.audioInit.indexId) && this.palyTime >= 0) {
|
|
|
activity.backAudioPlay({
|
|
|
SourceId: recordList.SourceId || recordList.ActivityId,
|
|
|
SourceType: recordList.Type ? recordList.Type : 1,
|
|
|
@@ -289,6 +333,79 @@ export default {
|
|
|
touchstartHandler() {
|
|
|
this.$store.commit("audioBg/setSlide", true);
|
|
|
},
|
|
|
+ // 关闭播放列表
|
|
|
+ onCloseHandler() {
|
|
|
+ this.showTabulation = false;
|
|
|
+ if (this.isCommunication) {
|
|
|
+ this.isCommunication = false;
|
|
|
+ this.isShowMaskHandler();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击了播放列表
|
|
|
+ palyHandler(item) {
|
|
|
+ console.log(item);
|
|
|
+ if (this.audioInit.indexId == item.indexId) {
|
|
|
+ } else {
|
|
|
+ this.playlistDataInit(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 播放结束后 播放下一首
|
|
|
+ onEndedpalyHandler(curAudio, indexId) {
|
|
|
+ let item = this.playlistData[this.PreviousNextSong + 1];
|
|
|
+ if (item) {
|
|
|
+ this.playlistDataInit(item);
|
|
|
+ } else {
|
|
|
+ this.$emit("update:showAudioPop", false);
|
|
|
+ this.$store.commit("audioBg/setAudioEnd", true);
|
|
|
+ this.$store.commit("audioBg/parseIntAudio", false);
|
|
|
+ this.$store.commit("audioBg/removeAudio");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上一首 下一首
|
|
|
+ isPreviousNextSongHandler(isPlay, type) {
|
|
|
+ if (isPlay) return;
|
|
|
+ let item = this.playlistData[type == "上" ? this.PreviousNextSong - 1 : this.PreviousNextSong + 1];
|
|
|
+ this.playlistDataInit(item);
|
|
|
+ },
|
|
|
+ // 处理播放列表的数据
|
|
|
+ playlistDataInit(item) {
|
|
|
+ if (item) {
|
|
|
+ let VoiceList = {
|
|
|
+ Url: item.Url,
|
|
|
+ Name: item.Name,
|
|
|
+ PlaySeconds: item.PlaySeconds,
|
|
|
+ };
|
|
|
+ this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.indexId, activityTitle: item.activityTitle, recordList: item.recordList });
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数据是否存在
|
|
|
+ isExistList(item) {
|
|
|
+ const playlist = this.playlistData.some((key) => key.indexId === this.audioInit.indexId);
|
|
|
+ if (!playlist && item.Url) {
|
|
|
+ let dataList = {
|
|
|
+ Url: item.Url,
|
|
|
+ Name: item.Name,
|
|
|
+ PlaySeconds: item.PlaySeconds,
|
|
|
+ indexId: this.audioInit.indexId,
|
|
|
+ activityTitle: item.Name,
|
|
|
+ recordList: this.$store.state.audioBg.recordList,
|
|
|
+ };
|
|
|
+ this.$store.commit("audioJoinPlaylist/addUnshiftPlaylist", { dataList });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击删除列表
|
|
|
+ removeAudioListHandler(item, index) {
|
|
|
+ const indexKey = this.playlistData.findIndex((key) => key.indexId === this.audioInit.indexId);
|
|
|
+ let list = this.playlistData.filter((_) => _.indexId != item.indexId);
|
|
|
+ this.$store.commit("audioJoinPlaylist/removeAudio", { list });
|
|
|
+ if (index === this.playlistData.length && indexKey === index) {
|
|
|
+ this.globalBgAudioManager.stop();
|
|
|
+ } else if (indexKey < index) {
|
|
|
+ } else if (indexKey === index) {
|
|
|
+ this.playlistDataInit(this.playlistData[index]);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -315,7 +432,7 @@ export default {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
margin-bottom: 35rpx;
|
|
|
- padding-right: 30rpx;
|
|
|
+ padding-right: 50rpx;
|
|
|
.icon-cross {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
@@ -342,7 +459,7 @@ export default {
|
|
|
background: #f9f9f9;
|
|
|
border-radius: 16rpx;
|
|
|
margin: 0 auto;
|
|
|
- padding: 30rpx;
|
|
|
+ padding: 30rpx 0;
|
|
|
.slider {
|
|
|
width: 100%;
|
|
|
margin: 0;
|
|
|
@@ -366,34 +483,99 @@ export default {
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
.is-paly-card {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
flex-shrink: 0;
|
|
|
- margin-left: 30rpx;
|
|
|
image {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
}
|
|
|
}
|
|
|
.fast-reverse {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-around;
|
|
|
margin-top: 30rpx;
|
|
|
.speed-button {
|
|
|
- width: 96rpx;
|
|
|
- height: 47rpx;
|
|
|
- background: #eaeaea;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ background: #e5efff;
|
|
|
border-radius: 8rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 47rpx;
|
|
|
- margin: 0 70rpx;
|
|
|
+ color: $uni-color-new;
|
|
|
+ font-size: 36rpx;
|
|
|
}
|
|
|
- .speed-img {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
+ .multiple-button {
|
|
|
+ font-size: 30rpx;
|
|
|
}
|
|
|
+ .play-list-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 64rpx;
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .speed-img {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ }
|
|
|
+ .play-ul {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ .play-ul_title {
|
|
|
+ padding-left: 30rpx;
|
|
|
}
|
|
|
+ .play-li-box {
|
|
|
+ height: 880rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 35rpx;
|
|
|
+ border-top: 1rpx solid #dcdfe6;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .play-li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 92rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border-bottom: 1rpx solid #dcdfe6;
|
|
|
+ .delete_play {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-content-play-list {
|
|
|
+ width: 600rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .play-li-name {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .active-play-li-name {
|
|
|
+ color: $uni-color-new;
|
|
|
+ }
|
|
|
+ .play_audio {
|
|
|
+ display: inline-block;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .previous_play_next {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
bding