海报:完善小程序码获取和海报生成

pull/53/head
puhui999 2024-05-13 16:22:55 +08:00
parent 8815972188
commit 004294ae7c
11 changed files with 78 additions and 42 deletions

4
.env
View File

@ -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

View File

@ -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>

View File

@ -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,
}), },
)}`, });
},
}, },
// 苹果相关 // 苹果相关

View File

@ -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]}&times=${params.times[1]}`; const queryString = `times=${params.times[0]}&times=${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',

View File

@ -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;
} }

View File

@ -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,

View File

@ -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;
}
}

View File

@ -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',

View File

@ -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';

View File

@ -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}`;
}; };
// 构造分享链接 // 构造分享链接

View File

@ -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",