sctang/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" :style="{'height': maxHeight}">
				<!-- #ifdef H5 -->
				<swiper-item v-for="(item, index) in rwmListArr" :key="index">
					<image :src="item.wap_poster" mode="widthFix" class="imgw750h375" />
				</swiper-item>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<swiper-item v-for="(item, index) in rwmListArr" :key="index">
					<image :src="item.poster" mode="aspectFit" class="imgw750h375" />
				</swiper-item>
				<!-- #endif -->

			</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
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				rwmListArr: [],
				current: 0,
				imgSrc: '',
				maxHeight: '100vh',
			};
		},
		onLoad(option) {
			uni.showLoading({
				title: '邀请图生成中',
				mask: true
			});
			// 判断是否强制登录
			this.loadCodeList();
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				complete() {}
			});
			// #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;
						uni.getImageInfo({
							src: self.rwmListArr[0].wap_poster,
							success: function(res) {
								const imageWidth = res.width;
								const imageHeight = res.height;
								self.maxHeight  = (750 / imageWidth * imageHeight).toFixed(2) + 'rpx'
								console.log(self.maxHeight,'self.maxHeight');
							},
							fail: function(err) {
								self.maxHeight = '100vh'
							}
						});
						// #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;
			},
			// onShareAppMessage(options){
			// 	console.log(options,'options')
			// 	let userInfo = uni.getStorageSync('userInfo');
			// 	console.log(userInfo)
			// 　　let obj = this;
			// 　　// 设置菜单中的转发按钮触发转发事件时的转发内容
			// 　　let shareObj = {
			// 　　　　title: "邀请好友领券",        // 默认是小程序的名称(可以写slogan等)
			// 　　　　path: '/pages/index/index?spread='+userInfo.uid,        // 默认是当前页面，必须是以‘/’开头的完整路径
			// 　　　　imageUrl: obj.imgSrc,
			// 　　　　success: function(res){
			// 　　　　　　// 转发成功之后的回调
			// 　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
			// 　　　　　　}
			// 　　　　},
			// 　　　　fail: function(){
			// 　　　　　　// 转发失败之后的回调
			// 　　　　　　if(res.errMsg == 'shareAppMessage:fail cancel'){
			// 　　　　　　　　// 用户取消转发
			// 　　　　　　}else if(res.errMsg == 'shareAppMessage:fail'){
			// 　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
			// 　　　　　　}
			// 　　　　}
			// 　　};
			// 　　// 来自页面内的按钮的转发
			// 　　if( options.from == 'button' ){
			// 　　　　// 此处可以修改 shareObj 中的内容
			// 　　　　shareObj.path = '/pages/index/index?spread='+userInfo.uid;
			//         console.log(shareObj.path,'shareObj.path')
			// 　　}
			// 　　// 返回shareObj
			// 　　return shareObj;
			// },
			// scClick() {
			// 	let self = this;
			// 	// #ifdef H5
			// 	self.imgSrc = self.rwmListArr[self.current].wap_poster;
			// 	// #endif
			// 	// #ifdef MP-WEIXIN
			// 	self.imgSrc = self.rwmListArr[self.current].poster;
			// 	// #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">
	page {
		height: 100%;
	}

	.imgw750h375 {
		width: 750rpx;
		// height: 958rpx;
		// height: calc(100vh - 44px);
	}

	.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>