yb9.2

pages-voice/addVoice.vue

@@ -29,6 +29,20 @@
             @click-icon="showFilter=true"
         />
 
+        <!-- 上传图片部分 -->
+        <view class="flex upload-img-box">
+            <view class="item" v-for="(item,index) in imgList" :key="item" @click="handlePreViewImg(item)">
+                <image :src="item" mode="aspectFill"/>
+                <view class="del-btn" @click.stop="handleDelImg(index)">
+                    <van-icon name="cross" size="12" style="position: absolute;left:16rpx;top:8rpx" color="#ffffff"/>
+                </view>
+            </view>
+            <view class="item add-btn" @click="handleUploadImg" v-if="imgList.length<5">
+                <image src="./static/camera.png" mode="aspectFill" />
+            </view>
+              
+        </view>
+
         <view class="flex audio-box" v-if="recorderStatus==='stop'">
             <image 
                 :src="temAudio.paused?'../../../static/voice/pause.png':'../../../static/voice/playing.png'" 
@@ -65,7 +79,7 @@
                 <image :class="['img move3',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
             </view>
             <view class="bot-text">{{time|formatTime}}</view>
-        </view>
+        </view> 
 
         <view class="sound-record-wrap" v-if="recorderStatus!=='stop'">
             <view class="top-text">点击开始录音</view>
@@ -83,7 +97,10 @@
             >完成</view>
         </view>
 
-        <view class="publish-btn" v-if="recorderStatus==='stop'" @click="handlePublish">发布</view>
+        <view class="publish-btn" v-if="recorderStatus==='stop'">
+            <text @click="showTime=true">定时发布</text>
+            <text @click="handlePublish">立即发布</text>
+        </view>
         
         <!-- 筛选弹窗 -->
         <van-popup 
@@ -110,7 +127,40 @@
             </view>
         </van-popup>
 
-        <van-dialog id="van-dialog" />
+        <!-- 选择时间弹窗 -->
+        <van-popup 
+            :show="showTime" 
+            position="bottom"  
+            :close-on-click-overlay="true"
+            @close="showTime = false"
+            round
+        >
+            <van-datetime-picker
+                title="设置发布时间"
+                type="datetime"
+                :value="selectTime"
+                :min-date="minDate"
+                @confirm="handleConfirmTime"
+                @cancel="showTime = false"
+            />
+        </van-popup>
+
+        <!-- <van-dialog id="van-dialog" /> -->
+        <!-- 发布弹窗 -->
+        <van-dialog
+            use-slot
+            :show="showPublish"
+            confirm-button-text="发布且推送"
+            cancel-button-text="仅发布"
+            show-cancel-button
+            @confirm="handleConfirmPublish(false)"
+            @cancel="handleConfirmPublish(true)"
+        >
+            <view style="padding:40px 20px 20px;text-align:center;position: relative;">
+                发布后将推送模板消息和客群，确认发布吗？
+                <van-icon name="cross" size="20" style="position: absolute;right:10px;top:10px" color="#6666" @click="showPublish=false"/>
+            </view>
+        </van-dialog>
     </view>
 </template>
 
@@ -119,6 +169,7 @@ import {apiVoiceSectionList,apiVoiceSendMsg} from '@/api/voice'
 import {baseApiUrl} from '@/utils/config.js'
 import CryptoJS from '@/utils/crypto.js'
 import uniAsync from "@/utils/uni-async.js"; // uni api async 化
+import {uploadImg} from '@/utils/upload'
 const recorderManager = wx.getRecorderManager();//录音实例
 let innerAudioContext = uni.createInnerAudioContext();//播放音频实例
 let TIMER=null//计时器
@@ -170,6 +221,13 @@ export default {
             options:[],
             mainActiveIndex:0,
             activeId:0,//选择的板块id
+
+            showPublish:false,
+
+            imgList:[],
+            showTime:false,
+            selectTime:new Date().getTime(),
+            minDate:new Date().getTime()+60000,
         }
     },
     onLoad(){
@@ -401,18 +459,20 @@ export default {
                 return
             }
 
-            this.$dialog.confirm({
-                title:'',
-                message: '发布后将推送模板消息和客群，确认发布吗？',
-                confirmButtonText:'发布且推送',
-                cancelButtonText:'仅发布'
-            }).then(()=>{
-                //发布且推送
-                this.handleConfirmPublish(false)
-            }).catch(()=>{
-                //仅仅是发布
-                this.handleConfirmPublish(true)
-            })
+            this.showPublish=true
+
+            // this.$dialog.confirm({
+            //     title:'',
+            //     message: '发布后将推送模板消息和客群，确认发布吗？',
+            //     confirmButtonText:'发布且推送',
+            //     cancelButtonText:'仅发布'
+            // }).then(()=>{
+            //     //发布且推送
+            //     this.handleConfirmPublish(false)
+            // }).catch(()=>{
+            //     //仅仅是发布
+            //     this.handleConfirmPublish(true)
+            // })
         },
         //确认发布 onlyPublished：true仅发布
         handleConfirmPublish(onlyPublished){
@@ -494,6 +554,37 @@ export default {
                     }, 1000);
                 }
             })
