yb9.3

src/components/SharePoster.vue

@@ -5,7 +5,11 @@ import {apiGetPoster} from '@/api/common'
 
 const props=defineProps({
     style:Object,
-    shareData:Object
+    shareData:Object,
+    isSlot:{
+        type:Boolean,
+        default:false
+    }
 })
 
 const imgDom=ref(null)
@@ -68,14 +72,15 @@ onLongPress(imgDom, onLongPressImg)
 
 <template>
     <div class="share-poster-wrap" @touchmove.prevent>
-        <img 
-            @click="handleCreatePoster" 
-            :style="props.style" 
-            class="share-icon" 
-            src="@/assets/share-poster-icon.png" 
-            v-if="$store.state.platform==='xcx'"
-        />
-
+        <div v-if="$store.state.platform!=='xcx'" @click="handleCreatePoster" >
+            <slot v-if="props.isSlot"></slot>
+            <img 
+                :style="props.style" 
+                class="share-icon" 
+                src="@/assets/share-poster-icon.png" 
+                v-else
+            />
+        </div>
         <div class="poster-mask" v-if="show||showPoster" @click="showPoster=false" @touchmove.prevent></div>
         <div class="loading-box" v-if="show">
             <img class="load-img" src="@/assets/loading.png"/>

src/views/voice/Detail.vue

@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import moment from 'moment'
+import SharePoster from '@/components/SharePoster.vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -270,6 +271,20 @@ const handleVoiceRecord=async (item)=>{
                     alt=""
                     @click.stop="handleDel(info)"
                 />
+                <SharePoster
+                    :isSlot="true"
+                    :shareData="{
+                        type:'voice_detail',
+                        code_page:'pages-voice/voiceDetail',
+                        code_scene:JSON.stringify({voiceId:info.BroadcastId}),
+                        data:{
+                            title:info.BroadcastName,
+                            img:info.ImgUrl
+                        }
+                    }"
+                >
+                    <img class="btn poster-btn" src="@/assets/voice/creat-poster-icon.png" alt="">
+                </SharePoster>
                 <el-popover
                     :width="200"
                     trigger="hover"
@@ -378,6 +393,11 @@ const handleVoiceRecord=async (item)=>{
             height: 23px;
             cursor: pointer;
         }
+        .poster-btn{
+            width: 23px;
+            height: 23px;
+            cursor: pointer;
+        }
     }
     .img-box{
         margin-top: 30px;

src/views/voice/List.vue

@@ -4,6 +4,7 @@ import {apiGetWechatQRCode} from '@/api/common'
 import {apiVoiceList,apiVoiceDel,apiVoicePlayRecord,apiVoiceSectionList,apiVoiceSendMsg} from '@/api/voice'
 import {apiApplyPermission} from '@/api/user'
 import SelfList from '@/components/SelfList.vue'
+import SharePoster from '@/components/SharePoster.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useElementSize } from '@vueuse/core'
 import moment from 'moment'
@@ -356,32 +357,49 @@ onActivated(()=>{
                         <div :class="['icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
                         <div>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
                     </div>
-                    <img 
-                        class="publish-btn" 
-                        v-if="item.CouldSendMsg"
-                        src="@/assets/voice/publish.png" 
-                        alt=""
-                        @click.stop="handleSendMsg(item)"
-                    />
-                    <img 
-                        class="del-btn" 
-                        v-if="item.IsAuthor" 
-                        src="@/assets/voice/del.png" 
-                        alt=""
-                        @click.stop="handleDel(item)"
-                    />
-                    <el-popover
-                        :width="200"
-                        trigger="hover"
-                        @show="handelGetQRCodeImg(item)"
-                    >
-                        <template #reference>
-                            <div class="icon-wechat"></div>
-                        </template>
-                        <template #default>
-                            <img style="width:100%" :src="item.QRCodeImg" alt="">
-                        </template>
-                    </el-popover>
+                    <div class="flex opts-box">
+                        <img 
+                            class="opt publish-btn" 
+                            v-if="item.CouldSendMsg"
+                            src="@/assets/voice/publish.png" 
+                            alt=""
+                            @click.stop="handleSendMsg(item)"
+                        />
+                        <img 
+                            class="opt del-btn" 
+                            v-if="item.IsAuthor" 
+                            src="@/assets/voice/del.png" 
+                            alt=""
+                            @click.stop="handleDel(item)"
+                        />
+                        <SharePoster
+                            :isSlot="true"
+                            :shareData="{
+                                type:'voice_detail',
+                                code_page:'pages-voice/voiceDetail',
+                                code_scene:JSON.stringify({voiceId:item.BroadcastId}),
+                                data:{
+                                    title:item.BroadcastName,
+                                    img:item.ImgUrl
+                                }
+                            }"
+                        >
+                            <img class="opt poster-btn" src="@/assets/voice/creat-poster-icon.png" alt="">
+                        </SharePoster>
+                        <el-popover
+                            :width="200"
+                            trigger="hover"
+                            @show="handelGetQRCodeImg(item)"
+                        >
+                            <template #reference>
+                                <div class="opt icon-wechat"></div>
+                            </template>
+                            <template #default>
+                                <img style="width:100%" :src="item.QRCodeImg" alt="">
+                            </template>
+                        </el-popover>
+                    </div>
+                    
                 </div>
             </div>
         </SelfList>
@@ -401,9 +419,6 @@ onActivated(()=>{
     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');
     }
@@ -451,22 +466,30 @@ onActivated(()=>{
                     background-image: url('@/assets/voice/playing.png');
                 }
             }
-            .del-btn{
-                width: 23px;
-                height: 23px;
-                position: absolute;
-                bottom: 30px;
-                right: 100px;
-                cursor: pointer;
-            }
-            .publish-btn{
-                width: 23px;
-                height: 23px;
+            .opts-box{
                 position: absolute;
                 bottom: 30px;
-                right: 170px;
-                cursor: pointer;
+                right: 20px;
+                .opt{
+                    margin-left: 30px;
+                }
+                .del-btn{
+                    width: 23px;
+                    height: 23px;
+                    cursor: pointer;
+                }
+                .publish-btn{
+                    width: 23px;
+                    height: 23px;
+                    cursor: pointer;
+                }
+                .poster-btn{
+                    width: 23px;
+                    height: 23px;
+                    cursor: pointer;
+                }
             }
+            
         }
     }