h5增加分享

src/main.ts

@@ -6,7 +6,7 @@ import router from './router'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import { Overlay,Tab,Tabs } from 'vant'
+import { Overlay,Tab,Tabs,ActionSheet } from 'vant'
 // 2. 引入组件样式
 import 'vant/lib/index.css';
 // 公共css
@@ -26,6 +26,7 @@ modules({ router })
 
 app.use(createPinia())
 app.use(Overlay)
+app.use(ActionSheet)
 app.use(Tab)
 app.use(Tabs)
 app.use(router)

src/modules/shop/components/DetailBanner.vue

@@ -14,11 +14,21 @@ const props = defineProps({
   }
 })
 const router = useRouter()
+const show = ref(false)
 const shareDialogVisible = ref(false)
 const buyDialogVisible = ref(false)
-const handleShare = () => {
-  shareDialogVisible.value = true
-}
+const isShowShare = ref('1')
+const shareUrl = ref(window.location.href)
+const shareTit = computed(() => {
+  if (isShowShare.value === '1') {
+    return '将课程分享至'
+  } else if (isShowShare.value === '2') {
+    return '微信分享'
+  } else if (isShowShare.value === '3') {
+    return ' '
+  }
+})
+// 购买课程
 const handleBuyCourse = () => {
   if (user.isLogin) {
     if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
@@ -36,6 +46,34 @@ const handleBuyCourse = () => {
     }?rd=${encodeURIComponent(location.href)}`
   }
 }
+// 控制复制弹窗显示
+const handleShare = () => {
+  shareDialogVisible.value = true
+}
+// 微信分享复制到粘贴板
+const handleCopy = () => {
+  // 创建模拟 输入框
+  const cInput = document.createElement('input')
+  cInput.value = shareUrl.value
+  document.body.appendChild(cInput)
+  cInput.select() // 选取文本框内容
+
+  // 执行浏览器复制命令
+  // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
+  // Input要在正常的编辑状态下原生复制方法才会生效
+  document.execCommand('copy')
+
+  // 复制成功后再将构造的标签 移除
+  document.body.removeChild(cInput)
+  isShowShare.value = '2'
+}
+const handleCancel = () => {
+  isShowShare.value = '1'
+}
+// 复制链接控制显示
+const handleCopyLink = () => {
+  isShowShare.value = '3'
+}
 </script>
 
 <template>
@@ -44,7 +82,7 @@ const handleBuyCourse = () => {
       <img
         class="con_img"
         :src="
-          shopItem?.image_url ||
+          shopItem?.img_url ||
           'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F56e7995e3501f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671671981&t=0eb627c761e6567a3a0a29163b31aac0'
         "
       />
@@ -98,7 +136,15 @@ const handleBuyCourse = () => {
       <div class="top_for">{{ shopItem?.for_people }}</div>
     </div>
     <div class="info_tit">{{ shopItem?.title }}</div>
-    <div class="info_tips">{{ shopItem?.course_card }}</div>
+    <div style="display: flex; justify-content: space-between">
+      <div class="info_tips">{{ shopItem?.course_card }}</div>
+      <div class="info_share" @click="show = true">
+        <img
+          src="https://webapp-pub.ezijing.com/project_online/fi/share_h5.png"
+        />
+      </div>
+    </div>
+
     <div class="info_time">
       <div class="time_left">
         <div class="left_tit">课程节数</div>
@@ -117,7 +163,49 @@ const handleBuyCourse = () => {
       </div>
     </div>
   </div>
-
+  <div>
+    <van-action-sheet
+      v-model:show="show"
+      :title="shareTit"
+      @cancel="handleCancel"
+      @click-overlay="handleCancel"
+    >
+      <div class="content" v-if="isShowShare === '1'">
+        <div class="content_con" @click="handleCopy">
+          <img
+            src="https://webapp-pub.ezijing.com/project_online/fi/wechat_share.png"
+            alt=""
+          />
+          <div class="con_txt">微信</div>
+        </div>
+        <div class="content_con" @click="handleCopyLink">
+          <img
+            src="https://webapp-pub.ezijing.com/project_online/fi/link_share.png"
+            alt=""
+          />
+          <div class="con_txt">复制链接</div>
+        </div>
+      </div>
+      <div class="content1" v-if="isShowShare === '3'">
+        <div class="content_con">
+          <img
+            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/copy_success.png"
+            alt=""
+          />
+          <div class="con_tit">已复制链接</div>
+          <div class="con_desc con_desc1">快去分享给好友吧!</div>
+        </div>
+      </div>
+      <div class="content1" v-if="isShowShare === '2'">
+        <div class="content_con">
+          <div class="con_desc con_desc2">
+            请长按下方链接进行复制发给好友-
+            {{ shareUrl }}
+          </div>
+        </div>
+      </div>
+    </van-action-sheet>
+  </div>
   <ShareDialog v-model:shareDialogVisible="shareDialogVisible" />
   <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
 </template>
@@ -274,7 +362,6 @@ const handleBuyCourse = () => {
     background: linear-gradient(270deg, #efb046 0%, #f7cb78 100%);
     display: flex;
     padding: 0 0.45rem;
-
     .buy_left {
       width: 100%;
       display: flex;
@@ -348,6 +435,13 @@ const handleBuyCourse = () => {
       color: #666666;
       margin-top: 0.2rem;
     }
+    .info_share {
+      padding-right: 0.2rem;
+      img {
+        width: 0.24rem;
+        height: 0.24rem;
+      }
+    }
     .info_time {
       height: 1rem;
       background: #f4f8fb;
@@ -389,4 +483,51 @@ const handleBuyCourse = () => {
     }
   }
 }
-</style>
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 2.09rem;
+
+  .content_con {
+    cursor: pointer;
+    img {
+      width: 1rem;
+    }
+    .con_txt {
+      text-align: center;
+    }
+  }
+}
+.content1 {
+  padding: 0.68rem 0 0.82rem 0;
+  .content_con {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    img {
+      width: 1.15rem;
+      height: 1.15rem;
+    }
+    .con_tit {
+      font-size: 0.3rem;
+      font-weight: 400;
+      color: #333333;
+      margin-top: 0.47rem;
+    }
+    .con_desc {
+      font-size: 0.24rem;
+      font-weight: 400;
+      margin-top: 0.21rem;
+      text-align: center;
+    }
+    .con_desc1 {
+      color: #999999;
+    }
+    .con_desc2 {
+      color: #666666;
+    }
+  }
+}
+</style>
\ No newline at end of file