|
|
@@ -0,0 +1,493 @@
|
|
|
+<script setup>
|
|
|
+import {ref,reactive,onMounted,onActivated} from 'vue'
|
|
|
+import {apiGetWechatQRCode} from '@/api/common'
|
|
|
+import {apiVoiceList,apiVoiceDel,apiVoicePlayRecord,apiVoiceSendMsg,apiMyVoiceCount,apiVoicePublish} from '@/api/voice'
|
|
|
+import {apiApplyPermission,apiUserInfo} from '@/api/user'
|
|
|
+import SelfList from '@/components/SelfList.vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { useElementSize } from '@vueuse/core'
|
|
|
+import moment from 'moment'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import { useStore } from 'vuex'
|
|
|
+
|
|
|
+const router=useRouter()
|
|
|
+const route=useRoute()
|
|
|
+const store=useStore()
|
|
|
+
|
|
|
+//监听列表页面版心宽度
|
|
|
+const listPageEl=ref('')
|
|
|
+const {width}=useElementSize(listPageEl)
|
|
|
+
|
|
|
+let user_id=store.state.userInfo?.user_id||''
|
|
|
+const init=async ()=>{
|
|
|
+ if(!user_id){
|
|
|
+ const res=await apiUserInfo()
|
|
|
+ if(res.code===200){
|
|
|
+ user_id=res.data.user_id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getStatusCount()
|
|
|
+ getVoiceList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//状态选项
|
|
|
+let status=reactive({
|
|
|
+ list:[
|
|
|
+ {
|
|
|
+ lable:'未发布',
|
|
|
+ count:0,
|
|
|
+ value:0,
|
|
|
+ key:'Unpublished'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable:'已发布',
|
|
|
+ count:0,
|
|
|
+ value:1,
|
|
|
+ key:'Published'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable:'全部',
|
|
|
+ count:0,
|
|
|
+ value:2,
|
|
|
+ key:'All'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ select:0
|
|
|
+})
|
|
|
+const getStatusCount=async ()=>{
|
|
|
+ const res=await apiMyVoiceCount({author_id:user_id})
|
|
|
+ if(res.code===200){
|
|
|
+ status.list.forEach(item=>{
|
|
|
+ item.count=res.data[item.key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//状态切换
|
|
|
+const handleChangeStatus=(item)=>{
|
|
|
+ status.select=item.value
|
|
|
+ listState.finished=false
|
|
|
+ listState.page=1
|
|
|
+ listState.list=[]
|
|
|
+ getStatusCount()
|
|
|
+ getVoiceList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//获取音频列表数据
|
|
|
+let listState = reactive({
|
|
|
+ loading:false,
|
|
|
+ finished:false,
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ list:[],
|
|
|
+})
|
|
|
+const getVoiceList=async ()=>{
|
|
|
+ listState.loading=true
|
|
|
+ const res=await apiVoiceList({
|
|
|
+ page_index:Number(listState.page),
|
|
|
+ page_size:listState.pageSize,
|
|
|
+ author_id:Number(user_id),
|
|
|
+ mine_status:status.select
|
|
|
+ })
|
|
|
+ listState.loading=false
|
|
|
+ if(res.code===200){
|
|
|
+ let arr=res.data.List||[]
|
|
|
+ listState.list=[...listState.list,...arr]
|
|
|
+ if(arr.length===0||arr.length<listState.pageSize){
|
|
|
+ listState.finished=true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 加载下一页
|
|
|
+const onLoad=()=>{
|
|
|
+ listState.page++
|
|
|
+ getVoiceList()
|
|
|
+}
|
|
|
+
|
|
|
+//处理音频时长显示
|
|
|
+const formarVoiceTime=(e)=>{
|
|
|
+ let m=parseInt(e/60)
|
|
|
+ let s=parseInt(e%60)
|
|
|
+ return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
|
|
|
+}
|
|
|
+
|
|
|
+//获取音频单个对应的小程序二维码
|
|
|
+const handelGetQRCodeImg=async (item)=>{
|
|
|
+ if(item.QRCodeImg) return
|
|
|
+ const res=await apiGetWechatQRCode({
|
|
|
+ CodeScene:JSON.stringify({voiceId:item.BroadcastId}),
|
|
|
+ CodePage:'pages-voice/voiceDetail'
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ item.QRCodeImg=res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//删除音频
|
|
|
+const handleDel=(item)=>{
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提醒`,
|
|
|
+ message:'确定要删除该语音播报吗？',
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:true,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(()=>{
|
|
|
+ if(store.state.audioData.voiceId==item.BroadcastId){
|
|
|
+ //删除的正在播放
|
|
|
+ store.commit('closeAudio')
|
|
|
+ }
|
|
|
+ apiVoiceDel({broadcast_id:Number(item.BroadcastId)}).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ listState.page=1
|
|
|
+ listState.finished=false
|
|
|
+ listState.list=[]
|
|
|
+ getStatusCount()
|
|
|
+ getVoiceList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//发送模板消息
|
|
|
+const handleSendMsg=async (item)=>{
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提醒`,
|
|
|
+ message:'该操作将推送模板消息和客群，确认推送吗？',
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:true,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(()=>{
|
|
|
+ apiVoiceSendMsg({broadcast_id:Number(item.BroadcastId)}).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ item.CouldSendMsg=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//发布语音&推送
|
|
|
+const handlePublish=(item)=>{
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提醒`,
|
|
|
+ message:'该操作将发布并且推送模板消息和客群',
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:true,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(async ()=>{
|
|
|
+ const pubRes=await apiVoicePublish({
|
|
|
+ broadcast_id:Number(item.BroadcastId),
|
|
|
+ publish_type:1
|
|
|
+ })
|
|
|
+ if(pubRes.code===200){
|
|
|
+ const sendRes=await apiVoiceSendMsg({broadcast_id:item.BroadcastId})
|
|
|
+ if(sendRes.code===200){
|
|
|
+ ElMessage.success('发布且推送成功')
|
|
|
+ listState.page=1
|
|
|
+ listState.list=[]
|
|
|
+ listState.finished=false
|
|
|
+ getStatusCount()
|
|
|
+ getVoiceList()
|
|
|
+ }else{
|
|
|
+ ElMessage.warning(sendRes.msg)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ ElMessage.warning(pubRes.msg)
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//播放音频
|
|
|
+const handlePlay=(item)=>{
|
|
|
+ if(store.state.audioData.voiceId==item.BroadcastId){
|
|
|
+ if(store.state.audioData.paused){
|
|
|
+ store.state.audioData.INS.play()
|
|
|
+ }else{
|
|
|
+ store.state.audioData.INS.pause()
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ store.commit('addAudio',{
|
|
|
+ list:[{name:item.BroadcastName,url:item.VoiceUrl,time:item.VoicePlaySeconds}],
|
|
|
+ voiceId:item.BroadcastId,
|
|
|
+ index:0
|
|
|
+ })
|
|
|
+ if(item.PublishState==0) return //待发布的不记录
|
|
|
+ handleVoiceRecord(item)
|
|
|
+}
|
|
|
+
|
|
|
+//上报音频播放记录
|
|
|
+const handleVoiceRecord=async (item)=>{
|
|
|
+ const res=await apiVoicePlayRecord({
|
|
|
+ broadcast_id:item.BroadcastId
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ console.log('上报音频播放记录');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//跳转详情
|
|
|
+const goDetail=async (item)=>{
|
|
|
+ if(item.PublishState==0){
|
|
|
+ const res=await apiGetWechatQRCode({
|
|
|
+ CodeScene:JSON.stringify({voiceId:item.BroadcastId}),
|
|
|
+ CodePage:'pages-voice/addVoice'
|
|
|
+ })
|
|
|
+ let htmlStr=`<div>PC端暂不支持编辑语音播报，请扫码进入小程序编辑</div>`
|
|
|
+ if(res.code===200){
|
|
|
+ htmlStr=`<div style="margin-bottom:10px">PC端暂不支持编辑语音播报，请扫码进入小程序编辑</div><div><img style="width:150px;height:150px" src="${res.data}" ></div>`
|
|
|
+ }
|
|
|
+
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提醒`,
|
|
|
+ message:htmlStr,
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'知道了',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:false,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(()=>{}).catch(()=>{})
|
|
|
+ }else{
|
|
|
+ router.push({
|
|
|
+ path:'/voice/detail',
|
|
|
+ query:{
|
|
|
+ voiceId:item.BroadcastId,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ init()
|
|
|
+ //向小程序发送消息
|
|
|
+ let postData = {
|
|
|
+ path: "/pages/voice/voice",
|
|
|
+ params:{},
|
|
|
+ title: "语音播报",
|
|
|
+ shareImg:''
|
|
|
+ };
|
|
|
+ wx.miniProgram.postMessage({ data: postData });
|
|
|
+});
|
|
|
+onActivated(()=>{
|
|
|
+ //向小程序发送消息
|
|
|
+ let postData = {
|
|
|
+ path: "/pages/voice/voice",
|
|
|
+ params:{},
|
|
|
+ title: "语音播报",
|
|
|
+ shareImg:''
|
|
|
+ };
|
|
|
+ wx.miniProgram.postMessage({ data: postData });
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="my-voice-list-page" ref="listPageEl">
|
|
|
+ <div class="top-nav-list-box" :style="{width:width+'px'}">
|
|
|
+ <span
|
|
|
+ v-for="item in status.list" :key="item.value"
|
|
|
+ :class="item.value==status.select?'active':''"
|
|
|
+ @click="handleChangeStatus(item)"
|
|
|
+ >{{item.lable}}（{{item.count}}）</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <SelfList
|
|
|
+ :finished="listState.finished"
|
|
|
+ :isEmpty="listState.list.length===0&&listState.finished"
|
|
|
+ :loading="listState.loading"
|
|
|
+ :count="listState.list.length"
|
|
|
+ @listOnload="onLoad"
|
|
|
+ >
|
|
|
+ <div class="list-wrap">
|
|
|
+ <div class="item" v-for="item in listState.list" :key="item.BroadcastId">
|
|
|
+ <h2 class="title" @click="goDetail(item)">{{item.BroadcastName}}</h2>
|
|
|
+ <div class="time">{{item.PublishState==0?'保存':'发布'}}时间：{{moment(item.PublishState==0?item.ModifyTime:item.PublishTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
|
|
+ <div class="flex audio-box" @click="handlePlay(item)">
|
|
|
+ <div :class="['icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
|
|
|
+ <div>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="btns-box">
|
|
|
+ <el-popover
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ @show="handelGetQRCodeImg(item)"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <div class="icon-wechat" v-if="item.PublishState!=0"></div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <img style="width:100%" :src="item.QRCodeImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <img
|
|
|
+ class="btn del-btn"
|
|
|
+ v-if="item.IsAuthor"
|
|
|
+ src="@/assets/voice/del.png"
|
|
|
+ alt=""
|
|
|
+ @click.stop="handleDel(item)"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="btn publish-btn"
|
|
|
+ v-if="item.CouldSendMsg&&item.PublishState!=0"
|
|
|
+ src="@/assets/voice/publish.png"
|
|
|
+ alt=""
|
|
|
+ @click.stop="handleSendMsg(item)"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="btn clock-btn"
|
|
|
+ v-if="item.PublishState==0"
|
|
|
+ src="@/assets/voice/publish2.png"
|
|
|
+ alt=""
|
|
|
+ @click.stop="handlePublish(item)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </SelfList>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.icon-wechat{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url('@/assets/icon-wechat.png');
|
|
|
+ background-size: cover;
|
|
|
+ float: right;
|
|
|
+ margin-left: 60px;
|
|
|
+ &:hover{
|
|
|
+ background-image: url('@/assets/icon-wechat2.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+.my-voice-list-page{
|
|
|
+ padding-top: 64px;
|
|
|
+ .top-nav-list-box{
|
|
|
+ position: fixed;
|
|
|
+ top: 60px;
|
|
|
+ padding: 20px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1240px;
|
|
|
+ z-index: 10;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
|
|
|
+ border: 1px solid #F2F2F2;
|
|
|
+ span{
|
|
|
+ width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 20px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30px;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active{
|
|
|
+ background: #FFFBF5;
|
|
|
+ box-shadow: 0px 6px 7px 0px #FFF7EB;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #F3A52F;
|
|
|
+ color: #F3A52F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-wrap{
|
|
|
+ .item{
|
|
|
+ padding: 20px;
|
|
|
+ border-left: 1px solid #F2F2F2;
|
|
|
+ border-top: 1px solid #F2F2F2;
|
|
|
+ border-right: 1px solid #F2F2F2;
|
|
|
+ position: relative;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .audio-box{
|
|
|
+ width: 193px;
|
|
|
+ height: 38px;
|
|
|
+ background: #F4E1C9;
|
|
|
+ border-radius: 28px;
|
|
|
+ color: #E3B377;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 19px;
|
|
|
+ background-image: url('@/assets/voice/pause.png');
|
|
|
+ background-size: cover;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ background-image: url('@/assets/voice/playing.png');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btns-box{
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 30px;
|
|
|
+ .btn{
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 60px;
|
|
|
+ }
|
|
|
+ .publish-btn{
|
|
|
+ width: 23px;
|
|
|
+ height: 23px;
|
|
|
+ }
|
|
|
+ .del-btn{
|
|
|
+ width: 23px;
|
|
|
+ height: 23px;
|
|
|
+ }
|
|
|
+ .clock-btn{
|
|
|
+ width: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
