0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
sheep/components/s-share-modal/canvas-poster/index.vue Normal file
View 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
View 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
View 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
View 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
View 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;

196
sheep/components/s-share-modal/s-share-modal.vue Normal file
View File

@@ -0,0 +1,196 @@
<!-- 全局分享弹框 -->
<template>
<view>
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide" />
<view v-if="state.showShareGuide" class="guide-wrap">
<image class="guide-image" :src="sheep.$url.static('/static/img/shop/share/share_guide.png')" />
</view>
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
<!-- 分享 tools -->
<view class="share-box">
<view class="share-list-box ss-flex">
<!-- 操作 ①：发送给微信好友 -->
<button
v-if="shareConfig.methods.includes('forward')"
class="share-item share-btn ss-flex-col ss-col-center"
open-type="share"
@tap="onShareByForward"
>
<image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_wx.png')" mode="" />
<text class="share-title">微信好友</text>
</button>
<!-- 操作 ②：生成海报图片 -->
<button
v-if="shareConfig.methods.includes('poster')"
class="share-item share-btn ss-flex-col ss-col-center"
@tap="onShareByPoster"
>
<image
class="share-img"
:src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
mode=""
/>
<text class="share-title">生成海报</text>
</button>
<!-- 操作 ③：生成链接 -->
<button
v-if="shareConfig.methods.includes('link')"
class="share-item share-btn ss-flex-col ss-col-center"
@tap="onShareByCopyLink"
>
<image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_link.png')" mode="" />
<text class="share-title">复制链接</text>
</button>
</view>
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
取消
</view>
</view>
</su-popup>
<!-- 分享海报，对应操作 ② -->
<canvas-poster
ref="SharePosterRef"
:show="state.showPosterModal"
:shareInfo="shareInfo"
@close="state.showPosterModal = false"
/>
</view>
</template>
<script setup>
/**
* 分享弹窗
*/
import { ref, unref, reactive, computed } from 'vue';
import sheep from '@/sheep';
import canvasPoster from './canvas-poster/index.vue';
import { closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
const show = computed(() => sheep.$store('modal').share);
const shareConfig = computed(() => sheep.$store('app').platform.share);
const SharePosterRef = ref('');
const props = defineProps({
shareInfo: {
type: Object,
default() {},
},
});
const state = reactive({
showShareGuide: false, // H5 的指引
showPosterModal: false, // 海报弹窗
});
// 操作 ②：生成海报分享
const onShareByPoster = () => {
closeShareModal();
if (!sheep.$store('user').isLogin) {
showAuthModal();
return;
}
console.log(props.shareInfo);
unref(SharePosterRef).getPoster();
state.showPosterModal = true;
};
// 操作 ①：直接转发分享
const onShareByForward = () => {
closeShareModal();
// #ifdef H5
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
state.showShareGuide = true;
return;
}
// #endif
// #ifdef APP-PLUS
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 0,
href: props.shareInfo.link,
title: props.shareInfo.title,
summary: props.shareInfo.desc,
imageUrl: props.shareInfo.image,
success: (res) => {
console.log('success:' + JSON.stringify(res));
},
fail: (err) => {
console.log('fail:' + JSON.stringify(err));
},
});
// #endif
};
// 操作 ③：复制链接分享
const onShareByCopyLink = () => {
sheep.$helper.copyText(props.shareInfo.link);
closeShareModal();
};
function onCloseGuide() {
state.showShareGuide = false;
}
</script>
<style lang="scss" scoped>
.guide-image {
right: 30rpx;
top: 0;
position: fixed;
width: 580rpx;
height: 430rpx;
z-index: 10080;
}
// 分享tool
.share-box {
background: $white;
width: 750rpx;
border-radius: 30rpx 30rpx 0 0;
padding-top: 30rpx;
.share-foot {
font-size: 24rpx;
color: $gray-b;
height: 80rpx;
border-top: 1rpx solid $gray-e;
}
.share-list-box {
.share-btn {
background: none;
border: none;
line-height: 1;
padding: 0;
&::after {
border: none;
}
}
.share-item {
flex: 1;
padding-bottom: 20rpx;
.share-img {
width: 70rpx;
height: 70rpx;
background: $gray-f;
border-radius: 50%;
margin-bottom: 20rpx;
}
.share-title {
font-size: 24rpx;
color: $dark-6;
}
}
}
}
</style>