2022-3-16

manifest.json

@@ -73,7 +73,7 @@
         "devServer" : {
             "proxy" : {
                 "/api" : {
-                    "target" : "http://gp.frp.liuniu946.com/api",
+                    "target" : "http://gp.liuniu946.com/api",
                     // "changeOrigin": true,
                     "pathRewrite" : {
                         "/api" : "" // rewrite path

pages/user/shareQrCode.vue

@@ -1,143 +1,286 @@
 <template>
 	<view class="container">
-		<image @longtap="bc_code" class="backImg" :src="backImg"></image>
-		<view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view>
+		<swiper
+			class="posters-box"
+			:autoplay="false" 
+			:circular="false" 
+			:interval="3000" 
+			:duration="500"
+			@change="bindchange" 
+			previous-margin="40px" 
+			next-margin="40px">
+			<block v-for="(item, index ) in shareList" :key="index">
+				<swiper-item>
+					<!-- #ifndef MP -->
+					<image 
+						class="slide-image" 
+						:class="swiperIndex == index ? 'active' : 'quiet'" 
+						mode='aspectFill' 
+						:src="item.wap_poster"
+						
+					></image>
+					<!-- #endif -->
+					
+					<!-- #ifdef MP -->
+					<image
+						class="slide-image" 
+						:class="swiperIndex == index ? 'active' : 'quiet'" 
+						mode='aspectFill' 
+						:src="item.poster"
+						
+					></image>
+					<!-- #endif -->
+					
+				</swiper-item>
+			</block>
+		</swiper>
+		<!-- #ifndef MP -->
+		<div class="preserve">
+			<div class="line"></div>
+			<div class="tip">长按保存图片</div>
+			<div class="line"></div>
+		</div>
+		<!-- #endif -->
+
+		<!-- #ifdef MP -->
+		<view class='keep' @click='savePosterPath'>保存海报</view>
+		<!-- #endif -->
+		
 	</view>
 </template>
 
 <script>
 import { spreadBanner } from '@/api/user.js';
+import { qrcode } from  '@/api/user.js';
+import { mapState } from 'vuex';
 export default {
-	// components: { tkiQrcode },
+	// #ifdef MP
+	onShareAppMessage: function(res) {
+		// if (res.from === 'button') {
+			
+			// 保存邀请人
+			let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
+			console.log('path',path)
+			let data = {
+				path: path,
+				imageUrl: this.poster,
+				title: this.userInfo.nickname + '邀请您进入智播商城'
+			};
+			console.log('---data---',data)
+			return data;
+		// }
+	},
+	// #endif
 	data() {
 		return {
-			url: '',
-			backImg: '',
-			userInfo: ''
-		};
+			shareList: [],
+			swiperIndex: 0,
+			poster: '',	// 当前海报
+		}
 	},
-	onLoad() {
-		this.spread();
+	onLoad(option) {
+		// console.log('---option---',option)
+		// let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
+		// console.log('path',path)
+		// if(option.scene){
+		// 	// 存储邀请人
+		// 	this.spread = opt.pid;
+		// 	uni.setStorageSync('spread', opt.pid);
+		// }
+		this.loadData();
 	},
 	computed: {
-		cpSize() {
-			if (this.unit == 'upx') {
-				return uni.upx2px(this.size);
-			} else {
-				return this.size;
-			}
-		}
+		...mapState(['userInfo']),
 	},
 	methods: {
-		spread() {
-			uni.showLoading({
-				title: '加载中'
-			});
-			let obj = this;
-			spreadBanner({
-				//#ifdef H5
-				type: 2,
-				//#endif
-				//#ifdef MP
-				type:1,
-				//#endif
-				//#ifdef APP-PLUS
-				type:3,
-				//#endif
-			}).then(({ data }) => {
-				console.log(data);
-				//#ifdef MP
-				obj.backImg = data[0].poster;
-				//#endif
-				//#ifdef H5
-				obj.backImg = data[0].wap_poster;
-				//#endif
-				//#ifdef APP-PLUS
-				obj.backImg = data[0].wap_poster;
-				//#endif
-				uni.hideLoading();
-			});
+		bindchange(e) {
+			let shareList = this.shareList;
+			this.swiperIndex = e.detail.current;
+			// #ifdef MP
+			this.poster = shareList[this.swiperIndex].poster;
+			// #endif 
+			
+			// // #ifndef MP
+			// this.poster = shareList[this.swiperIndex].wap_poster;
+			// // #endif 
+			
+			console.log(this.poster)
 		},
-		bc_code() {
+		
+		// 保存海报
+		savePosterPath: function() {
 			let that = this;
-			console.log('保存二维码', this.backImg);
+			if(that.poster==''){
+				that.poster = that.shareList[0].poster;
+			}
 			uni.downloadFile({
-				//获得二维码的临时地址
-				url: this.backImg,
-				success: res => {
-					//console.log('获取url',res)
-					if (res.statusCode == 200) {
-						uni.saveImageToPhotosAlbum({
-							filePath: res.tempFilePath, //传入临时地址
-							success() {
-								that.$api.msg('保存成功'); //封装的提示
+				url: that.poster,
+				success(resFile) {
+					if (resFile.statusCode === 200) {
+						uni.getSetting({
+							success(res) {
+								if (!res.authSetting['scope.writePhotosAlbum']) {
+									uni.authorize({
+										scope: 'scope.writePhotosAlbum',
+										success() {
+											uni.saveImageToPhotosAlbum({
+												filePath: resFile.tempFilePath,
+												success: function(res) {
+													return that.$api.msg( '保存成功' );
+												},
+												fail: function(res) {
+													return that.$api.msg( res.errMsg );
+												},
+												complete: function(res) {},
+											})
+										},
+										fail() {
+											uni.showModal({
+												title: '您已拒绝获取相册权限',
+												content: '是否进入权限管理，调整授权？',
+												success(res) {
+													if (res.confirm) {
+														uni.openSetting({
+															success: function(res) {
+																console.log(res.authSetting)
+															}
+														});
+													} else if (res.cancel) {
+														return that.$api.msg( '已取消！' );
+													}
+												}
+											})
+										}
+									})
+								} else {
+									uni.saveImageToPhotosAlbum({
+										filePath: resFile.tempFilePath,
+										success: function(res) {
+											return that.$api.msg( '保存成功' );
+										},
+										fail: function(res) {
+											return that.$api.msg( res.errMsg );
+										},
+										complete: function(res) {},
+									})
+								}
 							},
-							fail() {
-								that.$api.msg('保存失败');
+							fail(res) {
+		
 							}
-						});
+						})
+					} else {
+						return that.$api.msg( resFile.errMsg );
 					}
+				},
+				fail(res) {
+					return that.$api.msg( res.errMsg );
 				}
+			})
+		},
+		
+		// #ifdef MP-WEIXIN
+		// 保存画图图片到本地
+		seav(url) {
+			uni.showLoading({
+				title: '生成中...',
+				mask: true
 			});
-		}
+			uni.saveImageToPhotosAlbum({
+				filePath: this.poster,
+				complete(result) {
+					uni.hideLoading();
+					console.log(result);
+					uni.showToast({
+						title: '保存图片成功！',
+						duration: 2000,
+						icon: 'none'
+					});
+				}
+			});
+		},
+		// #endif
+		
+		// 获取海报
+		loadData() {
+			let obj = this;
+			uni.showLoading({
+				title: '获取中',
+				mask: true,
+			});
+			spreadBanner({
+				// #ifdef H5
+				type: 2,
+				// #endif
+				// #ifdef MP
+				type: 1
+				// #endif
+			}).then(res =>{
+				uni.hideLoading();
+				obj.shareList = res.data;
+				console.log('obj.shareList',obj.shareList);
+			}).catch(err => {
+				uni.hideLoading();
+			});
+		},
 	}
-};
+}
 </script>
 
 <style lang="scss">
-page {
-	width: 100%;
-	min-height: 100%;
-	.container {
-		width: 100%;
+	page {
+		background: #a3a3a3;
 		height: 100%;
 	}
-}
-.backImg {
-	position: absolute;
+.container {
 	width: 100%;
-	height: 100%;
-}
-.portrait {
-	width: 100%;
-	text-align: center;
-	padding-top: 80rpx;
-	padding-bottom: 30rpx;
-	image {
-		width: 250rpx;
-		height: 250rpx;
+	.posters-box {
+		width: 100%;
+		height: 1000rpx;
+		margin-top: 40rpx;
+		.slide-image {
+			width: 100%;
+			height: 100%;
+			border-radius: 15rpx;
+		}
+	}
+	.posters-box .slide-image.active {
+		transform: none;
+		transition: all 0.2s ease-in 0s;
+	}
+	
+	.posters-box .slide-image.quiet {
+		transform: scale(0.8333333);
+		transition: all 0.2s ease-in 0s;
+	}
+	
+	.keep {
+		font-size: 30rpx;
+		background: $base-color;
+		color: #fff;
+		width: 600rpx;
+		height: 80rpx;
+		border-radius: 50rpx;
+		text-align: center;
+		line-height: 80rpx;
+		margin: 38rpx auto;
 	}
 }
-.text {
-	text-align: center;
-	width: 100%;
-	color: #ffffff;
-	font-size: 55rpx;
-	letter-spacing: 15rpx;
-}
-.uid-name {
-	padding: 50rpx 0rpx;
-	text-align: center;
-	width: 100%;
-	color: #ffffff;
-}
-.copy-btn {
-	color: #ffffff;
-	background-color: #4ba6ed;
-	border-radius: 50rpx;
-	width: 170rpx;
-	line-height: 70rpx;
-	margin: 0rpx auto;
+.preserve {
+	color: #fff;
 	text-align: center;
+	margin-top: 38rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.line {
+		width: 100rpx;
+		height: 1px;
+		background-color: #fff;
+	}
+	.tip {
+		margin: 0 20rpx;
+		font-size: 28rpx;
+	}
 }
-.tki-qrcode {
-	position: fixed;
-	bottom: 10%;
-	left: 30%;
-}
-canvas {
-	width: 150px;
-	height: 150px;
-	margin: auto;
-}
-</style>
+</style>