yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

📖 code review：分享海报

pull/34/head
YunaiV 2023-12-27 23:13:26 +08:00
parent c5b91b3298
commit d129820605
3 changed files with 166 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
sheep/components/s-share-modal/canvas-poster/index.vue
View File

@ -1,4 +1,4 @@
<!-- 页面 --> <!-- 海报弹窗 -->
<template> <template>
<su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box"> <su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
<view class="ss-flex-col ss-col-center ss-row-center"> <view class="ss-flex-col ss-col-center ss-row-center">
@ -20,8 +20,8 @@
height: poster.height + 'px', height: poster.height + 'px',
width: poster.width + 'px', width: poster.width + 'px',
}" }"
:show-menu-by-longpress="true" :show-menu-by-longpress="true"
></image> />
<canvas <canvas
class="hideCanvas" class="hideCanvas"
:canvas-id="poster.canvasId" :canvas-id="poster.canvasId"
@ -33,7 +33,7 @@
/> />
<view <view
class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center" class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
v-if="poster.src != ''" v-if="poster.src !== ''"
> >
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button> <button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
<button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster"> <button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
@ -73,9 +73,12 @@
const emits = defineEmits(['success', 'close']); const emits = defineEmits(['success', 'close']);
const vm = getCurrentInstance(); const vm = getCurrentInstance();
const onClosePoster = () => { const onClosePoster = () => {
emits('close'); emits('close');
}; };
// 保存海报图片
const onSavePoster = () => { const onSavePoster = () => {
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) { if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
sheep.$helper.toast('请长按图片保存'); sheep.$helper.toast('请长按图片保存');
@ -95,6 +98,7 @@
}); });
}; };
// 使用 canvas 生成海报
async function getPoster(params) { async function getPoster(params) {
poster.src = ''; poster.src = '';

2
sheep/components/s-share-modal/canvas-poster/useCanvas.js
View File

@ -5,8 +5,6 @@
* @param {Object} options - 海报参数 * @param {Object} options - 海报参数
* @param {Object} vm - 自定义组件实例 * @param {Object} vm - 自定义组件实例
*/ */
import sheep from '@/sheep';
import QSCanvas from 'qs-canvas'; import QSCanvas from 'qs-canvas';
import { getPosterData } from './poster'; import { getPosterData } from './poster';

316
sheep/components/s-share-modal/s-share-modal.vue
View File

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