+        },
+
+        //图片上传
+        handleUploadImg(e){
+            uploadImg({count:5-this.imgList.length}).then(res=>{
+                this.imgList=[...this.imgList,...res]
+            }).catch(err=>{
+                uni.showToast({
+                    title:'上传失败，请重试！',
+                    icon:'none'
+                })
+            })
+        },
+
+        //预览图片
+        handlePreViewImg(item){
+            wx.previewImage({
+                urls:this.imgList,
+                current:item
+            })
+        },
+
+        //删除图片
+        handleDelImg(index){
+            this.imgList.splice(index,1)
+        },
+
+        //选择时间
+        handleConfirmTime(e){
+            this.selectTime=e.detail
+            this.showTime=false
         }
 
     },
@@ -554,7 +645,7 @@ page{
 <style lang="scss" scoped>
 .add-voice-page{
     .empty-voice-box{
-        height: 50vh;
+        height: 36vh;
         padding-top: 150rpx;
         image{
             width: 140rpx;
@@ -651,16 +742,71 @@ page{
     }
 
     .publish-btn{
-        width: 390rpx;
-        height: 80rpx;
+        // width: 390rpx;
+        // height: 80rpx;
+        // text-align: center;
+        // line-height: 80rpx;
+        // color: #fff;
+        // background: #E6B77D;
+        // font-size: 32rpx;
+        // border-radius: 40px;
+        // margin-left: auto;
+        // margin-right: auto;
         text-align: center;
-        line-height: 80rpx;
-        color: #fff;
-        background: #E6B77D;
-        font-size: 32rpx;
-        border-radius: 40px;
-        margin-left: auto;
-        margin-right: auto;
+        text{
+            width: 300rpx;
+            height: 80rpx;
+            text-align: center;
+            line-height: 80rpx;
+            display: inline-block;
+            font-size: 32rpx;
+            margin: 0 15rpx;
+            border-radius: 40rpx;
+        }
+        text:first-child{
+            border: 1px solid #E6B77D;
+            color: #E6B77D;
+        }
+        text:last-child{
+            background-color: #E6B77D;
+            color: #fff;
+        }
+    }
+
+    .upload-img-box{
+        padding: 34rpx 4rpx 34rpx 34rpx;
+        flex-wrap: wrap;
+        .item{
+            width: 200rpx;
+            height: 200rpx;
+            margin-right: 30rpx;
+            margin-bottom: 30rpx;
+            flex-shrink: 0;
+            position: relative;
+            image{
+                width: 100%;
+                height: 100%;
+            }
+            .del-btn{
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 48rpx;
+                height: 48rpx;
+                background-color: rgba(0, 0, 0, 0.7);
+                border-radius: 0 0 0 48rpx;
+            }
+        }
+        .add-btn{
+            background-color: #f7f7f7;
+            image{
+                width: 80rpx;
+                height: 80rpx;
+                position: absolute;
+                left: 60rpx;
+                top: 60rpx;
+            }
+        }
     }
 }
 

pages-voice/myVoice.vue

@@ -0,0 +1,287 @@
+<template>
+    <view class="my-voice-page">
+        <view class="top-tab-warp">
+           <text class="item">未发布（10）</text>
+           <text class="item">已发布（10）</text>
+           <text class="item">全部（20）</text>
+        </view>
+
+        <view class="empty-box" v-if="finished&&list.length==0">
+            <image :src="globalImgUrls.activityNoAuth" mode="widthFix" />
+            <view>暂无数据</view>
+        </view>
+        <view class="list-wrap" v-else>
+            <view class="item" v-for="item in list" :key="item.BroadcastId" @click="handleGoDetail(item)">
+                <view class="title">{{item.BroadcastName}}</view>
+                <view class="time">发布时间：{{item.CreateTime|formatTime}}</view>
+                <view class="flex audio-box" @click.stop="handlePlay(item)">
+                    <image 
+                        :src="item.BroadcastId==curVoiceId&&!curAudioPaused?require('@/static/voice/playing.png'):require('@/static/voice/pause.png')" 
+                        mode="widthFix" 
+                    />
+                    <text>{{item.VoicePlaySeconds|formatVoiceTime}}</text>
+                </view>
+                <button class="publish-btn" @click.stop="handleSendMsgItem(item)" v-if="item.CouldSendMsg">
+                    <image class="publish-img" src="@/static/voice/publish.png" mode="widthFix" />
+                </button>
+                <button class="del-btn" @click.stop="handleDelItem(item)">
+                    <image class="del-img" src="@/static/voice/del.png" mode="widthFix" v-if="item.IsAuthor" />
+                </button>
+                <button 
+                    class="share-btn" 
+                    open-type="share" 
+                    :data-item="item"
+                    @click.stop=""
+                >
+                    <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
+                </button>
+            </view>
+        </view>
+
+
+        <!-- 音频悬浮 -->
+        <!-- <view v-if="showPage"> -->
+        <audioBox v-if="showAudioPop"/>
+        <!-- </view> -->
+          
+    </view>
+</template>
+
+<script>
+import {apiVoiceList,apiVoicePlayRecord,apiVoiceDel,apiVoiceSendMsg} from '@/api/voice'
+import audioBox from '@/components/audioBox/audioBox.vue'
+export default {
+    components:{
+        audioBox
+    },
+    filters:{
+        formatTime(e){
+            return moment(e).format('YYYY-MM-DD HH:mm:ss')
+        },
+        formatVoiceTime(e){
+            let m=parseInt(e/60)
+            let s=parseInt(e%60)
+            return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
+        }
+    },
+    computed:{
+        showAudioPop(){//是否显示音频弹窗
+            return this.$store.state.audio.show
+        },
+        showAudioBigPop(){
+            return this.$store.state.audio.showBig
+        },
+        curVoiceId(){//当前正在播放的音频id
+            return this.$store.state.audio.voiceId
+        },
+        curAudioPaused(){//当前音频是否暂停状态
+            return this.$store.state.audio.paused
+        },
+    },
+    data() {
+        return {
+            page:1,
+            pageSize:20,
+            list:[],
+            finished:true
+        }
+    },
+    methods: {  
+        //跳转详情
+        handleGoDetail(item){
+            uni.navigateTo({
+                url: '/pages-voice/voiceDetail?voiceId='+item.BroadcastId,
+            });
+        },
+        
+        //推送消息
+        handleSendMsgItem(item){
+            this.$dialog.confirm({
+                title:'',
+                message: '该操作将推送模板消息和客群，确认推送吗？',
+                confirmButtonText:'确认'
+            }).then(()=>{
+                apiVoiceSendMsg({broadcast_id:item.BroadcastId}).then(res=>{
+                    if(res.code===200){
+                        uni.showToast({
+                            title:"推送成功",
+                            icon:'success'
+                        })
+                        item.CouldSendMsg=false
+                    }
+                })
+            }).catch(()=>{})
+        },
+
+        //删除音频
+        handleDelItem(item){
+            this.$dialog.confirm({
+                title:'',
+                message: '确定要删除该语音播报吗？',
+                confirmButtonText:'确定'
+            }).then(()=>{
+                if(this.temAudio.item&&this.temAudio.item.id==item.BroadcastId){
+                    //删除的音频正好在播放则暂停
+                    this.globalBgMusic.stop()
+                }
+                
+                apiVoiceDel({broadcast_id:Number(item.BroadcastId)}).then(res=>{
+                    if(res.code===200){
+                        uni.showToast({
+                            title:'操作成功',
+                            icon:'none'
+                        })
+                        this.page=1
+                        this.list=[]
+                        this.finished=false
+                        this.getVoiceList()
+                    }
+                })
+            }).catch(()=>{})
+        },
+
+        //点击音频 播放或者暂停
+        handlePlay(item){
+            if(this.$store.state.audio.voiceId==item.BroadcastId){
+                if(this.globalBgMusic.paused){
+                    this.globalBgMusic.play()
+                }else{
+                    this.globalBgMusic.pause()
+                }
+            }else{
+                const list=[{url:item.VoiceUrl,time:item.VoicePlaySeconds,title:item.BroadcastName,}]
+                this.$store.commit('audio/addAudio',{
+                    list:list,
+                    voiceId:item.BroadcastId
+                })
+                this.handleVoicePlayRecord(item)
+            }
+        },
+
+        //上报音频播放记录
+        async handleVoicePlayRecord(item){
+            const res=await apiVoicePlayRecord({
+                broadcast_id:item.BroadcastId
+            })
+            if(res.code===200){
+                console.log('上报音频播放记录');
+            }
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-box{
+    text-align: center;
+    font-size: 32rpx;
+    color: #999;
+    padding-top: 150rpx;
+    image{
+        width: 600rpx;
+        margin-bottom: 57rpx;
+    }
+}
+.top-tab-warp{
+    padding: 34rpx;
+    position: sticky;
+    top: 0;
+    left: 0;
+    .item{
+        box-sizing: border-box;
+        width: 200rpx;
+        text-align: center;
+        padding: 20rpx 10rpx;
+        background: #F5F5F5;
+        border-radius: 4rpx;
+        margin-right: 30rpx;
+        display: inline-block;
+        &:last-child{
+            margin-right: 0;
+        }
+    }
+}
+.list-wrap{
+    padding: 0 34rpx 34rpx 34rpx;
+    .item{
+        border-bottom: 1px solid #CDCDCD;
+        padding: 30rpx 0;
+        position: relative;
+        .publish-btn{
+            position: absolute;
+            right: 192rpx;
+            bottom: 30rpx;
+            width: 36rpx;
+            height: 36rpx;
+            background-color: transparent;
+            line-height: 1;
+            padding: 0;
+            &::after{
+                border: none;
+            }
+        }
+        .publish-img{
+            width: 34rpx;
+            height: 34rpx;
+        }
+        .del-btn{
+            position: absolute;
+            right: 96rpx;
+            bottom: 30rpx;
+            width: 36rpx;
+            height: 36rpx;
+            background-color: transparent;
+            line-height: 1;
+            padding: 0;
+            &::after{
+                border: none;
+            }
+        }
+        .del-img{
+            width: 34rpx;
+            height: 34rpx;
+        }
+
+        .share-btn{
+            position: absolute;
+            bottom: 30rpx;
+            right: 0rpx;
+            background-color: transparent;
+            width: 36rpx;
+            height: 36rpx;
+            line-height: 1;
+            padding: 0;
+            &::after{
+                border: none;
+            }
+        }
+        .share-img{
+            width: 32.5rpx;
+            height: 32rpx;
+        }
+        .title{
+            font-size: 32rpx;
+        }
+        .time{
+            font-size: 28rpx;
+            color: #666;
+            margin-top: 20rpx;
+            margin-bottom: 30rpx;
+        }
+        .audio-box{
+            width: 185rpx;
+            height: 56rpx;
+            align-items: center;
+            justify-content: center;
+            border-radius: 28rpx;
+            background-color: #F4E1C9;
+            color: #E3B377;
+            image{
+                width: 23rpx;
+                height: 28rpx;
+                margin-right: 20rpx;
+            }
+        }
+    }
+}
+</style>

pages.json

@@ -294,6 +294,12 @@
 					"style":{
 						"navigationBarTitleText": "播报详情"
 					}
+				},
+				{
+					"path": "myVoice",
+					"style":{
+						"navigationBarTitleText": "我的语音"
+					}
 				}
 			]
 		}
@@ -368,7 +374,8 @@
 			"van-progress": "/wxcomponents/vant/progress/index",
 			"van-dialog": "/wxcomponents/vant/dialog/index",
 			"van-cell": "/wxcomponents/vant/cell/index",
-			"van-tree-select": "/wxcomponents/vant/tree-select/index"
+			"van-tree-select": "/wxcomponents/vant/tree-select/index",
+			"van-datetime-picker": "/wxcomponents/vant/datetime-picker/index"
 		}
 	}
 }

