166 lines
4.0 KiB
Vue
166 lines
4.0 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="shareImage"
|
|
>
|
|
分享好友
|
|
</button>
|
|
</view>
|
|
<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";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
inviteImage: null,
|
|
imageLoading: false,
|
|
shareImg:''
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getSharePoster();
|
|
},
|
|
methods: {
|
|
// 将base64转换为本地临时文件
|
|
async base64ToTempFile(base64Data) {
|
|
try {
|
|
// 移除base64前缀
|
|
const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
|
|
// 将base64转换为ArrayBuffer
|
|
const arrayBuffer = uni.base64ToArrayBuffer(base64);
|
|
// 获取文件系统管理器
|
|
const fs = uni.getFileSystemManager();
|
|
// 生成临时文件路径
|
|
const tempFilePath = `${wx.env.USER_DATA_PATH}/share_${Date.now()}.png`;
|
|
// 写入文件
|
|
fs.writeFileSync(tempFilePath, arrayBuffer, 'binary');
|
|
return tempFilePath;
|
|
} catch (error) {
|
|
console.error('base64转换为临时文件失败:', error);
|
|
throw error;
|
|
}
|
|
},
|
|
|
|
// 查询分享模版
|
|
async getSharePoster() {
|
|
this.imageLoading = true;
|
|
try {
|
|
const resp = await getSharePoster();
|
|
if (resp && resp.bizcode === 100) {
|
|
const data = resp.data[0];
|
|
// 生成分享图
|
|
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;
|
|
}
|
|
},
|
|
|
|
// 使用wx.showShareImageMenu分享图片到微信好友
|
|
async shareImage() {
|
|
// 确保有分享图再执行分享
|
|
if (!this.shareImg) {
|
|
this.$refs.uToastRef.show({
|
|
type: 'warning',
|
|
message: "分享图正在加载，请稍后重试",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 使用微信原生API wx.showShareImageMenu分享图片
|
|
wx.showShareImageMenu({
|
|
path: this.shareImg, // 本地临时文件路径
|
|
success: () => {
|
|
console.log('分享成功');
|
|
this.$refs.uToastRef.show({
|
|
type: 'success',
|
|
message: "分享成功",
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.error('分享失败:', err);
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "分享失败，请稍后重试",
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('分享过程出错:', error);
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "分享失败，请稍后重试",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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> |