项目初始化
This commit is contained in:
jerry
168
sheep/components/s-share-modal/canvas-poster/index.vue
Normal file
168
sheep/components/s-share-modal/canvas-poster/index.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<!-- 海报弹窗 -->
|
||||
<template>
|
||||
<su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
|
||||
<view class="ss-flex-col ss-col-center ss-row-center">
|
||||
<image
|
||||
v-if="!!painterImageUrl"
|
||||
class="poster-img"
|
||||
:src="painterImageUrl"
|
||||
:style="{
|
||||
height: poster.css.height+ 'px',
|
||||
width: poster.css.width + 'px',
|
||||
}"
|
||||
:show-menu-by-longpress="true"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
|
||||
v-if="!!painterImageUrl"
|
||||
>
|
||||
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
|
||||
<button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
|
||||
{{
|
||||
['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
|
||||
? '长按图片保存'
|
||||
: '保存图片'
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
<!-- 海报画板：默认隐藏只用来生成海报。生成方式为主动调用 -->
|
||||
<l-painter
|
||||
isCanvasToTempFilePath
|
||||
pathType="url"
|
||||
@success="setPainterImageUrl"
|
||||
hidden
|
||||
ref="painterRef"
|
||||
/>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 海报生成和展示
|
||||
* 提示：小程序码默认跳转首页，由首页进行 spm 参数解析后跳转到对应的分享页面
|
||||
* @description 用于生成分享海报，如：分享商品海报。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=2389
|
||||
* @property {Boolean} show 弹出层控制
|
||||
* @property {Object} shareInfo 分享信息
|
||||
*/
|
||||
import { reactive, ref, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const poster = reactive({
|
||||
css: {
|
||||
// 根节点若无尺寸，自动获取父级节点
|
||||
width: sheep.$platform.device.windowWidth * 0.9,
|
||||
height: 600,
|
||||
},
|
||||
views: [],
|
||||
});
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
|
||||
const onClosePoster = () => {
|
||||
emits('close');
|
||||
};
|
||||
|
||||
const painterRef = ref(); // 海报画板
|
||||
const painterImageUrl = ref(); // 海报 url
|
||||
// 渲染海报
|
||||
const renderPoster = async () => {
|
||||
await painterRef.value.render(unref(poster));
|
||||
};
|
||||
// 获得生成的图片
|
||||
const setPainterImageUrl = (path) => {
|
||||
painterImageUrl.value = path;
|
||||
};
|
||||
// 保存海报图片
|
||||
const onSavePoster = () => {
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
sheep.$helper.toast('请长按图片保存');
|
||||
return;
|
||||
}
|
||||
|
||||
// 非H5 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: painterImageUrl.value,
|
||||
success: (res) => {
|
||||
onClosePoster();
|
||||
sheep.$helper.toast('保存成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
sheep.$helper.toast('保存失败');
|
||||
console.log('图片保存失败:', err);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 获得海报数据
|
||||
async function getPoster() {
|
||||
painterImageUrl.value = undefined
|
||||
poster.views = await getPosterData({
|
||||
width: poster.css.width,
|
||||
shareInfo: props.shareInfo,
|
||||
});
|
||||
await renderPoster();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getPoster,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poster-title {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 分享海报
|
||||
.poster-btn-box {
|
||||
width: 600rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -80rpx;
|
||||
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: $white;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-img {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
125
sheep/components/s-share-modal/canvas-poster/poster/goods.js
Normal file
125
sheep/components/s-share-modal/canvas-poster/poster/goods.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol, getWxaQrcode } from './index';
|
||||
|
||||
const goods = async (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
const wxa_qrcode = await getWxaQrcode(poster.shareInfo.path, poster.shareInfo.query);
|
||||
return [
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
||||
css: {
|
||||
width,
|
||||
position: 'fixed',
|
||||
'object-fit': 'contain',
|
||||
top: '0',
|
||||
left: '0',
|
||||
zIndex: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: userInfo.nickname,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 0.06,
|
||||
left: width * 0.22,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 0.04,
|
||||
width: width * 0.14,
|
||||
height: width * 0.14,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.03,
|
||||
top: width * 0.21,
|
||||
width: width * 0.94,
|
||||
height: width * 0.94,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: poster.shareInfo.poster.title,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 1.18,
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
lineHeight: 15,
|
||||
maxWidth: width * 0.91,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '￥' + poster.shareInfo.poster.price,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 1.31,
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text:
|
||||
poster.shareInfo.poster.original_price > 0
|
||||
? '￥' + poster.shareInfo.poster.original_price
|
||||
: '',
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.3,
|
||||
top: width * 1.33,
|
||||
color: '#999',
|
||||
fontSize: 10,
|
||||
fontFamily: 'OPPOSANS',
|
||||
textDecoration: 'line-through',
|
||||
},
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: poster.shareInfo.link,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.75,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
type: 'image',
|
||||
src: wxa_qrcode,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.75,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
];
|
||||
};
|
||||
|
||||
export default goods;
|
||||
122
sheep/components/s-share-modal/canvas-poster/poster/groupon.js
Normal file
122
sheep/components/s-share-modal/canvas-poster/poster/groupon.js
Normal file
@@ -0,0 +1,122 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol, getWxaQrcode } from './index';
|
||||
|
||||
const groupon = async (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
const wxa_qrcode = await getWxaQrcode(poster.shareInfo.path, poster.shareInfo.query);
|
||||
return [
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
|
||||
css: {
|
||||
width,
|
||||
position: 'fixed',
|
||||
'object-fit': 'contain',
|
||||
top: '0',
|
||||
left: '0',
|
||||
zIndex: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: userInfo.nickname,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 0.06,
|
||||
left: width * 0.22,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 0.04,
|
||||
width: width * 0.14,
|
||||
height: width * 0.14,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.03,
|
||||
top: width * 0.21,
|
||||
width: width * 0.94,
|
||||
height: width * 0.94,
|
||||
borderRadius: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: poster.shareInfo.poster.title,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
position: 'fixed',
|
||||
top: width * 1.18,
|
||||
left: width * 0.04,
|
||||
maxWidth: width * 0.91,
|
||||
lineHeight: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '￥' + poster.shareInfo.poster.price,
|
||||
css: {
|
||||
color: '#ff0000',
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
position: 'fixed',
|
||||
top: width * 1.3,
|
||||
left: width * 0.04,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '2人团',
|
||||
css: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: 'OPPOSANS',
|
||||
position: 'fixed',
|
||||
left: width * 0.84,
|
||||
top: width * 1.3,
|
||||
},
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: poster.shareInfo.link,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.5,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
type: 'image',
|
||||
src: wxa_qrcode,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.75,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
];
|
||||
};
|
||||
|
||||
export default groupon;
|
||||
39
sheep/components/s-share-modal/canvas-poster/poster/index.js
Normal file
39
sheep/components/s-share-modal/canvas-poster/poster/index.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import user from './user';
|
||||
import goods from './goods';
|
||||
import groupon from './groupon';
|
||||
import SocialApi from '@/sheep/api/member/social';
|
||||
|
||||
export function getPosterData(options) {
|
||||
switch (options.shareInfo.poster.type) {
|
||||
case 'user':
|
||||
return user(options);
|
||||
case 'goods':
|
||||
return goods(options);
|
||||
case 'groupon':
|
||||
return groupon(options);
|
||||
}
|
||||
}
|
||||
|
||||
export function formatImageUrlProtocol(url) {
|
||||
// #ifdef H5
|
||||
// H5平台 https协议下需要转换
|
||||
if (window.location.protocol === 'https:' && url.indexOf('http:') === 0) {
|
||||
url = url.replace('http:', 'https:');
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序平台 需要强制转换为https协议
|
||||
if (url.indexOf('http:') === 0) {
|
||||
url = url.replace('http:', 'https:');
|
||||
}
|
||||
// #endif
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
// 获得微信小程序码 （Base64 image）
|
||||
export async function getWxaQrcode(path, query) {
|
||||
const res = await SocialApi.getWxaQrcode(path, query);
|
||||
return 'data:image/png;base64,' + res.data;
|
||||
}
|
||||
74
sheep/components/s-share-modal/canvas-poster/poster/user.js
Normal file
74
sheep/components/s-share-modal/canvas-poster/poster/user.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol, getWxaQrcode } from './index';
|
||||
|
||||
const user = async (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
const wxa_qrcode = await getWxaQrcode(poster.shareInfo.path, poster.shareInfo.query);
|
||||
return [
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.user_bg)),
|
||||
css: {
|
||||
width,
|
||||
position: 'fixed',
|
||||
'object-fit': 'contain',
|
||||
top: '0',
|
||||
left: '0',
|
||||
zIndex: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: userInfo.nickname,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 0.4,
|
||||
left: width / 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.4,
|
||||
top: width * 0.16,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: poster.shareInfo.link,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.35,
|
||||
top: width * 0.84,
|
||||
width: width * 0.3,
|
||||
height: width * 0.3,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
type: 'image',
|
||||
src: wxa_qrcode,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.35,
|
||||
top: width * 0.84,
|
||||
width: width * 0.3,
|
||||
height: width * 0.3,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
];
|
||||
};
|
||||
|
||||
export default user;
|
||||
Reference in New Issue
Block a user