海报:完善小程序码获取和海报生成
parent
8815972188
commit
004294ae7c
4
.env
4
.env
|
@ -5,7 +5,7 @@ SHOPRO_VERSION = v1.8.3
|
||||||
SHOPRO_BASE_URL = http://api-dashboard.yudao.iocoder.cn
|
SHOPRO_BASE_URL = http://api-dashboard.yudao.iocoder.cn
|
||||||
|
|
||||||
# 后端接口 - 测试环境(通过 process.env.NODE_ENV = development)
|
# 后端接口 - 测试环境(通过 process.env.NODE_ENV = development)
|
||||||
SHOPRO_DEV_BASE_URL = http://127.0.0.1:48080
|
SHOPRO_DEV_BASE_URL = https://192.168.2.21:48080
|
||||||
### SHOPRO_DEV_BASE_URL = http://yunai.natapp1.cc
|
### SHOPRO_DEV_BASE_URL = http://yunai.natapp1.cc
|
||||||
|
|
||||||
# 后端接口前缀(一般不建议调整)
|
# 后端接口前缀(一般不建议调整)
|
||||||
|
@ -18,4 +18,4 @@ SHOPRO_DEV_PORT = 3000
|
||||||
SHOPRO_STATIC_URL = https://file.sheepjs.com
|
SHOPRO_STATIC_URL = https://file.sheepjs.com
|
||||||
|
|
||||||
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
|
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
|
||||||
SHOPRO_MPLIVE_ON = 0
|
SHOPRO_MPLIVE_ON = 0
|
||||||
|
|
|
@ -194,20 +194,20 @@
|
||||||
if (isEmpty(state.goodsInfo)) return {};
|
if (isEmpty(state.goodsInfo)) return {};
|
||||||
return sheep.$platform.share.getShareInfo({
|
return sheep.$platform.share.getShareInfo({
|
||||||
title: state.goodsInfo.name,
|
title: state.goodsInfo.name,
|
||||||
image: sheep.$url.cdn(state.goodsInfo.image),
|
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||||
desc: state.goodsInfo.subtitle,
|
desc: state.goodsInfo.introduction,
|
||||||
|
path: 'pages/goods/index',
|
||||||
params: {
|
params: {
|
||||||
page: '2',
|
page: '2',
|
||||||
query: state.goodsInfo.id,
|
query: state.goodsInfo.id,
|
||||||
},
|
},
|
||||||
}, {
|
}, {
|
||||||
type: 'goods', // 商品海报
|
type: 'goods', // 商品海报
|
||||||
title: state.goodsInfo.name, // 商品标题
|
title: state.goodsInfo.name, // 商品名称
|
||||||
// image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
|
||||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||||
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
||||||
original_price: fen2yuan(state.goodsInfo.maretPrice), // 商品原价
|
original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||||
}, );
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
async function getCoupon() {
|
async function getCoupon() {
|
||||||
|
@ -410,4 +410,4 @@
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import request from '@/sheep/request';
|
import request from '@/sheep/request';
|
||||||
import { baseUrl, apiPath } from '@/sheep/config';
|
|
||||||
|
const socialType = 34; // 社交类型 - 微信小程序
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 微信相关
|
// 微信相关
|
||||||
|
@ -19,12 +20,18 @@ export default {
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// 获取微信小程序码
|
// 获取微信小程序码
|
||||||
getWxacode: (path) =>
|
getWxacode: async (path, query) => {
|
||||||
`${baseUrl}${apiPath}third/wechat/wxacode?platform=miniProgram&payload=${encodeURIComponent(
|
return await request({
|
||||||
JSON.stringify({
|
url: '/member/social-user/wxa-qrcode',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
type: socialType,
|
||||||
|
scene: query,
|
||||||
|
isCheckPath: false, // TODO 开发环境暂不检查 path 是否存在
|
||||||
path,
|
path,
|
||||||
}),
|
},
|
||||||
)}`,
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// 苹果相关
|
// 苹果相关
|
||||||
|
|
|
@ -16,12 +16,12 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得分销记录分页
|
// 获得分销记录分页
|
||||||
getBrokerageRecordPage: (params) => {
|
getBrokerageRecordPage: params => {
|
||||||
if (params.status === undefined) {
|
if (params.status === undefined) {
|
||||||
delete params.status
|
delete params.status
|
||||||
}
|
}
|
||||||
const queryString = Object.keys(params)
|
const queryString = Object.keys(params)
|
||||||
.map((key) => encodeURIComponent(key) + '=' + params[key])
|
.map(key => encodeURIComponent(key) + '=' + params[key])
|
||||||
.join('&');
|
.join('&');
|
||||||
return request({
|
return request({
|
||||||
url: `/trade/brokerage-record/page?${queryString}`,
|
url: `/trade/brokerage-record/page?${queryString}`,
|
||||||
|
@ -29,7 +29,7 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 创建分销提现
|
// 创建分销提现
|
||||||
createBrokerageWithdraw: (data) => {
|
createBrokerageWithdraw: data => {
|
||||||
return request({
|
return request({
|
||||||
url: '/trade/brokerage-withdraw/create',
|
url: '/trade/brokerage-withdraw/create',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
@ -37,17 +37,15 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得商品的分销金额
|
// 获得商品的分销金额
|
||||||
getProductBrokeragePrice: (spuId) => {
|
getProductBrokeragePrice: spuId => {
|
||||||
return request({
|
return request({
|
||||||
url: '/trade/brokerage-record/get-product-brokerage-price',
|
url: '/trade/brokerage-record/get-product-brokerage-price',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: {
|
params: { spuId }
|
||||||
spuId
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得分销用户排行(基于佣金)
|
// 获得分销用户排行(基于佣金)
|
||||||
getRankByPrice: (params) => {
|
getRankByPrice: params => {
|
||||||
const queryString = `times=${params.times[0]}×=${params.times[1]}`;
|
const queryString = `times=${params.times[0]}×=${params.times[1]}`;
|
||||||
return request({
|
return request({
|
||||||
url: `/trade/brokerage-user/get-rank-by-price?${queryString}`,
|
url: `/trade/brokerage-user/get-rank-by-price?${queryString}`,
|
||||||
|
@ -55,9 +53,9 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得分销用户排行分页(基于佣金)
|
// 获得分销用户排行分页(基于佣金)
|
||||||
getBrokerageUserChildSummaryPageByPrice: (params) => {
|
getBrokerageUserChildSummaryPageByPrice: params => {
|
||||||
const queryString = Object.keys(params)
|
const queryString = Object.keys(params)
|
||||||
.map((key) => encodeURIComponent(key) + '=' + params[key])
|
.map(key => encodeURIComponent(key) + '=' + params[key])
|
||||||
.join('&');
|
.join('&');
|
||||||
return request({
|
return request({
|
||||||
url: `/trade/brokerage-user/rank-page-by-price?${queryString}`,
|
url: `/trade/brokerage-user/rank-page-by-price?${queryString}`,
|
||||||
|
@ -65,9 +63,9 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得分销用户排行分页(基于用户量)
|
// 获得分销用户排行分页(基于用户量)
|
||||||
getBrokerageUserRankPageByUserCount: (params) => {
|
getBrokerageUserRankPageByUserCount: params => {
|
||||||
const queryString = Object.keys(params)
|
const queryString = Object.keys(params)
|
||||||
.map((key) => encodeURIComponent(key) + '=' + params[key])
|
.map(key => encodeURIComponent(key) + '=' + params[key])
|
||||||
.join('&');
|
.join('&');
|
||||||
return request({
|
return request({
|
||||||
url: `/trade/brokerage-user/rank-page-by-user-count?${queryString}`,
|
url: `/trade/brokerage-user/rank-page-by-user-count?${queryString}`,
|
||||||
|
@ -75,7 +73,7 @@ const BrokerageApi = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得下级分销统计分页
|
// 获得下级分销统计分页
|
||||||
getBrokerageUserChildSummaryPage: (params) => {
|
getBrokerageUserChildSummaryPage: params => {
|
||||||
return request({
|
return request({
|
||||||
url: '/trade/brokerage-user/child-summary-page',
|
url: '/trade/brokerage-user/child-summary-page',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
|
|
|
@ -101,12 +101,12 @@
|
||||||
// 使用 canvas 生成海报
|
// 使用 canvas 生成海报
|
||||||
async function getPoster(params) {
|
async function getPoster(params) {
|
||||||
poster.src = '';
|
poster.src = '';
|
||||||
|
|
||||||
poster.shareInfo = props.shareInfo;
|
poster.shareInfo = props.shareInfo;
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
poster.canvasId = 'canvasId-' + new Date().getTime();
|
poster.canvasId = 'canvasId-' + new Date().getTime();
|
||||||
// #endif
|
// #endif
|
||||||
const canvas = await useCanvas(poster, vm);
|
const canvas = await useCanvas(poster, vm);
|
||||||
|
console.log('canvas',canvas);
|
||||||
return canvas;
|
return canvas;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import { formatImageUrlProtocol } from './index';
|
import third from '@/sheep/api/migration/third';
|
||||||
|
import { formatImageUrlProtocol, getBase64Src } from './index';
|
||||||
|
|
||||||
const goods = (poster) => {
|
const goods = async (poster) => {
|
||||||
const width = poster.width;
|
const width = poster.width;
|
||||||
const userInfo = sheep.$store('user').userInfo;
|
const userInfo = sheep.$store('user').userInfo;
|
||||||
|
const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
|
||||||
return {
|
return {
|
||||||
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
||||||
list: [
|
list: [
|
||||||
|
@ -107,7 +108,7 @@ const goods = (poster) => {
|
||||||
{
|
{
|
||||||
name: 'wxacode',
|
name: 'wxacode',
|
||||||
type: 'image',
|
type: 'image',
|
||||||
val: sheep.$api.third.wechat.getWxacode(poster.shareInfo.path),
|
val: wxa_qrcode,
|
||||||
x: width * 0.75,
|
x: width * 0.75,
|
||||||
y: width * 1.3,
|
y: width * 1.3,
|
||||||
width: width * 0.2,
|
width: width * 0.2,
|
||||||
|
|
|
@ -30,3 +30,30 @@ export function formatImageUrlProtocol(url) {
|
||||||
|
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function getBase64Src(base64data, appType) {
|
||||||
|
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
|
||||||
|
switch (appType) {
|
||||||
|
case 'wechat':
|
||||||
|
const filePath = `${wx.env.USER_DATA_PATH}/tmp_base64src.${format}`;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const fileManager = uni.getFileSystemManager();
|
||||||
|
fileManager.writeFile({
|
||||||
|
filePath: filePath,
|
||||||
|
data: bodyData, // base64 数据
|
||||||
|
encoding: 'base64', // 字符编码
|
||||||
|
success: () => {
|
||||||
|
resolve(filePath);
|
||||||
|
},
|
||||||
|
file: (err) => {
|
||||||
|
console.log('base64 保存失败', err);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
default:
|
||||||
|
console.warn('获得 base64 图片地址只做了微信小程序端的转换,其它端请自行实现!!!');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,8 +22,8 @@ export default async function useCanvas(options, vm) {
|
||||||
vm,
|
vm,
|
||||||
);
|
);
|
||||||
|
|
||||||
let drawer = getPosterData(options);
|
let drawer = await getPosterData(options);
|
||||||
|
console.log(drawer);
|
||||||
// 绘制背景图
|
// 绘制背景图
|
||||||
const background = await qsc.drawImg({
|
const background = await qsc.drawImg({
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// import third from '@/sheep/api/third';
|
import third from '@/sheep/api/migration/third'
|
||||||
import AuthUtil from '@/sheep/api/member/auth';
|
import AuthUtil from '@/sheep/api/member/auth';
|
||||||
import SocialApi from '@/sheep/api/member/social';
|
import SocialApi from '@/sheep/api/member/social';
|
||||||
import UserApi from '@/sheep/api/member/user';
|
import UserApi from '@/sheep/api/member/user';
|
||||||
|
|
|
@ -19,6 +19,7 @@ const getShareInfo = (
|
||||||
title: '', // 自定义分享标题
|
title: '', // 自定义分享标题
|
||||||
desc: '', // 自定义描述
|
desc: '', // 自定义描述
|
||||||
image: '', // 自定义分享图片
|
image: '', // 自定义分享图片
|
||||||
|
path: '', // 页面基础路径,不要以 / 开头
|
||||||
params: {}, // 自定义分享参数
|
params: {}, // 自定义分享参数
|
||||||
},
|
},
|
||||||
poster = {
|
poster = {
|
||||||
|
@ -26,7 +27,7 @@ const getShareInfo = (
|
||||||
type: 'user',
|
type: 'user',
|
||||||
},
|
},
|
||||||
) => {
|
) => {
|
||||||
let shareInfo = {
|
const shareInfo = {
|
||||||
title: '', // 分享标题
|
title: '', // 分享标题
|
||||||
desc: '', // 描述
|
desc: '', // 描述
|
||||||
image: '', // 分享图片
|
image: '', // 分享图片
|
||||||
|
@ -48,6 +49,7 @@ const getShareInfo = (
|
||||||
|
|
||||||
// 配置转发参数
|
// 配置转发参数
|
||||||
if (shareConfig.methods.includes('forward')) {
|
if (shareConfig.methods.includes('forward')) {
|
||||||
|
// TODO puhui999: forward 这块有点问题
|
||||||
if (shareConfig.forwardInfo.title === '' || shareConfig.forwardInfo.image === '') {
|
if (shareConfig.forwardInfo.title === '' || shareConfig.forwardInfo.image === '') {
|
||||||
console.log('请在平台设置中配置转发信息');
|
console.log('请在平台设置中配置转发信息');
|
||||||
}
|
}
|
||||||
|
@ -55,9 +57,10 @@ const getShareInfo = (
|
||||||
shareInfo.title = scene.title || shareConfig.forwardInfo.title;
|
shareInfo.title = scene.title || shareConfig.forwardInfo.title;
|
||||||
shareInfo.image = $url.cdn(scene.image || shareConfig.forwardInfo.image);
|
shareInfo.image = $url.cdn(scene.image || shareConfig.forwardInfo.image);
|
||||||
shareInfo.desc = scene.desc || shareConfig.forwardInfo.subtitle;
|
shareInfo.desc = scene.desc || shareConfig.forwardInfo.subtitle;
|
||||||
shareInfo.path = buildSpmPath(query);
|
shareInfo.path = buildSpmPath(scene.path, query);
|
||||||
}
|
}
|
||||||
|
shareInfo.path = scene.path;
|
||||||
|
console.log('shareInfo', shareInfo);
|
||||||
return shareInfo;
|
return shareInfo;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -89,8 +92,8 @@ const buildSpmQuery = (params) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// 构造页面分享参数
|
// 构造页面分享参数
|
||||||
const buildSpmPath = (query) => {
|
const buildSpmPath = (path, query) => {
|
||||||
return `/pages/index/index?${query}`;
|
return `/${path}?${query}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 构造分享链接
|
// 构造分享链接
|
||||||
|
|
|
@ -72,7 +72,7 @@ const app = defineStore({
|
||||||
};
|
};
|
||||||
this.platform = {
|
this.platform = {
|
||||||
share: {
|
share: {
|
||||||
methods: [ "poster", "link" ],
|
methods: ["poster", "link"],
|
||||||
linkAddress: "https://shopro.sheepjs.com/#/",
|
linkAddress: "https://shopro.sheepjs.com/#/",
|
||||||
posterInfo: {
|
posterInfo: {
|
||||||
"user_bg": "/static/img/shop/config/user-poster-bg.png",
|
"user_bg": "/static/img/shop/config/user-poster-bg.png",
|
||||||
|
|
Loading…
Reference in New Issue