详情页的转发组件

src/components/detail/breadcrumb.vue

@@ -24,11 +24,12 @@
                 <div class="line">
 
                 </div>
-                <div class="btn-s dis-f al-item jus-x">
+                <div class="btn-s dis-f al-item jus-x" style="position: relative;">
                     <img src="../../assets/img/detail/forward.png" class="img" alt="">
                     <span class="mg-l-5">
                         转发
                     </span>
+                    <transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']" :title="data.data.info['title']"></transmit-btn>
                 </div>
             </div>
         </div>
@@ -39,6 +40,7 @@
 import { ArrowRight } from '@element-plus/icons-vue'
 import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 import store from '@/store'
+import transmitBtn from '@/components/public/transmitBtn.vue'
 
 const props=defineProps({
     data: {
@@ -52,6 +54,7 @@ const props=defineProps({
     }
 })
 let data=reactive({})
+
 let operation=props.operation
 
 //导航数据

src/components/public/transmitBtn.vue

@@ -0,0 +1,172 @@
+<template>
+    <el-popover placement="bottom" :width="674" trigger="click" popper-style="padding:0;border-radius: 10px;">
+        <template #reference>
+            <div class="btn" @click="transmit"></div>
+        </template>
+
+        <div class="transmit-unfold-box">
+            <div class="transmit-item">
+                <div class="transmit-head">转发网页版</div>
+                <div class="transmit-box transmit-webpage-box">
+                    <div class="transmit-webpage-title">{{ props['title'] }}</div>
+                    <div class="transmit-link">{{ url }}</div>
+                </div>
+                <div class="copy-link-btn flexcenter" @click="copy">复制链接</div>
+            </div>
+            <div class="transmit-item">
+                <div class="transmit-head">转发小程序版</div>
+                <div class="transmit-box transmit-QRCode-box"><img :src="props['qrcode']" class="QRCode">
+                    <div class="hint"><img src="//offer.gter.net/image/gter/offer/imgdetails/u161.png?v=4.0.1_1689898293"
+                            class="saoma-icom">手机查看该Offer
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <img v-if="user.identity == 1" style="width: 360px;"
+            src="@/assets/img/publicImage/mediation-authentication-code.svg">
+        <img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg"> -->
+    </el-popover>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import { copyToClipboard } from '@/utils/util.js'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+    title: String,
+    qrcode: String,
+})
+
+let url = location.href
+
+
+const copy = () => {
+    copyToClipboard(`${props['title']} - ${url}`).then(() => {
+        ElMessage.success("复制成功！！！")
+    })
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+.btn {
+    // background-color: antiquewhite;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.transmit-unfold-box,
+.transmit-unfold-box * {
+    box-sizing: content-box;
+}
+
+.transmit-unfold-box {
+    background-color: #fff;
+    padding: 42px 54px 12px 44px;
+    display: flex;
+    border-radius: 10px;
+    // box-shadow: 0px 2px 11px -2px #dcebef;
+    // border: 1px solid #e0e0e0;
+}
+
+.transmit-unfold-box .transmit-unfold-close {
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.transmit-unfold-box .transmit-unfold-close .transmit-close-icon {
+    width: 16px;
+    height: 16px;
+    padding: 10px 12px;
+    cursor: pointer;
+}
+
+.transmit-unfold-box .transmit-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.transmit-unfold-box .transmit-item:last-of-type {
+    margin-left: 74px;
+}
+
+.transmit-unfold-box .transmit-item .transmit-head {
+    font-size: 16px;
+    line-height: 16px;
+    // font-weight: 550;
+    color: #000;
+}
+
+.transmit-unfold-box .transmit-item .transmit-box {
+    border-radius: 16px;
+    border: 1px solid #f0f0f0;
+    margin-top: 28px;
+    margin-bottom: 32px;
+}
+
+.transmit-unfold-box .transmit-item .transmit-webpage-box {
+    width: 265px;
+    padding: 12px 18px 12px 15px;
+    font-size: 14px;
+}
+
+.transmit-unfold-box .transmit-item .transmit-webpage-box .transmit-webpage-title {
+    line-height: 24px;
+    word-break: break-word;
+    color: #000;
+}
+
+.transmit-unfold-box .transmit-item .transmit-webpage-box .transmit-link {
+    line-height: 18px;
+    color: #a0a0a0;
+    word-wrap: break-word;
+}
+
+.transmit-unfold-box .transmit-item .transmit-QRCode-box {
+    width: 198px;
+    height: 128px;
+    flex-direction: column;
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.transmit-unfold-box .transmit-item .transmit-QRCode-box .QRCode {
+    width: 98px;
+    height: 98px;
+    margin: 0 auto;
+}
+
+.transmit-unfold-box .transmit-item .transmit-QRCode-box .hint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    text-align: center;
+}
+
+.transmit-unfold-box .transmit-item .transmit-QRCode-box .hint .saoma-icom {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.transmit-unfold-box .copy-link-btn {
+    background-color: #46dfba;
+    border-radius: 5px;
+    width: 120px;
+    height: 38px;
+    user-select: none;
+    cursor: pointer;
+    color: #000;
+}
+</style>