uniapp 电商app 下载页面功能实现

小鱼儿 2021-07-25 14:42 871阅读 0赞

# 下载页面 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
效果图要求如下：

1.  立即邀请按钮是个动态的，上下浮动并且尺寸或大或小的改变，可以通过css3动画来实现
2.  二维码是生成的，这个二维码是含有用户邀请码的，如果通过此二维码进行下载app。
3.  点击保存图片按钮，可以生成另一个邀请页面，该邀请页面效果图如下：

![在这里插入图片描述][2020091111481615.png_pic_center]

代码实现如下：

<template>
    	<view class="invite">		
    		<image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E6%96%B0%20%E9%95%BF_1599794241000.png" mode="widthFix"></image>
    		<view class="content">
    			<view class="top">
    				<view class="top-con">
    					<view>您的专属邀请码</view>
    					<view>
    						{ { userInfo.inviteCode}}
    					<image src="../../static/invite/copy.png" mode="widthFix" @click="copyMa"></image></view>
    				</view>
    				<view class="inviteBtn" @click="share">
    					<image src="../../static/invite/inviteBtn.png" mode="widthFix"></image>
    				</view>
    			</view>
    			<view class="bottom">
    				<view>邀请好友攻略</view>
    				<view class="bottom-con">
    					<view class="bottom-item">
    						<image src="../../static/invite/invite1.png" mode="widthFix"></image>
    						<view class="item-tit">第一步</view>
    						<view class="item-sub">分享给好友</view>
    					</view>
    					<view class="bottom-item">
    						<image src="../../static/invite/invite2.png" mode="widthFix"></image>
    						<view class="item-tit">第二步</view>
    						<view class="item-sub">好友接受邀请</view>
    					</view>
    					<view class="bottom-item">
    						<image src="../../static/invite/invite3.png" mode="widthFix"></image>
    						<view class="item-tit">第三步</view>
    						<view class="item-sub">好友注册下载</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="code">
    			<image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E4%BA%8C%E7%BB%B4%E7%A0%81%402x_1598517850000.png" mode="widthFix"></image>
    			<view class="code-tit">
    				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" style="margin-top: 80upx;"
    				:val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" 
    				:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" 
    				:loadMake="loadMake" :usingComponents="true" 
    				@result="qrR" />
    					<text>扫描二维码，下载APP</text>
    			</view>
    		</view>
    		<view class="btn" @click="beginCanvas">
    			生成并保存图片
    		</view>
    		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="585" width="330" />
    	</view>
    </template>
    
    <script>
    	import tkiQrcode from '@/components/qrcode/tki-qrcode.vue'
    	import { 
    		base64ToPath
    	} from '@/utils/imageTools.js'
    	import mosoweCanvasImage from "@/components/mosowe-canvas-image/mosowe-canvas-image"
    	import { 
    		mapState
    	} from 'vuex';
    	export default { 
    		components: { 
    			mosoweCanvasImage,tkiQrcode
    		},
    		data() { 
    			return { 
    				isShowPhoto: true,
    				canvasUrl: '',
    				lists: [{ 
    						type: 'image',
    						content: 'https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC_1599729052000.png',
    						width: 330,
    						height: 585,
    						x: 0,
    						y: 0,
    					}
    				],
    				ifShow: true,
    				val: '', // 要生成的二维码值
    				size: 420, // 二维码大小
    				unit: 'upx', // 单位
    				background: '#fff', // 背景色
    				foreground: '#000', // 前景色
    				pdground: '#000', // 角标色
    				icon: '', // 二维码图标
    				iconsize: 20, // 二维码图标大小
    				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
    				onval: false, // val值变化时自动重新生成二维码
    				loadMake: true, // 组件加载完成后自动生成二维码
    				src: '' // 二维码生成后的图片地址或base64
    			}
    		},
    		created() { 
    			this.val = this.registerUrl+ this.userInfo.inviteCode;
    		},
    		computed: { 
    			...mapState(['hasLogin', 'userInfo', 'registerUrl'])
    		},
    		onNavigationBarButtonTap(e){ 
    			if(e.index === 0){ 
    				this.share();
    			}
    		},
    		methods: { 
    			share() { 
    			  // 分享图文到微信聊天界面
    			  uni.share({ 
    			    provider: "weixin", // 服务商
    			    scene: "WXSceneSession", // 场景 微信好友WXSceneSession 朋友圈WXSceneTimeLine
    			    type: 0, // 图文0 文字1 图片2
    			    href: this.registerUrl+this.userInfo.inviteCode, // 分享h5地址
    			    title: "加入我们",
    			    summary: "多典商城，人人分享，人人销售！赶紧跟我一起来体验！", // 描述
    			    imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/category/2020-09-02/1599009402796.jpg",
    			    success: function (res) { 
    			        console.log("success:" + JSON.stringify(res));
    			    },
    			    fail: function (err) { 
    			        console.log("fail:" + JSON.stringify(err));
    			    }
    			  });
    			},
    			creatQrcode() { 
    				this.$refs.qrcode._makeCode()
    			},
    			saveQrcode() { 
    				this.$refs.qrcode._saveCode()
    			},
    			qrR(res) { 
    				this.src = res
    				this.lists.push({ 
    					type: 'base',
    					content: res,
    					x: 80,
    					y: 330,
    					width: 170,
    					height: 170,
    					// maxWidth: 100,
    					// align: 'left',
    				})
    			},
    			beginCanvas() { 
    				this.val = this.registerUrl+this.userInfo.inviteCode;
    				console.log(this.val)
    				this.$refs.mosoweCanvasComponents.createCanvas();
    			},
    			_canvasImage(e) { 
    				this.canvasUrl = e;
    				// 网络图片需要先进行下载然后直接保存到相册
    				// this.saveHttpImg(e);
    				// 本地图片可以直接保存到相册
    				this.save(e);
    			},
    			hidePhoto() { 
    				this.isShowPhoto = false;
    			},
    			saveHttpImg(url) { 
    				let _t = this;
    				uni.downloadFile({ 
    					url: url, //仅为示例，并非真实的资源
    					success: (res) => { 
    						if (res.statusCode === 200) { 
    							let file = res.tempFilePath;
    							_t.save(file)
    						}
    					}
    				});
    			},
    			save(url) { 
    				let _this = this;
    				uni.saveImageToPhotosAlbum({ 
    					filePath: url,
    					success: () => { 
    						uni.hideLoading();
    						uni.showToast({ 
    							title:"已保存至相册",
    							duration:3000
    						});
    					},
    					fail: () => { 
    						uni.hideLoading();
    						uni.showToast({ 
    							title:"图片保存失败",
    							duration:3000
    						});
    					}
    				});
    			},
    			copyMa() { 
    				uni.setClipboardData({ 
    					data: this.userInfo.inviteCode,
    					success: function() { 
    						uni.showToast({ 
    							title: "复制成功"
    						})
    					},
    					fail: function() { 
    						uni.showToast({ 
    							title: "复制失败"
    						})
    					}
    				});
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	//用transform就流畅了
    	@keyframes heart{ 
    		0%{ 
    			transform:translate(0,-10upx) scale(0.9);
    		}
    		50%{ 
    			transform:translate(0,10upx) scale(1.2);
    		}
    		100%{ 
    			transform:translate(0,-10upx) scale(0.9);
    		}
    	}
    	.inviteBtn image{ 
    		animation: heart 2s ease-in-out 1.5s infinite alternate;
    	}
    	page{ 
    		// overflow: hidden;
    		background: #FF28A1;
    		width:100vw;
    		height:100vh;
    	}
    	.invite { 
    		width: 100%;
    		width:100vw;
    		height:auto;
    		position: relative;
    		background: #FF28A1;
    		padding: 0;		
    		&>image { 
    			width: 100%;
    			height:100%;
    			// border:10px solid #FF28A1;
    		}
    		.content{ 
    			width:686upx;
    			height:428upx;
    			background:#fff;
    			border-radius: 10upx;
    			margin:0 auto;
    			position: absolute;
    			bottom:800upx;
    			left:50%;
    			transform: translateX(-50%);
    			padding:10upx;
    			box-sizing: border-box;
    			.bottom{ 
    				&>view{ 
    					width:100%;
    					text-align: center;
    				}
    				&>view:first-child{ 
    					color:#333333;
    					font-size:30upx;
    					line-height: 100upx;
    				}
    				.bottom-con{ 
    					display: flex;
    					align-items: center;
    					padding:20upx auto;
    					.bottom-item{ 
    						flex:1;
    						image{ 
    							width:45upx;
    							height:45upx;
    						}
    						.item-tit{ 
    							color:#666666;
    							font-size:24upx;
    							line-height: 40upx;
    						}
    						.item-sub{ 
    							color:#666666;
    							font-size:20upx;
    							line-height: 30upx;
    						}
    					}
    				}
    			}
    			.top{ 
    				height:140upx;
    				border-bottom:2upx dashed #FF5A5C;
    				display: flex;
    				align-items: center;
    				&>view:last-child{ 
    					width:286upx;
    				}
    				.inviteBtn{ 
    					display: flex;
    					justify-content: center;
    					align-items: center;
    					image{ 
    						width:237upx;
    						height:93upx;
    					}
    				}
    				.top-con{ 
    					width:400upx;
    					text-align: center;
    					&>view:first-child{ 
    						color:#999999;
    						font-size:20upx;
    					}
    					&>view:last-child{ 
    						color:#333333;
    						font-size:52upx;
    						font-weight: bold;
    						image{ 
    							width:45upx;
    							height:45upx;
    							margin-left:20upx;
    						}
    					}
    				}
    			}
    		}
    		.yaoqing { 
    			position: absolute;
    			top: 760upx;
    			left: 50%;
    			transform: translateX(-50%);
    
    			&>image { 
    				width: 640upx;
    				height: 90upx;
    			}
    
    			.yaoqing-txt { 
    				position: absolute;
    				top: 0;
    				left: 0;
    				color: #fff;
    				line-height: 80upx;
    				padding: 0 50upx;
    				box-sizing: border-box;
    				font-size: 30upx;
    				display: flex;
    				justify-content: space-between;
    				width: 640upx;
    				height: 90upx;
    
    				.copy { 
    					color: #fff;
    				}
    			}
    		}
    
    		.code { 
    			position: absolute;
    			bottom: 160upx;
    			left: 50%;
    			transform: translateX(-50%);
    			&>image{ 
    				width:600upx;
    				padding-left:20upx;
    			}
    			.code-tit { 
    				position: absolute;
    				top: 0;
    				left: 0;
    				width: 100%;
    				height: 100%;
    				text-align: center;
    				&>image { 
    					position: absolute;
    					width: 400upx;
    					top: 50%;
    					left: 50%;
    					transform: translate(-50%, -50%);
    					pointer-events: auto !important;
    				}
    
    				&>text { 
    					position: absolute;
    					width: 500upx;
    					bottom: 30upx;
    					left: 50%;
    					font-size: 24upx;
    					transform: translate(-50%, -50%);
    					text-align: center;
    				}
    			}
    		}
    
    		.btn { 
    			position: absolute;
    			bottom: 60upx;
    			left: 50%;
    			transform: translateX(-50%);
    			z-index: 9;
    			border:1px solid red;
    			width:686upx;
    			height:74upx;
    			background:#fff;
    			margin:0 auto;
    			border-radius: 10upx;
    			text-align: center;
    			line-height: 74upx;
    			.save { 
    				position: absolute;
    				left: 50%;
    				transform: translateX(-50%);
    				top: 40upx;
    			}
    		}
    		.share { 
    			position: absolute;
    			bottom: 160upx;
    			left: 50%;
    			transform: translateX(-50%);
    			z-index: 9;
    		
    			.save { 
    				position: absolute;
    				left: 50%;
    				transform: translateX(-50%);
    				top: 40upx;
    			}
    		}
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/858b9fff8162471d83a30f44dd946494.png
[2020091111481615.png_pic_center]: /images/20210725/e5426cf9038b4322877692d66f9f30f2.png