Browse Source

Merge branch 'refs/heads/lihuilin/feature-20251024095243-我的' into milestone-20251031-简版功能开发

# Conflicts:
#	utils/http.js
zhaowenkang/feature-20251028181547-行情页面
lihui 4 weeks ago
parent
commit
7a2e448a5c
  1. 15
      api/setting/share.js
  2. 190
      components/SharePopup.vue
  3. 9
      manifest.json
  4. 278
      pages/setting/share.vue
  5. BIN
      static/my/share/KakaoTalk.png
  6. BIN
      static/my/share/Line.png
  7. BIN
      static/my/share/WeChat.png
  8. BIN
      static/my/share/WhatsApp.png
  9. BIN
      static/my/share/share.png
  10. BIN
      static/my/share/success.png
  11. 5
      utils/http.js

15
api/setting/share.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,
})
}

190
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>

9
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" : ""
}
}
}
},

278
pages/setting/share.vue

@ -1,88 +1,255 @@
<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";
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>
<style>
.all {
<style scoped>
.all {
position: relative;
width: 750rpx;
height: auto;
}
}
.img-share {
/* 背景图片部分 */
.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 {
.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;
}
}
.img-award {
.img-award {
width: 300rpx;
height: 120rpx;
position: absolute;
top: 61vh;
left: 75rpx;
z-index: 3;
}
}
.img-myFriends {
.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 {
/* 邀请码与按钮 */
.jwcode {
width: 320rpx;
height: 38rpx;
display: flex;
@ -92,14 +259,14 @@
top: 19vh;
left: 212rpx;
z-index: 999;
}
}
.invite {
.invite {
width: 320rpx;
height: 80rpx;
border-radius: 40rpx;
background-color: black;
color:white;
color: white;
display: flex;
justify-content: center;
align-items: center;
@ -107,5 +274,26 @@
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>

BIN
static/my/share/KakaoTalk.png

After

Width: 42  |  Height: 42  |  Size: 2.5 KiB

BIN
static/my/share/Line.png

After

Width: 42  |  Height: 42  |  Size: 2.2 KiB

BIN
static/my/share/WeChat.png

After

Width: 42  |  Height: 42  |  Size: 2.4 KiB

BIN
static/my/share/WhatsApp.png

After

Width: 42  |  Height: 42  |  Size: 3.6 KiB

BIN
static/my/share/share.png

After

Width: 42  |  Height: 42  |  Size: 1.3 KiB

BIN
static/my/share/success.png

After

Width: 32  |  Height: 32  |  Size: 1.6 KiB

5
utils/http.js

@ -3,7 +3,7 @@ import { useDeviceStore } from "../stores/modules/deviceInfo"
import { useLoginStore } from "../stores/modules/login"
const baseURL = "https://dbqb.nfdxy.net/testApi"
// const baseURL = "http://192.168.40.8:9000"
const httpInterceptor = {
// 拦截前触发
@ -44,7 +44,8 @@ const httpInterceptor = {
//4 添加token,优先用store,没有则回退到body中的token,保持与Apifox一致
const memberStore = useUserStore()
const token = memberStore.userInfo?.token || options.data?.token
// const token = 'a72cf584af42525f214670cb47443820'
// const token = '2d0b5654409646713cdd40ec0d0bb56c'
// const token = '1b3a58424c5324e40d4bf4d085e18047'
if (token) {
options.header.token = token
}

Loading…
Cancel
Save