|
|
@@ -0,0 +1,494 @@
|
|
|
+<script setup>
|
|
|
+import {ref,reactive,onMounted,onActivated} from 'vue'
|
|
|
+import {apiGetWechatQRCode} from '@/api/common'
|
|
|
+import {apiVoiceList,apiVoiceDel,apiVoicePlayRecord,apiVoiceSectionList} from '@/api/voice'
|
|
|
+import {apiApplyPermission} 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'
|
|
|
+
|
|
|
+const router=useRouter()
|
|
|
+const route=useRoute()
|
|
|
+
|
|
|
+//监听列表页面版心宽度
|
|
|
+const listPageEl=ref('')
|
|
|
+const {width}=useElementSize(listPageEl)
|
|
|
+
|
|
|
+let noAuth=ref(null)//无权限数据
|
|
|
+
|
|
|
+// 获取板块列表
|
|
|
+let options=ref([])
|
|
|
+const getOptionsList=async ()=>{
|
|
|
+ const res=await apiVoiceSectionList()
|
|
|
+ if(res.code===200){
|
|
|
+ const arr=res.data||[]
|
|
|
+ arr.forEach(item => {
|
|
|
+ const child=item.Children||[]
|
|
|
+ child.forEach(_item=>{
|
|
|
+ options.value.push({id:_item.SectionId,val:_item.SectionName})
|
|
|
+ })
|
|
|
+ });
|
|
|
+ if(route.query.voiceId){
|
|
|
+ listState.voiceId=route.query.voiceId
|
|
|
+ }else{
|
|
|
+ listState.section_id=options.value[0].id
|
|
|
+ }
|
|
|
+ getVoiceList()
|
|
|
+ }
|
|
|
+}
|
|
|
+getOptionsList()
|
|
|
+
|
|
|
+//点击板块
|
|
|
+const handleChangeSection=(item)=>{
|
|
|
+ if(item.id===listState.section_id){
|
|
|
+ listState.section_id=0
|
|
|
+ }else{
|
|
|
+ listState.section_id=item.id
|
|
|
+ }
|
|
|
+ listState.page=1
|
|
|
+ listState.list=[]
|
|
|
+ listState.voiceId=0
|
|
|
+ listState.finished=false
|
|
|
+ getVoiceList()
|
|
|
+}
|
|
|
+
|
|
|
+//获取音频列表数据
|
|
|
+let listState = reactive({
|
|
|
+ loading:false,
|
|
|
+ finished:false,
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ list:[],
|
|
|
+ section_id:0,//选择的板块id
|
|
|
+ voiceId:0,//分享进入的音频id
|
|
|
+})
|
|
|
+const getVoiceList=async ()=>{
|
|
|
+ listState.loading=true
|
|
|
+ const res=await apiVoiceList({
|
|
|
+ page_index:Number(listState.page),
|
|
|
+ page_size:listState.pageSize,
|
|
|
+ broadcast_id:Number(listState.voiceId),
|
|
|
+ section_id:Number(listState.section_id)
|
|
|
+ })
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }else if(res.code===403){
|
|
|
+ noAuth.value=res.data
|
|
|
+ handleAutoApply()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 加载下一页
|
|
|
+const onLoad=()=>{
|
|
|
+ listState.page++
|
|
|
+ getVoiceList()
|
|
|
+}
|
|
|
+
|
|
|
+//无权限时申请
|
|
|
+const handleAutoApply=()=>{
|
|
|
+ if(noAuth.value.type=='contact'&&!noAuth.value.customer_info.has_apply){
|
|
|
+ if(noAuth.value.customer_info.status=='冻结'||(noAuth.value.customer_info.status=='试用'&&noAuth.value.customer_info.is_suspend==1)){
|
|
|
+ apiApplyPermission({
|
|
|
+ company_name:noAuth.value.customer_info.company_name,
|
|
|
+ real_name:noAuth.value.customer_info.name,
|
|
|
+ source:8,
|
|
|
+ from_page:'语音播报'
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ console.log('主动申请成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const handleApply=()=>{
|
|
|
+ if(noAuth.value.customer_info.has_apply){
|
|
|
+ const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
|
|
|
+ ElMessageBox({
|
|
|
+ title:`语音播报`,
|
|
|
+ message:htmlStr,
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'知道了',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ if (!noAuth.value.customer_info.status || noAuth.value.customer_info.status != '流失') {
|
|
|
+ console.log('跳转申请页');
|
|
|
+ router.push({
|
|
|
+ path:'/apply/permission',
|
|
|
+ query:{
|
|
|
+ source:8,
|
|
|
+ fromPage:'语音播报'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ apiApplyPermission({
|
|
|
+ company_name:noAuth.value.customer_info.company_name,
|
|
|
+ real_name:noAuth.value.customer_info.name,
|
|
|
+ source:8,
|
|
|
+ from_page:'语音播报'
|
|
|
+ }).then(res=>{
|
|
|
+ onsole.log('主动申请成功');
|
|
|
+ const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
|
|
|
+ ElMessageBox({
|
|
|
+ title:`语音播报`,
|
|
|
+ message:htmlStr,
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'知道了',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//处理音频时长显示
|
|
|
+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)=>{
|
|
|
+ const res=await apiGetWechatQRCode({
|
|
|
+ CodeScene:JSON.stringify({voiceId:item.BroadcastId}),
|
|
|
+ CodePage:'pages/voice/voice'
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ item.QRCodeImg=res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//删除音频
|
|
|
+const handleDel=async (item)=>{
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提醒`,
|
|
|
+ message:'确定要删除该语音播报吗？',
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:true,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(()=>{
|
|
|
+ apiVoiceDel({broadcast_id:Number(item.BroadcastId)}).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ listState.page=1
|
|
|
+ listState.finished=false
|
|
|
+ listState.list=[]
|
|
|
+ getVoiceList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//播放音频
|
|
|
+const AudioIns=ref(null)
|
|
|
+let audioState=reactive({
|
|
|
+ paused:true,
|
|
|
+ url:'',//临时音频地址
|
|
|
+ duration:'',//时长
|
|
|
+ id:0,
|
|
|
+ curTime:''
|
|
|
+})
|
|
|
+const handlePlay=(item)=>{
|
|
|
+ if(!audioState.url){
|
|
|
+ audioState.url=item.VoiceUrl
|
|
|
+ audioState.duration=item.VoicePlaySeconds
|
|
|
+ audioState.curTime=item.VoicePlaySeconds
|
|
|
+ audioState.id=item.BroadcastId
|
|
|
+ setTimeout(() => {
|
|
|
+ AudioIns.value.play()
|
|
|
+ }, 100);
|
|
|
+ handleVoiceRecord(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(audioState.paused){
|
|
|
+ AudioIns.value.play()
|
|
|
+ }else{
|
|
|
+ AudioIns.value.pause()
|
|
|
+ }
|
|
|
+}
|
|
|
+const audioTimeupdate=(e)=>{// 音频播放时间更新
|
|
|
+ audioState.curTime=parseInt(audioState.duration)-parseInt(e.target.currentTime)
|
|
|
+}
|
|
|
+const audioOnError=(e)=>{
|
|
|
+ console.log('音频播放错误');
|
|
|
+}
|
|
|
+const audioOnEnd=()=>{// 音频播放结束事件
|
|
|
+ audioState.paused=true
|
|
|
+ audioState.url=''
|
|
|
+ audioState.id=0
|
|
|
+}
|
|
|
+const audioOnPause=()=>{// 音频播放暂停事件
|
|
|
+ audioState.paused=true
|
|
|
+}
|
|
|
+const audioOnPlay=()=>{// 音频开始播放事件
|
|
|
+ audioState.paused=false
|
|
|
+}
|
|
|
+
|
|
|
+//上报音频播放记录
|
|
|
+const handleVoiceRecord=async (item)=>{
|
|
|
+ const res=await apiVoicePlayRecord({
|
|
|
+ broadcast_id:item.BroadcastId
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ console.log('上报音频播放记录');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ //向小程序发送消息
|
|
|
+ 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="voice-no-auth" v-if="noAuth">
|
|
|
+ <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
|
|
|
+ <p style="font-size:16px;margin-bottom: 0;">您暂无权限查看语音播报</p>
|
|
|
+ <template v-if="noAuth.type=='contact'">
|
|
|
+ <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想查看，可以联系对口销售--{{noAuth.name}}：{{noAuth.mobile}}</p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加可以申请开通</p>
|
|
|
+ <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="voice-list-page" ref="listPageEl" v-else>
|
|
|
+ <div class="top-nav-list-box" :style="{width:width+'px'}">
|
|
|
+ <span
|
|
|
+ v-for="item in options.slice(0,6)" :key="item.id"
|
|
|
+ :class="['item',item.id==listState.section_id&&'active']"
|
|
|
+ @click="handleChangeSection(item)"
|
|
|
+ >{{item.val}}</span>
|
|
|
+ <el-popover
|
|
|
+ :width="500"
|
|
|
+ trigger="click"
|
|
|
+
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img v-if="options.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div class="flex top-nav-filter-box">
|
|
|
+ <div
|
|
|
+ :class="['item',item.id == listState.section_id&&'active']"
|
|
|
+ v-for="item in options.slice(6)"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleChangeSection(item)"
|
|
|
+ >{{item.val}}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <SelfList
|
|
|
+ :finished="listState.finished"
|
|
|
+ :isEmpty="listState.list.length===0&&listState.finished"
|
|
|
+ :loading="listState.loading"
|
|
|
+ @listOnload="onLoad"
|
|
|
+ >
|
|
|
+ <div class="list-wrap">
|
|
|
+ <div class="item" v-for="item in listState.list" :key="item.BroadcastId">
|
|
|
+ <h2 class="title">{{item.BroadcastName}}</h2>
|
|
|
+ <div class="time">发布时间：{{moment(item.CreateTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
|
|
+ <div class="flex audio-box" @click="handlePlay(item)">
|
|
|
+ <div :class="['icon',item.BroadcastId==audioState.id&&!audioState.paused?'active':'']"></div>
|
|
|
+ <div v-if="item.BroadcastId==audioState.id">{{formarVoiceTime(audioState.curTime)}}</div>
|
|
|
+ <div v-else>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="del-btn"
|
|
|
+ v-if="item.IsAuthor"
|
|
|
+ src="@/assets/voice/del.png"
|
|
|
+ alt=""
|
|
|
+ @click="handleDel(item)"
|
|
|
+ >
|
|
|
+ <el-popover
|
|
|
+ :width="200"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <div class="icon-wechat" @click="handelGetQRCodeImg(item)"></div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <img style="width:100%" :src="item.QRCodeImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </SelfList>
|
|
|
+ <audio
|
|
|
+ @ended="audioOnEnd"
|
|
|
+ @pause="audioOnPause"
|
|
|
+ @play="audioOnPlay"
|
|
|
+ @timeupdate="audioTimeupdate"
|
|
|
+ @error="audioOnError"
|
|
|
+ :src="audioState.url"
|
|
|
+ ref="AudioIns"
|
|
|
+ style="display: none;"
|
|
|
+ autoplay
|
|
|
+ ></audio>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.icon-wechat{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url('@/assets/icon-wechat.png');
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 30px;
|
|
|
+ &:hover{
|
|
|
+ background-image: url('@/assets/icon-wechat2.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+.top-nav-filter-box{
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item{
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #F3A52F;
|
|
|
+ background: #FFF5E9;
|
|
|
+ border: 1px solid #F3A52F;
|
|
|
+ }
|
|
|
+}
|
|
|
+.voice-list-page{
|
|
|
+ padding-top: 63px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .del-btn{
|
|
|
+ width: 23px;
|
|
|
+ height: 23px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-nav-list-box{
|
|
|
+ position: fixed;
|
|
|
+ top: 60px;
|
|
|
+ padding: 20px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1240px;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #F2F2F2;
|
|
|
+ .item{
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #F3A52F;
|
|
|
+ background: #FFF5E9;
|
|
|
+ border: 1px solid #F3A52F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.voice-no-auth{
|
|
|
+ text-align: center;
|
|
|
+ img{
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 218px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
