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
+217 -179
View File
@@ -1,34 +1,39 @@
<template> <template>
<up-popup <up-popup :show="show" :round="24" :closeOnClickOverlay="false">
:show="show" <view class="share-popup-view">
:round="24" <view class="share-head">
:closeOnClickOverlay="false" <text class="text-28 text-gray">分享信任桥</text>
> </view>
<view class="share-popup-view"> <view class="share-btn-view">
<view class="share-head"> <!-- #ifndef APP-PLUS || H5 -->
<text class="text-28 text-gray">分享信任桥</text> <block v-for="(item, index) in btnList" :key="index">
</view> <button v-if="index === 0" open-type="share" hover-class="none" class="share-box share-btn-clean" @click="onBtn(index)">
<view class="share-btn-view"> <image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index"> <text class="text-24 text-gray">{{ item }}</text>
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image> </button>
<text class="text-24 text-gray">{{item}}</text> <view v-else class="share-box" @click="onBtn(index)">
</view> <image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</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>
</view> <text class="text-24 text-gray">{{ item }}</text>
<!-- #endif --> </view>
<!-- #endif -->
</view> </view>
<view class="share-line" style="margin-top:40rpx;"></view> <view class="share-line" style="margin-top:40rpx;"></view>
<view class="share-line" style="min-height:16rpx;height:16rpx"> <view class="share-line" style="min-height:16rpx;height:16rpx">
</view> </view>
<view class="share-bottom" @click="onClose"> <view class="share-bottom" @click="onClose">
<text class="text-32 text-fu1">取消</text> <text class="text-32 text-fu1">取消</text>
</view> </view>
@@ -36,184 +41,217 @@
<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>
</view> </view>
</up-popup> </up-popup>
</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: {
show: {
type: Boolean,
default: false
}, },
props:{ id: {
show:{ type: String,
type:Boolean, default: ''
default:false },
}, tu: {
id:{ type: String,
type:String, default: ''
default:'' },
}, price: {
tu:{ type: String,
type:String, default: ''
default:'' },
}, text: {
price:{ type: String,
type:String, default: ''
default:'' }
},
text:{
type:String,
default:''
}
},
methods: {
onBtn(index) {
console.log('微信分享', index);
this.$emit('wxShare', index)
}, },
methods: { onClose() {
this.$emit('close');
onWxBtn(index){ },
console.log('微信分享',index); onOk() {
this.$emit('wxShare',index) Func.debounce(this.dOk())
}, },
dOk() {
onClose(){ this.$emit('ok');
this.$emit('close');
},
onOk(){
Func.debounce(this.dOk())
},
dOk(){
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;
flex-direction: column;
align-items: center;
padding: 32rpx;
box-sizing: border-box;
border-radius: 24rpx;
position: absolute;
background-color: #fff;
top: -638rpx;
.image-view-bottom {
width: 100%;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
padding: 32rpx; justify-content: space-between;
margin-top: 20rpx;
.image-view-bottom-left {
height: 72rpx;
min-height: 72rpx;
border-right: 2rpx solid #EBEBEB;
display: flex;
align-items: center;
padding-right: 10rpx;
}
.image-view-bottom-right {
// min-width:130rpx;
margin-left: 10rpx;
height: 72rpx;
min-height: 72rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
}
.tu-img {
width: 100%;
height: 344rpx;
}
}
.share-popup-view {
width: 100%;
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
position: relative;
.share-head {
width: 100%;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-bottom {
width: 100%;
height: 92rpx;
min-height: 92rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-line {
display: flex;
width: 100%;
height: 2rpx;
min-height: 2rpx;
background-color: #e7e7e7;
}
.qr-view {
width: 100%;
height: 332rpx;
min-height: 332rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-btn-view {
width: 100%;
height: 124rpx;
min-height: 124rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// padding: 0 36rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 24rpx; margin-top: 36rpx;
position: absolute;
background-color: #fff;
top:-638rpx;
.image-view-bottom{
width:100%;
flex:1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top:20rpx;
.image-view-bottom-left{
height:72rpx;
min-height:72rpx;
border-right: 2rpx solid #EBEBEB;
display: flex;
align-items: center;
padding-right: 10rpx;
} .share-box {
.image-view-bottom-right{ flex: 1;
// min-width:130rpx; height: 100%;
margin-left:10rpx; display: flex;
height:72rpx; flex-direction: column;
min-height:72rpx; justify-content: space-between;
display: flex; align-items: center;
flex-direction: row;
align-items: center; .share-img {
justify-content: flex-end; width: 80rpx;
height: 80rpx;
} }
} }
.tu-img{
width:100%; .share-btn-clean {
height:344rpx; 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;
}
} }
} }
.share-popup-view{
width:100%;
height:400rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
position: relative;
.share-head{
width:100%;
height:88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-bottom{
width:100%;
height:92rpx;
min-height:92rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-line{
display: flex;
width:100%;
height:2rpx;
min-height:2rpx;
background-color: #e7e7e7;
}
.qr-view{
width:100%;
height:332rpx;
min-height:332rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-btn-view{
width:100%;
height:124rpx;
min-height:124rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// padding: 0 36rpx;
box-sizing: border-box;
margin-top:36rpx;
.share-box{
flex:1;
height:100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.share-img{
width:80rpx;
height:80rpx;
}
}
}
}
}
</style> </style>
pages/other_package/productInfo/productInfo.vue
+57 -19
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.showModal({ uni.showShareMenu({
title: "提示", withShareTicket: true,
content: "请点击右上角...分享到朋友圈", menus: ["shareTimeline"],
showCancel: false, success: () => {
uni.showModal({
title: "提示",
content: "已为您开启朋友圈分享功能，请点击右上角 [...] 选择【分享到朋友圈】",
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) {