yb9.2

src/api/voice.js

@@ -48,6 +48,32 @@ export const apiVoicePlayRecord=params=>{
  * 推送客群、模板消息
  * @param broadcast_id
  */
- export const apiVoiceSendMsg=params=>{
+export const apiVoiceSendMsg=params=>{
     return post('/voice/broadcast/msg_send',params)
+}
+
+/**
+ * 我的语音数量统计
+ * @param author_id
+ */
+export const apiMyVoiceCount=params=>{
+    return get('/voice/broadcast/list_count',params)
+}
+
+/**
+ * 语音详情
+ * @param broadcast_id
+ */
+export const apiVoiceDetail=params=>{
+    return get('/voice/broadcast/detail',params)
+}
+
+/**
+ * 发布语音
+ * @param broadcast_id 语音播报ID
+ * @param publish_type 发布类型：1-发布 2-定时发布
+ * @param pre_publish_time 预发布时间（类型为定时发布时必填）
+ */
+export const apiVoicePublish=params=>{
+    return post('/voice/broadcast/publish',params)
 }

src/layout/component/Aside.vue

@@ -17,11 +17,14 @@ watch(
   }
 );
 const submenuEvent = (index)=>{
-  console.log(index)
+  // console.log(index)
   if(index==6){
     //展开第一项
     router.push('/question/list')
   }
+  if(index==7){
+    router.push('/voice/list')
+  }
 }
 let menuList = reactive([
   {

src/router/index.js

@@ -370,7 +370,7 @@ const routes=[
         meta: {
           title: "我的语音",
           keepAlive:true,
-          isRoot:false
+          isRoot:true
         }
       }
     ]

src/store/index.js

@@ -142,7 +142,7 @@ export default createStore({
     // 设置面包屑数据
     // 在全局路由钩子中和自定义路由函数中调用
     setBreadCrumb(state,data){
-      console.log('store中设置面包屑',data);
+      // console.log('store中设置面包屑',data);
       // 如果是侧边栏 清除路由栈
       if (data.meta.isRoot) {
         let obj = {

src/utils/interceptRouterMethod.js

@@ -21,8 +21,8 @@ const routerPush=router.push //保存原来的push函数
 // 重写push函数
 router.push = function push(location) {
     // location 可能是string 也可能是obj 完全取决于 你是怎么调push的
-    console.log('push');
-    console.log(location);
+    // console.log('push');
+    // console.log(location);
 
     let path=''
     let query=null
@@ -45,7 +45,7 @@ router.push = function push(location) {
         const routesItem=getToRoute(path)
         store.commit('setBreadCrumb', routesItem)
     }else{
-        console.log('拦截路由push改为返回');
+        // console.log('拦截路由push改为返回');
         const _index=index-(store.state.breadCrumbList.length-1)
         if(_index!==0){
             router.go(_index)

src/utils/reportErr.js

@@ -3,23 +3,28 @@ import {apiReportingErrInfo} from '@/api/common'
 
 const reportErr=(app)=>{
     let errObj={}
-
+    console.log();
     app.config.errorHandler=(err, instance, info)=>{
+        console.log(err, instance, info);
         errObj={
             msg:err.message,
             stack:err.stack
         }
         console.log(errObj);
-        apiReportingErrInfo({errInfo:errObj})
+        if(import.meta.env.MODE!=='development'){
+            apiReportingErrInfo({errInfo:errObj})
+        }
     }
 
     window.addEventListener('error',(e)=>{
+        console.log(e);
         errObj={
-            msg:e.error.message,
-            stack:e.error.stack
+            msg:e.error?.message,
+            stack:e.error?.stack
+        }
+        if(import.meta.env.MODE!=='development'){
+            apiReportingErrInfo({errInfo:errObj})
         }
-        console.log(errObj);
-        apiReportingErrInfo({errInfo:errObj})
     })
 }
 

src/views/voice/Mine.vue

@@ -1,7 +1,444 @@
 <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} 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 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:store.state.userInfo.user_id})
+    if(res.code===200){
+        status.list.forEach(item=>{
+            item.count=res.data[item.key]
+        })
+    }
+}
+getStatusCount()
+
+//状态切换
+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(store.state.userInfo.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
+        }
+    }
+}
+getVoiceList()
+
+// 加载下一页
+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
+    })
+    handleVoiceRecord(item)
+}
+
+//上报音频播放记录
+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>wode</div>
-</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">{{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',($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/clock-icon.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;
+            }
+            .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>