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
+226 -188
View File
@@ -1,219 +1,257 @@
<template>
<up-popup
:show="show"
:round="24"
:closeOnClickOverlay="false"
>
<view class="share-popup-view">
<view class="share-head">
<text class="text-28 text-gray">分享信任桥</text>
</view>
<view class="share-btn-view">
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="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>
<!-- #ifdef APP-PLUS || H5 -->
<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>
<text class="text-24 text-gray">{{item}}</text>
</view>
<!-- #endif -->
</view>
<view class="share-line" style="margin-top:40rpx;"></view>
<view class="share-line" style="min-height:16rpx;height:16rpx">
</view>
<view class="share-bottom" @click="onClose">
<text class="text-32 text-fu1">取消</text>
</view>
<up-popup :show="show" :round="24" :closeOnClickOverlay="false">
<view class="share-popup-view">
<view class="share-head">
<text class="text-28 text-gray">分享信任桥</text>
</view>
<view class="share-btn-view">
<!-- #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>
<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>
</block>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 -->
<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>
<text class="text-24 text-gray">{{ item }}</text>
</view>
<!-- #endif -->
</view>
<view class="share-line" style="margin-top:40rpx;"></view>
<view class="share-line" style="min-height:16rpx;height:16rpx">
</view>
<view class="share-bottom" @click="onClose">
<text class="text-32 text-fu1">取消</text>
</view>
<view class="share-top-image-view">
<image :src="tu" class="tu-img"></image>
<view class="image-view-bottom">
<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 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>
</up-popup>
</template>
<script>
import Func from '/utils/func'
import {SHARE_URL} from '@/utils/config.js'
export default {
data() {
return {
btnList:['微信','朋友圈'],
appBtnList:['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
}
import Func from '/utils/func'
import { SHARE_URL } from '@/utils/config.js'
export default {
data() {
return {
btnList: ['微信', '朋友圈'],
appBtnList: ['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
}
},
props: {
show: {
type: Boolean,
default: false
},
props:{
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
},
tu:{
type:String,
default:''
},
price:{
type:String,
default:''
},
text:{
type:String,
default:''
}
id: {
type: String,
default: ''
},
methods: {
onWxBtn(index){
console.log('微信分享',index);
this.$emit('wxShare',index)
},
onClose(){
this.$emit('close');
},
onOk(){
Func.debounce(this.dOk())
},
dOk(){
this.$emit('ok');
}
tu: {
type: String,
default: ''
},
price: {
type: String,
default: ''
},
text: {
type: String,
default: ''
}
},
methods: {
onBtn(index) {
console.log('微信分享', index);
this.$emit('wxShare', index)
},
onClose() {
this.$emit('close');
},
onOk() {
Func.debounce(this.dOk())
},
dOk() {
this.$emit('ok');
}
}
}
</script>
<style lang="scss" scoped>
.share-top-image-view{
width:400rpx;
min-height:496rpx;
height:496rpx;
.share-top-image-view {
width: 400rpx;
min-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;
flex-direction: column;
flex-direction: row;
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;
border-radius: 24rpx;
position: absolute;
background-color: #fff;
top:-638rpx;
.image-view-bottom{
width:100%;
flex:1;
margin-top: 36rpx;
.share-box {
flex: 1;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
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;
align-items: center;
.share-img {
width: 80rpx;
height: 80rpx;
}
}
.tu-img{
width:100%;
height:344rpx;
.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;
}
}
}
.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>
pages/other_package/productInfo/productInfo.vue
+57 -19
View File
@@ -334,8 +334,8 @@
<view class="popup_but" @click="addressOk"> 确认 </view>
</view>
</up-popup>
<SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id"
:text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
<SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @wxShare="onWxShare" @share="onShare"
:id="id" :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"></SharePopup>
<EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
@close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
@@ -449,6 +449,11 @@ export default {
// #endif
},
onLoad(options) {
// #ifdef MP-WEIXIN
// 默认禁止小程序右上角的分享菜单
// uni.hideShareMenu();
// #endif
const id = options.id;
this.activedType = options.activedType;
this.activityId = options.activityId;
@@ -498,17 +503,19 @@ export default {
timer = null;
},
onShareAppMessage(res) {
const queryStr = this.buildShareParams();
return {
title: this.orderInfo.name || "商品分享",
path: `/pages/other_package/productInfo/productInfo?id=${this.id}`,
imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "",
path: `/pages/other_package/productInfo/productInfo?${queryStr}`,
imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
};
},
onShareTimeline(res) {
const queryStr = this.buildShareParams();
return {
title: this.orderInfo.name || "商品分享",
query: `id=${this.id}`,
imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "",
query: queryStr,
imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
};
},
methods: {
@@ -579,21 +586,43 @@ export default {
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) {
console.log("分享", index);
console.log("微信小程序分享", index);
if (index == 0) {
// 微信好友，通过button open-type="share"触发，这里只需要关闭弹窗
// 微信好友：通过 button open-type="share" 触发，此处只需关闭分享弹窗
this.onClose();
} else {
// 分享到微信朋友圈
// 小程序不支持API直接唤起朋友圈分享，提示用户点击右上角
uni.showModal({
title: "提示",
content: "请点击右上角...分享到朋友圈",
showCancel: false,
} else if (index == 1) {
// 分享到微信朋友圈：开启右上角朋友圈分享菜单并引导用户点击右上角 [...]
// #ifdef MP-WEIXIN
uni.showShareMenu({
withShareTicket: true,
menus: ["shareTimeline"],
success: () => {
uni.showModal({
title: "提示",
content: "已为您开启朋友圈分享功能，请点击右上角 [...] 选择【分享到朋友圈】",
showCancel: false,
});
},
fail: () => {
uni.showModal({
title: "提示",
content: "请点击右上角 [...] 分享到朋友圈",
showCancel: false,
});
},
});
// #endif
this.onClose();
}
},
onShare(index) {
@@ -885,12 +914,21 @@ export default {
this.openShow = false;
},
jumpLeft() {
if (this.isSplash == "true") {
uni.switchTab({ url: "/pages/home/home" });
const pages = getCurrentPages();
// 如果是从分享链接直接打开（页面栈数量 <= 1）或闪屏/引导打开，点击返回直接回到首页
if (this.isSplash == "true" || pages.length <= 1) {
uni.switchTab({
url: "/pages/home/home",
});
return;
}
uni.navigateBack({
delta: 1, // 返回的页面数，默认为1,返回到上一级
delta: 1, // 返回上一级页面
fail: () => {
uni.switchTab({
url: "/pages/home/home",
});
},
});
},
jumpOther(type) {