yangdaxia/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"><image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" /></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 } 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
	},
	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;
					// #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">
.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>