Merge branch 'refs/heads/lihuilin/feature-20251024095243-我的' into milestone-20251031-简版功能开发
# Conflicts: # utils/http.jszhaowenkang/feature-20251028181547-行情页面
-
15api/setting/share.js
-
190components/SharePopup.vue
-
9manifest.json
-
396pages/setting/share.vue
-
BINstatic/my/share/KakaoTalk.png
-
BINstatic/my/share/Line.png
-
BINstatic/my/share/WeChat.png
-
BINstatic/my/share/WhatsApp.png
-
BINstatic/my/share/share.png
-
BINstatic/my/share/success.png
-
5utils/http.js
@ -0,0 +1,15 @@ |
|||||
|
import { http } from '../../utils/http' |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 分享接口获取dccode |
||||
|
* @param data |
||||
|
* @returns {*} |
||||
|
*/ |
||||
|
export const Share = (data) => { |
||||
|
return http({ |
||||
|
method: 'POST', |
||||
|
url: '/api/my/share', |
||||
|
data: data, |
||||
|
}) |
||||
|
} |
||||
@ -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> |
||||
@ -1,111 +1,299 @@ |
|||||
<template> |
<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> |
|
||||
</view> |
|
||||
|
<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> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { |
|
||||
ref |
|
||||
} from 'vue' |
|
||||
|
import {ref} from 'vue' |
||||
|
import SharePopup from '@/components/SharePopup.vue' |
||||
|
import {getUserInfo} from "@/api/member"; |
||||
|
import {Share} from "@/api/setting/share"; |
||||
|
|
||||
|
/* =============== 数据与引用 =============== */ |
||||
|
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() |
||||
|
|
||||
|
// 分享人的dccode |
||||
|
const shareLink = ref('') |
||||
|
|
||||
|
/* =============== 方法 =============== */ |
||||
|
|
||||
|
userInfoRes.value = getUserInfo() |
||||
|
userInfoRes.value.then(res => { |
||||
|
dccode.value = res.data.dccode |
||||
|
console.log('用户信息', res.data) |
||||
|
}) |
||||
|
|
||||
|
const ShareRes = ref() |
||||
|
ShareRes.value = Share() |
||||
|
ShareRes.value.then(res => { |
||||
|
if (res.code === 200){ |
||||
|
shareLink.value = res.message |
||||
|
console.log('分享接口返回', res.data) |
||||
|
}else { |
||||
|
console.log('分享接口返回失败', res.data) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 打开分享弹窗 |
||||
|
function openShare() { |
||||
|
Share() |
||||
|
shareRef.value.open() |
||||
|
} |
||||
|
|
||||
|
// 关闭分享弹窗 |
||||
|
function closeShare() { |
||||
|
shareRef.value.close() |
||||
|
} |
||||
|
|
||||
|
// |
||||
|
|
||||
|
// 点击分享选项 |
||||
|
function onShareSelect({item}) { |
||||
|
console.log('选择了:', item.name) |
||||
|
selectedPlatform.value = item.name // 记录选中的平台 |
||||
|
|
||||
|
// // 生成动态助力链接 |
||||
|
// const baseUrl = 'https:' |
||||
|
// // const shareLink = `${baseUrl}?token=${encodeURIComponent(token.value)}&deviceId=${encodeURIComponent(deviceId.value)}&version=${encodeURIComponent(version.value)}&client=${encodeURIComponent(client.value)}` |
||||
|
// const shareLink = `$ ` |
||||
|
|
||||
|
// 关闭第一个弹窗 |
||||
|
shareRef.value.close() |
||||
|
popupMsg.value = `【DeepChart】邀请你加入,点击链接帮我助力: ${shareLink.value}` |
||||
|
|
||||
|
|
||||
|
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> |
</script> |
||||
|
|
||||
<style> |
|
||||
.all { |
|
||||
position: relative; |
|
||||
width: 750rpx; |
|
||||
height: auto; |
|
||||
} |
|
||||
|
|
||||
.img-share { |
|
||||
width: 750rpx; |
|
||||
height: 2118rpx; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
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; |
|
||||
position: absolute; |
|
||||
top: 68vh; |
|
||||
left: 74rpx; |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
.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; |
|
||||
} |
|
||||
</style> |
|
||||
|
<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> |
||||
|
After Width: 42 | Height: 42 | Size: 2.5 KiB |
|
After Width: 42 | Height: 42 | Size: 2.2 KiB |
|
After Width: 42 | Height: 42 | Size: 2.4 KiB |
|
After Width: 42 | Height: 42 | Size: 3.6 KiB |
|
After Width: 42 | Height: 42 | Size: 1.3 KiB |
|
After Width: 32 | Height: 32 | Size: 1.6 KiB |