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)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|