|  | @@ -14,16 +14,14 @@
 | 
	
		
			
				|  |  |  					<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/images/share_wx.png')"
 | 
	
		
			
				|  |  | -							mode="" />
 | 
	
		
			
				|  |  | +						<image class="share-img" :src="sheep.$url.static('/static/images/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/images/share_poster.png')"
 | 
	
		
			
				|  |  | -							mode="" />
 | 
	
		
			
				|  |  | +						<image class="share-img" :src="sheep.$url.static('/static/images/share_poster.png')" mode="" />
 | 
	
		
			
				|  |  |  						<text class="share-title">生成海报</text>
 | 
	
		
			
				|  |  |  					</button>
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -41,156 +39,170 @@
 | 
	
		
			
				|  |  |  			</view>
 | 
	
		
			
				|  |  |  		</su-popup>
 | 
	
		
			
				|  |  |  		<!-- 分享海报,对应操作 ② -->
 | 
	
		
			
				|  |  | -		<canvas-poster ref="SharePosterRef" :show="state.showPosterModal" :shareInfo="shareInfo"
 | 
	
		
			
				|  |  | +		<canvas-poster ref="SharePosterRef" :show="state.showPosterModal" :shareInfo="ShareInfo"
 | 
	
		
			
				|  |  |  			@close="state.showPosterModal = false" />
 | 
	
		
			
				|  |  |  	</view>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  <script setup>
 | 
	
		
			
				|  |  | -	/**
 | 
	
		
			
				|  |  | -	 * 分享弹窗
 | 
	
		
			
				|  |  | -	 */
 | 
	
		
			
				|  |  | -	import {
 | 
	
		
			
				|  |  | -		ref,
 | 
	
		
			
				|  |  | -		unref,
 | 
	
		
			
				|  |  | -		reactive,
 | 
	
		
			
				|  |  | -		computed,
 | 
	
		
			
				|  |  | -		inject
 | 
	
		
			
				|  |  | -	} from 'vue';
 | 
	
		
			
				|  |  | -	import sheep from '@/sheep';
 | 
	
		
			
				|  |  | -	import canvasPoster from './canvas-poster/index.vue';
 | 
	
		
			
				|  |  | -	import {
 | 
	
		
			
				|  |  | -		closeShareModal,
 | 
	
		
			
				|  |  | -		showAuthModal
 | 
	
		
			
				|  |  | -	} from '@/sheep/hooks/useModal';
 | 
	
		
			
				|  |  | +/**
 | 
	
		
			
				|  |  | + * 分享弹窗
 | 
	
		
			
				|  |  | + */
 | 
	
		
			
				|  |  | +import {
 | 
	
		
			
				|  |  | +	ref,
 | 
	
		
			
				|  |  | +	unref,
 | 
	
		
			
				|  |  | +	reactive,
 | 
	
		
			
				|  |  | +	computed,
 | 
	
		
			
				|  |  |  	
 | 
	
		
			
				|  |  | -	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 () {},
 | 
	
		
			
				|  |  | +} from 'vue';
 | 
	
		
			
				|  |  | +import { onLoad } from '@dcloudio/uni-app';
 | 
	
		
			
				|  |  | +import sheep from '@/sheep';
 | 
	
		
			
				|  |  | +import canvasPoster from './canvas-poster/index.vue';
 | 
	
		
			
				|  |  | +import {
 | 
	
		
			
				|  |  | +	closeShareModal,
 | 
	
		
			
				|  |  | +	showAuthModal
 | 
	
		
			
				|  |  | +} from '@/sheep/hooks/useModal';
 | 
	
		
			
				|  |  | +import ShareApi from '@/sheep/api/distri/share';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +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, // 海报弹窗
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +let ShareInfo = computed(() =>{
 | 
	
		
			
				|  |  | +	return {
 | 
	
		
			
				|  |  | +		...props.shareInfo
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const onShareByPoster = () => {
 | 
	
		
			
				|  |  | +	const shareId = computed(() => sheep.$store('modal').shareInfo.spuId);
 | 
	
		
			
				|  |  | +	closeShareModal();
 | 
	
		
			
				|  |  | +	if (!sheep.$store('user').isLogin) {
 | 
	
		
			
				|  |  | +		showAuthModal();
 | 
	
		
			
				|  |  | +		return;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	if (shareId.value) {
 | 
	
		
			
				|  |  | +		ShareApi.getLinkId(3, shareId.value).then((res) => {
 | 
	
		
			
				|  |  | +			if (res.code !== 0) {
 | 
	
		
			
				|  |  | +				return;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +			ShareInfo.value.link = ShareInfo.value.link.replace('0', res.data.linkId);
 | 
	
		
			
				|  |  | +			ShareInfo.value.query = ShareInfo.value.query.replace('0', res.data.linkId);
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	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));
 | 
	
		
			
				|  |  |  		},
 | 
	
		
			
				|  |  | -		
 | 
	
		
			
				|  |  | -	});
 | 
	
		
			
				|  |  | -	const state = reactive({
 | 
	
		
			
				|  |  | -		showShareGuide: false, // H5 的指引
 | 
	
		
			
				|  |  | -		showPosterModal: false, // 海报弹窗
 | 
	
		
			
				|  |  |  	});
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -	// 操作 ②:生成海报分享
 | 
	
		
			
				|  |  | -	const onShareByPoster = () => {
 | 
	
		
			
				|  |  | -		
 | 
	
		
			
				|  |  | -		closeShareModal();
 | 
	
		
			
				|  |  | -		if (!sheep.$store('user').isLogin) {
 | 
	
		
			
				|  |  | -			showAuthModal();
 | 
	
		
			
				|  |  | -			return;
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -		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 = () => {
 | 
	
		
			
				|  |  | -		closeShareModal();
 | 
	
		
			
				|  |  | -		if (!sheep.$store('user').isLogin) {
 | 
	
		
			
				|  |  | -			showAuthModal();
 | 
	
		
			
				|  |  | -			return;
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -		sheep.$helper.copyText(props.shareInfo.link);
 | 
	
		
			
				|  |  | -		// sheep.$helper.copyText('https://zxgz.newfeifan.cn/');
 | 
	
		
			
				|  |  | -		// closeShareModal();
 | 
	
		
			
				|  |  | -	};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -	function onCloseGuide() {
 | 
	
		
			
				|  |  | -		state.showShareGuide = false;
 | 
	
		
			
				|  |  | +	// #endif
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +// 操作 ③:复制链接分享
 | 
	
		
			
				|  |  | +const onShareByCopyLink = () => {
 | 
	
		
			
				|  |  | +	closeShareModal();
 | 
	
		
			
				|  |  | +	if (!sheep.$store('user').isLogin) {
 | 
	
		
			
				|  |  | +		showAuthModal();
 | 
	
		
			
				|  |  | +		return;
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  | +	sheep.$helper.copyText(props.shareInfo.link);
 | 
	
		
			
				|  |  | +	// sheep.$helper.copyText('https://zxgz.newfeifan.cn/');
 | 
	
		
			
				|  |  | +	// 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;
 | 
	
		
			
				|  |  | +.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;
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -	// 分享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;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -		.share-list-box {
 | 
	
		
			
				|  |  | -			.share-btn {
 | 
	
		
			
				|  |  | -				background: none;
 | 
	
		
			
				|  |  | +			&::after {
 | 
	
		
			
				|  |  |  				border: none;
 | 
	
		
			
				|  |  | -				line-height: 1;
 | 
	
		
			
				|  |  | -				padding: 0;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.share-item {
 | 
	
		
			
				|  |  | +			flex: 1;
 | 
	
		
			
				|  |  | +			padding-bottom: 20rpx;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -				&::after {
 | 
	
		
			
				|  |  | -					border: none;
 | 
	
		
			
				|  |  | -				}
 | 
	
		
			
				|  |  | +			.share-img {
 | 
	
		
			
				|  |  | +				width: 70rpx;
 | 
	
		
			
				|  |  | +				height: 70rpx;
 | 
	
		
			
				|  |  | +				background: $gray-f;
 | 
	
		
			
				|  |  | +				border-radius: 50%;
 | 
	
		
			
				|  |  | +				margin-bottom: 20rpx;
 | 
	
		
			
				|  |  |  			}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -			.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;
 | 
	
		
			
				|  |  | -				}
 | 
	
		
			
				|  |  | +			.share-title {
 | 
	
		
			
				|  |  | +				font-size: 24rpx;
 | 
	
		
			
				|  |  | +				color: $dark-6;
 | 
	
		
			
				|  |  |  			}
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  </style>
 |