xwc/components/share-popup/share-popup.vue

<template>
	<view >
		<u-popup class="share-popup" v-model="showshare" mode="bottom" border-radius="14" :closeable="true"
			:safe-area-inset-bottom="true" :mask-close-able="false">
			<view class="flex row-center md bold m-t-30 m-b-30">分享至</view>
			<view class="flex row-around share-tab">
				<view class="flex-col col--center" @tap="getPoster">
					<image mode="widthFix" class="share-icon" src="/static/images/icon_generate_poster.png"></image>
					<view class="m-t-10">生成海报</view>
				</view>
				<!-- #ifdef MP-WEIXIN-->
				<button open-type="share" class="flex-col col--center" hover-class="none">
					<image class="share-icon" src="/static/images/icon_wechat.png"></image>
					<view class="m-t-10">微信好友</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<view oclass="flex-col col--center" @tap="shareWx">
					<image class="share-icon" src="/static/images/icon_wechat.png"></image>
					<view class="m-t-10">微信好友</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="flex row-center bg-body cancel xl" @tap="showshare=false">取消</view>
		</u-popup>
		<u-popup class="share-poster" v-model="showPoster" mode="center" :closeable="true"
			:safe-area-inset-bottom="true">
			<!-- #ifndef H5 -->
			<image style="width: 640rpx;" mode="widthFix" :src="poster"></image>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<img style="width: 640rpx;" :src="poster" />
			<!-- #endif -->
			<button class="flex row-center save-btn" size="lg" @tap="savePoster">
				<!-- #ifndef H5 -->
				保存图片到相册
				<!-- #endif -->
				<!-- #ifdef H5 -->
				长按保存图片到相册
				<!-- #endif -->
			</button>
		</u-popup>
		<!-- #ifdef H5 -->
		<u-popup :custom-style="{'background': 'none'}"  class="share-tips" v-model="showTips" mode="top">
			<view style="overflow: hidden;">
				<image src="/static/images/share_arrow.png" class="share-arrow" />
				<view class="white" style="text-align: center;margin-top: 280rpx;">
					<view class="bold lg">立即分享给好友吧</view>
					<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->
		<poster v-if="enablePoster" :type="type" :share-id="shareId" :page-path="pagePath" :config="config"
			:qrcode="mnpQrcode" :link="getLink" @success="handleSuccess" @fail="handleFail" />
	</view>
</template>

<script>
	import {
		apiMnpQrCode,
		apiTtQrCode
	} from "@/api/app"
	import {
		baseURL,
		basePath
	} from '@/config/app'
    import {mapGetters} from 'vuex'
	import poster from './poster.vue'
	export default {
		components: {
			poster
		},
		props: {
			value: {
				type: Boolean
			},
			shareId: {
				type: [String, Number],
				default: ''
			},
			config: {
				type: Object,
				default: () => ({})
			},
			pagePath: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'goods'
			}
		},
		data() {
			return {
				poster: "",
				enablePoster: false,
				showPoster: false,
				showTips: false,
				mnpQrcode: ''
			};
		},
		computed: {
            ...mapGetters(['inviteCode', 'userInfo']),
			getLink() {
				return `${baseURL}${basePath}/${this.pagePath}?id=${this.shareId}&invite_code=${this.inviteCode}`
			},
			showshare: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		watch: {
			showPoster(val) {
				if (!val) {
					this.enablePoster = false
				}
			}
		},
		methods: {
			async getPoster() {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				uni.showLoading({
					title: '正在生成中'
				})
				// #ifdef MP-WEIXIN
				if (!this.mnpQrcode) {
					// #ifdef MP-WEIXIN 
					const res = await this.getMnpQrcode()
					// #endif
					this.mnpQrcode = res.data.qr_code.replaceAll("\r\n", "")
				}
				this.enablePoster = true
				// #endif
				
				// #ifdef APP-PLUS || H5
				this.enablePoster = true
				// #endif
			},
			// 获取商品页面二维码
			getMnpQrcode() {
				return new Promise((resolve, reject) => {
					apiMnpQrCode({
						id: this.shareId,
						url: this.pagePath,
                        type: this.type
					}).then((res) => {
						resolve(res)
					}).catch(() => {
						reject()
					})
				})
			},
			getTtQrCode() {
				return new Promise((resolve, reject) => {
					const sys = uni.getSystemInfoSync()
					apiTtQrCode({
						appname: TtAppNameEnum[sys.appName],
						id: this.shareId,
						page: this.pagePath
					}).then((res) => {
						resolve(res)
					}).catch(() => {
						uni.hideLoading()
					})
				})
			},
			handleSuccess(val) {
				this.poster = val
				uni.hideLoading()
				this.showPoster = true
				this.showshare = false
			},
			handleFail() {
				uni.hideLoading({
					success: () => {
						this.$toast({
							title: '生成失败'
						})
					}
				})
			},
			shareWx() {
				// #ifdef H5
				this.showTips = true
				this.showshare = false
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.getLink,
					title: this.config.name,
					summary: '',
					imageUrl: this.config.image,
					success: (res) => {
						console.log('分享成功');
					},
					fail: (err) => {
						this.$toast({
							title: err.errMsg
						})
					}
				});
				// #endif
			},

			async savePoster() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: res => {
						this.showPoster = false
						this.$toast({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						this.$toast({
							title: '保存失败'
						});
						console.log(err)
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.share-popup {
		.share-tab {
			margin: 40rpx 0 140rpx;

			.share-icon {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.cancel {
			height: 98rpx;
		}
	}

	.share-poster {
		.share-img {
			width: 640rpx;
			border-radius: 12rpx;
		}

		.save-btn {
			background-color: $-color-primary;
			color: #fff;
			margin-top: 20rpx;
		}
	}

	.share-tips .share-arrow {
		width: 140rpx;
		height: 250rpx;
		float: right;
		margin: 15rpx 31rpx 0 0;
	}
</style>