ysg/pages/user/shareQrCode.vue

<template>
	<view class="andr-shQ-padL30 andr-shQ-padR30 andr-shQ-Flex andr-shQ-FlexDirC">
		<view class="andr-shQ-w100B andr-shQ-Flex andr-shQ-JusCC">
			<swiper class="imgw750h375 matop" :indicator-dots="false" :current="current" @change="currentChange">
				<swiper-item v-for="(item, index) in rwmListArr" :key="index">
					<!-- #ifdef MP-WEIXIN -->
					<image :src="item.poster" mode="aspectFit" class="imgw750h375" />
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" />
					<!-- #endif -->
					
				</swiper-item>
			</swiper>
		</view>
		<view class="baocun" @click="comfirm(userInfo.uid+'')">复制邀请码</view>
		<!-- #ifdef H5 -->
		<!-- <view class="baocun">长按二维码保存图片</view> -->

		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="baocun" @click="seav">保存图片并转发</view>
		<!-- <button open-type="share" class="baocun btn" v-if="scLoading == 2">分享到微信</button> -->
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		spreadBanner
	} from '@/api/user.js';
	import {
		interceptor,
		saveUrl
	} from '@/utils/loginUtils';
	// #ifdef H5
	import {
		weixindata,
		weixinlocation,
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				rwmListArr: [],
				current: 0,
				imgSrc: ''
			};
		},
		onLoad(option) {
			uni.showLoading({
				title: '邀请图生成中',
				mask: true
			});
			// 判断是否强制登录
			this.loadCodeList();
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				complete() {}
			});
			// #endif
			// #ifdef H5

			
			// #ifdef H5
			weixinObj.showAllNonBaseMenuItem();
			this.IndexShare()
			// #endif
			// #ifdef MP-WEIXIN
			wx.showAllNonBaseMenuItem();
			wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
			let path = '/#/pages/index/index' + '?';
			console.log(obj.Path)
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			  wx.updateAppMessageShareData({ 
			    title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺', // 分享标题
			    desc: '欢迎加入Xingwang鑫旺', // 分享描述
			    link: this.baseURL + path, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: '../../static/img/logo.png', // 分享图标
			    success: function () {
			      // 设置成功
			    }
			  })
			});
			// #endif
			
			
			// #endif
		},
		onShow() {
			if (this.loginInterceptor && !this.hasLogin) {
				saveUrl();
				// 登录拦截
				interceptor();
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			let obj = this;
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			setTimeout(function() {
				obj.loadCodeList();
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		computed: {
			...mapState(['weichatObj', 'baseURL', 'urlFile']),
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			comfirm(text) {
				// let text = this.userInfo.uid
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				// this.$refs.popup.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
			loadCodeList() {
				let self = this;
				// 加载二维码信息
				// let andrUid = uni.getStorageSync('andrUid')||'';
				spreadBanner({
					// #ifdef H5
					type: 2,
					// #endif
					// #ifdef MP
					type: 1,
					// #endif
				}).then(e => {
					if (e.status == 200) {
						console.log(e.data)
						self.rwmListArr = e.data;
						console.log(e.data, ' e.data++++++++++++++')

						// #ifdef H5
						self.imgSrc = self.rwmListArr[0].wap_poster;
						// #endif
						// #ifdef MP-WEIXIN
						self.imgSrc = self.rwmListArr[0].poster;
						// #endif
					}
					uni.hideLoading();
				});
			},
			currentChange(e) {
				this.current = e.detail.current;
			},
			// #ifdef H5
			IndexShare() {
				let obj = this;
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/#/pages/index/index' + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				console.log(obj.Path)
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					link: this.baseURL + path,
					title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺',
					desc: '欢迎加入Xingwang鑫旺',
					imgUrl: ''
				};
				console.log(data, '分享数据');
				shareLoad(data);
			},
			// #endif
			// #ifdef MP-WEIXIN
			seav() {
				uni.getImageInfo({
					src: this.imgSrc,
					complete: function(result) {
						let path = result.path;
						uni.getSetting({
							success(res) {
								console.log(res)
								if (!res.authSetting['scope.writePhotosAlbum']) {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success(res) {
											uni.saveImageToPhotosAlbum({
												filePath: path,
												complete(result) {}
											});
										},
										complete(result) {
											uni.showToast({
												title: '请先授权保存图片',
												duration: 2000,
												icon: 'none'
											});
											obj.seav();
										}
									})
								} else {
									uni.saveImageToPhotosAlbum({
										filePath: path,
										complete(result) {
											uni.showToast({
												title: '保存图片成功！',
												duration: 2000,
												icon: 'none'
									  });
										}
									});
								}
							}
						});
					}
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	.imgw750h375 {
		width: 700rpx;
		height: 958rpx;
	}

	.matop {
		margin-top: 40rpx;
	}

	.andr-shQ-padL30 {
		padding-left: 30rpx;
	}

	.andr-shQ-padR30 {
		padding-right: 30rpx;
	}

	.andr-shQ-Flex {
		display: flex;
	}

	.andr-shQ-FlexDirC {
		flex-direction: column;
	}

	.andr-shQ-w100B {
		width: 100%;
	}

	.andr-shQ-JusCC {
		justify-content: center;
	}

	.andr-shQ-marginT30 {
		margin-top: 30rpx;
	}

	.andr-shQ-bgc06B163 {
		background-color: $base-color;
	}

	.andr-shQ-cFFF {
		color: #ffffff;
	}

	.andr-shQ-bdR50 {
		border-radius: 50rpx;
	}

	.andr-shQ-h86 {
		height: 86rpx;
	}

	.andr-shQ-AIC {
		align-items: center;
	}

	.baocun {
		color: #ffffff;
		background: $base-color;
		text-align: center;
		width: 80%;
		margin: 50rpx auto;
		font-size: 28rpx;
		padding: 25rpx 0rpx;
		border-radius: 50rpx;
	}

	.btn {
		padding: 0rpx 0rpx !important;
		margin: 0rpx auto;
		margin-bottom: 100rpx;
	}

	/* #ifdef H5 */
	.cbnagan {
		width: 80%;
		background: $base-color;
		margin: 50rpx auto;
		font-size: 28rpx;
		text-align: center;
	}

	/* #endif */
</style>