deepChartVueApp/pages/setting/share.vue

<template>
  <view class="all">
    <!-- 背景图部分 -->
    <image class="img-share" src="/static/my/shareBackground.png"/>
    <image class="img-greenBack" src="/static/my/greenBackground.png"/>
    <!--   todo 这里给我个码-->
    <image class="img-QRcode" src="/static/my/QRcode.png"/>
    <image class="img-award" src="/static/my/award.png"/>
    <image class="img-myFriends" src="/static/my/myFriends.png"/>
    <image class="img-friends" src="/static/my/shareFriends.png"/>

    <!-- dccode -->
    <text class="jwcode">{{ dccode }}</text>

    <!-- 邀请按钮 -->
    <button class="invite" @click="openShare">立即邀请</button>

    <!-- 分享弹窗 -->
    <uni-popup ref="shareRef" type="share" safeArea>
      <SharePopup @select="onShareSelect" @close="closeShare" title=" "/>
    </uni-popup>

    <!-- 二次弹窗 -->
    <uni-popup ref="secondPopup" type="share">
      <view class="second-popup">
        <view style=" display: flex;justify-content: center;align-items: center; font-size: 17px">
          <image style="width: 16px; height: 16px; margin-right: 8rpx" src="/static/my/share/success.png"/>
          <text>已复制</text>
        </view>

        <view class="popup-msg-box">
          <text>{{ popupMsg }}</text>
        </view>
        <view style="justify-content: center; align-items: center;">
          <!-- 二次弹窗中的按钮图标 -->
          <button
              style="border-radius: 40rpx; background-color: black; color: white; display: flex; align-items: center; justify-content: center; padding: 12rpx 24rpx;"
              @click="closeSecondPopup">
            <image style="width: 25px; height: 25px; margin-right: 8rpx;"
                   :src="platformIconMap[selectedPlatform]"/>
            去粘贴给好友
          </button>
        </view>


      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import SharePopup from '@/components/SharePopup.vue'
import {getUserInfo} from "@/api/member";

/* =============== 数据与引用 =============== */
const shareRef = ref(null)
const secondPopup = ref(null)
const popupMsg = ref('')
// const jwcode = ref('90047681')
// 选中的平台
const selectedPlatform = ref('')

// dccode
const dccode = ref('')
//  token
const token = ref('1ab8f83f391ca866191385d0e5048938')
// 设备码
const deviceId = ref(100)
// 版本
const version = ref(100)
// 获取设备类型
const client = ref('android')

// 平台图标
const platformIconMap = ref({
  'WeChat': '/static/my/share/WeChat.png',
  'WhatsApp': '/static/my/share/WhatsApp.png',
  'Line': '/static/my/share/Line.png',
  'KakaoTalk': '/static/my/share/KakaoTalk.png',
  '复制链接': '/static/my/share/share.png'
})


/* =============== 方法 =============== */

const userInfoRes = ref()
userInfoRes.value = getUserInfo()
userInfoRes.value.then(res => {
  dccode.value = res.data.dccode
  console.log('用户信息', res.data)
})


// 打开分享弹窗
function openShare() {
  shareRef.value.open()
}

// 关闭分享弹窗
function closeShare() {
  shareRef.value.close()
}

//

// 点击分享选项
function onShareSelect({item}) {
  console.log('选择了：', item.name)
  selectedPlatform.value = item.name // 记录选中的平台

  // 生成动态助力链接 todo 这里只能传代参的，header传不了
  const baseUrl = '下载链接'
  // const shareLink = `${baseUrl}?token=${encodeURIComponent(token.value)}&deviceId=${encodeURIComponent(deviceId.value)}&version=${encodeURIComponent(version.value)}&client=${encodeURIComponent(client.value)}`
  const shareLink = `${baseUrl}`

  // 关闭第一个弹窗
  shareRef.value.close()
  popupMsg.value = `【DeepChart】邀请你加入，点击链接帮我助力: ${shareLink}`


  uni.setClipboardData({
    data: popupMsg.value,
    showToast: false
  });
  /*  // 根据分享选项显示不同提示
    if (item.name === '复制链接') {
      popupMsg.value = '链接已复制，快去分享给好友吧～'
    } else if (item.name === 'WeChat') {
      popupMsg.value = '请在微信中分享～'
    } else {
      popupMsg.value = `你选择了 ${item.name}`
    }*/

  // 打开第二个弹窗
  secondPopup.value.open()
}


// 关闭第二个弹窗
function closeSecondPopup() {
  if (selectedPlatform.value === 'WeChat') {
    uni.share({
      provider: "weixin",
      scene: "WXSceneSession",
      type: 1,
      summary: popupMsg.value,
      success: function (res) {
        console.log("success:" + JSON.stringify(res));
      },
      fail: function (err) {
        console.log("fail:" + JSON.stringify(err));
      }
    });
    secondPopup.value.close()
  }
  // 其他的几种情况 需要适配
  else if (selectedPlatform.value === 'WhatsApp' || selectedPlatform.value === 'Line' || selectedPlatform.value === 'KakaoTalk') {
    secondPopup.value.close()
    uni.showToast({title: '开发中……', icon: 'none'})
  } else if (selectedPlatform.value === '复制链接') {
    uni.showToast({title: '已复制', icon: 'success'})

    secondPopup.value.close()
  }
}


</script>

<style scoped>
.all {
  position: relative;
  width: 750rpx;
  height: auto;
}

/* 背景图片部分 */
.img-share {
  width: 750rpx;
  height: 2118rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-greenBack {
  width: 670rpx;
  height: 1740rpx;
  position: absolute;
  top: 16vh;
  left: 40rpx;
  z-index: 2;
}

.img-QRcode {
  width: 320rpx;
  height: 320rpx;
  position: absolute;
  top: 26vh;
  left: 215rpx;
  z-index: 3;
}

.img-award {
  width: 300rpx;
  height: 120rpx;
  position: absolute;
  top: 61vh;
  left: 75rpx;
  z-index: 3;
}

.img-myFriends {
  width: 300rpx;
  height: 88rpx;
  position: absolute;
  top: 61vh;
  right: 75rpx;
  z-index: 3;
}

.img-friends {
  width: 602rpx;
  height: 840rpx;
  position: absolute;
  top: 68vh;
  left: 74rpx;
  z-index: 3;
}

/* 邀请码与按钮 */
.jwcode {
  width: 320rpx;
  height: 38rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 19vh;
  left: 212rpx;
  z-index: 999;
}

.invite {
  width: 320rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50.7vh;
  left: 212rpx;
  z-index: 999;
}

/* 第二个弹窗样式 */
.second-popup {
  background-color: #fff;
  border-radius: 12px;
  padding: 30rpx;
  text-align: center;
}

.popup-msg-box {
  background-color: #F3F3F3;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 10px;

  align-items: center;
  justify-content: center;

  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示... */
}
</style>