yb9.3收藏功能

api/user.js

@@ -69,4 +69,34 @@ export const apiLastApplyRecord=(params)=>{
  */
 export const apiSetMyinfo = params => {
 	return httpPost('/user/set',params)
+}
+
+/**
+ * 收藏
+ * @param collection_type 收藏类型：1-研报; 2-视频社区; 3-微路演视频
+ * @param primary_id //收藏类型主ID(如报告id,视频id)
+ * @param extend_id //扩展ID-如研报章节ID
+ * @param source_agent //操作来源：1-小程序 2-小程序 PC 3-弘则研究公众号 4-Web PC
+ */
+export const apiSetCollect=params=>{
+	return httpPost('/collection/collect',{source_agent:1,...params})
+}
+
+/**
+ * 取消收藏
+ * @param collection_id 收藏ID
+ */
+export const apiCancelCollect=params=>{
+	return httpPost('/collection/cancel',params)
+}
+
+/**
+ * 我的收藏列表
+ * @param curr_page
+ * @param page_size
+ * @param keywords
+ * @param from_type 来源类型：0-全部; 1-研报; 2-线上路演; 3-视频社区
+ */
+export const apiMyCollectList=params=>{
+	return httpGet('/collection/list',params)
 }

components/collectBox/collectBox.vue

@@ -0,0 +1,72 @@
+<template>
+    <view class="collect-box" @click.stop.prevent="handleClick">
+        <image class="icon" :src="cid>0?require('@/static/collect-s.png'):require('@/static/collect.png')" mode="aspectFill" />
+    </view>
+</template>
+
+<script>
+import {apiSetCollect,apiCancelCollect} from '@/api/user'
+export default {
+    props:{
+        type:{//收藏类型：1-研报; 2-视频社区; 3-微路演视频
+            type:Number,
+            default:0
+        },
+        primaryId:{// 藏类型主ID(如报告id,视频id)
+            default:0
+        },
+        extendId:{//扩展ID-如研报章节ID
+            default:0
+        },
+        collectId:{//收藏的id 大于0说明收藏了
+            default:0,
+        }
+    },
+    data() {
+        return {
+            cid:this.collectId
+        }
+    },
+    methods: {
+        handleClick(){
+            if(this.cid>0){
+                apiCancelCollect({
+                    collection_id:Number(this.cid)
+                }).then(res=>{
+                    if(res.code===200){
+                        uni.showToast({
+                            title:'取消收藏!',
+                            icon:'none'
+                        })
+                        this.cid=0
+                    }
+                })
+            }else{
+                apiSetCollect({
+                    collection_type:this.type,
+                    primary_id:Number(this.primaryId),
+                    extend_id:Number(this.extendId)
+                }).then(res=>{
+                    if(res.code===200){
+                        uni.showToast({
+                            title:'收藏成功!',
+                            icon:'none'
+                        })
+                        this.cid=res.data
+                    }
+                })
+            }
+        }
+    },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.collect-box{
+    .icon{
+        width: 34rpx;
+        height: 34rpx;
+    }
+}
+</style>

components/sharePoster/sharePoster.vue

@@ -1,8 +1,11 @@
 <template>
     <view class="share-poster-wrap" :catchtouchmove="false">
-        <image @click="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill"/>
+        <div v-if="showSlot" @click.stop="handleCreatePoster">
+            <slot></slot>
+        </div>
+        <image @click.stop="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill" v-else/>
 
-        <view class="poster-mask" v-if="show||showPoster" @click="showPoster=false"></view>
+        <view class="poster-mask" v-if="show||showPoster" @click.stop="showPoster=false"></view>
         <view class="loading-box" v-if="show">
             <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
             <view>海报生成中...</view>
@@ -16,10 +19,13 @@ import {apiGetPoster} from '@/api/common'
 export default {
     // shareData.type 分享页面: 
     //activity_detail(活动详情) activity_list(活动列表) special_column_list(专栏列表) special_column_detail(专栏详情) 
-    //report_list(报告列表) report_detail(报告详情) chart_list(图库列表) chart_detail(图库详情)
+    //report_list(报告列表) report_detail(报告详情) chart_list(图库列表) chart_detail(图库详情) voice_detail(语音详情)
     props:{
         style:null,
         shareData:null,
+        showSlot:{//是否用插槽显示
+            default:false
+        }
     },
     data () {
         return {

pages-roadShow/video/list.vue

@@ -36,6 +36,12 @@
                     <text class="tag">{{item.chart_permission_name}}</text>
                     <text class="title">{{item.title}}</text>
                 </view>
+                <collectBox
+                    :type="3"
+                    :primaryId="item.road_video_id"
+                    :collectId="item.collection_id"
+                    class="share-btn collect-btn"
+                />
                 <button 
                     class="share-btn" 
                     open-type="share" 
@@ -116,10 +122,12 @@ import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
 import {apiGetSceneToParams,apiUserBindPermission} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import collectBox from '@/components/collectBox/collectBox.vue'
 export default {
     components:{
         noAuth,
-        dragButton
+        dragButton,
+        collectBox
     },
     data() {
         return {
@@ -342,7 +350,7 @@ export default {
             padding: 30rpx 34rpx;
             position: relative;
             .title-box{
-                padding-right: 40rpx;
+                margin-right: 110rpx;
             }
             .share-btn{
                 position: absolute;
@@ -361,6 +369,9 @@ export default {
                 width: 32.5rpx;
                 height: 32rpx;
             }
+            .collect-btn{
+                right: 96rpx;
+            }
             .tag{
                 color: #E4B478;
                 background-color: #333;

pages-roadShow/video/search.vue

@@ -23,6 +23,12 @@
                     <text class="tag">{{item.chart_permission_name}}</text>
                     <text class="title">{{item.title}}</text>
                 </view>
+                <collectBox
+                    :type="3"
+                    :primaryId="item.road_video_id"
+                    :collectId="item.collection_id"
+                    class="share-btn collect-btn"
+                />
                 <button 
                     class="share-btn" 
                     open-type="share" 
@@ -54,9 +60,11 @@
 import searchBox from '@/components/searchBox/searchBox.vue'
 import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
 import {apiViewLogUpdate} from '@/api/common'
+import collectBox from '@/components/collectBox/collectBox.vue'
 export default {
     components: {
-        searchBox
+        searchBox,
+        collectBox
     },
     data() {
         return {
@@ -206,7 +214,7 @@ page{
             padding: 30rpx 34rpx;
             position: relative;
             .title-box{
-                padding-right: 40rpx;
+                margin-right: 110rpx;
             }
             .share-btn{
                 position: absolute;
@@ -225,6 +233,9 @@ page{
                 width: 32.5rpx;
                 height: 32rpx;
             }
+            .collect-btn{
+                right: 96rpx;
+            }
             .tag{
                 color: #E4B478;
                 background-color: #333;

pages-user/myCollect.vue

@@ -0,0 +1,315 @@
+<template>
+    <view class="my-collect-page">
+        <view :class="['top-wrap',!(!isSearchRes&&!keywords)?'top-wrap-ptb':'']">
+            <searchBox placeholder="搜索" @change="onChange" @search="onSearch" />
+            <view class="tab-box" v-show="!isSearchRes&&!keywords">
+                <text 
+                    :class="['tab-item',active==item.val?'tab-active':'']" 
+                    v-for="item in opts" 
+                    :key="item.val"
+                    @click="handleChangeOpt(item.val)"
+                >{{item.name}}</text>
+            </view>
+        </view>
+        <view class="list-wrap">
+            <view class="item" v-for="(item,index) in list" :key="item.CollectionId">
+                <view class="c-time">{{item.CreateTime|formatCTime}}</view>
+                <van-swipe-cell :right-width="90">
+                    <!-- 视频类别样式 -->
+                    <view class="flex video-box" v-if="[2,3].includes(item.CollectionType)" @click="goDetail(item)">
+                        <image class="img" :src="item.ImgUrl" mode="aspectFill" lazy-load="true"/>
+                        <view class="con">
+                            <view class="title" v-html="item.Title"></view>
+                            <view class="author">{{item.Author}}</view>
+                            <view class="time">发布时间：{{item.PublishTime}}</view>
+                        </view>
+                    </view>
+                    <!-- 报告类型样式 -->
+                    <view class="report-box" v-if="item.CollectionType==1" @click="goDetail(item)">
+                        <view class="title" v-html="item.Title"></view>
+                        <view class="con">
+                            <text v-if="item.ClassifyName">#{{item.ClassifyName}}</text>
+                            <text v-if="item.ClassifySecondName" style="margin-left:20rpx">#{{item.ClassifySecondName}}</text>
+                            <view class="time">发布时间：{{item.PublishTime}}</view>
+                        </view>
+                    </view>
+                    <view slot="right" class="cancel-btn" @click="handleCancel(item,index)">取消收藏</view>
+                </van-swipe-cell>
+            </view>
+              
+        </view>
+        <view class="report-empty-box" v-if="finished&&list.length==0">
+            <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
+            <view>暂无相关收藏内容</view>
+        </view>
+        
+        <van-dialog id="van-dialog" />
+    </view>
+</template>
+
+<script>
+import searchBox from "@/components/searchBox/searchBox.vue";
+import {apiMyCollectList,apiCancelCollect} from '@/api/user'
+const moment=require('@/utils/moment-with-locales.min')
+export default {
+    components: {
+        searchBox
+    },
+    filters: {
+        formatCTime(e){
+            if(moment().isSame(e,'year')){//当年
+                return moment(e).format('MM-DD')
+            }else{
+                return moment(e).format('YYYY-MM-DD')
+            }
+        }
+    },
+    data() {
+        return {
+            opts:[
+                {
+                    name:'全部',
+                    val:0,
+                },
+                {
+                    name:'研报',
+                    val:1,
+                },
+                {
+                    name:'线上路演',
+                    val:2,
+                },
+                {
+                    name:'视频社区',
+                    val:3,
+                },
+            ],
+            active:0,
+
+            page:1,
+            pageSize:20,
+            finished:false,
+            list:[],
+            keywords:'',
+            isSearchRes:false
+        }
+    },
+    onLoad(){
+        this.getList()
+    },
+    onPullDownRefresh() {
+        this.keywords=''
+        this.page=1
+        this.list=[]
+        this.finished=false
+        this.isSearchRes=false
+        this.getList()
+        setTimeout(() => {
+            uni.stopPullDownRefresh()
+        }, 1500);
+    },
+    onReachBottom() {
+        if(this.finished) return
+        this.page++
+        this.getList()
+    },
+    methods: {
+        onChange(e){
+            this.keywords=e
+            this.finished=false
+            this.list=[]
+        },
+
+        onSearch(){
+            this.active=0
+            this.page=1
+            this.finished=false
+            this.list=[]
+            if(this.keywords){
+                this.isSearchRes=true
+            }else{
+                this.isSearchRes=false
+            }
+            
+            this.getList()
+        },
+
+        handleChangeOpt(e){
+            this.active=e
+            this.page=1
+            this.finished=false
+            this.list=[]
+            this.keywords=''
+            this.isSearchRes=false
+            this.getList()
+        },
+
+        async getList(){
+            const res=await apiMyCollectList({
+                curr_page:this.page,
+                page_size:this.pageSize,
+                keywords:this.keywords,
+                from_type:this.active
+            })
+            if(res.code===200){
+                const arr=res.data.list
+                this.list=[...this.list,...arr]
+                this.finished=res.data.paging.is_end
+            }
+        },
+
+        handleCancel(item,index){
+            this.$dialog.confirm({
+                title:'',
+                message: '确认取消收藏？',
+                confirmButtonText:'确定'
+            }).then(()=>{
+                apiCancelCollect({collection_id:Number(item.CollectionId)}).then(res=>{
+                    if(res.code===200){
+                        uni.showToast({
+                            title:'操作成功',
+                            icon:'none'
+                        })
+                        this.list.splice(index,1)
+                    }
+                })
+            }).catch(()=>{})
+        },
+
+        goDetail(item){
+            if(item.CollectionType==1){// 报告
+                if(item.ExtendId>0){
+                    uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${item.ExtendId}`})
+                }else{
+                    uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.PrimaryId})
+                }
+            }else if(item.CollectionType==2){//视频社区
+                //跳转tabbar不允许带参数 所以用relaunch
+                uni.reLaunch({url:'/pages/video/videoList?videoId='+item.PrimaryId})
+            }else if(item.CollectionType==3){//路演视频
+                uni.reLaunch({url:'/pages/roadShow/video/list?videoId='+item.PrimaryId})
+            }
+        }
+
+    },
+}
+</script>
+<style lang="scss">
+page{
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
+
+<style lang="scss" scoped>
+.top-wrap{
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background-color: #fff;
+    padding: 40rpx 34rpx 0 34rpx;
+    box-shadow: 0px 4rpx 4rpx 0px rgba(198,198,198,0.25);
+    &.top-wrap-ptb{
+        box-shadow: none;
+        padding-bottom: 20rpx;
+    }
+    .tab-box{
+        padding-top: 40rpx;
+        padding-bottom: 10rpx;
+        .tab-item{
+            display: inline-block;
+            margin-right: 60rpx;
+            color: #666;
+            font-size: 32rpx;
+        }
+        .tab-active{
+            color: #333;
+            position: relative;
+            &::after{
+                position: absolute;
+                content: '';
+                display: block;
+                width: 36rpx;
+                height: 6rpx;
+                background: #E3B377;
+                border-radius: 3rpx;
+                bottom: -10rpx;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+    }
+}
+.list-wrap{
+    padding: 34rpx;
+    .item{
+        padding: 30rpx 0;
+        border-bottom: 1px solid #E5E5E5;
+        .c-time{
+            display: inline-block;
+            font-size: 28rpx;
+            padding: 5rpx 10rpx;
+            color: #666;
+            background-color: #f6f6f6;
+            border-radius: 3rpx;
+            margin-bottom: 12rpx;
+        }
+        .video-box{
+            .img{
+                width: 221rpx;
+                height: 192rpx;
+                flex-shrink: 0;
+                border-radius: 4rpx;
+                margin-right: 20rpx;
+            }
+            .con{
+                flex: 1;
+            }
+            .title{
+                font-size: 32rpx;
+                color: #000;
+                min-height: 80rpx;
+            }
+            .author{
+                color: #666;
+                min-height: 40rpx;
+                margin: 10rpx 0 20rpx 0;
+            }
+            .time{
+                color: #666;
+            }
+        }
+
+        .report-box{
+            .title{
+                line-height: 1.7;
+                margin: 12rpx 0;
+            }
+            .con{
+                text{
+                    display: inline-block;
+                    color: #666;
+                }
+                .time{
+                    float: right;
+                }
+            }
+        }
+
+        .cancel-btn{
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: #F3A52F;
+            border-radius: 25px;
+            color: #fff;
+            font-size: 16px;
+            width: 84px;
+            text-align: center;
+            line-height: 30px;
+        }
+    }
+}
+</style>

pages-voice/voiceDetail.vue

@@ -22,6 +22,20 @@
         </view>
         <image class="del-btn" src="@/static/voice/del.png" mode="widthFix" @click="handleDel" v-if="info.IsAuthor"/>
         <image class="publish-btn" src="@/static/voice/publish.png" mode="widthFix" @click="handleSendMsg" v-if="info.CouldSendMsg"/>
+        <sharePoster 
+            :showSlot="true"
+            :shareData="{
+                type:'voice_detail',
+                code_page:'pages-voice/voiceDetail',
+                code_scene:JSON.stringify({voiceId:info.BroadcastId}),
+                data:{
+                    title:info.BroadcastName,
+                    img:info.ImgUrl
+                }
+            }"
+        >
+            <image style="width:34rpx;height:34rpx;float: right;" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
+        </sharePoster>
 
         <!-- 图片部分 -->
         <view class="imgs-box">
@@ -61,12 +75,14 @@ import {apiGetSceneToParams} from '@/api/common'
 import noAuth from '@/pages/voice/components/noAuth.vue'
 import audioBox from '@/components/audioBox/audioBox.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import sharePoster from '@/components/sharePoster/sharePoster.vue'
 const moment=require('@/utils/moment-with-locales.min')
 export default {
     components:{
         noAuth,
         audioBox,
-        audioBox
+        dragButton,
+        sharePoster
     },
     computed:{
         showAudioPop(){//是否显示音频弹窗
@@ -306,6 +322,7 @@ export default {
             float: right;
             width: 36rpx;
             height: 36rpx;
+            margin-left: 40rpx;
         }
         .imgs-box{
             margin-top: 120rpx;

pages.json

@@ -154,13 +154,20 @@
 						"enablePullDownRefresh": true
 					}
 				},
-			   {
-			   	"path": "mysetting",
-			   	"style":{
-			   		"navigationBarTitleText": "我的设置"
-			   	}
-			   }
-      ]
+			   	{
+					"path": "mysetting",
+					"style":{
+						"navigationBarTitleText": "我的设置"
+					}
+				},
+				{
+					"path": "myCollect",
+					"style":{
+						"navigationBarTitleText": "我的收藏",
+						"enablePullDownRefresh": true
+					}
+				}
+      		]
 		},
 		// 图库模块
 		{
@@ -416,7 +423,8 @@
 			"van-dialog": "/wxcomponents/vant/dialog/index",
 			"van-cell": "/wxcomponents/vant/cell/index",
 			"van-tree-select": "/wxcomponents/vant/tree-select/index",
-			"van-datetime-picker": "/wxcomponents/vant/datetime-picker/index"
+			"van-datetime-picker": "/wxcomponents/vant/datetime-picker/index",
+			"van-swipe-cell": "/wxcomponents/vant/swipe-cell/index"
 		}
 	}
 }

pages/roadShow/video/list.vue

@@ -36,6 +36,12 @@
                     <text class="tag">{{item.chart_permission_name}}</text>
                     <text class="title">{{item.title}}</text>
                 </view>
+                <collectBox
+                    :type="3"
+                    :primaryId="item.road_video_id"
+                    :collectId="item.collection_id"
+                    class="share-btn collect-btn"
+                />
                 <button 
                     class="share-btn" 
                     open-type="share" 
@@ -118,10 +124,12 @@ import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
 import {apiGetSceneToParams,apiUserBindPermission,apiViewLogUpdate} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import collectBox from '@/components/collectBox/collectBox.vue'
 export default {
     components:{
         noAuth,
-        dragButton
+        dragButton,
+        collectBox
     },
     data() {
         return {
@@ -370,7 +378,7 @@ export default {
             padding: 30rpx 34rpx;
             position: relative;
             .title-box{
-                padding-right: 40rpx;
+                margin-right: 110rpx;
             }
             .share-btn{
                 position: absolute;
@@ -389,6 +397,9 @@ export default {
                 width: 32.5rpx;
                 height: 32rpx;
             }
+            .collect-btn{
+                right: 96rpx;
+            }
             .tag{
                 color: #E4B478;
                 background-color: #333;

pages/user/user.vue

@@ -47,17 +47,15 @@
 				</block>
 				
 				<view v-else class="right-text look" @click="handleToUserPermission">
-					<text>查看</text>
+					<!-- <text>查看</text> -->
 					<van-icon name="arrow"></van-icon>
 				</view>
 			</view>
 			<view class="flex item-card" >
 				<image src="@/static/message_ico.png" mode="widthFix" />
-				<view class="label flex" style="align-items: center;">消息通知 
-					<text class="unread-ico" v-if="userInfo.un_read">{{userInfo.un_read}}</text> 
-				</view>
+				<view class="label flex" style="align-items: center;">消息通知</view>
 				<view class="right-text look" @click="toMessageHadle">
-					<text>查看</text>
+					<text class="unread-ico" v-if="userInfo.un_read">{{userInfo.un_read}}</text> 
 					<van-icon name="arrow"></van-icon>
 				</view>
 			</view>
@@ -77,7 +75,16 @@
 					<image src="../../static/voice/mine-voice-icon.png" mode="widthFix" />
 					<text class="label">我的语音</text>
 					<view class="right-text look">
-						<text>查看</text>
+						<van-icon name="arrow"></van-icon>
+					</view>
+				</view>
+				<view></view>
+			</navigator>
+			<navigator url="/pages-user/myCollect">
+				<view class="flex item-card">
+					<image src="../../static/collect-user-icon.png" mode="widthFix" />
+					<text class="label">我的收藏</text>
+					<view class="right-text look">
 						<van-icon name="arrow"></van-icon>
 					</view>
 				</view>

pages/video/videoList.vue

@@ -32,6 +32,12 @@
                     <text class="tag">{{item.variety_tag_name}}</text>
                     <text class="title">{{item.title}}</text>
                 </view>
+                <collectBox
+                    :type="2"
+                    :primaryId="item.community_video_id"
+                    :collectId="item.collection_id"
+                    class="share-btn collect-btn"
+                />
                 <button 
                     class="share-btn" 
                     open-type="share" 
@@ -116,11 +122,13 @@ import {apiGetSceneToParams,apiGetTagTree,apiViewLogUpdate} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
 import commnet from './components/comment.vue'
+import collectBox from '@/components/collectBox/collectBox.vue'
 export default {
     components:{
         noAuth,
         commnet,
-        dragButton
+        dragButton,
+        collectBox
     },
     data() {
         return {
@@ -364,7 +372,7 @@ export default {
             padding: 30rpx 34rpx;
             position: relative;
             .title-box{
-                padding-right: 40rpx;
+                margin-right: 110rpx;
             }
             .share-btn{
                 position: absolute;
@@ -383,6 +391,9 @@ export default {
                 width: 32.5rpx;
                 height: 32rpx;
             }
+            .collect-btn{
+                right: 96rpx;
+            }
             .tag{
                 color: #E4B478;
                 background-color: #333;

pages/video/videoSearch.vue

@@ -23,6 +23,12 @@
                     <text class="tag">{{item.chart_permission_name}}</text>
                     <text class="title">{{item.title}}</text>
                 </view>
+                <collectBox
+                    :type="2"
+                    :primaryId="item.community_video_id"
+                    :collectId="item.collection_id"
+                    class="share-btn collect-btn"
+                />
                 <button 
                     class="share-btn" 
                     open-type="share" 
@@ -55,10 +61,12 @@ import searchBox from '@/components/searchBox/searchBox.vue'
 import {apiVideoList,apiVideoPlayLog} from '@/api/video'
 import {apiViewLogUpdate} from '@/api/common'
 import commnet from './components/comment.vue'
+import collectBox from '@/components/collectBox/collectBox.vue'
 export default {
     components: {
         searchBox,
-        commnet
+        commnet,
+        collectBox
     },
     data() {
         return {
@@ -207,7 +215,7 @@ page{
             padding: 30rpx 34rpx;
             position: relative;
             .title-box{
-                padding-right: 40rpx;
+                margin-right: 110rpx;
             }
             .share-btn{
                 position: absolute;
@@ -226,6 +234,9 @@ page{
                 width: 32rpx;
                 height: 32rpx;
             }
+            .collect-btn{
+                right: 96rpx;
+            }
             .tag{
                 color: #E4B478;
                 background-color: #333;

pages/voice/voice.vue

@@ -23,7 +23,6 @@
             </van-tabs>
         </view>
           
-          
         <view class="empty-box" v-if="list.length==0&&finished">
             <image
                 :src="globalImgUrls.activityNoAuth"
@@ -42,20 +41,24 @@
                     />
                     <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)" v-if="item.IsAuthor">
-                    <image class="del-img" src="@/static/voice/del.png" mode="widthFix"/>
-                </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 class="opt-box">
+                    <image style="width:34rpx;height:34rpx" src="@/static/voice/publish.png" mode="widthFix" @click.stop="handleSendMsgItem(item)" v-if="item.CouldSendMsg"/>
+                    <image style="width:34rpx;height:34rpx" src="@/static/voice/del.png" mode="widthFix" v-if="item.IsAuthor" @click.stop="handleDelItem(item)" />
+                    <sharePoster 
+                        :showSlot="true"
+                        :shareData="getItemShareData(item)"
+                    >
+                        <image style="width:32rpx;height:32rpx" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
+                    </sharePoster>
+                    <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>
 
@@ -115,12 +118,14 @@ import {apiGetSceneToParams} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import audioBox from '@/components/audioBox/audioBox.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import sharePoster from '@/components/sharePoster/sharePoster.vue'
 const moment=require('@/utils/moment-with-locales.min')
 export default {
     components:{
         noAuth,
         audioBox,
-        dragButton
+        dragButton,
+        sharePoster
     },
     filters:{
         formatTime(e){
@@ -425,6 +430,19 @@ export default {
                 console.log('上报音频播放记录');
                 this.$store.commit('audio/addAudioRecordId',{recordId:res.data,source:2})
             }
+        },
+
+        //语音详情生成海报参数
+        getItemShareData(item){
+            return {
+                type:'voice_detail',
+                code_page:'pages-voice/voiceDetail',
+                code_scene:JSON.stringify({voiceId:item.BroadcastId}),
+                data:{
+                    title:item.BroadcastName,
+                    img:item.ImgUrl
+                }
+            }
         }
     },
 }
@@ -504,58 +522,34 @@ export default {
         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;
+        .opt-box{
+            position: relative;
+            float: right;
+            bottom: 40rpx;
+            display: flex;
+            image{
+                margin-left: 40rpx;
             }
-        }
-        .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;
+            .share-btn{
+                background-color: transparent;
+                width: 36rpx;
+                height: 36rpx;
+                line-height: 1;
+                padding: 0;
+                margin-left: 40rpx;
+                &::after{
+                    border: none;
+                }
+                .share-img{
+                    width: 32.5rpx;
+                    height: 32rpx;
+                    margin-left: 0;
+                }
             }
-        }
-        .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;
         }