515 lines
12 KiB
JavaScript
515 lines
12 KiB
JavaScript
/* eslint-disable */
|
||
// #ifdef APP-PLUS
|
||
let alphaBg, shareMenu;
|
||
// 关闭弹窗
|
||
export const closeShare = function () {
|
||
alphaBg && alphaBg.close();
|
||
alphaBg && shareMenu.close();
|
||
};
|
||
|
||
// 复制
|
||
function onCopy(item, shareInfo, callback) {
|
||
let copyInfo =
|
||
shareInfo.shareUrl || shareInfo.shareContent || shareInfo.shareImg;
|
||
if (copyInfo) {
|
||
uni.setClipboardData({
|
||
data: copyInfo,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '已复制到剪贴板',
|
||
icon: 'none'
|
||
});
|
||
callback && callback(item);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 更多
|
||
function onMore(item, shareInfo, callback) {
|
||
plus.share.sendWithSystem(
|
||
{
|
||
type: 'text',
|
||
title: shareInfo.shareTitle || '',
|
||
href: shareInfo.shareUrl || '',
|
||
content: shareInfo.shareContent || ''
|
||
},
|
||
function (res) {
|
||
callback && callback(item);
|
||
},
|
||
function (err) {
|
||
console.log(err);
|
||
}
|
||
);
|
||
}
|
||
|
||
// 分享
|
||
function onShare(item, shareInfo, callback) {
|
||
if (shareInfo.type == undefined) {
|
||
shareInfo.type = item.type;
|
||
}
|
||
let shareObj = {
|
||
provider: item.provider,
|
||
type: shareInfo.type,
|
||
success: res => {
|
||
callback && callback(item);
|
||
console.log('success:' + JSON.stringify(res));
|
||
},
|
||
fail: err => {
|
||
console.log('分享失败，参数缺失 fail:' + JSON.stringify(err));
|
||
}
|
||
};
|
||
if (shareInfo.shareTitle) {
|
||
shareObj.title = shareInfo.shareTitle;
|
||
} else if (item.provider == 'qq') {
|
||
uni.showToast({
|
||
title: '缺失分享的标题',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (shareInfo.type == 0 || item.provider == 'qq') {
|
||
if (shareInfo.shareUrl) {
|
||
shareObj.href = shareInfo.shareUrl;
|
||
} else {
|
||
uni.showToast({
|
||
title: '缺失分享的地址',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
if ([0, 1, 3, 4].includes(shareInfo.type)) {
|
||
if (shareInfo.shareContent) {
|
||
shareObj.summary = shareInfo.shareContent;
|
||
} else {
|
||
uni.showToast({
|
||
title: '缺失分享的描述',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
if ([0, 2, 5].includes(shareInfo.type)) {
|
||
if (shareInfo.shareImg) {
|
||
shareObj.imageUrl = shareInfo.shareImg;
|
||
} else {
|
||
uni.showToast({
|
||
title: '缺失分享的图片',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
if ([3, 4].includes(shareInfo.type)) {
|
||
if (shareInfo.mediaUrl) {
|
||
shareObj.mediaUrl = shareInfo.mediaUrl;
|
||
} else {
|
||
uni.showToast({
|
||
title: '缺失分享的音视频地址',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
if (shareInfo.type == 5) {
|
||
if (shareInfo.appId && shareInfo.appPath && shareInfo.appWebUrl) {
|
||
shareObj.miniProgram = {
|
||
id: shareInfo.appId,
|
||
path: shareInfo.appPath,
|
||
webUrl: shareInfo.appWebUrl
|
||
};
|
||
if (shareInfo.appType) {
|
||
shareObj.miniProgram.type = shareInfo.appType;
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '缺失分享小程序的参数',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (item.scene) {
|
||
shareObj.scene = item.scene;
|
||
}
|
||
uni.share(shareObj);
|
||
}
|
||
|
||
let otherShareList = [
|
||
{
|
||
icon: '/static/share/icon_copy.png',
|
||
text: '复制',
|
||
provider: 'copy',
|
||
onClick: onCopy
|
||
},
|
||
{
|
||
icon: '/static/share/icon_more.png',
|
||
text: '更多',
|
||
provider: 'more',
|
||
onClick: onMore
|
||
}
|
||
];
|
||
let platformShareList = [];
|
||
// 获取服务商支持的分享
|
||
uni.getProvider({
|
||
service: 'share',
|
||
success: function (res) {
|
||
if (res.provider.includes('sinaweibo')) {
|
||
platformShareList = [
|
||
{
|
||
icon: '/static/share/icon_weibo.png',
|
||
text: '新浪微博',
|
||
onClick: onShare,
|
||
provider: 'sinaweibo',
|
||
type: 0
|
||
}
|
||
].concat(platformShareList);
|
||
}
|
||
if (res.provider.includes('qq')) {
|
||
platformShareList = [
|
||
{
|
||
icon: '/static/share/icon_qq.png',
|
||
text: 'QQ',
|
||
onClick: onShare,
|
||
provider: 'qq',
|
||
type: 1
|
||
}
|
||
].concat(platformShareList);
|
||
}
|
||
if (res.provider.includes('weixin')) {
|
||
platformShareList = [
|
||
{
|
||
icon: '/static/share/icon_weixin.png',
|
||
text: '微信好友',
|
||
onClick: onShare,
|
||
provider: 'weixin',
|
||
scene: 'WXSceneSession',
|
||
type: 0
|
||
},
|
||
{
|
||
icon: '/static/share/icon_pengyouquan.png',
|
||
text: '朋友圈',
|
||
onClick: onShare,
|
||
provider: 'weixin',
|
||
scene: 'WXSenceTimeline',
|
||
type: 0
|
||
},
|
||
{
|
||
icon: '/static/share/ic_xiaochengxu.png',
|
||
text: '小程序',
|
||
onClick: onShare,
|
||
provider: 'weixin',
|
||
scene: 'WXSceneSession',
|
||
type: 5
|
||
}
|
||
].concat(platformShareList);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 根据type类型过滤掉不支持的平台
|
||
function platformFilter(data) {
|
||
console.log(data);
|
||
let platformList = [];
|
||
let supportList = [
|
||
['weixin', 'sinaweibo'],
|
||
['weixin', 'sinaweibo', 'qq'],
|
||
['weixin', 'sinaweibo', 'qq'],
|
||
['weixin', 'qq'],
|
||
['weixin', 'sinaweibo'],
|
||
['weixin']
|
||
];
|
||
let currentSupport = [];
|
||
if (data.type >= 0 && data.type <= 5) {
|
||
currentSupport = supportList[data.type];
|
||
}
|
||
console.log('platformShareList', platformShareList);
|
||
platformShareList.forEach(item => {
|
||
if (data.type >= 0 && data.type <= 5) {
|
||
if (currentSupport.includes(item.provider)) {
|
||
if (item.provider == 'weixin') {
|
||
if (item.text == '小程序') {
|
||
if (data.type == 5) {
|
||
platformList.push(item);
|
||
}
|
||
} else if (data.type !== 5) {
|
||
platformList.push(item);
|
||
}
|
||
} else {
|
||
platformList.push(item);
|
||
}
|
||
}
|
||
} else {
|
||
if (item.provider == 'weixin') {
|
||
if (item.text == '小程序') {
|
||
if (data.appId && data.appPath) {
|
||
platformList.push(item);
|
||
}
|
||
} else {
|
||
platformList.push(item);
|
||
}
|
||
} else {
|
||
platformList.push(item);
|
||
}
|
||
}
|
||
});
|
||
return platformList.concat(otherShareList);
|
||
}
|
||
|
||
// 数据处理
|
||
function dataFactory(shareInfo = {}) {
|
||
let config = {
|
||
...shareInfo
|
||
};
|
||
config.shareUrl = shareInfo.shareUrl || '';
|
||
config.shareContent = shareInfo.shareContent || '分享的描述';
|
||
config.shareImg = shareInfo.shareImg || '分享的图片';
|
||
return config;
|
||
}
|
||
|
||
export default function (shareInfo, callback) {
|
||
shareInfo = dataFactory(shareInfo);
|
||
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
|
||
let screenWidth = plus.screen.resolutionWidth;
|
||
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
|
||
//图标下的按钮文字距离图标5像素，文字大小12像素
|
||
//底部取消按钮高度固定为44px
|
||
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
|
||
let marginTop = 25, //上间距
|
||
marginLeft = 25, //左间距
|
||
iconWidth = 55, //图标宽宽
|
||
iconHeight = 55, //图标高度
|
||
icontextSpace = 10, //图标与文字间距
|
||
textHeight = 12; //文字大小
|
||
let left1 = (marginLeft / 360) * screenWidth;
|
||
let colNumber = Math.floor(screenWidth / (iconWidth + marginLeft));
|
||
let i =
|
||
(screenWidth - (iconWidth + marginLeft) * colNumber - marginLeft) /
|
||
(colNumber + 1);
|
||
let initMargin = marginLeft + i;
|
||
let itemWidth = iconWidth + initMargin;
|
||
let itemHeight = iconHeight + icontextSpace + textHeight + marginTop;
|
||
let textTop = iconHeight + icontextSpace;
|
||
alphaBg = new plus.nativeObj.View('alphaBg', {
|
||
//先创建遮罩层
|
||
top: '0px',
|
||
left: '0px',
|
||
height: '100%',
|
||
width: '100%',
|
||
backgroundColor: 'rgba(0,0,0,0.5)'
|
||
});
|
||
alphaBg.addEventListener('click', function () {
|
||
//处理遮罩层点击
|
||
alphaBg.close();
|
||
shareMenu.close();
|
||
});
|
||
let shareList = platformFilter(shareInfo);
|
||
shareMenu = new plus.nativeObj.View('shareMenu', {
|
||
//创建底部图标菜单
|
||
bottom: '0px',
|
||
left: '0px',
|
||
height:
|
||
Math.ceil(shareList.length / colNumber) * itemHeight +
|
||
marginTop +
|
||
44 +
|
||
1 +
|
||
'px',
|
||
width: '100%',
|
||
backgroundColor: 'rgb(255,255,255)'
|
||
});
|
||
//绘制底部图标菜单的内容
|
||
shareMenu.draw([
|
||
{
|
||
tag: 'rect', //菜单顶部的分割灰线
|
||
color: '#e7e7e7',
|
||
position: {
|
||
top: '0px',
|
||
height: '1px'
|
||
}
|
||
},
|
||
{
|
||
tag: 'font',
|
||
id: 'sharecancel', //底部取消按钮的文字
|
||
text: '取消分享',
|
||
textStyles: {
|
||
size: '14px'
|
||
},
|
||
position: {
|
||
bottom: '0px',
|
||
height: '44px'
|
||
}
|
||
},
|
||
{
|
||
tag: 'rect', //底部取消按钮的顶部边线
|
||
color: '#e7e7e7',
|
||
position: {
|
||
bottom: '45px',
|
||
height: '1px'
|
||
}
|
||
}
|
||
]);
|
||
shareList.map((v, k) => {
|
||
let time = new Date().getTime();
|
||
let row = Math.floor(k / colNumber);
|
||
let col = k % colNumber;
|
||
let item = [
|
||
{
|
||
src: v.icon,
|
||
id: Math.random() * 1000 + time,
|
||
tag: 'img',
|
||
position: {
|
||
top: row * itemHeight + marginTop,
|
||
left: col * itemWidth + initMargin,
|
||
width: iconWidth,
|
||
height: iconWidth
|
||
}
|
||
},
|
||
{
|
||
text: v.text,
|
||
id: Math.random() * 1000 + time,
|
||
tag: 'font',
|
||
textStyles: {
|
||
size: textHeight
|
||
},
|
||
position: {
|
||
top: row * itemHeight + textTop,
|
||
left: col * itemWidth + initMargin,
|
||
width: iconWidth,
|
||
height: iconWidth
|
||
}
|
||
}
|
||
];
|
||
shareMenu.draw(item);
|
||
});
|
||
shareMenu.addEventListener('click', function (e) {
|
||
//处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
|
||
if (e.screenY > plus.screen.resolutionHeight - 44) {
|
||
//点击了底部取消按钮
|
||
alphaBg.close();
|
||
shareMenu.close();
|
||
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
|
||
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
|
||
} else {
|
||
//点击了图标按钮
|
||
let x = e.clientX;
|
||
let y = e.clientY;
|
||
let colIdx = Math.floor(x / itemWidth);
|
||
let rowIdx = Math.floor(y / itemHeight);
|
||
let tapIndex = colIdx + rowIdx * colNumber;
|
||
shareList[tapIndex].onClick(shareList[tapIndex], shareInfo, callback);
|
||
}
|
||
});
|
||
alphaBg.show();
|
||
shareMenu.show();
|
||
return {
|
||
close: function () {
|
||
alphaBg && alphaBg.close();
|
||
alphaBg && shareMenu.close();
|
||
}
|
||
};
|
||
}
|
||
// #endif
|
||
|
||
/**
|
||
* 获取分享海报
|
||
* @param array store 海报素材
|
||
* @param string store_name 素材文字
|
||
* @param string price 价格
|
||
* @param function successFn 回调函数
|
||
*
|
||
*
|
||
*/
|
||
export const PosterCanvas = (store, successCallBack) => {
|
||
uni.showLoading({
|
||
title: '海报生成中',
|
||
mask: true
|
||
});
|
||
getImageInfo([store.image, store.code]).then(res => {
|
||
let contentHh = 48 * 1.3
|
||
const ctx = uni.createCanvasContext('myCanvas')
|
||
ctx.clearRect(0, 0, 0, 0);
|
||
const WIDTH = 747
|
||
const HEIGHT = 1326;
|
||
ctx.fillStyle = "#FFFFFF";
|
||
ctx.fillRect(0, 0, WIDTH, HEIGHT);
|
||
ctx.drawImage(res[0].path, 0, 0, WIDTH, WIDTH);
|
||
ctx.drawImage(res[1].path, 40, 1064, 200, 200);
|
||
ctx.save();
|
||
let r = 90;
|
||
let d = r * 2;
|
||
let cx = 40;
|
||
let cy = 990;
|
||
ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);
|
||
ctx.clip();
|
||
ctx.restore();
|
||
ctx.setTextAlign('center');
|
||
ctx.setFontSize(48);
|
||
ctx.setFillStyle('#000');
|
||
ctx.fillText(store.title, WIDTH / 2, 810 + contentHh);
|
||
ctx.setTextAlign('center')
|
||
ctx.setFontSize(32);
|
||
ctx.setFillStyle('red');
|
||
ctx.fillText('￥' + store.price, WIDTH / 2, 985);
|
||
ctx.setTextAlign('center')
|
||
ctx.setFontSize(22);
|
||
ctx.setFillStyle('#333333');
|
||
ctx.fillText('长按识别二维码立即购买', WIDTH / 2, 1167);
|
||
ctx.save();
|
||
ctx.draw(true, () => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'myCanvas',
|
||
fileType: 'png',
|
||
destWidth: WIDTH,
|
||
destHeight: HEIGHT,
|
||
success: function (res) {
|
||
uni.hideLoading();
|
||
successCallBack && successCallBack(res.tempFilePath);
|
||
},
|
||
fail: function (error) {
|
||
console.log(error)
|
||
},
|
||
|
||
})
|
||
});
|
||
|
||
})
|
||
|
||
// uni.getImageInfo({
|
||
// src: store.image,
|
||
// fail: function (res) {
|
||
// uni.showToast({
|
||
// title: '海报生成失败',
|
||
// icon: "none",
|
||
// duration: 2000
|
||
// });
|
||
// },
|
||
// success: function (res) {
|
||
|
||
// }
|
||
// })
|
||
}
|
||
const getImageInfo = (images) => {
|
||
return new Promise((resolve, reject) => {
|
||
let imageAry = {}
|
||
images.map((item, index) => {
|
||
uni.getImageInfo({
|
||
src: item,
|
||
fail: function (res) {
|
||
imageAry[index] = null
|
||
if (imageAry.length == images.length) {
|
||
resolve(imageAry)
|
||
}
|
||
},
|
||
success: function (res) {
|
||
imageAry[index] = res
|
||
if (Object.keys(imageAry).length == images.length) {
|
||
resolve(imageAry)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|