354 lines
8.3 KiB
Vue
354 lines
8.3 KiB
Vue
<template>
|
|
<view class="invite_friends_warp">
|
|
<view class="invite_img">
|
|
<image :src="inviteImage" class="invite_imgage" v-if="inviteImage"></image>
|
|
<view class="loading" v-else>
|
|
<text>加载分享图片中...</text>
|
|
</view>
|
|
</view>
|
|
<view class="invite_but">
|
|
<button
|
|
class="share-btn"
|
|
@click="openSharePopup"
|
|
>
|
|
分享好友
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 分享弹窗 -->
|
|
<SharePopup
|
|
ref="share"
|
|
v-if="shareOpen"
|
|
:show="shareShow"
|
|
@close="onClose"
|
|
@wxShare="onWxShare"
|
|
@share="onShare"
|
|
:id="posterId"
|
|
text="我的推广海报"
|
|
:tu="inviteImage || shareImg"
|
|
></SharePopup>
|
|
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
<qiaobao-assistant page-key="pages/other_package/invite_friends/invite_friends" title="我的推广" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSharePoster, generateSharePoster } from "@/api/common.js";
|
|
import SharePopup from "@/pages/other_package/components/share-popup.vue";
|
|
|
|
export default {
|
|
components: {
|
|
SharePopup
|
|
},
|
|
data() {
|
|
return {
|
|
inviteImage: null,
|
|
imageLoading: false,
|
|
shareImg: '',
|
|
shareShow: false,
|
|
shareOpen: true,
|
|
posterId: ''
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getSharePoster();
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: "邀请您体验信任桥TB商城",
|
|
path: "/pages/home/home",
|
|
imageUrl: this.inviteImage || this.shareImg,
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: "邀请您体验信任桥TB商城",
|
|
query: "",
|
|
imageUrl: this.inviteImage || this.shareImg,
|
|
};
|
|
},
|
|
methods: {
|
|
// 打开分享弹窗 / 微信小程序下直接触发朋友圈(图片分享菜单)效果
|
|
openSharePopup() {
|
|
if (!this.inviteImage && !this.shareImg) {
|
|
this.$refs.uToastRef.show({
|
|
type: 'warning',
|
|
message: "分享图正在加载，请稍后重试",
|
|
});
|
|
return;
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
this.onWxShare(1);
|
|
return;
|
|
// #endif
|
|
|
|
this.shareShow = true;
|
|
},
|
|
|
|
// 关闭分享弹窗
|
|
onClose() {
|
|
this.shareShow = false;
|
|
},
|
|
|
|
// 微信小程序环境分享
|
|
onWxShare(index) {
|
|
console.log('小程序分享', index);
|
|
if (index === 0) {
|
|
// 微信好友: 已通过 button open-type="share" 触发，关闭弹窗即可
|
|
this.onClose();
|
|
} else if (index === 1) {
|
|
// 朋友圈: 唤起小程序原生分享菜单或系统提示
|
|
// #ifdef MP-WEIXIN
|
|
if (typeof wx !== 'undefined' && wx.showShareImageMenu && this.shareImg) {
|
|
wx.showShareImageMenu({
|
|
path: this.shareImg,
|
|
fail: () => {
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ["shareTimeline"]
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ["shareTimeline"]
|
|
});
|
|
}
|
|
// #endif
|
|
this.onClose();
|
|
}
|
|
},
|
|
|
|
// App 及 H5 环境分享
|
|
onShare(index) {
|
|
console.log('App/H5分享', index);
|
|
if (index === 0) {
|
|
// 微信好友
|
|
// #ifdef APP-PLUS
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: 'WXSceneSession',
|
|
type: 2,
|
|
imageUrl: this.shareImg || this.inviteImage,
|
|
success: () => {
|
|
this.$refs.uToastRef.show({ type: 'success', message: '分享成功' });
|
|
},
|
|
fail: (err) => {
|
|
console.error('App分享好友失败:', err);
|
|
this.savePosterToAlbum();
|
|
}
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
uni.previewImage({ urls: [this.shareImg || this.inviteImage] });
|
|
this.$refs.uToastRef.show({ type: 'info', message: '请长按图片发送给好友' });
|
|
// #endif
|
|
this.onClose();
|
|
} else if (index === 1) {
|
|
// 微信朋友圈
|
|
// #ifdef APP-PLUS
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: 'WXSceneTimeline',
|
|
type: 2,
|
|
imageUrl: this.shareImg || this.inviteImage,
|
|
success: () => {
|
|
this.$refs.uToastRef.show({ type: 'success', message: '分享成功' });
|
|
},
|
|
fail: (err) => {
|
|
console.error('App分享朋友圈失败:', err);
|
|
this.savePosterToAlbum();
|
|
}
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
uni.previewImage({ urls: [this.shareImg || this.inviteImage] });
|
|
this.$refs.uToastRef.show({ type: 'info', message: '请长按图片分享到朋友圈' });
|
|
// #endif
|
|
this.onClose();
|
|
} else if (index === 2) {
|
|
// 复制链接
|
|
uni.setClipboardData({
|
|
data: 'https://m.tbmall.xin/#/pages/home/home',
|
|
success: () => {
|
|
this.$refs.uToastRef.show({ type: 'success', message: '链接已复制到剪贴板' });
|
|
}
|
|
});
|
|
this.onClose();
|
|
} else if (index === 3) {
|
|
// 保存图片
|
|
this.savePosterToAlbum();
|
|
this.onClose();
|
|
} else if (index === 4) {
|
|
// QQ
|
|
this.$refs.uToastRef.show({ type: 'warning', message: '暂未开放' });
|
|
this.onClose();
|
|
}
|
|
},
|
|
|
|
// 保存海报至相册
|
|
savePosterToAlbum() {
|
|
const imgPath = this.shareImg || this.inviteImage;
|
|
if (!imgPath) {
|
|
this.$refs.uToastRef.show({ type: 'warning', message: '海报图片生成中，请稍后重试' });
|
|
return;
|
|
}
|
|
|
|
// #ifdef APP-PLUS || MP-WEIXIN
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: imgPath,
|
|
success: () => {
|
|
this.$refs.uToastRef.show({ type: 'success', message: '海报已保存至手机相册' });
|
|
},
|
|
fail: (err) => {
|
|
console.error('保存至相册失败:', err);
|
|
if (err && err.errMsg && err.errMsg.includes('auth')) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '需要保存图片到相册权限，请在设置中开启相册权限',
|
|
success: (res) => {
|
|
if (res.confirm) uni.openSetting();
|
|
}
|
|
});
|
|
} else {
|
|
uni.previewImage({ urls: [imgPath] });
|
|
}
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
uni.previewImage({ urls: [imgPath] });
|
|
this.$refs.uToastRef.show({ type: 'info', message: '请长按图片保存到手机相册' });
|
|
// #endif
|
|
},
|
|
|
|
// 将base64转换为本地临时文件
|
|
base64ToTempFile(base64Data) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!base64Data) {
|
|
return reject(new Error('Base64数据为空'));
|
|
}
|
|
|
|
// #ifdef APP-PLUS
|
|
try {
|
|
const bitmap = new plus.nativeObj.Bitmap('poster_' + Date.now());
|
|
bitmap.loadBase64Data(
|
|
base64Data,
|
|
() => {
|
|
const tempPath = `_doc/share_${Date.now()}.png`;
|
|
bitmap.save(
|
|
tempPath,
|
|
{ overwrite: true, format: 'png', quality: 100 },
|
|
(e) => {
|
|
bitmap.clear();
|
|
resolve(e.target);
|
|
},
|
|
(err) => {
|
|
bitmap.clear();
|
|
reject(err);
|
|
}
|
|
);
|
|
},
|
|
(err) => {
|
|
bitmap.clear();
|
|
reject(err);
|
|
}
|
|
);
|
|
} catch (err) {
|
|
reject(err);
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
|
|
const arrayBuffer = uni.base64ToArrayBuffer(base64);
|
|
const fs = typeof wx !== 'undefined' && wx.getFileSystemManager ? wx.getFileSystemManager() : uni.getFileSystemManager();
|
|
const tempFilePath = `${wx.env.USER_DATA_PATH}/share_${Date.now()}.png`;
|
|
fs.writeFileSync(tempFilePath, arrayBuffer, 'binary');
|
|
resolve(tempFilePath);
|
|
} catch (err) {
|
|
reject(err);
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
resolve(base64Data);
|
|
// #endif
|
|
});
|
|
},
|
|
|
|
// 查询分享模版
|
|
async getSharePoster() {
|
|
this.imageLoading = true;
|
|
try {
|
|
const resp = await getSharePoster();
|
|
if (resp && resp.bizcode === 100) {
|
|
const data = resp.data[0];
|
|
if (data) this.posterId = data.id || '';
|
|
// 生成分享图
|
|
const generateResp = await generateSharePoster({ id: data.id });
|
|
if (generateResp && generateResp.bizcode === 100) {
|
|
this.inviteImage = generateResp.data;
|
|
// 将base64转换为本地临时文件并存储到shareImg
|
|
this.shareImg = await this.base64ToTempFile(generateResp.data);
|
|
console.log('图片转换成功:', this.shareImg);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("获取分享图失败:", error);
|
|
} finally {
|
|
this.imageLoading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invite_friends_warp {
|
|
height: calc(100vh - 80rpx);
|
|
padding: 10rpx 40rpx 40rpx;
|
|
}
|
|
|
|
.invite_img {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 920rpx;
|
|
}
|
|
|
|
.invite_imgage {
|
|
width: 100%;
|
|
height: 920rpx;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.invite_but {
|
|
padding: 20rpx 50rpx;
|
|
margin-top: 52rpx;
|
|
}
|
|
|
|
.share-btn {
|
|
width: 100%;
|
|
background: $app-bt-bj;
|
|
border-radius: 45rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
// 清除默认按钮样式
|
|
border: none;
|
|
outline: none;
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style> |