VAVABUY/components/ShareDialog.vue

<template>
  <Popup ref="popRef" title="分享到" mode="bottom" isClose>
    <template #content>
      <view class="share-options">
        <!-- 微信 -->
        <view class="share-option" @click="shareToWechat('friend')">
          <view class="option-icon">
            <up-icon name="weixin-fill" color="#07C160" size="48"></up-icon>
          </view>
          <trans class="option-text" _t="微信"></trans>
        </view>

        <!-- 微信朋友圈 -->
        <view class="share-option" @click="shareToWechat('timeline')">
          <view class="option-icon">
            <up-icon
              name="moments-circel-fill"
              color="#07C160"
              size="48"
            ></up-icon>
          </view>
          <trans class="option-text" _t="朋友圈"></trans>
        </view>
      </view>
    </template>
    <template #footer>
      <!-- 取消按钮 -->
      <view class="cancel-btn" @click="close">
        <trans _t="取消" />
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { Toast } from "@/utils";
import Popup from "./popup.vue";

const popRef = ref(null);

const emit = defineEmits(["open", "close"]);

// 分享内容配置
const shareConfig = ref({
  title: "推荐一个好内容",
  description: "快来看看这个页面吧",
  imageUrl: "/static/login.png", // 默认分享图片
});

// 获取当前页面URL
const getCurrentPageUrl = () => {
  // 获取当前页面实例
  const pages = getCurrentPages();

  const currentPage = pages[pages.length - 1];
  const pagePath = currentPage.route;
  const query = currentPage.options;

  // 拼接参数
  let queryStr = "";
  if (Object.keys(query).length > 0) {
    queryStr =
      "?" +
      Object.entries(query)
        .map(([k, v]) => `${k}=${v}`)
        .join("&");
  }
  console.log(`https://vavabuy.net/#/${pagePath}${queryStr}`, "pages");
  // 实际项目中这里应该是你们的H5地址 + 页面路径
  return `https://vavabuy.net/#/${pagePath}${queryStr}`;
};

// 打开分享弹框
const open = () => {
  uni.getProvider({
    service: "share",
    success: (res) => {
      if (!res.provider.includes("weixin")) {
        Toast("当前环境不支持微信分享");
      }
    },
  });
  popRef.value && popRef.value.open();
};
// 关闭分享弹框
const close = () => {
  popRef.value && popRef.value.close();
  emit("close");
};

// 分享到微信
const shareToWechat = (type) => {
  close();

  // 获取当前页面URL作为分享链接
  const shareUrl = getCurrentPageUrl();

  // 配置分享参数
  const shareParams = {
    type: "weixin",
    title: shareConfig.value.title,
    content: shareConfig.value.description,
    href: shareUrl,
    thumbs: shareConfig.value.imageUrl,
    scene: type === "friend" ? "WXSceneSession" : "WXSceneTimeline",
  };
  uni.share({
    provider: "weixin",
    scene: shareParams.scene,
    type: 0, // 0:图文（链接），1:纯文字，2:图片，3:音乐，4:视频
    title: shareParams.title,
    summary: shareParams.content,
    href: shareParams.href,
    imageUrl: shareParams.thumbs,
    success: () => {
      Toast("分享成功！");
    },
    fail: (err) => {
      Toast(`分享失败: ${err.errMsg}`);
    },
  });
};

// 设置分享内容
const setShareConfig = (config) => {
  shareConfig.value = { ...shareConfig.value, ...config };
};

// 暴露方法给父组件
defineExpose({ setShareConfig, open, close });
</script>

<style lang="scss" scoped>
// 分享选项
.share-options {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

// 分享选项项
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 60rpx;
  cursor: pointer;
}

// 选项图标容器
.option-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

// 朋友圈图标特殊样式
.circle-bg {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background-color: #07c160;
    bottom: 10rpx;
    right: 10rpx;
    border: 4rpx solid #fff;
  }
}

// 选项文本
.option-text {
  font-size: 28rpx;
  color: #666;
}

// 取消按钮
.cancel-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #f5f5f7;
  color: #333;
  text-align: center;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin: 20rpx auto 0;
  display: block;
  border: none;
}
</style>