charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 微信分享

Browse Source
This commit is contained in:
charles
2026-07-23 14:03:35 +08:00
parent 39d0dcea86
commit c7e71a6219
2 changed files with 283 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/components/share-popup.vue
+130 -92
View File
@@ -1,23 +1,28 @@
<template> <template>
<up-popup <up-popup :show="show" :round="24" :closeOnClickOverlay="false">
:show="show"
:round="24"
:closeOnClickOverlay="false"
>
<view class="share-popup-view"> <view class="share-popup-view">
<view class="share-head"> <view class="share-head">
<text class="text-28 text-gray">分享信任桥</text> <text class="text-28 text-gray">分享信任桥</text>
</view> </view>
<view class="share-btn-view"> <view class="share-btn-view">
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index"> <!-- #ifndef APP-PLUS || H5 -->
<block v-for="(item, index) in btnList" :key="index">
<button v-if="index === 0" open-type="share" hover-class="none" class="share-box share-btn-clean" @click="onBtn(index)">
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image> <image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{item}}</text> <text class="text-24 text-gray">{{ item }}</text>
</button>
<view v-else class="share-box" @click="onBtn(index)">
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</view> </view>
</block>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in appBtnList" :key="index"> <view class="share-box" @click="onBtn(index)" v-for="(item, index) in appBtnList" :key="index">
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image> <image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`"
<text class="text-24 text-gray">{{item}}</text> class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
@@ -36,10 +41,10 @@
<image :src="tu" class="tu-img"></image> <image :src="tu" class="tu-img"></image>
<view class="image-view-bottom"> <view class="image-view-bottom">
<view class="image-view-bottom-left"> <view class="image-view-bottom-left">
<text class="text-24 text-gray text-overflow1">{{text}}</text> <text class="text-24 text-gray text-overflow1">{{ text }}</text>
</view> </view>
<view class="image-view-bottom-right"> <view class="image-view-bottom-right">
<text class="text-24 text-zi">￥{{price}}</text> <text class="text-24 text-zi">￥{{ price }}</text>
</view> </view>
</view> </view>
</view> </view>
@@ -48,65 +53,65 @@
</template> </template>
<script> <script>
import Func from '/utils/func' import Func from '/utils/func'
import {SHARE_URL} from '@/utils/config.js' import { SHARE_URL } from '@/utils/config.js'
export default { export default {
data() { data() {
return { return {
btnList:['微信','朋友圈'], btnList: ['微信', '朋友圈'],
appBtnList:['微信', '朋友圈', '复制链接', '保存图片', 'QQ'], appBtnList: ['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
} }
}, },
props:{ props: {
show:{ show: {
type:Boolean, type: Boolean,
default:false default: false
}, },
id:{ id: {
type:String, type: String,
default:'' default: ''
}, },
tu:{ tu: {
type:String, type: String,
default:'' default: ''
}, },
price:{ price: {
type:String, type: String,
default:'' default: ''
}, },
text:{ text: {
type:String, type: String,
default:'' default: ''
} }
}, },
methods: { methods: {
onWxBtn(index){ onBtn(index) {
console.log('微信分享',index); console.log('微信分享', index);
this.$emit('wxShare',index) this.$emit('wxShare', index)
}, },
onClose(){ onClose() {
this.$emit('close'); this.$emit('close');
}, },
onOk(){ onOk() {
Func.debounce(this.dOk()) Func.debounce(this.dOk())
}, },
dOk(){ dOk() {
this.$emit('ok'); this.$emit('ok');
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.share-top-image-view{ .share-top-image-view {
width:400rpx; width: 400rpx;
min-height:496rpx; min-height: 496rpx;
height:496rpx; height: 496rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -115,105 +120,138 @@
border-radius: 24rpx; border-radius: 24rpx;
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
top:-638rpx; top: -638rpx;
.image-view-bottom{
width:100%; .image-view-bottom {
flex:1; width: 100%;
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top:20rpx; margin-top: 20rpx;
.image-view-bottom-left{
height:72rpx; .image-view-bottom-left {
min-height:72rpx; height: 72rpx;
min-height: 72rpx;
border-right: 2rpx solid #EBEBEB; border-right: 2rpx solid #EBEBEB;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 10rpx; padding-right: 10rpx;
} }
.image-view-bottom-right{
.image-view-bottom-right {
// min-width:130rpx; // min-width:130rpx;
margin-left:10rpx; margin-left: 10rpx;
height:72rpx; height: 72rpx;
min-height:72rpx; min-height: 72rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
} }
.tu-img{
width:100%; .tu-img {
height:344rpx; width: 100%;
height: 344rpx;
} }
} }
.share-popup-view{
width:100%; .share-popup-view {
height:400rpx; width: 100%;
height: 400rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
position: relative; position: relative;
.share-head{
width:100%; .share-head {
height:88rpx; width: 100%;
height: 88rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.share-bottom{
width:100%; .share-bottom {
height:92rpx; width: 100%;
min-height:92rpx; height: 92rpx;
min-height: 92rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.share-line{
.share-line {
display: flex; display: flex;
width:100%; width: 100%;
height:2rpx; height: 2rpx;
min-height:2rpx; min-height: 2rpx;
background-color: #e7e7e7; background-color: #e7e7e7;
} }
.qr-view{
width:100%; .qr-view {
height:332rpx; width: 100%;
min-height:332rpx; height: 332rpx;
min-height: 332rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.share-btn-view{
width:100%; .share-btn-view {
height:124rpx; width: 100%;
min-height:124rpx; height: 124rpx;
min-height: 124rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
// padding: 0 36rpx; // padding: 0 36rpx;
box-sizing: border-box; box-sizing: border-box;
margin-top:36rpx; margin-top: 36rpx;
.share-box{
flex:1; .share-box {
height:100%; flex: 1;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.share-img{
width:80rpx; .share-img {
height:80rpx; width: 80rpx;
height: 80rpx;
}
}
.share-btn-clean {
background: none !important;
background-color: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: normal !important;
font-size: inherit !important;
color: inherit !important;
outline: none !important;
border-radius: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
&::after {
border: none !important;
display: none !important;
} }
} }
} }
} }
</style> </style>
pages/other_package/productInfo/productInfo.vue
+54 -16
View File
@@ -334,8 +334,8 @@
<view class="popup_but" @click="addressOk"> 确认 </view> <view class="popup_but" @click="addressOk"> 确认 </view>
</view> </view>
</up-popup> </up-popup>
<SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id" <SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @wxShare="onWxShare" @share="onShare"
:text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''" :id="id" :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"></SharePopup> :tu="swiperList.length && swiperList[0]"></SharePopup>
<EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow" <EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
@close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name"> @close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
@@ -449,6 +449,11 @@ export default {
// #endif // #endif
}, },
onLoad(options) { onLoad(options) {
// #ifdef MP-WEIXIN
// 默认禁止小程序右上角的分享菜单
// uni.hideShareMenu();
// #endif
const id = options.id; const id = options.id;
this.activedType = options.activedType; this.activedType = options.activedType;
this.activityId = options.activityId; this.activityId = options.activityId;
@@ -498,17 +503,19 @@ export default {
timer = null; timer = null;
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
const queryStr = this.buildShareParams();
return { return {
title: this.orderInfo.name || "商品分享", title: this.orderInfo.name || "商品分享",
path: `/pages/other_package/productInfo/productInfo?id=${this.id}`, path: `/pages/other_package/productInfo/productInfo?${queryStr}`,
imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "", imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
}; };
}, },
onShareTimeline(res) { onShareTimeline(res) {
const queryStr = this.buildShareParams();
return { return {
title: this.orderInfo.name || "商品分享", title: this.orderInfo.name || "商品分享",
query: `id=${this.id}`, query: queryStr,
imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "", imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
}; };
}, },
methods: { methods: {
@@ -579,21 +586,43 @@ export default {
url: `/pages/rwa_package/kefu/kefu?scene=product&goodsId=${this.id}`, url: `/pages/rwa_package/kefu/kefu?scene=product&goodsId=${this.id}`,
}); });
}, },
getValue, buildShareParams() {
const params = [];
if (this.id) params.push(`id=${this.id}`);
if (this.activedType) params.push(`activedType=${this.activedType}`);
if (this.activityId) params.push(`activityId=${this.activityId}`);
if (this.isCoupon) params.push(`isPar=${this.isCoupon}`);
return params.join("&");
},
// 微信小程序环境分享 // 微信小程序环境分享
onWxShare(index) { onWxShare(index) {
console.log("分享", index); console.log("微信小程序分享", index);
if (index == 0) { if (index == 0) {
// 微信好友，通过button open-type="share"触发，这里只需要关闭弹窗 // 微信好友：通过 button open-type="share" 触发，此处只需关闭分享弹窗
this.onClose(); this.onClose();
} else { } else if (index == 1) {
// 分享到微信朋友圈 // 分享到微信朋友圈：开启右上角朋友圈分享菜单并引导用户点击右上角 [...]
// 小程序不支持API直接唤起朋友圈分享，提示用户点击右上角 // #ifdef MP-WEIXIN
uni.showShareMenu({
withShareTicket: true,
menus: ["shareTimeline"],
success: () => {
uni.showModal({ uni.showModal({
title: "提示", title: "提示",
content: "请点击右上角...分享到朋友圈", content: "已为您开启朋友圈分享功能，请点击右上角 [...] 选择【分享到朋友圈】",
showCancel: false, showCancel: false,
}); });
},
fail: () => {
uni.showModal({
title: "提示",
content: "请点击右上角 [...] 分享到朋友圈",
showCancel: false,
});
},
});
// #endif
this.onClose();
} }
}, },
onShare(index) { onShare(index) {
@@ -885,12 +914,21 @@ export default {
this.openShow = false; this.openShow = false;
}, },
jumpLeft() { jumpLeft() {
if (this.isSplash == "true") { const pages = getCurrentPages();
uni.switchTab({ url: "/pages/home/home" }); // 如果是从分享链接直接打开（页面栈数量 <= 1）或闪屏/引导打开，点击返回直接回到首页
if (this.isSplash == "true" || pages.length <= 1) {
uni.switchTab({
url: "/pages/home/home",
});
return; return;
} }
uni.navigateBack({ uni.navigateBack({
delta: 1, // 返回的页面数，默认为1,返回到上一级 delta: 1, // 返回上一级页面
fail: () => {
uni.switchTab({
url: "/pages/home/home",
});
},
}); });
}, },
jumpOther(type) { jumpOther(type) {