pages/user/user.vue

@@ -71,6 +71,18 @@
 					<van-icon name="arrow"></van-icon>
 				</view>
 			</view>
+
+			<navigator url="/pages-voice/myVoice">
+				<view class="flex item-card">
+					<image src="../../static/question/question-icon.png" mode="widthFix" />
+					<text class="label">我的语音</text>
+					<view class="right-text look">
+						<text>查看</text>
+						<van-icon name="arrow"></van-icon>
+					</view>
+				</view>
+			</navigator>
+
 			<view class="flex item-card" v-if="userInfo.status!='试用'">
 				<image src="../../static/calendar.png" mode="widthFix" />
 				<text class="label">服务截止日期</text>

utils/upload.js

@@ -49,7 +49,8 @@ export const uploadAudioToServer = async(tempFilePath)=>{
  * 上传图片
  * count 同时上传张数 默认：1
  */
-export const uploadImg = async (count = 1) => {
+export const uploadImg = async ({count = 1}) => {
+  console.log(count);
   const { tempFilePaths } = await uniAsync.chooseImage({ count });
   uni.showLoading({
     title: "上传中...",
@@ -68,6 +69,7 @@ export const uploadImg = async (count = 1) => {
       })
       .catch((res) => {
         uni.hideLoading();
+        reject(res)
       });
   });
 };