add：完成微信跳转（使用的lihui的Appid），信息复制到粘贴板，自定义分享组件

api/setting/share.js

@@ -0,0 +1,17 @@
+import { http } from '../utils/http'
+
+
+/**
+ * 分享接口
+ * @param data
+ * @returns {*}
+ */
+export const getUserInfo = (data) => {
+    return http({
+        method: 'POST',
+        url: '/api/my/share',
+        data:
+        data
+        ,
+    })
+}

components/SharePopup.vue

@@ -0,0 +1,190 @@
+<!--自定义分享弹窗 使用uni的更改-->
+<template>
+  <view class="uni-popup-share">
+<!--    <view class="uni-share-title">-->
+<!--      <text class="uni-share-title-text">{{ shareTitleText }}</text>-->
+<!--    </view>-->
+    <view class="uni-share-content">
+      <view class="uni-share-content-box">
+        <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index"
+              @click.stop="select(item,index)">
+          <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+          <text class="uni-share-text">{{ item.text }}</text>
+        </view>
+
+      </view>
+    </view>
+    <view class="uni-share-button-box">
+      <button class="uni-share-button" @click="close">{{ cancelText }}</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import popup from '../uni_modules/uni-popup/components/uni-popup/popup.js'
+// import popup from '../uni-popup/popup.js'
+import {initVueI18n} from '@dcloudio/uni-i18n'
+import messages from '../uni_modules/uni-popup/components/uni-popup/i18n/index.js'
+
+const {t} = initVueI18n(messages)
+export default {
+  name: 'SharePopup',
+  mixins: [popup],
+  emits: ['select'],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    beforeClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      bottomData: [{
+        text: 'WhatsApp',
+        icon: '/static/my/share/WhatsApp.png',
+        name: 'WhatsApp'
+      },
+        {
+          text: 'Line',
+          icon: '/static/my/share/Line.png',
+          name: 'Line'
+        },
+        {
+          text: 'KakaoTalk',
+          icon: '/static/my/share/KakaoTalk.png',
+          name: 'KakaoTalk'
+        },
+        {
+          text: 'WeChat',
+          icon: '/static/my/share/WeChat.png',
+          name: 'WeChat'
+        },
+        {
+        	text: '复制链接',
+        	icon: '/static/my/share/share.png',
+        	name: '复制链接'
+        },
+      ]
+    }
+  },
+  created() {
+  },
+  computed: {
+    cancelText() {
+      return t("uni-popup.cancel")
+    },
+    shareTitleText() {
+      return this.title || t("uni-popup.shareTitle")
+    }
+  },
+  methods: {
+    /**
+     * 选择内容
+     */
+    select(item, index) {
+      this.$emit('select', {
+        item,
+        index
+      })
+      // this.close()
+
+    },
+    /**
+     * 关闭窗口
+     */
+    close() {
+      if (this.beforeClose) return
+      this.popup.close()
+    }
+  }
+}
+</script>
+<style lang="scss">
+.uni-popup-share {
+  background-color: #fff;
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+}
+
+.uni-share-title {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+
+.uni-share-title-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.uni-share-content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 10px;
+}
+
+.uni-share-content-box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 360px;
+}
+
+.uni-share-content-item {
+  width: 72px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px 0;
+  align-items: center;
+}
+
+.uni-share-content-item:active {
+  background-color: #f5f5f5;
+}
+
+.uni-share-image {
+  width: 42px;
+  height: 42px;
+}
+
+.uni-share-text {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #3B4144;
+}
+
+.uni-share-button-box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  padding: 10px 15px;
+}
+
+.uni-share-button {
+  flex: 1;
+  border-radius: 50px;
+  color: #666;
+  font-size: 16px;
+}
+
+.uni-share-button::after {
+  border-radius: 50px;
+}
+</style>

manifest.json

@@ -17,7 +17,8 @@
             "delay" : 0
         },
         "modules" : {
-            "OAuth" : {}
+            "OAuth" : {},
+            "Share" : {}
         },
         /* 模块配置 */
         "distribute" : {
@@ -53,6 +54,12 @@
                     "google" : {
                         "clientid" : "135"
                     }
+                },
+                "share" : {
+                    "weixin" : {
+                        "appid" : "wx6143d111fc5c9ba3",
+                        "UniversalLinks" : ""
+                    }
                 }
             }
         },

pages/setting/share.vue

@@ -1,31 +1,181 @@
 <template>
   <view class="all">
-		<img class="img-share" src="/static/my/shareBackground.png" />
-		<img class="img-greenBack" src="/static/my/greenBackground.png" />
-		<img class="img-QRcode" src="/static/my/QRcode.png" />
-		<img class="img-award" src="/static/my/award.png" />
-		<img class="img-myFriends" src="/static/my/myFriends.png" />
-		<img class="img-friends" src="/static/my/shareFriends.png" />
-		<text class="jwcode">{{ jwcode }}</text>
-		<button class="invite">立即邀请</button>
+    <!-- 背景图部分 -->
+    <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 {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()
+  }
+}
+
 
-	const jwcode = ref('90047681')
 </script>
 
-<style>
+<style scoped>
 .all {
   position: relative;
   width: 750rpx;
   height: auto;
 }
 
+/* 背景图片部分 */
 .img-share {
   width: 750rpx;
   height: 2118rpx;
@@ -35,32 +185,21 @@
   z-index: 1;
 }
 
-	.img-QRcode{
-		width:320rpx;
-		height:320rpx;
-		position:absolute;
-		top:26vh;
-		left:215rpx;
-		z-index: 3;
-	}
-
 .img-greenBack {
   width: 670rpx;
   height: 1740rpx;
   position: absolute;
   top: 16vh;
-		/* 为什么要用这个替代 margin-top */
   left: 40rpx;
-		/* 还有 padding-left */
   z-index: 2;
 }
 
-	.img-friends {
-		width: 602rpx;
-		height: 840rpx;
+.img-QRcode {
+  width: 320rpx;
+  height: 320rpx;
   position: absolute;
-		top: 68vh;
-		left: 74rpx;
+  top: 26vh;
+  left: 215rpx;
   z-index: 3;
 }
 
@@ -82,6 +221,16 @@
   z-index: 3;
 }
 
+.img-friends {
+  width: 602rpx;
+  height: 840rpx;
+  position: absolute;
+  top: 68vh;
+  left: 74rpx;
+  z-index: 3;
+}
+
+/* 邀请码与按钮 */
 .jwcode {
   width: 320rpx;
   height: 38rpx;
@@ -108,4 +257,25 @@
   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>