<script>
/**新分享组件
* shareData：分享所需数据内容
* {
* data: 数据详情 必传
* identity: 身份id 默认''
* type: 1=企业 2=商家 默认''
* source: 来源 默认share
* }
*
* type：分享类型，必传，0一元拓客，1视频引流，2裂变红包，3商品管理 9线上线下分销
*/
import url_config, { developementMode } from '@/common/config';
import { getImgViewUrl, formatGetUri } from "@/common/util.js";
import permision from "@/common/permission.js";
import posterConfig from './posterConfig.js'
export default {
name: 'w-share',
props: {
title: {
type: String,
default: () => {
return '分享到'
},
},
shareData: {
type: Object,
default: () => {
return {}
},
},
type: {
type: [Number, String],
default: () => {
return 0
},
},
isPoster: {
type: Boolean,
default: () => {
return false
},
},
isImage: {
type: Boolean,
default: () => {
return false
},
},
imgSrc: {
type: String,
default: () => {
return ''
},
},
isStoreGoods: {// 是否是店铺-商品管理-实物商品
type: Boolean,
default: true,
},
linkId: {
type: [Number, String],
default: () => {
return ''
},
},
},
data() {
return {
show: false,
share: {
WXSceneSession: {},
WXSceneTimeline: {},
},
page: "",
shareLink: '',
posterImg: '',// 海报图片
wxCodeImg: '',// 微信小程序码图片
qrcodeImg: '',// 二维码图片
isImg: false,
imgType: '',// poster海报，wxCode微信小程序码，qrcode二维码
userData: {},
distributionType: '',// 分销类型, type=9时用
showModal: false,
modalType: '',
}
},
computed: {
saveLabel() {
let txt = '';
switch (this.imgType) {
case 'wxCode':
txt = '保存小程序码';
break;
case 'qrcode':
txt = '保存二维码';
break;
}
return txt
},
notNeiborhood() {
// 非邻里团长分销
return this.type*1 === 9 && ['1', 1].includes(this.distributionType)
}
},
mounted() {
this.getUserData();
},
onHide() {
console.log("onHide");
},
methods: {
// 用户信息
getUserData() {
let _this = this;
_this.$api.userIndex({}).then(res => {
if (res.data.code == 200) {
_this.userData = res.data.data;
} else {
_this.$toast.msg(res.data.msg)
}
}).catch(err => {
console.log(err)
})
},
// 关闭弹窗
handleClose() {
this.$emit('close-popup', this.show);
// console.log('关闭弹窗');
this.show = false;
},
// 显示弹窗
open() {
this.show = true;
this.$nextTick(() => {
if (this.type*1 == 0) {// 一元拓客
this.page = '/pages/merchant/product/product_detail';
this.initShareData();
} else if (this.type*1 == 1) {// 视频引流
this.page = this.isStoreGoods ? '/pages/store/online_goods' : '/pages/oneYuan/detail_video';
this.initShareData();
} else if (this.type*1 == 2) {// 外链
this.page = '/pages/store/goods';
this.initShareData();
} else if (this.type*1 == 3) {// 商品管理
this.page = '/pages/store/goods';
let thumb_url = '';
if (this.shareData.data.theme_image_url) {// 主题图
thumb_url = this.shareData.data.theme_image_url;
} else if (this.shareData.data.thumb_url) {// 缩略图
thumb_url = this.shareData.data.thumb_url;
}
this.shareData.data.thumb_url = thumb_url;
this.initShareData();
} else if (this.type*1 == 4) {// 服务项目
this.page = '/pages/shop/details/project';
let thumb_url = '';
if (this.shareData.data.theme_image_url) {// 主题图
thumb_url = this.shareData.data.theme_image_url;
} else if (this.shareData.data.thumb_url) {// 缩略图
thumb_url = this.shareData.data.thumb_url;
}
this.shareData.data.thumb_url = thumb_url;
this.initShareData();
} else if (this.type*1 == 5) {// 优惠券
this.page = '/pages/marketing/coupon';
this.initShareDataImage();
} else if (this.type*1 == 6) {// 马上有礼
this.page = '/pages/marketing/codeGifts';
this.initShareDataImage();
} else if (this.type*1 == 7) {// 精品课程
this.page = '/pages/store/curriculum';
let thumb_url = '';
if (this.shareData.data.theme_image_url) {// 主题图
thumb_url = this.shareData.data.theme_image_url;
} else if (this.shareData.data.thumb_url) {// 缩略图
thumb_url = this.shareData.data.thumb_url;
}
this.shareData.data.thumb_url = thumb_url;
this.initShareData();
} else if (this.type*1 == 8) {// 店铺
// 店铺装修需求：应用内进店进入公域店铺首页，通过分享进入则进入私域首页
this.page = '/pages/sub-store/private-domain/index';
this.initShareData();
} else if (this.type*1 == 9) {// 精选商品
this.page = '/pages/user/promotion/selected_product';
this.distributionType = this.shareData.distributionType;
this.initShareDataImage();
}
})
},
// 纯图片分享，优惠券/码上有礼
initShareDataImage() {
this.share = {
WXSceneSession: {// 分享到微信聊天，小程序卡片类型
type: 2,
imageUrl: (this.imgSrc || this.posterImg)
},
WXSceneTimeline: {// 分享到微信朋友圈
type: 2,
imageUrl: (this.imgSrc || this.posterImg)
},
};
this.getLink();
},
// 一元拓客/视频引流/商品管理/服务项目
initShareData() {
const imageUrl = uni.getSystemInfoSync().platform === 'ios' ? this.setShareImg((this.shareData.data.thumb_url || this.shareData.data.image_url),100) : this.setShareImg((this.shareData.data.thumb_url || this.shareData.data.image_url)); // ios 朋友圈 图片 大小20KB
console.log("this.type", this.type)
console.log("imageUrl", imageUrl)
this.share = {
WXSceneSession: {// 分享到微信聊天，小程序卡片类型
type: 5,
title: this.shareData.data.title,
// imageUrl: this.shareData.data.thumb_url || this.shareData.data.image_url,
imageUrl: (this.type*1 == 8 ? (this.setShareImg((this.shareData.data.image_url), 500)) : (this.shareData.data.thumb_url || this.shareData.data.image_url)),
miniProgram: {
id: 'gh_7256f78589d4',
path: this.getPath(),
type: this.$developementMode !== 'pro' ? 2 : 0,// 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
webUrl: 'http://uniapp.dcloud.io'
},
},
WXSceneTimeline: {// 分享到微信朋友圈
type: 0,
href: this.getLink(),
title: this.shareData.data.title,
summary: this.shareData.data.describe || '',
imageUrl: imageUrl,
},
};
},
// 裂变红包
initRedPacketShareData() {
let that = this
let item = that.shareData.data;
const typeId = item.red_type;
// 红包类型
const type = {
2: { // 带文章
name: 'article',
url: `${that.$urlShare}/#/pages/index/article`,
mini_path: 'pages/index/article'
},
3: { // 带名片
name: 'member_card',
url: `${that.$urlShare}/#/pages/index/cards`,
mini_path: 'pages/index/cards'
},
};
const typeItem = type[typeId];
if (!typeItem) {
return that.$toast.msg('未获取到分享配置');
}
uni.showLoading({
mask: true,
title: '请稍后..'
})
// 类型名称
let params = {};
if (typeItem.name === 'member_card') {
params = {
ident: item.member_card_id,
red_order: item.order
};
that.$api.getRedCardInfo(params).then(res => {
const { code, data } = res.data;
if (code === 200) {
data.info.imageUrl = data.info.style_image || data.info.image;
setShareData(data.info);
} else {
that.$toast.msg(res.data.msg || 'error');
}
}).catch(err => {
console.log(err)
that.$toast.msg(err || 'error');
})
}
if (typeItem.name === 'article') {
params = {
order: item.article_order,
red_order: item.order
};
that.$api.getRedArticleInfo(params).then(res => {
const { code, data } = res.data;
if (code === 200) {
data.info.imageUrl = data.info.image;
setShareData(data.info);
} else {
that.$toast.msg(res.data.msg || 'error');
}
}).catch(err => {
console.log(err)
that.$toast.msg(err || 'error');
})
}
function setShareData(shareData) {
const query = formatGetUri({
ivtCode: that.userData.code,
order: item.order,
cardsId: shareData.ident,
aid: encodeURIComponent(shareData.share),
promoterCode: that.userData.promoter_code,
storeId: that.userData.employee_store_id,
});// url参数
const imageUrl = uni.getSystemInfoSync().platform === 'ios' ? that.setShareImg(shareData.imageUrl,100) : that.setShareImg(shareData.imageUrl); // ios 朋友圈 图片 大小20KB
that.share = {
WXSceneSession: {// 分享到微信聊天，小程序卡片类型
title: shareData.title,
imageUrl: shareData.imageUrl,
miniProgram: {
id: 'gh_7256f78589d4',
path: `${typeItem.mini_path}${query}`,
type: that.$developementMode !== 'pro' ? 2 : 0,// 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
webUrl: 'http://uniapp.dcloud.io'
},
},
WXSceneTimeline: {// 分享到微信朋友圈
href: `${typeItem.url}${query}`,
title: shareData.title,
summary: shareData.desc || shareData.title,
imageUrl: imageUrl,
},
};
that.shareLink = `${typeItem.url}${query}`;
}
},
// 复制链接
copyText() {
// 0一元拓客/1视频引流/2外链/5优惠券/6马上有礼
if ([0,1,2,5,6].includes(this.type*1)) {
uni.setClipboardData({
data: this.shareLink,
success: () => { //复制成功的回调函数
this.$toast.msg('复制成功', 'success')
}
})
} else {
uni.showLoading({
mask: true,
title: '链接生成中..'
})
let query = this.getPath(1);
query = query.substring(1);
let params = {
path: this.page.substring(1),
query: query,
env_version: this.$developementMode !== 'pro' ? 'trial' : 'release'
}
console.log("params", params);
this.$api.getWxMiniShortLink(params).then(res => {
console.log("getWxMiniShortLink", res);
if (res.data.code == 200) {
const link = res.data.data.link;
const txt = '【哈客】'+link+'\r\n「'+this.shareData.data.title+'」\r\n点击链接直接打开'
uni.setClipboardData({
data: txt,
success: () => { //复制成功的回调函数
this.$toast.msg('复制成功，快去粘贴吧！')
}
});
} else {
this.$toast.msg(res.data.msg)
}
})
}
},
// 生成海报
handlePoster() {
uni.showLoading({
mask: true,
title: '数据加载中..'
})
let query = this.getPath(1);
query = query.substring(1);
let params = {
path: this.page.substring(1),
query: query,
env_version: this.$developementMode !== 'pro' ? 'trial' : 'release'
}
console.log("params", params);
this.$api.getUnlimitedWxQRCode(params).then(res => {
console.log("getUnlimitedWxQRCode", res);
if (res.data.code == 200) {
uni.showLoading({
mask: true,
title: '海报生成中..'
})
let poster = {};
if (this.type*1 == 8) {// 店铺
console.log("this.shareData.data11", this.shareData.data);
poster = { ...posterConfig.store };
poster.views[1].views[1].text = '发现好店，分享好友共享快乐！';// 文案
poster.views[2].src = this.shareData.data.thumb_url;// 主图第一张
poster.views[3].text = this.shareData.data.title;// 标题
if (this.shareData.data.industry.length) {
poster.views[4].text = this.shareData.data.industry.join(' | ');
}
poster.views[6].src = res.data.data.qrcode;// 小程序码
console.log("poster=", poster);
} else {
poster = { ...posterConfig.item };
poster.views[1].views[1].text = '发现好物，分享好友，快乐加倍！';// 文案
poster.views[2].text = '邀请好友，领取更多福利！';// 文案
// 项目图片
let image_url = '';
if (this.shareData.data.thumb_url) {
image_url = this.shareData.data.thumb_url;
poster.views[3].views[0].src = image_url;// 主图第一张
} else {
image_url = this.shareData.data.image_url;
if (typeof image_url === "string") {
poster.views[3].views[0].src = image_url;// 主图第一张
} else if (typeof image_url === "object") {
if (Array.isArray(image_url)) {
poster.views[3].views[0].src = image_url[0];// 主图第一张
}
}
}
poster.views[4].views[0].text = this.shareData.data.title;// 标题
poster.views[5].views[1].text = this.shareData.data.price;// 价格
poster.views[7].src = res.data.data.qrcode;// 小程序码
}
poster.views[1].views[0].src = this.userData.avatar;// 用户头像
this.$refs.painter.render(poster);
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
pathType: 'url',
quality: 1,
success: (res) => {
console.log("canvasToTempFilePathSync res=", res);
uni.hideLoading();
this.posterImg = res.tempFilePath;
this.isImg = true;
this.imgType = 'poster';
},
fail: (err) => {
console.log("canvasToTempFilePathSync fail=", err);
uni.hideLoading();
this.isImg = false;
this.$toast.msg('海报生成失败，请重试！')
},
});
} else {
this.$toast.msg(res.data.msg)
this.isImg = false;
}
})
// console.log("handlePoster", this.isStoreGoods);
// if (this.isStoreGoods) {
// uni.navigateTo({
// url: `/pages/poster/poster?id=${this.shareData.data.id}&type=${this.type}`
// })
// } else {
// this.$emit('poster');
// }
},
// 分享到聊天
shareWXSceneSession() {
let _this = this;
// 修改分享配置
if (_this.isImg || _this.type*1 === 9) {
_this.initShareDataImage();
} else {
_this.initShareData();
}
console.log("_this.share.WXSceneSession:" + JSON.stringify(_this.share.WXSceneSession));
console.log("_this.share.WXSceneSession:", _this.share.WXSceneSession);
// #ifndef APP-PLUS
_this.$toast.msg('请下载APP操作');
// #endif
// #ifdef APP-PLUS
_this.modalType = 'WXSceneSession';
_this.showModal = true;
// #endif
},
shareWXSceneSessionFunc() {
let _this = this;
uni.showLoading({
mask: true,
title: '请稍后..'
})
// 由于特殊情况下，分享跳转后，返回app未触发success,fail,complete，故延时处理loading隐藏
setTimeout(() => {
_this.sharePosters();
uni.hideLoading();
// _this.show = false;
}, 2000)
// 分享到聊天
uni.share({
provider: "weixin",
scene: "WXSceneSession",
..._this.share.WXSceneSession,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
// 分享到朋友圈
shareWXSceneTimeline() {
let _this = this;
// 修改分享配置
if (_this.isImg || _this.type*1 === 9) {
_this.initShareDataImage();
} else {
_this.initShareData();
}
console.log("WXSceneTimeline:" + JSON.stringify(_this.share.WXSceneTimeline));
console.log("WXSceneTimeline:", _this.share.WXSceneTimeline);
// #ifndef APP-PLUS
_this.$toast.msg('请下载APP操作');
// #endif
// #ifdef APP-PLUS
_this.modalType = 'WXSceneSession';
_this.showModal = true;
// #endif
},
shareWXSceneTimelineFunc() {
let _this = this;
uni.showLoading({
mask: true,
title: '请稍后..'
})
// 由于特殊情况下，分享跳转后，返回app未触发success,fail,complete，故延时处理loading隐藏
setTimeout(() => {
_this.sharePosters();
uni.hideLoading();
// _this.show = false;
}, 2000)
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
..._this.share.WXSceneTimeline,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log('-----------朋友圈 err-----------------------')
console.log("fail:" + JSON.stringify(err));
console.log('----------------------------------')
}
});
},
// 分享到朋友圈图片处理
setShareImg(url,width = 300){
const _url = getImgViewUrl({ url, width });
console.log("setShareImg:" + _url);
return _url;
},
// 分享页面链接数据整合，一元拓客/视频引流
getPath(type = null) {// 分享到小程序，一元拓客/视频引流
const that = this;
const params = {
// id: that.shareData.data.id || '',
ivtCode: that.userData.code || '',
// type: that.shareData.type || '',
// identity: that.shareData.identity || '',
// source: that.shareData.source || ''
};
if (that.isStoreGoods) {
if ([2,3,4,7,8].includes(that.type*1)) {// 外链/实物商品/服务项目/精品课程/店铺
params.id = that.shareData.data.id;
} else {// 图文和视频
params.linkId = that.linkId || that.shareData.data.id;
}
} else {
params.id = that.shareData.data.id;
}
if ([5,6].includes(that.type*1)) {// 优惠券/码上有礼
params.code = that.shareData.data.code;
}
if (type) {// 分享到微信朋友圈/复制链接
return formatGetUri(params);
} else {
return that.page+formatGetUri(params);
}
},
// 分享到微信朋友圈/复制链接
getLink() {
let query = this.getPath(1);
query = query.substring(1);
query = encodeURIComponent(query);
let path = encodeURIComponent(this.page);
let env_version = developementMode == 'pro' ? 1 : 2;
let shareLink = url_config+'/index/index/jump2mini?path='+path+'&query='+query+'&env_version='+env_version
this.shareLink = shareLink;
return this.shareLink;
},
// 保存海报
handleSaveImg(type) {
let _this = this;
console.log("_this.imgSrc:" + _this.imgSrc);
console.log("_this.posterImg:" + _this.posterImg);
console.log("_this.wxCodeImg:" + _this.wxCodeImg);
console.log("_this.qrcodeImg:" + _this.qrcodeImg);
let filePath = '';
if (type == 'poster') {// 保存海报图片
filePath = (_this.imgSrc || _this.posterImg);
} else {
if (_this.imgType == 'wxCode') {
filePath = _this.wxCodeImg;
} else {
filePath = _this.qrcodeImg;
}
}
if (!filePath) {
return
}
// #ifndef APP-PLUS
_this.$toast.msg('请下载APP操作');
return
// #endif
// #ifdef APP-PLUS
permision.actionCheck({
ios:'album', // 获取 相册
android:'android.permission.WRITE_EXTERNAL_STORAGE', // 获取 相册
callback:()=>{
uni.saveImageToPhotosAlbum({
//保存图片到系统相册。
filePath: filePath, //图片文件路径
success: function(ret) {
if (type == 'poster') {
_this.$toast.msg("海报已保存到本地相册");
} else {
if (_this.imgType == 'wxCode') {
_this.$toast.msg("小程序码已保存到本地相册");
}
if (_this.imgType == 'qrcode') {
_this.$toast.msg("二维码已保存到本地相册");
}
}
},
fail: function(e) {
console.log(e);
_this.$toast.msg("图片保存失败");
},
});
}
});
// #endif
},
// 查看海报
previewImg() {
uni.previewImage({
urls: [(this.imgSrc || this.posterImg)]
})
},
// 取消
handleCancel() {
if (this.isImg) {
this.posterImg = '';
this.isImg = false;
} else {
this.handleClose();
}
},
// 生成微信小程序码
handleWXQrcode() {
uni.showLoading({
mask: true,
title: '数据加载中..'
})
let query = this.getPath(1);
query = query.substring(1);
let params = {
path: this.page.substring(1),
query: query,
env_version: this.$developementMode !== 'pro' ? 'trial' : 'release'
}
let apiUrl = 'getUnlimitedWxQRCode'
if ([9].includes(this.type*1)) {
// 推广商品页的分销分享
// params.query = formatGetUri(this.shareData.data);
params = this.shareData.data;
apiUrl = 'getOrdinaryWxQRCode';
}
console.log("params", params);
this.$api[apiUrl](params).then(res => {
console.log("getUnlimitedWxQRCode", res);
if (res.data.code == 200) {
uni.showLoading({
mask: true,
title: '海报生成中..'
})
let poster = { ...posterConfig.qrcode.wxCode };
poster.views[1].src = this.userData.avatar;// 用户头像
poster.views[2].src = res.data.data.qrcode;// 小程序码
this.$refs.painter.render(poster);
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
pathType: 'url',
quality: 1,
success: (ret) => {
console.log("canvasToTempFilePathSync ret=", ret);
uni.hideLoading();
this.posterImg = ret.tempFilePath;
this.isImg = true;
this.imgType = 'wxCode';
this.$nextTick(() => {
let codeUrl = res.data.data.qrcode;
if ([9].includes(this.type*1) ) {
codeUrl = res.data.data.data;
}
this.handleQrcodeImg(codeUrl, 'wxCodeImg');
})
},
fail: (err) => {
console.log("canvasToTempFilePathSync fail=", err);
uni.hideLoading();
this.isImg = false;
this.$toast.msg('海报生成失败，请重试！')
},
});
} else {
this.$toast.msg(res.data.msg)
this.isImg = false;
}
})
},
// 生成二维码
handleQrcode() {
uni.showLoading({
mask: true,
title: '数据加载中..'
})
let query = {
ivtCode: this.userData.code || '',
storeId: this.shareData.data.id || '',
}
let params = {
str: this.page+formatGetUri(query)
}
console.log("params", params);
this.$api.getMiniQrcodeV2(params).then(res => {
console.log("getMiniQrcodeV2", res);
if (res.data.code == 200) {
uni.showLoading({
mask: true,
title: '海报生成中..'
})
let poster = { ...posterConfig.qrcode.qrcode };
poster.views[1].src = this.userData.avatar;// 用户头像
poster.views[2].src = res.data.data.full_url;// 二维码
this.$refs.painter.render(poster);
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
pathType: 'url',
quality: 1,
success: (ret) => {
console.log("canvasToTempFilePathSync ret=", ret);
uni.hideLoading();
this.posterImg = ret.tempFilePath;
this.isImg = true;
this.imgType = 'qrcode';
this.$nextTick(() => {
this.handleQrcodeImg(res.data.data.full_url, 'qrcodeImg');
})
},
fail: (err) => {
console.log("canvasToTempFilePathSync fail=", err);
uni.hideLoading();
this.isImg = false;
this.$toast.msg('海报生成失败，请重试！')
},
});
} else {
this.$toast.msg(res.data.msg)
this.isImg = false;
}
})
},
handleQrcodeImg(qrcode, name) {
let codeImg = { ...posterConfig.qrcode[name] };
// if (name == 'wxCodeImg') {
// codeImg = { ...posterConfig.qrcode.wxCodeImg };
// } else {
// codeImg = { ...posterConfig.qrcode.qrcodeImg };
// }
if ([9].includes(this.type * 1)) {
codeImg = { ...posterConfig.qrcode.qrcodeType9 }
codeImg.views[1].text = this.shareData.data.storeName;// 商店名
if (this.shareData.data.storeName.length >= 10) {
codeImg.views[1].css.fontSize = '24rpx'
}
}
codeImg.views[0].src = qrcode;// 小程序码
this.$refs.painter.render(codeImg);
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
pathType: 'url',
quality: 1,
success: (res) => {
console.log("canvasToTempFilePathSync res=", res);
uni.hideLoading();
this[name] = res.tempFilePath;
},
fail: (err) => {
console.log("canvasToTempFilePathSync fail=", err);
uni.hideLoading();
},
});
},
// 记录分享海报次数
sharePosters() {
if (this.shareData.data && this.shareData.data.id) {
let params = {
id: this.shareData.data.id
};
this.$api.ShareMyPromotionGoodsPosters(params).then(res => {
console.log("ShareMyPromotionGoodsPosters res", res);
}).catch(err => {
console.log("ShareMyPromotionGoodsPosters err", err);
})
}
},
handleModalConfirm() {
if (this.modalType == 'WXSceneSession') {// 微信好友
this.shareWXSceneSessionFunc();
} else if (this.modalType == 'WXSceneTimeline') {// 微信朋友圈
this.shareWXSceneTimelineFunc();
}
},
}
}
</script> 把这段代码优化为 vue3 setup ts 的写法
最新发布
在尝试运行Vue项目到手机模拟器时，可能会遇到'pages/fenlei/home.vue?mpType=page'找不到的问题。这通常是因为误选了纯nvue项目选项。解决方案是检查项目配置，确保未勾选纯nvue选项，取消后重新运行项目，问题通常可以得到解决。
扫一扫
3102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
