📖 code review:分享海报
parent
c5b91b3298
commit
d129820605
|
@ -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 = '';
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue